/* /wow/ hero scene: layered final Composition A. Footprint matches the /simple/ hero image; the extra
   headroom (--head, 8.57% of the composite height) is pulled up over the hero copy for the sitting cat. */
.scene{--head:3.495%;--lean:15.2deg;width:98%;margin:calc(-31*var(--s) - var(--head)) auto 0;padding-top:var(--head);position:relative;overflow-x:clip}
.stage{position:relative;aspect-ratio:1340/558}
.letters{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.letter{fill:var(--red)}
.letter path{fill:var(--red)}
.ground path{fill:none;stroke:var(--ink);stroke-linecap:round}
.ground .thin{stroke-width:5}
.ground .thick{stroke-width:9}
.shard{fill:var(--red)}
/* Pivot = the T's lowest corner (2704,1143 of 3475x1446). Rotating the whole <svg> keeps it a single composited layer. */
.letters-t2{transform:rotate(var(--lean));transform-origin:77.813% 79.046%}
.wow-pending .scene{visibility:hidden}
.scene[data-scene-state=intro] :is(.layer,.letters-t2,.letters-bar,.letters-bar-top){will-change:transform}
.layer{position:absolute;display:block;pointer-events:none}
.layer img{display:block;width:100%;height:auto}
.intro-only,#l-t1-stem,.shard{opacity:0;visibility:hidden}
#speed-lines{left:7.741%;top:58.645%;width:13.928%}
#dust-2{left:20.317%;top:65.422%;width:13.583%}
#cat-a-sit{left:18.446%;top:-8.575%;width:17.324%}
#cat-a-grab{left:18.993%;top:19.225%;width:15.424%}
#cat-a-hang{left:21.237%;top:19.225%;width:10.964%}
#cat-b-run{left:20.288%;top:61.134%;width:19.511%}
#dust-1{left:79.971%;top:68.396%;width:7.309%}
#cat-b-skid{left:80.806%;top:59.267%;width:17.41%}
#cat-b-push{left:80.691%;top:38.866%;width:17.525%}
#strain-ticks{left:86.5%;top:21%;width:10.5%}
/* Eyelids: ink ellipses over the cats' eyes, faded in for a blink. */
.blink{position:absolute;border-radius:50%;background:var(--ink);opacity:0;pointer-events:none}
.blink:after{content:"";position:absolute;left:16%;right:16%;top:46%;height:24%;border-bottom:max(1px,.14vw) solid rgba(250,250,242,.75);border-radius:50%}
/* Live (post-intro) state: whole layers are driven by matrices from life.js. */
.scene[data-live] :is(.letters,.layer,.blink){will-change:transform}
.scene[data-live] .letter :is(path,use){pointer-events:visiblePainted;cursor:pointer}
.scene[data-live] picture[data-letter]{pointer-events:auto;cursor:pointer}
.scene[data-live] .stage{will-change:transform,opacity}
.scene[data-live]{-webkit-tap-highlight-color:transparent}
@media(max-width:650px){.scene{--head:3.566%;width:100%;margin:calc(-18px - var(--head)) 0 0}}