/* TechImmune - scroll-driven 3D disease walkthrough (DEMO, 2026-10-01).
   Pin + transform: the picture stays pinned while the step cards scroll past
   it; each picture crossfades and drifts with scroll progress. Every transform
   is a float on the compositor (translate3d + scale), so nothing steps or
   shakes. Step text is real, in-flow HTML: readable with JS off, by screen
   readers, and under reduced motion. Science copy is data/disease-3d data.js. */
.wt{ position:relative; background:#071a3a; color:#fff; }
.wt__head{ padding:clamp(56px,7vw,96px) var(--side-padding) clamp(28px,4vw,48px); max-width:1440px; margin:0 auto; }
.wt__title{ margin:14px 0 0; font-family:var(--display); font-weight:300; font-size:clamp(1.8rem,1.2rem + 2.4vw,3.2rem); line-height:1.1; max-width:22ch; text-wrap:balance; }
.wt__hint{ margin:16px 0 0; font-family:var(--grotesk); font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:#8fa3bd; display:flex; align-items:center; gap:10px; }
.wt__hint i{ display:block; width:1px; height:28px; background:linear-gradient(#4f9ed9,transparent); }

.wt__track{ position:relative; }
.wt__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; z-index:0; }
.wt__layer{ position:absolute; inset:0; opacity:0; will-change:opacity; }
.wt__layer:first-child{ opacity:1; }
.wt__layer img{ position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover; object-position:62% 50%;
  transform:translate3d(0,0,0) scale(1.02); will-change:transform; backface-visibility:hidden; }
.wt__shade{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(4,12,26,.82) 0%, rgba(4,12,26,.45) 34%, rgba(4,12,26,0) 62%),
             linear-gradient(0deg, rgba(4,12,26,.55) 0%, rgba(4,12,26,0) 30%); }
.wt__reticle{ position:absolute; left:50%; top:52%; width:min(72vh,56vw); aspect-ratio:1; border:2px solid rgba(231,76,60,.9); border-radius:50%;
  transform:translate(-50%,-50%) scale(.85); opacity:0; box-shadow:0 0 30px rgba(231,76,60,.35), inset 0 0 30px rgba(231,76,60,.15); }
.wt__reticle::before, .wt__reticle::after{ content:""; position:absolute; inset:-14px; border:2px solid transparent;
  border-top-color:rgba(231,76,60,.9); border-bottom-color:rgba(231,76,60,.9); border-radius:50%; transform:rotate(45deg); }
.wt__bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(143,211,255,.12); }
.wt__bar span{ display:block; height:100%; width:100%; background:#4f9ed9; transform:scaleX(0); transform-origin:left; will-change:transform; }

/* step cards scroll in normal flow, laid over the pinned stage */
.wt__steps{ list-style:none; margin:-100vh 0 0; margin-top:-100svh; padding:0; position:relative; z-index:1; }
.wt__step{ min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:0 var(--side-padding); max-width:1440px; margin:0 auto; }
.wt__card{ max-width:520px; padding:28px 30px 30px; background:rgba(6,16,32,.62); border:1px solid rgba(143,211,255,.16); border-left:3px solid #4f9ed9;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:4px; box-shadow:0 30px 60px rgba(0,0,0,.35); }
.wt__n{ font-family:var(--grotesk); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#4f9ed9; }
.wt__h{ margin:10px 0 0; font-family:var(--grotesk); font-weight:600; font-size:clamp(1.45rem,1.1rem + 1.2vw,2.2rem); line-height:1.15; }
.wt__p{ margin:14px 0 0; font-family:var(--serif); font-size:.98rem; line-height:1.7; color:#c9d6e4; }
.wt__markers{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.wt__markers li{ font-family:var(--grotesk); font-size:12px; font-weight:600; letter-spacing:.08em; padding:6px 10px; border:1px solid rgba(143,211,255,.3); border-radius:999px; color:#e6eef7; }
.wt__note{ margin:12px 0 0; font-family:var(--grotesk); font-size:12.5px; line-height:1.5; color:#8fa3bd; }
.wt__step:last-child{ padding-bottom:12vh; }

/* rail: where you are, and a jump to any step */
.wt__rail{ position:absolute; right:clamp(14px,2.4vw,40px); top:0; bottom:0; z-index:2; pointer-events:none; }
.wt__rail-in{ position:sticky; top:50vh; transform:translateY(-50%); display:flex; flex-direction:column; gap:14px; pointer-events:auto; }
.wt__dot{ display:flex; align-items:center; justify-content:flex-end; gap:12px; background:none; border:0; padding:4px; color:#8fa3bd; font:500 12px/1 var(--grotesk); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; min-height:24px; }
.wt__dot span{ opacity:0; transform:translateX(6px); transition:opacity .3s, transform .3s; white-space:nowrap; }
.wt__dot b{ width:10px; height:10px; border-radius:50%; border:1.5px solid #8fa3bd; transition:background .3s, border-color .3s, transform .3s; flex:none; }
.wt__dot:hover span, .wt__dot:focus-visible span, .wt__dot.is-on span{ opacity:1; transform:none; }
.wt__dot.is-on{ color:#fff; } .wt__dot.is-on b{ background:#4f9ed9; border-color:#4f9ed9; transform:scale(1.25); }
.wt__dot:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

@media (max-width:767px){
  .wt__shade{ background:linear-gradient(0deg, rgba(4,12,26,.9) 0%, rgba(4,12,26,.4) 45%, rgba(4,12,26,.1) 100%); }
  .wt__layer img{ object-position:62% 35%; }
  .wt__step{ align-items:flex-end; padding-bottom:9vh; }
  .wt__card{ padding:20px 20px 22px; }
  .wt__rail{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .wt__layer img{ transform:none !important; }
  .wt__dot span, .wt__dot b{ transition:none; }
}