/* ================================================================
   Nanoroutes · Enhancement Layer
   Premium polish · micro-interactions · animation refinements
   Loads AFTER style.css — only additive overrides
   ================================================================ */

/* ---- Scrollbar ---- */
::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:rgba(10,10,10,.16);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(10,10,10,.32)}
html{scrollbar-width:thin;scrollbar-color:rgba(10,10,10,.16) var(--paper)}

/* ---- Lenis base ---- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---- Belief / manifesto ---- */
.belief{padding:clamp(5rem,12vw,10rem) 0;position:relative;overflow:hidden}
.belief::before{content:'\201C';position:absolute;top:-.12em;left:var(--pad-x);font-family:var(--font-serif);font-size:clamp(10rem,26vw,20rem);line-height:1;color:var(--line-soft);pointer-events:none;user-select:none}
.belief-text{font-family:var(--font-serif);font-size:clamp(1.45rem,3.2vw,2.8rem);line-height:1.45;font-style:italic;text-align:center;max-width:38ch;margin:0 auto;letter-spacing:-.01em;position:relative;z-index:1}
.belief-text p{margin:0}
.belief-text em{font-style:normal;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.82em;letter-spacing:.03em}

/* ---- Section watermarks ---- */
.sec-watermark{position:absolute;top:-.08em;right:var(--pad-x);font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(7rem,18vw,16rem);line-height:1;color:transparent;-webkit-text-stroke:1px var(--line-soft);pointer-events:none;user-select:none;z-index:0;opacity:0;transform:translateY(24px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease)}
.sec-watermark.in{opacity:1;transform:translateY(0)}
@media(max-width:900px){.sec-watermark{font-size:clamp(4rem,16vw,7rem)}}

/* ---- Eyebrow number red dot ---- */
.eyebrow .mono{position:relative;padding-left:.85em}
.eyebrow .mono::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:5px;background:var(--red);border-radius:50%}

/* ---- Enhanced accordion ---- */
.acc-item{border-left:3px solid transparent;transition:border-color .4s var(--ease),padding-left .5s var(--ease)}
.acc-item.open{border-left-color:var(--red);padding-left:clamp(.6rem,1.2vw,1rem);border-bottom-color:var(--ink)}

/* ---- Enhanced research cards ---- */
@media(hover:hover) and (min-width:901px){
  .rcard{transition:background .45s var(--ease),border-color .45s var(--ease),transform .55s var(--ease),box-shadow .55s var(--ease)}
  .rcard:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(10,10,10,.07)}
}

/* ---- Roadmap marker fill ---- */
.roadmap-item::before{border-radius:50%;transition:background .5s var(--ease) .15s,border-color .5s var(--ease) .15s}
.roadmap-item.reveal.in::before{background:var(--red);border-color:var(--red)}

/* ---- Menu item stagger ---- */
.menu.open .menu-box{opacity:0;transform:translateY(16px);animation:menuIn .55s var(--ease) forwards}
.menu.open .menu-box:nth-child(1){animation-delay:.1s}
.menu.open .menu-box:nth-child(2){animation-delay:.15s}
.menu.open .menu-box:nth-child(3){animation-delay:.2s}
.menu.open .menu-box:nth-child(4){animation-delay:.25s}
.menu.open .menu-box:nth-child(5){animation-delay:.3s}
.menu.open .menu-box:nth-child(6){animation-delay:.35s}
.menu.open .menu-box:nth-child(7){animation-delay:.4s}
@keyframes menuIn{to{opacity:1;transform:translateY(0)}}

/* ---- Menu footer stagger ---- */
.menu.open .menu-foot .mono{opacity:0;animation:menuIn .5s var(--ease) .5s forwards}
.menu.open .menu-foot .mono:nth-child(2){animation-delay:.56s}

/* ---- Form focus accent ---- */
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--red)}

/* ---- Footer link hover slide ---- */
.footer-nav a{transition:color .3s var(--ease),border-color .3s var(--ease),padding-left .3s var(--ease)}
.footer-nav a:hover{padding-left:.5rem}

/* ---- Contact link red flash ---- */
.contact-link{position:relative;overflow:hidden}
.contact-link::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red);opacity:.06;transition:width .55s var(--ease)}
.contact-link:hover::before{width:100%}

/* ---- Flow step hover ---- */
.flow-step{transition:background .3s var(--ease);border-radius:6px;padding:1rem}
.flow-step:hover{background:rgba(10,10,10,.025)}
.flow-step:hover .ico{transform:scale(1.08)}

