/* ===== landing: JS reveals (uni/visit/prep) ===== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
/* on mobile: no reveal animation — content is always visible */
@media(max-width:860px){.reveal{opacity:1;transform:none;transition:none}}

/* ===== scrollytelling concept: the progress rail as a production line ===== */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;transform-origin:left;transform:scaleX(0);background:var(--grad);pointer-events:none;display:none}
@supports (animation-timeline: scroll()){
  .scroll-progress{display:block;animation:barfill linear both;animation-timeline:scroll()}
  @keyframes barfill{to{transform:scaleX(1)}}
  .rail-line::after{animation:railfill linear both;animation-timeline:scroll()}
  @keyframes railfill{to{transform:scaleY(1)}}
}
@supports not (animation-timeline: scroll()){.rail-line::after{transform:scaleY(1);opacity:.5}}
@media(min-width:1360px){.scroll-progress{display:none!important}}
.rail{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:40;display:none;flex-direction:column;gap:18px}
@media(min-width:1360px){.rail{display:flex}}
.rail-line{position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px;overflow:hidden}
.rail-line::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--dm-red),var(--neon-mag),var(--neon-cyan));transform-origin:top;transform:scaleY(0)}
.rail-st{display:flex;align-items:center;gap:12px;text-decoration:none;position:relative;z-index:1;padding:6px 6px 6px 0}
.rail-dot{width:18px;height:18px;border-radius:50%;background:var(--bg);border:2px solid #303046;transition:border-color .3s,box-shadow .3s,background .3s;flex:none}
.rail-lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s,color .25s;white-space:nowrap}
.rail:hover .rail-lbl,.rail-st:focus-visible .rail-lbl{opacity:1;transform:none}
.rail-st.past .rail-dot{background:#26263c;border-color:#3a3a55}
.rail-st.active .rail-dot{border-color:var(--neon-mag);box-shadow:0 0 14px rgba(255,45,184,.55);background:var(--neon-mag)}
.rail-st:nth-of-type(-n+3).active .rail-dot{border-color:var(--dm-red);box-shadow:0 0 14px rgba(255,59,59,.55);background:var(--dm-red)}
.rail-st:nth-of-type(n+5).active .rail-dot{border-color:var(--neon-cyan);box-shadow:0 0 14px rgba(39,230,255,.55);background:var(--neon-cyan)}
.rail-st.active .rail-lbl{opacity:1;transform:none;color:var(--text)}
/* section titles enter as the page scrolls */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .sec-h{animation:sd-head both;animation-timeline:view();animation-range:entry 0% entry 38%}
    @keyframes sd-head{from{opacity:.001;translate:0 24px}to{opacity:1;translate:0 0}}
  }
}