/* A native-scroll camera journey. No intercepted wheel/touch events. */
html:has(#transmission:target){scroll-padding-top:0}
.transmission{height:340svh;position:relative;background:#030405;isolation:isolate;scroll-margin-top:0}
.transmission-stage{height:100svh;position:sticky;top:0;overflow:hidden;color:#fff;--travel:0;--arrival:0;--departure:0}
#transmission-world{position:absolute;inset:0;touch-action:pan-y;cursor:crosshair}
#transmission-world canvas{width:100%;height:100%;display:block}
.transmission-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#030405b0,transparent 24%,transparent 65%,#030405ed),radial-gradient(ellipse at 52% 45%,transparent 30%,#03040566 100%)}
.transmission-top{position:absolute;top:105px;left:3.5%;right:3.5%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.13em;pointer-events:none}
.transmission-top a{pointer-events:auto;text-underline-offset:6px}
.transmission-intro{position:absolute;left:6.7%;top:24%;pointer-events:none;transform:translate3d(calc(var(--arrival) * -85px),calc(var(--arrival) * -90px),0) scale(calc(1 + var(--arrival) * .15));opacity:calc(1 - var(--arrival));transform-origin:0 50%;will-change:transform}
.transmission-intro>p:first-child{font-size:10px;letter-spacing:.14em;margin:0 0 24px}
.transmission-intro h2{font-family:'DM Sans',sans-serif;font-size:clamp(80px,10.8vw,180px);line-height:.83;font-weight:500;letter-spacing:-.085em;margin:0}
.transmission-intro h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.075em}
.transmission-instruction{font-size:14px;color:#d1d2d3;line-height:1.7;margin:30px 0 0;text-shadow:0 2px 7px #000,0 0 24px #000}
.transmission-chapter{position:absolute;left:3.5%;top:48%;display:flex;gap:22px;writing-mode:vertical-rl;font-size:9px;color:#c3c7c8;letter-spacing:.15em;pointer-events:none}
.transmission-art{position:absolute;left:6.7%;bottom:172px;display:flex;flex-direction:column;align-items:flex-start;gap:13px;background:transparent;color:white;border:0;padding:12px 0;cursor:pointer;text-align:left;opacity:clamp(0,(var(--travel) - .14)*12,1);max-width:65%;text-shadow:0 2px 25px #000}
.transmission-art .mono{font-size:9px;letter-spacing:.12em;color:#aeb2b3}
.transmission-art strong{font:400 clamp(22px,3.8vw,58px)/1.1 'DM Sans',sans-serif;letter-spacing:-.045em;transition:transform .3s}
.transmission-art:hover strong{transform:translateX(12px)}
.transmission-bottom{position:absolute;bottom:80px;left:6.7%;right:6.7%}
.transmission-meter{height:1px;background:#ffffff26;margin-bottom:18px}
.transmission-meter i{display:block;height:1px;background:#fff;width:calc(var(--travel)*100%);box-shadow:0 0 12px #fff}
.transmission-bottom>div:last-child{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.1em}
#transmission-fold{border:1px solid #ffffff50;border-radius:30px;padding:12px 20px;color:white;background:#0b0c0d8a;font:inherit;cursor:pointer;backdrop-filter:blur(10px)}
#transmission-fold b{font-size:17px;font-weight:400;display:inline-block;margin-left:25px;transition:transform .3s}
#transmission-fold[aria-pressed="true"]{background:white;color:#000}
#transmission-fold[aria-pressed="true"] b{transform:rotate(45deg)}
.transmission-stage[data-input="holding"] .transmission-top>span{color:#fff;text-shadow:0 0 15px white}
.transmission-stage[data-render-state="fallback"] #transmission-world{background:radial-gradient(ellipse at 65% 40%,#3f4143,transparent 65%)}
.transmission-stage[data-render-state="fallback"] .transmission-intro{opacity:1;transform:none}
@media(max-width:650px){
 .transmission{height:280svh}
 .transmission-top{top:88px;font-size:8px;letter-spacing:0;left:6%;right:6%;gap:16px}
 .transmission-top>a{text-align:right;max-width:130px}
 .transmission-intro{top:27%;left:8%}
 .transmission-intro h2{font-size:clamp(78px,18vw,125px)}
 .transmission-intro>p:first-child{font-size:8px;margin-bottom:22px}
 .transmission-instruction{font-size:12px;max-width:270px}
 .transmission-chapter{display:none}
 .transmission-art{left:8%;bottom:208px;max-width:84%}
 .transmission-art .mono{font-size:7px}
 .transmission-art strong{font-size:27px}
 .transmission-bottom{bottom:86px;left:8%;right:8%}
 .transmission-bottom>div:last-child{font-size:8px;gap:10px;flex-wrap:wrap}
 #transmission-fold{order:3;width:100%;margin-top:12px;padding:10px}
}
@media(prefers-reduced-motion:reduce){.transmission{height:115svh}.transmission-stage{position:relative}.transmission-intro{transform:none!important;opacity:1!important}.transmission-art{opacity:1;bottom:135px}.transmission-intro h2{font-size:clamp(70px,9vw,145px)}.transmission-intro{top:22%}.transmission-instruction{display:none}}