/* ==========================================================================
   L01 + L02 · The sheet becomes the room

   Technique taken from Stanzza (observed 19 Oct 2026, evidence in
   evidence/references/stanzza-load-d): a row of real work assembles, drifts
   slowly so it is never static, collapses to one tile, and that tile grows
   into the hero with no cut. Implemented here from scratch on Strulen's own
   material, and compressed from Stanzza's 7.5 seconds to under 2.4.

   The reveal is blur and opacity together, not opacity alone. That is the
   single detail that makes the difference between a fade and an arrival.
   ========================================================================== */

/* a line drawing needs more room than a photograph to be read as a drawing */
:root{ --datum:28vh; --tile-w:156px; --tile-h:98px; --tile-gap:16px; }
@media (max-width:700px){ :root{ --tile-w:84px; --tile-h:53px; --tile-gap:9px } }

body{overflow:hidden}
html.is-done body{overflow:auto}

/* ---------- the entrance ------------------------------------------------- */
.load{position:fixed;inset:0;z-index:600;background:var(--ink);overflow:hidden;
  opacity:1;transition:opacity .34s linear}
html.is-done .load{opacity:0;pointer-events:none}
html:not(.js) .load{display:none}

/* the datum: struck once, then held at the same height for the whole page */
.load__datum{position:absolute;left:0;right:0;top:var(--datum);height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:0 50%}
html.s-strike .load__datum{transform:scaleX(1);
  transition:transform .66s var(--ease-draw) .06s}

/* ---------- the strip ---------------------------------------------------- */
.load__strip{position:absolute;left:50%;top:calc(var(--datum) - var(--tile-h) - clamp(22px,4vh,44px));
  display:flex;gap:var(--tile-gap);
  transform:translateX(-50%);
  will-change:transform}
/* a long, slow drift, so the hold is never a still picture */
html.s-drift .load__strip{animation:drift 26s linear forwards}
@keyframes drift{ from{transform:translateX(calc(-50% - 26px))} to{transform:translateX(calc(-50% + 26px))} }

.tile{width:var(--tile-w);height:var(--tile-h);flex:none;position:relative;
  opacity:0;filter:blur(14px);transform:translateY(10px) scale(.92)}
html.s-tiles .tile{opacity:1;filter:blur(0);transform:none;
  transition:opacity .62s linear var(--d),filter .62s var(--ease-out) var(--d),
             transform .68s var(--ease-out) var(--d)}
.tile__sheet{position:absolute;inset:0;background:#0c0c0c center/cover no-repeat;
  border:1px solid rgba(255,255,255,.16)}
.tile__sheet svg{width:100%;height:100%}
.tile__sheet svg line,.tile__sheet svg rect,.tile__sheet svg path,
.tile__sheet svg circle,.tile__sheet svg polyline,.tile__sheet svg polygon{
  fill:none;stroke:rgba(255,255,255,.92);stroke-width:1.1;vector-effect:non-scaling-stroke}
.tile__sheet svg .poche{fill:rgba(255,255,255,.9);stroke:none}
.tile__sheet svg .fillt{fill:rgba(255,255,255,.06);stroke:none}
.tile__sheet svg .mark{stroke:var(--orange)}
.tile__sheet svg .t{stroke:rgba(255,255,255,.6)}
.tile__sheet svg .g{stroke:rgba(255,255,255,.3)}
.tile__sheet svg text{display:none}
/* the key tile is a hole in the row: the shared figure sits in it */
.tile--key{border:0}
.tile--key::after{content:"";position:absolute;inset:-5px;border:1px solid var(--orange);
  opacity:0;transition:opacity .3s linear}
html.s-pick .tile--key::after{opacity:1}
html.s-collapse .tile--key::after{opacity:0}

/* the rest of the row stands down, outside first */
html.s-collapse .tile:not(.tile--key){opacity:0;filter:blur(8px);transform:scale(.6);
  transition:opacity .4s linear var(--dc),filter .4s linear var(--dc),transform .46s var(--ease-out) var(--dc)}

.load__count{position:absolute;left:var(--gut);bottom:calc(var(--gut) + 6px);
  color:var(--grey-mid);opacity:0}
html.s-tiles .load__count{opacity:1;transition:opacity .4s linear .2s}
html.s-collapse .load__count{opacity:0}
.load__skip{position:absolute;right:var(--gut);bottom:calc(var(--gut) + 6px);
  color:var(--grey-cool);padding:8px 10px;margin:-8px -10px}
