/* Layered, reversible motion driven by the visitor's native scroll. */
.cinematic .hero{height:185svh;min-height:1050px;overflow:clip}
.cinematic .hero-sticky{perspective:1400px}
.motion-unit,.motion-tile{transition:none!important;transform-origin:50% 60%;will-change:auto}
.cinematic .scene:not(.hero-scene) .scene-art{transform:none}
.flight-stage,.chapter-flight{position:absolute;inset:0;pointer-events:none;z-index:3;perspective:1200px;overflow:clip}
.flight-stage{z-index:2}
.flight-object{position:absolute;--size:84px;width:var(--size);height:var(--size);will-change:transform;pointer-events:none;filter:drop-shadow(0 22px 16px #0005)}
.hero-die{left:52%;top:14%;--size:60px}.hero-chip{right:3%;top:72%;--size:104px}.hero-card{right:8%;top:17%;--size:64px}
.die-body{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(32deg) rotateZ(-15deg)}
.die-face{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:9%;padding:17%;border-radius:12%;background:linear-gradient(135deg,#fff3c4,#e6ce81);border:1px solid #fff2c5;backface-visibility:hidden;box-shadow:inset 0 0 12px #9d6e1840}
.die-face i.pip{background:#10162d;border-radius:50%;box-shadow:inset 1px 2px 3px #0009,0 1px 1px #fff7}
.face-0{transform:translateZ(calc(var(--size)/2))}.face-1{transform:rotateY(90deg) translateZ(calc(var(--size)/2));filter:brightness(.75)}.face-2{transform:rotateX(90deg) translateZ(calc(var(--size)/2))}.face-3{transform:rotateY(180deg) translateZ(calc(var(--size)/2))}.face-4{transform:rotateY(-90deg) translateZ(calc(var(--size)/2));filter:brightness(.85)}.face-5{transform:rotateX(-90deg) translateZ(calc(var(--size)/2));filter:brightness(.65)}
.chip-body{width:100%;height:100%;border-radius:50%;padding:10%;background:repeating-conic-gradient(#ffdc00 0deg 28deg,#141c3a 28deg 45deg);border:3px solid #edcd32;box-shadow:3px 6px 0 #a37d00,5px 9px 0 #624a00,inset 0 0 0 3px #070b20;transform:rotateX(28deg) rotateY(-20deg)}
.chip-face{border:2px solid #e6c71a;border-radius:50%;width:100%;height:100%;background:radial-gradient(at 30% 20%,#293352,#080d22);display:grid;place-items:center;color:#ffdc00;font-size:calc(var(--size)*.48)}
.playing-card{height:calc(var(--size)*1.42);width:100%;border-radius:9%;background:linear-gradient(140deg,#243055,#080e29);border:2px solid #a88e25;color:#ffdc00;box-shadow:4px 4px 0 #040819;transform:rotateZ(18deg) rotateY(-20deg);position:relative;padding:8%;font-family:Georgia,serif}
.playing-card>span{font-size:calc(var(--size)*.23);line-height:1}.playing-card>span:last-child{position:absolute;bottom:8%;right:8%;transform:rotate(180deg)}.playing-card b{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--size)*.55);font-weight:400}
.depth-tunnel{position:absolute;left:47%;top:3%;width:65%;height:94%;z-index:-1;pointer-events:none;transform-origin:50% 50%}
.depth-tunnel i{position:absolute;inset:0;border:1px solid #ffdc0030;border-radius:50%;transform:rotate(-25deg);box-shadow:0 0 60px #ffdc0005,inset 0 0 50px #ffdc0005}.depth-tunnel i:nth-child(2){inset:8%;border-width:12px;border-color:#ffdc0007}.depth-tunnel i:nth-child(3){inset:18%;border-color:#ffdc0040}
.chapter-flight{z-index:4}.chapter-flight .flight-object{right:-28px;top:35%;--size:100px}.chapter:nth-child(even) .chapter-flight .flight-object{left:-30px;right:auto;top:18%}
.depth-word{position:absolute;top:35px;left:-2%;font-family:var(--display);font-size:clamp(130px,23vw,350px);line-height:1;color:currentColor;opacity:.035;white-space:nowrap;pointer-events:none;z-index:0;letter-spacing:-.04em;will-change:transform}
.cinematic .journey-ribbon{inset:-100px 0;will-change:transform}
.motion-control{position:fixed;bottom:16px;left:18px;z-index:60;display:flex;align-items:center;gap:8px;background:#0c122bec;border:1px solid #ffdc0045;border-radius:30px;color:#f4f1e9;padding:10px 14px;font-size:10px;box-shadow:0 4px 18px #0003;min-height:38px;backdrop-filter:blur(10px)}
.motion-control:hover{border-color:var(--yellow);color:var(--yellow)}
.motion-off .motion-unit,.motion-off .motion-tile{transform:none!important;opacity:1!important;will-change:auto}.motion-off .flight-stage,.motion-off .chapter-flight,.motion-off .depth-word{display:none}.motion-off .hero{height:100svh;min-height:780px}.motion-off .reveal{opacity:1;transform:none}.motion-off .scene-art{transform:none!important}.motion-off .webgl-ribbon{display:none}
@media(min-width:761px){.cinematic .hero-copy{transform-origin:0 50%}.cinematic .hero-scene{transform-origin:75% 50%}.cinematic .world-grid{perspective:1500px}.cinematic .world-card{transform-origin:50% 75%}}
@media(max-width:760px){.cinematic .hero{height:auto;min-height:0}.cinematic .hero-sticky{height:auto;min-height:0;position:relative}.hero-die{left:auto;right:4%;top:44%;--size:34px}.hero-chip{left:3%;right:auto;top:75%;--size:51px}.hero-card{display:none}.depth-tunnel{left:0;top:37%;width:110%;height:55%}.chapter-flight .flight-object{--size:52px;right:-22px;top:22%}.chapter:nth-child(even) .chapter-flight .flight-object{left:-24px}.depth-word{font-size:130px;top:20px;opacity:.025}.motion-control{font-size:9px;padding:8px 10px;bottom:10px;left:10px;min-height:34px}.motion-off .hero{height:auto;min-height:0}.motion-off .hero-sticky{min-height:0}}
@media(prefers-reduced-motion:reduce){html:not(.motion-explicit) .flight-stage,html:not(.motion-explicit) .chapter-flight,html:not(.motion-explicit) .depth-word{display:none}html:not(.motion-explicit) .motion-unit,html:not(.motion-explicit) .motion-tile{transform:none!important;opacity:1!important;will-change:auto}}

body.locked .motion-control{visibility:hidden}

/* Mobile has its own pinned camera journey, with a stable viewport during swipes. */
@media(max-width:760px){
 .cinematic .hero{height:135svh;min-height:0}
 .cinematic .hero-sticky{position:sticky;top:0;height:100svh;min-height:0}
 .cinematic .hero .hero-grid{height:100%;padding-top:98px;padding-bottom:48px;gap:0}
 .cinematic .hero-copy{flex:none}
 .cinematic .hero-copy h1{font-size:clamp(44px,12.4vw,66px)}
 .cinematic .hero-copy .eyebrow{margin-bottom:12px;font-size:9px}
 .cinematic .hero-copy .lead{font-size:14px;margin:12px 0 0}
 .cinematic .hero-scene{flex:1;min-height:0;width:102%;margin:-3% -1% -4%;display:flex;align-items:center;justify-content:center;transform-origin:50% 55%}
 .cinematic .hero-scene .scene-art{width:100%;height:100%;object-fit:contain}
 .cinematic .hero-grid>.mobile-hero-actions{flex:none;margin:0;position:relative;z-index:5}
 .cinematic .mobile-hero-actions>.actions{gap:8px}
 .cinematic .mobile-hero-actions .button{min-height:44px;padding:10px 18px;font-size:13px}
 .cinematic .mobile-hero-actions .text-link{font-size:11px;padding:6px 0;align-self:center}
 .cinematic .hero-bottom{position:absolute;bottom:10px;margin:0;font-size:8px}
 .cinematic .scroll-line{height:20px}
 .cinematic .hero-die{top:40%;right:9%;--size:44px}
 .cinematic .hero-chip{top:72%;left:5%;--size:62px}
 .cinematic .hero-card{display:block;top:50%;right:4%;--size:40px}
 .cinematic .chapter-flight .flight-object{--size:62px;right:8px}
 .cinematic .chapter:nth-child(even) .chapter-flight .flight-object{left:8px}
}

/* Promote only nearby artwork. Keep mobile address-bar resizing out of the timeline. */
.motion-near{will-change:transform,opacity}.scene-art{will-change:auto}
@media(max-width:760px){.cinematic .hero-sticky{perspective:none}.cinematic .hero-scene .scene-art,.cinematic .motion-unit.scene-art{filter:none}.cinematic .hero-scene{will-change:transform}.depth-tunnel i{box-shadow:none}.flight-object{filter:none}}
