/* Motion edition: one geometric language, from the first frame to A/B. */
:root{--motion-ease:cubic-bezier(.22,.72,.2,1)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Editorial entrance; the page remains readable with scripts unavailable. */
.hero h1>span{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .headline-ink{display:block}
@media(prefers-reduced-motion:no-preference){
 .header .brand{animation:brand-arrive .65s var(--motion-ease) both}
 .header nav{animation:brand-arrive .65s .08s var(--motion-ease) both}
 .hero .headline-ink{animation:headline-arrive .9s .08s var(--motion-ease) both}
 .hero h1>span:nth-child(2) .headline-ink{animation-delay:.17s}
 .hero h1>span:nth-child(3) .headline-ink{animation-delay:.26s}
 .hero-description p{animation:copy-arrive .8s .35s var(--motion-ease) both}
 .hero-description p+p{animation-delay:.46s}
 .hero-art{animation:scene-arrive 1.15s .12s var(--motion-ease) both}
 .scene-label,.scene-bottom,.scene-controls{animation:copy-arrive .75s .55s var(--motion-ease) both}
}
@keyframes brand-arrive{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@keyframes headline-arrive{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes copy-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes scene-arrive{0%{clip-path:polygon(0 0,100% 0,100% 0,0 0)}55%{clip-path:polygon(0 0,100% 0,100% 100%,0 65%)}100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}

/* The image shifts behind fixed diagonal masks; geometry lives in front. */
.scene-video{transform:translate3d(var(--video-x,0px),var(--video-y,0px),0) scale(1.035);transform-origin:center}
.scene-grid{opacity:.1}
.scene-grid::after{opacity:.35}
.scene-label{text-shadow:0 1px 6px #0009}
.scene-bottom{text-shadow:0 1px 5px #0009}
.scene-label::after{content:"";display:block;width:25px;height:1px;margin-top:13px;background:currentColor;opacity:.4}
.scene-corners{position:absolute;inset:12px;z-index:4;pointer-events:none;opacity:.5;background:linear-gradient(#ddd,#ddd) 0 0/12px 1px,linear-gradient(#ddd,#ddd) 0 0/1px 12px,linear-gradient(#ddd,#ddd) 100% 0/12px 1px,linear-gradient(#ddd,#ddd) 100% 0/1px 12px,linear-gradient(#ddd,#ddd) 0 100%/12px 1px,linear-gradient(#ddd,#ddd) 0 100%/1px 12px,linear-gradient(#ddd,#ddd) 100% 100%/12px 1px,linear-gradient(#ddd,#ddd) 100% 100%/1px 12px;background-repeat:no-repeat}

/* Cut-corner numerals are an extension of the brand's existing diagonals. */
.subject-top>span{display:inline-flex;align-items:center;gap:17px}
.subject-top .chapter-index{display:inline-flex;align-items:center;margin:0;line-height:1}
.chapter-index svg{display:block;width:57px;height:37px;fill:currentColor;overflow:visible}
.subject-top{position:relative;z-index:1}
.subject-top::after{content:"";position:absolute;bottom:-1px;left:0;height:1px;width:100%;background:var(--fg);opacity:.55;transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--motion-ease)}
.subject.chapter-entered .subject-top::after{transform:scaleX(1)}
.track-heading,.player-host{position:relative;z-index:1}
.track-heading.reveal{opacity:1;transform:none;transition:none}
.track-heading.reveal>div{transition:opacity .7s var(--motion-ease),transform .7s var(--motion-ease)}
.track-heading.reveal.is-waiting>div{opacity:0;transform:translateY(20px)}
.track-heading.reveal .track-cover{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .95s .08s var(--motion-ease),transform .95s .08s var(--motion-ease)}
.track-heading.reveal.is-waiting .track-cover{clip-path:polygon(0 0,100% 0,100% 0,0 0);transform:translateY(16px)}
.subject-light .track-heading.reveal.is-waiting .track-cover{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}

/* A brief perspective field passes behind the existing first chapter cut. */
.chapter-bridge{position:absolute;z-index:0;left:0;right:0;top:calc(-1 * var(--entry-cut));height:calc(var(--entry-cut) + 120px);overflow:hidden;clip-path:polygon(0 var(--entry-cut),100% 0,100% 100%,0 100%);pointer-events:none;opacity:var(--bridge-opacity,0);perspective:500px;mask-image:linear-gradient(#000 50%,transparent 100%);-webkit-mask-image:linear-gradient(#000 50%,transparent 100%)}
.chapter-bridge::before{content:"";position:absolute;left:35%;top:-90%;width:85%;height:320%;background-image:linear-gradient(#ffffff38 1px,transparent 1px),linear-gradient(90deg,#ffffff38 1px,transparent 1px);background-size:42px 42px;transform:rotateX(62deg) rotateZ(-12deg) translateY(var(--bridge-shift,0px));transform-origin:65% 15%;mask-image:linear-gradient(transparent,#000 30%,#000 55%,transparent 85%);-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 55%,transparent 85%)}

/* Contrast-correct labels ride over a diagonal selection fill. */
.variant{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);transition:box-shadow .2s ease}
.variant[aria-pressed=true]{background:var(--bg);color:var(--fg)}
.variant::before{content:"";position:absolute;inset:0;z-index:0;background:var(--fg);clip-path:polygon(0 0,0 0,-18% 100%,0 100%);transition:clip-path .34s var(--motion-ease)}
.variant[aria-pressed=true]::before{clip-path:polygon(0 0,118% 0,100% 100%,0 100%)}
.variant>span{position:relative;z-index:1;color:#fff;mix-blend-mode:difference}
.variant .selection-dot{transition:transform .3s var(--motion-ease);transform:scale(.85)}
.variant[aria-pressed=true] .selection-dot{transform:scale(1)}
.play{transition:transform .25s var(--motion-ease),background .2s,color .2s}
.transport-button{transition:border-color .2s,background .2s,color .2s}
.transport-button:not(:disabled):hover{border-color:var(--fg)}
@media(hover:hover) and (pointer:fine){.play:not(:disabled):hover{transform:scale(1.045)}.play:not(:disabled):active{transform:scale(.97)}}
.contact-links>a{transition:border-color .25s}
.contact-links>a:hover{border-bottom-color:#fff}

@media(max-width:620px){
 .subject-top>span{gap:12px}
 .chapter-index svg{width:43px;height:28px}
 .scene-corners{inset:9px}
 .chapter-bridge{height:calc(var(--entry-cut) + 80px)}
 .chapter-bridge::before{left:5%;width:125%;background-size:32px 32px}
}
@media(prefers-reduced-motion:reduce){
 .chapter-bridge{display:none}
 .track-heading.reveal.is-waiting>div{opacity:1;transform:none}
 .track-heading.reveal.is-waiting .track-cover,.subject-light .track-heading.reveal.is-waiting .track-cover{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:none}
 .subject-top::after{transform:scaleX(1)}
}
.motion-paused .header .brand,.motion-paused .header nav,.motion-paused .headline-ink,.motion-paused .hero-description p,.motion-paused .hero-art,.motion-paused .scene-label,.motion-paused .scene-bottom,.motion-paused .scene-controls{animation:none;opacity:1;translate:0 0}
.motion-paused .headline-ink{transform:none}
.motion-paused .chapter-bridge{opacity:0}
.motion-paused .track-heading.reveal>div{opacity:1;transform:none;transition:none}
.motion-paused .track-heading.reveal .track-cover{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:none;transition:none}
.motion-paused .variant::before,.motion-paused .subject-top::after{transition:none}