/* ---- Scroll cue pulse ---- */
.scroll-cue .dot-pulse{width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}

/* ---- Hero meta stagger ---- */
.hero-meta .mono{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.hero-meta.reveal.in .mono{opacity:.55;transform:none}
.hero-meta.reveal.in .mono:nth-child(1){transition-delay:.35s}
.hero-meta.reveal.in .mono:nth-child(2){transition-delay:.42s}
.hero-meta.reveal.in .mono:nth-child(3){transition-delay:.49s}

/* ---- Vision roadmap line glow ---- */
.roadmap-line i{box-shadow:0 0 8px rgba(229,35,27,.15);background:var(--red)!important}

/* ---- NIS step active red accent ---- */
.nis-step.active{border-left:3px solid var(--red)}
@media(max-width:900px){.nis-step.active{border-left:3px solid var(--red);border-color:var(--red) var(--line) var(--line) var(--red)}}

/* ---- Triad ring pulse when active ---- */
.triad-rings circle.active-ring{animation:ringPulse 2.8s ease-in-out infinite}
@keyframes ringPulse{0%,100%{stroke-width:2;opacity:.85}50%{stroke-width:3;opacity:.6}}

/* ---- Preloader mark spin on finish ---- */
.preloader.done .preloader-mark{animation:pmSpin .8s var(--ease-io) forwards}
@keyframes pmSpin{to{transform:rotate(90deg) scale(.7);opacity:0}}

/* ---- Reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  .sec-watermark{opacity:1;transform:none}
  .menu.open .menu-box,.menu.open .menu-foot .mono{opacity:1;transform:none;animation:none}
  .roadmap-item::before{background:var(--red);border-color:var(--red)}
  .triad-rings circle.active-ring{animation:none}
  .preloader.done .preloader-mark{animation:none}
  .hero-meta .mono{opacity:.55;transform:none}
}

/* ---- Crosshair grid markers (Helena Zhang / Parker pattern) ---- */
.hero-grid::before,.vision-grid::before{
  content:'+';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--font-mono);font-size:1.2rem;color:var(--line);opacity:.4;
  pointer-events:none;z-index:1
}
.hero-grid::after,.vision-grid::after{
  content:'';position:absolute;top:50%;left:50%;width:120px;height:120px;
  transform:translate(-50%,-50%);
  border:1px solid var(--line-soft);border-radius:50%;
  pointer-events:none;z-index:1;opacity:.25
}

/* ---- Enhanced hero title letter tracking animation ---- */
.hero-title.in{animation:trackingSettle 1.6s var(--ease) forwards}
@keyframes trackingSettle{from{letter-spacing:.02em}to{letter-spacing:-.03em}}

/* ---- Statement hover cursor stretch ---- */
.statement{cursor:ew-resize}

/* ---- Flow step numbering accent ---- */
.flow-num{border-bottom:2px solid var(--red);padding-bottom:.4rem;display:inline-block}

/* ---- NIS diagram glow when active ---- */
.nd-stage.active circle,.nd-stage.active path{filter:drop-shadow(0 0 3px rgba(229,35,27,.12))}

/* ---- Enhanced hero net parallax depth ---- */
.hero-net{transition:transform .1s linear}

/* ---- Brand mark hover spin ---- */
.brand:hover .brand-mark svg{animation:brandSpin .7s var(--ease)}
@keyframes brandSpin{to{transform:rotate(90deg)}}

/* ---- Accordion hover line preview ---- */
.acc-head{position:relative}
.acc-head::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--red);transition:width .5s var(--ease)}
.acc-head:hover::after{width:100%}
.acc-item.open .acc-head::after{width:100%}

/* ---- Footer brand mark pulse ---- */
.footer-brand .brand-mark svg{animation:footPulse 4s ease-in-out infinite}
@keyframes footPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ---- Red accent on scroll progress ---- */
.scroll-progress{background:var(--red)!important}

/* ---- Stat-like hero meta enhanced ---- */
.hero-meta{gap:1rem 3rem}
.hero-meta .mono{font-size:.72rem;letter-spacing:.18em;position:relative;padding-left:.8em}
.hero-meta .mono::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:4px;background:var(--ink);border-radius:50%;opacity:.3}

/* ---- Reduced motion for new additions ---- */
@media(prefers-reduced-motion:reduce){
  .hero-title.in{animation:none;letter-spacing:-.03em}
  .footer-brand .brand-mark svg{animation:none}
  .brand:hover .brand-mark svg{animation:none}
}