/* The supplied GLB is rendered only when WebGL and motion are available. */
.hero-story { position: relative; background: #000; overflow-anchor: none; }
.hero-stage { min-height: 730px; isolation: isolate; }
.hero-story .hero-inner { position: relative; z-index: 3; }
.cube-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cube-scene::before { content: ''; position: absolute; width: 43vw; height: 30vw; min-width: 440px; min-height: 300px; right: 6%; bottom: -21%; border-radius: 50%; background: radial-gradient(ellipse,#0042b841 0%,#001e5a2b 31%,transparent 70%); filter: blur(23px); }
.cube-layers { position: absolute; width: max(1100px, 100vw); max-width: 1700px; aspect-ratio: 1672 / 941; right: 0; top: 50%; transform: translateY(-50%); background: url('assets/hero-keyframe-01.webp') center / 100% 100% no-repeat; transition: opacity .3s ease; }
.cube-webgl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .35s ease; }
.cube-webgl.ready { opacity: 1; }
.model-ready .cube-layers { opacity: 0; }
.cube-webgl canvas { display: block; width: 100%; height: 100%; }
.hero-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg,#000 0%,rgba(0,0,0,.97) 32%,rgba(0,0,0,.49) 51%,transparent 69%); pointer-events: none; }
.hero-phase h2 { font-size: clamp(50px,5.2vw,78px); line-height: 1.05; margin: 29px 0 25px; letter-spacing: -.045em; }
.hero-phase h2>span { color: var(--blue); }
.hero-phase[data-phase="2"] h2 { font-size: clamp(48px,4.65vw,70px); }
.hero-phase[data-phase="1"] h2 { font-size: clamp(43px,4.4vw,66px); max-width: 760px; }
.hero-phase[data-phase="2"] h2 { max-width: 790px; }
.scene-footer { display: none; }
.scroll-ready { height: 330svh; }
.scroll-ready .hero-stage { position: sticky; top: 98px; height: calc(100svh - 98px); min-height: 0; overflow: hidden; }
.scroll-ready .hero-inner { height: 100%; padding: 0; }
.scroll-ready .hero-phase { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-54%); will-change: opacity; }
.scroll-ready .hero-phase h1 { font-size: clamp(52px,5.35vw,82px); }
.scroll-ready .hero-phase[aria-hidden="true"] { pointer-events: none; }
.scroll-ready .scene-footer { display: flex; position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 4; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; }
.scene-chapters { display: flex; gap: 29px; font-size: 10px; color: #9a9ba4; }
.scene-chapters button { display: flex; gap: 8px; background: none; border: 0; padding: 8px 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.scene-chapters button:hover { color: #fff; }
.scene-chapters b { font-weight: 500; }
.scene-chapters .active { color: #74b9ff; }
.scene-scroll { font-size: 8px; letter-spacing: .12em; color: #b0b6c2; display: flex; align-items: center; gap: 18px; }
.scene-scroll>span { font-size: 20px; color: var(--blue); }
.scene-progress { height: 1px; background: #ffffff20; position: absolute; bottom: 0; left: 0; width: 100%; }
.scene-progress i { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(var(--scene-progress,0)); }
.scene-static .cube-layers { opacity: 1; background-image: url('assets/hero-keyframe-03.webp'); }
.scene-static .cube-webgl { display: none; }
@media(min-width:1600px) { .cube-layers { right: calc((100vw - 1650px)/2); } }
@media(max-width:1150px) { .cube-layers { right: -100px; opacity: .85; } .hero-shade { background: linear-gradient(90deg,#000 0%,rgba(0,0,0,.93) 34%,rgba(0,0,0,.28) 72%,transparent); } .scene-scroll { display: none; } .hero-phase h2 { font-size: 58px; } }
@media(max-width:760px) {
  .scroll-ready { height: 300svh; }
  .scroll-ready .hero-stage { top: 78px; height: calc(100svh - 78px); }
  .cube-layers { width: 1030px; right: -220px; top: 56%; opacity: .64; }
  .cube-webgl { width: 1000px; left: auto; right: -270px; }
  .cube-webgl.ready { opacity: 1; }
  .cube-scene::before { right: -80%; bottom: 2%; }
  .hero-shade { background: linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.64) 65%,rgba(0,0,0,.25)),linear-gradient(0deg,#000 0%,transparent 30%,transparent 70%,#000 100%); }
  .scroll-ready .hero-phase { top: 46%; transform: translateY(-50%); }
  .scroll-ready .hero-phase h1 { font-size: clamp(37px,8.9vw,64px); }
  .hero-phase h2,.hero-phase[data-phase="2"] h2 { font-size: clamp(36px,8.7vw,54px); }
  .scroll-ready .scene-footer { bottom: 20px; padding-bottom: 17px; }
  .scene-chapters { width: 100%; gap: 12px; justify-content: space-between; font-size: 9px; }
  .scene-chapters button { gap: 5px; }
  .hero-note { font-size: 9px; }
}
@media(max-height:759px) and (min-width:761px) {
  .cube-layers { width: min(1100px, 100vw); }
  .scroll-ready .hero-phase { top: 46%; }
  .scroll-ready .hero-phase h1 { font-size: clamp(46px,4.7vw,63px); }
  .hero-phase h2,.hero-phase[data-phase="2"] h2 { font-size: clamp(43px,4.5vw,60px); }
  .scroll-ready .scene-footer { bottom: 15px; padding-bottom: 12px; }
}
@media(max-height:700px) and (min-width:761px) {
  .scroll-ready .hero-phase { top: 50%; }
  .scroll-ready .hero-note { display: none; }
}