/* The opening (assets/home/opening.js): the sketch, the video of the building forming and the light coming, and the
   rendering, placed by the script, and the statements. On the site's deep teal. The page loads the fonts: Ladinta and NCL
   Gastrub; --op-foot is the room kept under the statements */
.op{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#074349;--op-foot:clamp(32px,6vh,64px)}
.op .op-pic{position:absolute;inset:0}
.op video,.op img,.op canvas{position:absolute;display:block;max-width:none}
.op .op-video,.op .op-final{object-fit:fill;opacity:0}
/* the video's own darker ground lifted to the site's; the drawing in the video's colours, a touch softer, like the
   video's lines; so the drawing hands over to the video without a seam */
.op .op-video{filter:url(#op-lift)}
.op .op-scene{filter:url(#op-match) blur(.3px)}
/* the sketch shows at half strength; over the video's first frame, the same sketch, the ground at half strength does the
   same. It lifts as the building starts to form */
.op .op-dim{position:absolute;inset:0;background:#074349;opacity:0;pointer-events:none}
/* on a phone the picture is a band a little above the middle (the script places it), cut clean at its top and foot */
.op.narrow .op-pic{clip-path:inset(var(--pt) 0 calc(100% - var(--pb)) 0)}

/* the statements: one for each part, big, each in one of the site's faces. Written on in Ladinta while the sketch
   draws, in the display serif as the rendering arrives. A soft
   gradient of deep teal, up from the foot of the screen, keeps them clear of what's behind */
.op .op-scrim{position:absolute;z-index:2;inset:auto 0 0;height:84%;-webkit-mask-image:linear-gradient(to top,#000 50%,transparent);mask-image:linear-gradient(to top,#000 50%,transparent);pointer-events:none;opacity:0;
  background:linear-gradient(to right,rgb(3 34 38 / .5),rgb(3 34 38 / .28) 32%,transparent 58%),
    linear-gradient(to top,rgb(3 34 38 / .72),rgb(3 34 38 / .56) 24%,rgb(3 34 38 / .36) 50%,rgb(3 34 38 / .14) 76%,transparent)}
/* big, the lockup waiting for the end. Both are blocks, square on both sides: the script sizes each of their lines so
   its ink spans the block, and spaces them evenly */
.op .op-words{--room:calc((72vh - var(--op-foot)) / 2);position:absolute;z-index:4;left:var(--gl);bottom:calc(env(safe-area-inset-bottom,0px) + var(--op-foot));
  display:grid;margin:0;pointer-events:none;color:#EFEEE8}
.op-words>span:not(.sr){grid-area:1/1;align-self:end;justify-self:start;visibility:hidden}
/* each line masks its letters as they rise, with room round them for tall letters and tails */
.op-words b{display:block;width:max-content;font-weight:inherit;overflow:hidden;padding:.2em .14em .22em;margin:-.2em -.14em -.22em}
/* the blocks' lines in a column, so their margins add up rather than collapse */
.op-hand,.op-impact{display:flex;flex-direction:column;align-items:flex-start}
/* the hand's lines are not masked at all, so no letter's overhang is cut: the writing-on reveals them instead */
.op-hand b{overflow:visible;padding-right:.3em;margin-right:-.3em}
.op-words .ln{display:block}
.op-hand{font:300 min(9.5cqw,var(--room))/.9 "Ladinta",Georgia,serif;letter-spacing:-.02em}
.op-impact{font:400 min(8.9cqw,var(--room))/.92 "NCL Gastrub","Ladinta",Georgia,serif;letter-spacing:-.025em}
/* on a phone each statement nearly fills the width */
@media (max-width:700px){.op{--op-foot:40px}
  .op-hand{font-size:min(18cqw,var(--room))}.op-impact{font-size:min(16cqw,var(--room))}}