.load__skip:hover{color:#fff}

/* ---------- the shared figure: sheet, then room -------------------------- */
.shot{position:fixed;left:0;top:0;width:100vw;height:100svh;z-index:620;
  overflow:hidden;background:#070707;
  transform-origin:50% 50%;
  transform:translate(var(--sx,0px),var(--sy,0px)) scale(var(--ss,1));
  transition:transform .38s var(--ease-out);
  opacity:0}
html.s-tiles .shot{opacity:1;transition:opacity .6s linear var(--dkey,0ms)}
html.s-grow .shot{--sx:0px;--sy:0px;--ss:1;
  transition:transform .92s var(--ease-draw)}
.shot__photo,.shot__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot__film{opacity:0;transition:opacity .8s linear}
.shot__film.is-ready{opacity:1}
/* the drawing lies over the photograph and leaves as the sheet becomes a room */
.shot__draw{position:absolute;inset:0;width:100%;height:100%;opacity:1}
html.s-grow .shot__draw{opacity:0;transition:opacity .62s linear .26s}
.shot__draw line,.shot__draw rect{fill:none;stroke:rgba(255,255,255,.78);
  stroke-width:1;vector-effect:non-scaling-stroke}
.shot__draw .poche{fill:rgba(255,255,255,.92);stroke:none}
.shot__draw .t{stroke:rgba(255,255,255,.46)}
.shot__draw .mark{stroke:var(--orange)}
/* while it is a sheet it sits on ink, so the drawing reads */
.shot::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:.82;
  pointer-events:none}
html.s-grow .shot::after{opacity:0;transition:opacity .7s linear .18s}

/* ---------- the page it hands over to ------------------------------------ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-top:calc(var(--datum) + 2vh);z-index:640;pointer-events:none}
html.is-done .hero{pointer-events:auto}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(183deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.04) 34%,rgba(0,0,0,.86) 100%);
  opacity:0}
html.s-grow .hero::before{opacity:1;transition:opacity .7s linear .3s}
.hero__datum{position:absolute;left:0;right:0;top:var(--datum);height:2px;
  background:var(--orange);opacity:0}
html.s-hand .hero__datum{opacity:.9}
.hero__bar{position:fixed;left:0;right:0;top:0;display:flex;align-items:center;
  justify-content:space-between;padding-block:20px;z-index:660;opacity:0}
html.s-hand .hero__bar{opacity:1;transition:opacity .5s linear}
.hero__mark{height:20px;width:auto;filter:invert(1)}
.hero__scale{color:#fff;font-variant-numeric:tabular-nums}
.hero__in{position:relative;width:100%;padding-bottom:clamp(30px,6vh,74px)}
.hero h1{font-size:min(clamp(2.4rem,8.2vw,7.2rem),13vh);max-width:14ch}
.hero h1 .ln{display:block;overflow:hidden;padding-block:.06em .12em;margin-block:-.06em}
.hero h1 .ln>span{display:block;transform:translateY(108%)}
/* the claim is set once, in its final place, and stays there while the
   architecture assembles and arrives behind it */
html.s-said .hero h1 .ln>span{transform:none;
  transition:transform .78s var(--ease-out)}
html.s-said .hero h1 .ln:nth-child(2)>span{transition-delay:.09s}
.hero__lead{margin-top:clamp(14px,2.2vh,26px);max-width:48ch;font-weight:500;
  color:var(--grey-cool);opacity:0}
.hero__who{margin-top:clamp(14px,2vh,22px);color:var(--grey-cool);opacity:0;
  display:inline-flex;align-items:center;gap:10px}
.hero__who::before{content:"";width:8px;height:8px;background:var(--orange);flex:none}
html.s-hand .hero__lead{opacity:1;transition:opacity .5s linear .16s}
html.s-hand .hero__who{opacity:1;transition:opacity .5s linear .26s}

/* ---------- when the browser is asked to keep still ---------------------- */
@media (prefers-reduced-motion:reduce){
  html.s-drift .load__strip{animation:none}
  .load__said-in,.hero h1 .ln>span{transform:none}
  .tile{opacity:1;filter:none;transform:none}
  .shot{--ss:1;--sx:0px;--sy:0px;opacity:1}
  .shot__draw,.shot::after{opacity:0}
  .hero__lead,.hero__who,.hero__bar,.hero__datum{opacity:1}
}
html.rm .load__strip{animation:none!important}
html.rm .load__said-in,html.rm .hero h1 .ln>span{transform:none!important}
html.rm .tile{opacity:1!important;filter:none!important;transform:none!important}
html.rm .shot{--ss:1!important;--sx:0px!important;--sy:0px!important;opacity:1!important;
  transition:none!important}
html.rm .shot__draw,html.rm .shot::after{opacity:0!important}
html.rm .hero__lead,html.rm .hero__who,html.rm .hero__bar,html.rm .hero__datum{opacity:1!important}

/* the lab's quarter speed, for looking at a moment properly */
html.slow .load__datum,html.slow .load__said-in,html.slow .tile,
html.slow .shot,html.slow .shot__draw,html.slow .shot::after,
html.slow .hero h1 .ln>span,html.slow .hero__lead,html.slow .hero__who,
html.slow .hero__bar,html.slow .load{transition-duration:2.6s!important}
html.slow .load__strip{animation-duration:104s!important}