/* Motion changes presentation only; the existing layout remains the source of truth. */
.opening-card { position:fixed; inset:0; z-index:90; background:#101510; color:#ece8dd; display:flex; flex-direction:column; justify-content:center; padding:var(--gutter); contain:layout paint; animation:opening-emergency 4.8s step-end forwards }
.opening-caption { position:absolute; top:36px; left:var(--gutter); font:9px/1.5 var(--sans); letter-spacing:.13em; text-transform:uppercase }
.opening-titles { text-align:center; font-family:var(--serif); line-height:1 }
.opening-titles>span { display:block; font-size:clamp(62px,13vw,210px); letter-spacing:-.065em }
.opening-titles>small { display:block; margin-top:20px; padding-left:.42em; font:clamp(10px,1.5vw,22px)/1.5 var(--sans); letter-spacing:.42em }
.opening-foot { position:absolute; bottom:54px; left:var(--gutter); right:var(--gutter); display:flex; justify-content:space-between; gap:20px; font-size:9px; letter-spacing:.08em }
.opening-line { position:absolute; bottom:34px; left:var(--gutter); right:var(--gutter); height:1px; background:#ece8dd24 }
.opening-line>span { display:block; height:100%; background:#d0af79; transform:scaleX(.03); transform-origin:left; transition:transform .45s ease }
.opening-skip { position:absolute; top:20px; right:var(--gutter); min-height:44px; padding:12px 0 12px 15px; font-size:10px }
@keyframes opening-emergency { 0%,99% { visibility:visible } 100% { visibility:hidden; pointer-events:none } }
.gsap-motion .hero h1,.gsap-motion .hero-topline { animation:none }
.motion-heading-window { overflow:clip; overflow-clip-margin:.18em }
.motion-heading-inner { display:block }
.motion-image-window { overflow:hidden }
.motion-image-window>img { display:block }
@media(max-width:800px) {
  .opening-titles>span { font-size:18vw }
  .opening-titles>small { font-size:2.8vw; letter-spacing:.32em }
  .opening-caption { max-width:170px; font-size:8px; top:28px }
  .opening-foot { font-size:8px }
}
@media(prefers-reduced-motion:reduce) {
  .opening-card { display:none }
  .motion-heading-window { overflow:visible }
}

/* Two opt-in passages. Without motion, original media and controls stay in normal flow. */
.identity-passage,.hyper-passage { display:none; pointer-events:none }
.signature-motion .identity-passage { display:block; position:absolute; inset:0; z-index:3; overflow:hidden }
.identity-paper { position:absolute; left:0; width:100%; background:var(--paper) }
.identity-paper-top { top:0; height:31% }
.identity-paper-bottom { bottom:0; height:40%; border-top:1px solid #20251f18 }
.identity-names { position:absolute; top:65%; left:var(--gutter); right:var(--gutter); height:1.3em; color:var(--ink); font:clamp(44px,7vw,108px)/1.15 var(--serif); letter-spacing:-.045em }
.identity-names span { position:absolute; inset:0; visibility:hidden }
.signature-motion .project-ribbon { background:var(--paper); color:var(--ink); border-color:var(--line) }
.signature-motion .screening-stage { height:calc(100svh - 130px); max-height:850px; min-height:420px; isolation:isolate }
.signature-motion .screening-stage video { position:absolute; inset:0; width:100%; height:100% }
.signature-motion .hyper-passage { display:block; position:absolute; inset:0; z-index:1; overflow:hidden }
.hyper-paper,.hyper-opening { position:absolute; inset:0; background:var(--paper) }
.hyper-paper img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; opacity:.8 }
.hyper-opening img { width:100%; height:100%; object-fit:cover }
.hyper-creature { position:absolute; object-fit:cover; height:auto; clip-path:polygon(5% 3%,96% 0,100% 94%,3% 100%,0 48%); box-shadow:0 10px 30px #10151030 }
.creature-one { width:19%; left:13%; top:32% }
.creature-two { width:13%; right:17%; top:9% }
.creature-three { width:16%; right:8%; bottom:5% }
.hyper-fragment { position:absolute; width:15%; height:28%; background:var(--paper) url('web/aa-1441.webp') no-repeat; background-size:400% 200%; background-blend-mode:multiply; clip-path:polygon(6% 0,100% 4%,94% 96%,0 100%); opacity:.85 }
.fragment-one { left:1%; top:4%; background-position:0 0; transform:rotate(-6deg) }
.fragment-two { right:1%; bottom:1%; background-position:100% 100%; transform:rotate(8deg) }
.signature-motion .screening-play { z-index:2 }
@media(max-width:800px) {
 .signature-motion .hero { min-height:100svh }
 .identity-paper-top { height:30% }
 .identity-paper-bottom { height:39% }
 .identity-names { top:66%; font-size:clamp(40px,12vw,72px) }
 .signature-motion .screening-stage { height:70svh; min-height:390px; max-height:650px }
 .hyper-paper img { object-fit:cover; object-position:48% center }
 .creature-one { width:29%; left:3%; top:41% }
 .creature-two { width:24%; right:7%; top:14% }
 .creature-three { display:none }
 .hyper-fragment { width:24%; height:22%; background-size:400% 200% }
}
@media(prefers-reduced-motion:reduce) {
 .identity-passage,.hyper-passage { display:none!important }
}