/* One continuous, reversible scroll scene. The geometry never swaps images. */
.module-section { height: 420svh; }
.module-pin { position: sticky; top: 0; height: 100svh; min-height: 0; display: block; overflow: hidden; background: radial-gradient(ellipse at 54% 52%, #111d27 0%, #080d12 65%); }
.module-scene { position: absolute; inset: 0; }
.module-scene canvas { display: block; width: 100%; height: 100%; }
.module-fallback { position: absolute; width: 68%; height: 75%; right: 2%; top: 12%; object-fit: contain; mix-blend-mode: lighten; }
.module-section.is-ready .module-fallback { display: none; }
.module-introduction { position: absolute; left: max(6vw, calc((100vw - 1400px) / 2)); top: 50%; width: min(30vw, 365px); transform: translateY(-50%); pointer-events: none; }
.module-introduction .process-heading { font-size: clamp(34px, 3.7vw, 58px); }
.module-introduction .process-description { margin-top: 30px; }
.module-scroll-hint { color: #718a9a; margin-top: 46px; font-size: 11px; line-height: 1.8; }
.module-scroll-hint span { display: block; font-size: 23px; margin-top: 14px; }
.module-parts { position: absolute; bottom: 82px; left: 6%; right: 6%; display: flex; justify-content: space-between; border-top: 1px solid #26343f; }
.module-parts span { padding: 15px 0; font-size: 10px; color: #6d8392; }
.module-leaders,
.module-annotations { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.module-leaders { overflow: visible; }
.module-leaders g { opacity: 0; }
.module-leaders path { fill: none; stroke: #9cb5c8; stroke-width: 1; stroke-opacity: .55; vector-effect: non-scaling-stroke; }
.module-leaders circle { fill: #bed7e8; }
.module-tag { position: absolute; display: flex; gap: 12px; align-items: flex-start; width: 190px; opacity: 0; color: #e4edf3; will-change: opacity, transform; }
.module-tag > span { font-size: 9px; line-height: 20px; color: #729bb8; }
.module-tag strong { display: block; font-size: 14px; font-weight: 500; letter-spacing: -.02em; line-height: 20px; }
.module-tag small { display: block; font-size: 10px; line-height: 1.6; color: #7f96a7; margin-top: 5px; word-break: keep-all; }
.module-tag--right { flex-direction: row-reverse; text-align: right; }
.module-sequence { position: absolute; bottom: 29px; left: 6%; right: 6%; display: flex; align-items: center; gap: 28px; color: #5f7789; font-size: 8px; letter-spacing: .17em; pointer-events: none; }
.module-sequence i { flex: 1; height: 1px; background: #22323e; }
.module-sequence b { display: block; height: 100%; background: #9ebfd3; transform-origin: left; transform: scaleX(0); }
.module-section.has-fallback { height: 130svh; }
.module-section.has-fallback .module-fallback { width: 70%; }
@media (max-width: 1000px) {
  .module-introduction { left: 5%; width: 29%; }
  .module-introduction .process-heading { font-size: 34px; }
  .module-tag { width: 157px; gap: 8px; }
  .module-tag strong { font-size: 12px; }
  .module-tag small { font-size: 9px; }
}
@media (max-width: 700px) {
  .module-section { height: 400svh; }
  .module-pin { position: sticky; height: 100svh; min-height: 0; padding: 0; overflow: hidden; }
  .module-introduction { left: 7%; right: 7%; top: 118px; transform: none; width: auto; }
  .module-introduction .process-heading { font-size: 32px; line-height: 1.16; }
  .module-introduction .process-description { margin-top: 18px; font-size: 11px; }
  .module-scroll-hint { margin-top: 18px; font-size: 10px; }
  .module-scroll-hint span { display: none; }
  .module-parts { bottom: 63px; left: 7%; right: 7%; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
  .module-parts span { padding: 9px 0; font-size: 8px; }
  .module-tag { width: 118px; gap: 5px; padding: 4px 6px; background: #080d12e6; border-top: 1px solid #526c7b66; }
  .module-tag > span { font-size: 7px; line-height: 16px; }
  .module-tag strong { font-size: 11px; line-height: 16px; }
  .module-tag small { display: none; }
  .module-sequence { left: 7%; right: 7%; bottom: 27px; gap: 13px; font-size: 6px; letter-spacing: .08em; }
  .module-fallback { width: 98%; right: 1%; top: 28%; height: 57%; }
}
@media (prefers-reduced-motion: reduce) {
  .module-section { height: 130svh; }
  .module-pin { position: sticky; }
  .module-tag { will-change: auto; }
}