/* Scroll choreography is additive; the base page remains readable without it. */
:root { --color-motion-wash: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.hero-journey, .approach-story { position: relative; }
.hero-line { display: block; }
.hero h1 .hero-line { color: inherit; }
.scene-depth-word {
  position: absolute; top: 28%; left: 0; right: 0; z-index: 0;
  text-align: center; font-size: clamp(60px, 8vw, 125px); line-height: 1;
  font-weight: 700; letter-spacing: -.07em; color: var(--color-accent); opacity: .055;
  pointer-events: none; user-select: none;
}
.scene-orbit {
  position: absolute; inset: 10% 10% 15%; border: 1px solid var(--color-border);
  border-radius: 50%; opacity: .45; pointer-events: none;
  transform: rotate(-25deg) scaleX(.82);
}
.scene-orbit::after {
  content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  top: 18%; left: 8%; background: var(--color-accent);
  box-shadow: 0 0 0 6px var(--color-motion-wash);
}
.hero-chapters { display: flex; align-items: center; gap: 23px; }
.hero-chapter { color: var(--color-muted); font-size: 9px; letter-spacing: .03em; transition: color .4s, opacity .4s; }
.hero-chapter b { font-size: 8px; font-weight: 500; margin-right: 5px; opacity: .6; }
.hero-chapter.is-current { color: var(--color-accent); }
.hero-chapter.is-current::after { content: ''; display: block; height: 1px; background: var(--color-accent); margin-top: 5px; }
.reading-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 80; background: var(--color-accent); transform: scaleX(var(--reading-progress,0)); transform-origin: left; pointer-events: none; }
.motion-ready .hero-copy { translate: 0 calc(var(--hero-progress,0) * -40px); }
.motion-ready .scene-depth-word { translate: calc(var(--pointer-x,0) * -35px) calc(var(--hero-progress,0) * -75px); }
.motion-ready .scene-orbit { rotate: calc(var(--hero-progress,0) * 100deg); scale: calc(1 + var(--hero-progress,0) * .1); }
.motion-ready .scene-label-top { translate: calc(var(--pointer-x,0) * -20px) calc(var(--hero-progress,0) * -28px); }
.motion-ready .scene-label-right { translate: calc(var(--pointer-x,0) * 30px) calc(var(--hero-progress,0) * 22px); }
.motion-ready .scene-label-bottom { translate: calc(var(--pointer-x,0) * -15px) calc(var(--hero-progress,0) * 34px); }
.motion-ready .stage-grid { translate: 0 calc(var(--hero-progress,0) * 40px); }
.motion-ready .sculpture-fallback i { translate: 0 calc((var(--i) - 3.5) * var(--hero-expansion,0) * 12px); }
.motion-ready .capability-card {
  transform: perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s;
}
.motion-ready .capability-card:hover { transform: perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-5px); }
.motion-ready .capability-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: radial-gradient(circle at var(--sheen-x,50%) var(--sheen-y,50%),var(--color-motion-wash),transparent 65%);
  pointer-events: none; transition: opacity .3s;
}
.motion-ready .capability-card:hover::after { opacity: 1; }
.motion-ready .layer-art i { transition: translate .65s var(--ease); }
.motion-ready .capability-card:hover .layer-art i:nth-child(1) { translate: 0 10px; }
.motion-ready .capability-card:hover .layer-art i:nth-child(2) { translate: 0 4px; }
.motion-ready .capability-card:hover .layer-art i:nth-child(3) { translate: 0 -4px; }
.motion-ready .capability-card:hover .layer-art i:nth-child(4) { translate: 0 -10px; }
.motion-ready .orbit-art { transition: rotate .8s var(--ease); }
.motion-ready .capability-card:hover .orbit-art { rotate: 18deg; }
.approach-art i { transition: background .6s, translate .7s var(--ease); }
.approach-story[data-step="0"] .approach-art i:nth-child(1),
.approach-story[data-step="1"] .approach-art i:nth-child(-n+2),
.approach-story[data-step="2"] .approach-art i:nth-child(-n+3),
.approach-story[data-step="3"] .approach-art i { background: var(--color-accent); translate: 0 -8px; }
.step-tabs { position: relative; }
.step-tabs::after { content: ''; position: absolute; left: -12px; top: 0; bottom: 0; width: 2px; background: var(--color-lime); transform: scaleY(var(--story-progress,0)); transform-origin: top; opacity: .5; }
.motion-paused .capability-card, .motion-paused .capability-card:hover { transform: none; }
.motion-paused .capability-card::after { display: none; }
.motion-paused .mini-art, .motion-paused .mini-art i { translate: none !important; rotate: none !important; }
@media (min-width: 1050px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .hero-journey { height: 185svh; }
  .motion-ready .hero-journey > .hero {
    position: sticky; top: 100px; height: calc(100svh - 100px); min-height: 620px;
    padding-top: 0; display: flex; flex-direction: column;
  }
  .motion-ready .hero-journey .hero-layout { flex: 1; min-height: 0; }
  .motion-ready .hero-journey .sculpture-stage { height: min(68svh,700px); }
  .motion-ready .hero-journey .hero-baseline { margin-top: 0; }
  .motion-ready .approach-story { height: 230svh; }
  .motion-ready .approach-story > .approach {
    position: sticky; top: 100px; height: calc(100svh - 100px); min-height: 620px;
    padding-block: clamp(32px,5vh,64px); display: flex; align-items: center;
  }
  .motion-ready .approach-story .section-heading { margin-bottom: 25px; }
  .motion-ready .approach-story .approach-layout { margin-top: 30px; }
  .motion-ready .approach-story .step-panels { min-height: 300px; }
  .motion-ready .approach-story .approach-bottom { margin-top: 25px; padding-top: 20px; }
}
@media (max-width: 760px) {
  .hero-chapters { gap: 14px; }
  .hero-chapter { font-size: 7px; }
  .hero-chapter b { font-size: 7px; margin-right: 3px; }
  .scene-depth-word { font-size: 65px; top: 24%; }
  .scene-orbit { inset: 8% 5% 12%; }
  .motion-ready .hero-copy { translate: 0 calc(var(--hero-progress,0) * -12px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy,.scene-depth-word,.scene-label,.stage-grid { translate: none !important; }
  .scene-orbit { rotate: none !important; scale: none !important; }
  .motion-ready .capability-card,.motion-ready .capability-card:hover { transform: none; }
  .motion-ready .capability-card::after { display: none; }
  .mini-art,.mini-art i { translate: none !important; rotate: none !important; }
  .reading-progress { display: none; }
}