/* Hero-to-Markets composition only; original typography and later chapters remain shared. */
/* Give the scroll-driven fracture time to form without moving the initial copy or poster. */
@media(min-width:1101px) and (prefers-reduced-motion:no-preference){
 .cinematic-site:not(.scene-fallback):not(.reduced-motion) #arrival{--arrival-first-frame:max(780px,100svh);height:calc(var(--arrival-first-frame)*1.6);min-height:0}
 .cinematic-site:not(.scene-fallback):not(.reduced-motion) #arrival .chapter-inner{height:var(--arrival-first-frame);min-height:0}
 .cinematic-site:not(.scene-fallback):not(.reduced-motion) #arrival .chapter-art{bottom:auto;height:var(--arrival-first-frame)}
 .cinematic-site:not(.scene-fallback):not(.reduced-motion) #arrival .hero-bottom{bottom:auto;top:calc(var(--arrival-first-frame) - 80px);transform:translateY(-100%)}
}
@media(min-width:1101px) and (max-height:720px) and (prefers-reduced-motion:no-preference){
 .cinematic-site:not(.scene-fallback):not(.reduced-motion) #arrival{--arrival-first-frame:max(690px,100svh)}
}
@media(min-width:1101px) and (max-height:800px) and (prefers-reduced-motion:no-preference){
 /* Keep the settled description above the glass row on shorter desktops. */
 .cinematic-site.scene-ready[data-asset-copy-mode="cinematic"] #assets .copy .eyebrow{margin-bottom:14px}
 .cinematic-site.scene-ready[data-asset-copy-mode="cinematic"] #assets .copy h2{margin-bottom:16px}
 .cinematic-site.scene-ready[data-asset-copy-mode="cinematic"] #assets .copy>p:last-child{line-height:1.65;margin-bottom:0}
}

@media(min-width:1101px){
 .cinematic-site #markets{height:auto;min-height:max(780px,100svh)}
 .cinematic-site #markets .chapter-inner{height:auto;min-height:inherit;align-items:flex-start;justify-content:flex-end;padding:clamp(170px,23svh,260px) 5.4vw clamp(64px,9svh,110px)}
 .cinematic-site #markets .copy{width:27vw;max-width:430px;margin:0;min-width:0}
 .cinematic-site #markets .body,.cinematic-site #markets .fine-note{max-width:100%}
 .cinematic-site.scene-ready[data-market-intro="true"] #arrival .hero-bottom{visibility:hidden}
}
@media(min-width:1101px) and (max-height:720px){
 .cinematic-site #markets{min-height:max(690px,100svh)}
}

.cinematic-site #markets .chapter-art{background:linear-gradient(rgb(4 5 9 / .22),rgb(4 5 9 / .22)),url('/assets/environment.webp') center/cover no-repeat}
.cinematic-site #markets .chapter-art picture{display:block;width:100%;height:100%}
.cinematic-site #markets .chapter-art picture img{object-fit:contain;object-position:center;animation:none;transform:none}
/* The transparent crystal silhouettes use the same projection in native,
   loading, reduced-motion and unavailable-WebGL views. Only exiting optical
   glow dissolves at the four source boundaries; candle bodies stay intact. */
.cinematic-site #markets .chapter-art picture{position:absolute;left:.5%;top:53%;width:min(66.5%,calc(74svh * 1672 / 941));height:auto;aspect-ratio:1672/941;transform:translateY(-50%)}
.cinematic-site #markets .chapter-art picture img{display:block;width:100%;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 1%,#000 94.5%,transparent),linear-gradient(180deg,transparent,#000 2.7%,#000 99%,transparent);mask-image:linear-gradient(90deg,transparent,#000 1%,#000 94.5%,transparent),linear-gradient(180deg,transparent,#000 2.7%,#000 99%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
@media(max-width:1100px){
 .cinematic-site #markets{display:flex;flex-direction:column}
 .cinematic-site #markets .chapter-inner{order:0;height:auto;min-height:0;padding:clamp(76px,10vw,110px) 6vw 0}
 .cinematic-site #markets .copy{width:100%;max-width:650px;margin:0 auto;min-width:0}
 .cinematic-site #markets .chapter-art{order:1;height:clamp(460px,58vw,560px);margin:0;flex-shrink:0}
 .cinematic-site #markets .chapter-art picture{width:94%;left:3%;top:53%;height:auto}
 .cinematic-site.motion-mobile #markets .motion-card-active>picture{visibility:hidden}
 .cinematic-site.motion-mobile.scene-fallback #markets .chapter-art>picture{visibility:visible}
}
@media(max-width:760px){
 .cinematic-site #markets .chapter-art{height:clamp(460px,128vw,560px)}
}

/* Keep artwork visible while the one WebGL scene compiles or recovers. */
@media(max-width:1100px){
 .cinematic-site.motion-mobile:not(.scene-ready) #arrival .chapter-art>img,
 .cinematic-site.motion-mobile:not(.scene-ready) #markets .chapter-art>picture{visibility:visible}
}

/* One held composition carries the impact into the six glass frames. */
/* Flow and pinned copy share a zero horizontal translation. In particular,
   a responsive handoff cannot interpolate a centering transform into a reveal. */
.cinematic-site.motion-observer #assets .copy[data-reveal]{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s ease,transform .9s cubic-bezier(.22,.68,0,1)}
.cinematic-site.motion-observer #assets .copy[data-reveal].revealed{opacity:1;transform:translate3d(0,0,0)}
.cinematic-site.reduced-motion #assets .copy[data-reveal]{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){
 .cinematic-site.motion-observer #assets .copy[data-reveal]{opacity:1;transform:none;transition:none}
}
@media(min-width:1101px) and (prefers-reduced-motion:no-preference){
 .cinematic-site:not(.scene-fallback):not(.reduced-motion) #markets{min-height:calc(max(780px,100svh)*1.55)}
 .cinematic-site.scene-ready:not(.scene-fallback)[data-market-copy-mode="cinematic"] #markets .copy{position:fixed;left:auto;right:5.4vw;top:clamp(170px,23svh,260px);opacity:var(--market-copy-reveal,0);transform:translate3d(0,var(--market-copy-y,18px),0);transition:none}
 .cinematic-site.scene-ready:not(.scene-fallback)[data-market-copy-mode="cinematic"][data-market-hidden="true"] #markets .copy{visibility:hidden;pointer-events:none}
 /* Insets center the frame without an X transform; scroll owns only its
    opacity and small upward reveal, in either scroll direction. */
 .cinematic-site.scene-ready:not(.scene-fallback):not(.reduced-motion)[data-asset-copy-mode="cinematic"] #assets .copy{position:fixed;top:110px;left:0;right:0;width:calc(100% - 12vw);max-width:830px;margin:0 auto;text-align:center;transform:translate3d(0,var(--asset-copy-y,18px),0);opacity:var(--asset-copy-reveal,0);transition:none;pointer-events:none}
}
@media(min-width:1101px) and (max-height:720px) and (prefers-reduced-motion:no-preference){
 .cinematic-site:not(.scene-fallback):not(.reduced-motion) #markets{min-height:calc(max(690px,100svh)*1.55)}
}