/* =========================================================
   Saccade — site-v8.css
   "Alive" pass. Loaded LAST, after site-v7.css.

   Adds, without touching palette or structure:
   · one orchestrated hero load (staggered fade-up)
   · grid cascades (children settle in on scroll)
   · count-up styling hooks
   · tactile hover states, surface-aware
   · animated nav underlines + CTA arrow nudge
   · a hairline scroll-progress bar
   Everything is gated on prefers-reduced-motion.
   ========================================================= */

:root{
  --ease-out: cubic-bezier(.2,.7,.2,1);
}

/* ---------- block reveal: opacity only now (motion lives in children) ---------- */
.reveal{opacity:0;transform:none;transition:opacity .7s ease;}
.reveal.in{opacity:1;}

/* ---------- HERO · orchestrated load ----------
   Base state is VISIBLE. The entrance only runs once JS confirms the
   page is actually on-screen (body.hero-anim), so a background-tab load
   never gets stuck on the invisible first frame. */
@keyframes heroUp{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:none;}
}
body.hero-anim .hero-inner > h1,
body.hero-anim .hero-inner > .hero-sub-tight,
body.hero-anim .hero-inner > .hero-ctas{
  animation:heroUp 1s var(--ease-out) both;
}
body.hero-anim .hero-inner > h1{animation-delay:.08s;}
body.hero-anim .hero-inner > .hero-sub-tight{animation-delay:.26s;}
body.hero-anim .hero-inner > .hero-ctas{animation-delay:.42s;}
body.hero-anim .hero-bottom{animation:heroUp 1s var(--ease-out) .58s both;}

/* ---------- STAGGER · cascade children into view ---------- */
.st-item{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .72s var(--ease-out), transform .72s var(--ease-out);
  transition-delay:calc(var(--si, 0) * 68ms);
  will-change:opacity, transform;
}
.st-item.st-in{opacity:1;transform:none;}

/* ---------- HOVER · white clinical cards (lift + emerald shadow) ---------- */
a.paper,
.task,
.report-card{
  transition:transform .32s var(--ease-out),
             box-shadow .32s var(--ease-out),
             border-color .32s var(--ease-out);
  will-change:transform;
}
a.paper:hover,
.report-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 48px -18px rgba(4,28,20,.55);
  border-color:rgba(143,211,171,.55);
}
.task:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 48px -20px rgba(4,28,20,.5);
}
/* paper: slide the stat + brighten on hover */
a.paper .stat{transition:color .3s var(--ease-out), transform .3s var(--ease-out);}
a.paper:hover .stat{color:var(--forest);transform:translateX(2px);}

/* ---------- HOVER · emerald divider columns (tint, no lift) ---------- */
.whynow-cell,
.claim,
.claim-extra,
.evidence-study,
.reg-row{
  transition:background-color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.whynow-cell:not(.now):hover,
.claim:hover{
  background:linear-gradient(180deg, rgba(143,211,171,.07), rgba(143,211,171,.02));
}
.whynow-cell:hover .ix,
.claim:hover .num{color:var(--mint);}
.evidence-study:hover{background:rgba(143,211,171,.045);}
.reg-row:hover .what{color:var(--ink);}

/* head-to-head cards */
.versus-card{transition:transform .32s var(--ease-out);}
.h2h-versus:hover .versus-card.v-us{transform:translateY(-3px);}

/* trust marks: name lifts toward mint (already partly there) */
.trust .mark{transition:transform .3s var(--ease-out);}
.trust .mark:hover{transform:translateY(-2px);}

/* ---------- CTA arrow nudge ---------- */
.hero-ctas .primary span,
.nav-cta span,
.c-btn span,
.contact-ctas a span{
  display:inline-block;
  transition:transform .28s var(--ease-out);
}
.hero-ctas .primary:hover span,
.nav-cta:hover span,
.c-btn:hover span,
.contact-ctas a:hover span{transform:translateX(4px);}

.hero-ctas .secondary{transition:border-color .2s, color .2s, transform .28s var(--ease-out);}
.hero-ctas .secondary:hover{transform:translateY(-1px);}

/* ---------- NAV · animated underline on links ---------- */
.nav-links a{position:relative;}
.nav-links a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-6px;height:1.5px;
  background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ease-out);
  opacity:.85;
}
.nav-links a:hover::after,
.nav-links a.active::after{transform:scaleX(1);}

/* footer links: subtle slide */
.footer-col a{transition:color .2s, transform .25s var(--ease-out);}
.footer-col a:hover{transform:translateX(3px);}

/* ---------- count-up: avoid layout shift while ticking ---------- */
.is-counting{font-variant-numeric:tabular-nums;}

/* ---------- SCROLL PROGRESS · hairline under the nav ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg, var(--mint), var(--mint-bright));
  z-index:1000;pointer-events:none;
  box-shadow:0 0 12px rgba(143,211,171,.5);
  transition:width .12s linear;
}

/* ---------- reduced motion: stand everything down ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-inner > h1,
  .hero-inner > .hero-sub-tight,
  .hero-inner > .hero-ctas,
  .hero-bottom,
  .hero-corner,
  .hero .saccade-canvas{animation:none;}
  .st-item{opacity:1;transform:none;transition:none;}
  .reveal{opacity:1;}
  a.paper:hover,.task:hover,.report-card:hover,
  .h2h-versus:hover .versus-card.v-us,
  .trust .mark:hover{transform:none;}
  .scroll-progress{display:none;}
}