/* enhance.css — additive interaction & motion layer.
   Loaded AFTER sections.css. Touches nothing existing; only adds hover
   states, nav underline/scroll-spy, count-up, parallax and float helpers.
   Continuous / scroll-driven motion is gated on prefers-reduced-motion. */

/* ════ CARD HOVER LIFTS ════
   These cards previously had no hover feedback. Light lift + shadow.
   (Follows the existing .btn convention of not gating hover lifts.) */
.problem-card, .how-step, .case-outcome, .layer-card, .who-card{
  transition: transform .26s cubic-bezier(.2,.7,.2,1),
              box-shadow .26s ease, border-color .2s ease;
  will-change: transform;
}
.problem-card:hover, .how-step:hover, .case-outcome:hover{
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--steel);
}
.layer-card:hover{ transform: translateY(-3px); box-shadow: var(--sh-md); }
.layer-card.layer-dark:hover{ box-shadow: var(--sh-lg); }
.who-card:hover{ transform: translateY(-4px); box-shadow: var(--sh-lg); }

/* watermark inside who-hero drifts a touch on hover for depth */
.who-card{ }
.who-card:hover .who-watermark{ transform: scale(1.06) rotate(-2deg); }
.who-watermark{ transition: transform .5s cubic-bezier(.2,.7,.2,1); }

/* ════ LIVE EXAMPLE — sources + chips ════ */
.src{ transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.src:hover{ transform: translateY(-2px); border-color: var(--blue-mid); background:#fff; }

.live-chip{ cursor: pointer;
  transition: transform .18s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.live-chip:hover{ background: var(--blue-mid); color:#fff; border-color: var(--blue-mid);
  transform: translateY(-1px); }
.live-chip:active{ transform: translateY(0); }

/* ════ NAV — underline grow + scroll-spy active ════ */
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-7px; height:2px;
  background: var(--blue-mid); border-radius:2px;
  transition: right .28s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after{ right:0; }
.nav-links a.is-current{ color: var(--ink); }
.nav-links a.is-current::after{ right:0; }

/* ════ CTA ARROW SHIFT ════
   The → inside primary CTAs nudges right on hover. */
.btn .arrow{ display:inline-block; transition: transform .2s ease; }
.btn:hover .arrow{ transform: translateX(4px); }

/* small ↗ text links get a colour lift on hover */
.case-co-link, .team-strip-link, .case-quote-name{ transition: color .2s ease; }
.case-co-link:hover, .team-strip-link:hover{ color: var(--navy-deep); }
.team-strip-link:hover{ color:#fff; }

/* ════ MOTION (gated) ════ */
@media (prefers-reduced-motion: no-preference){

  /* Hero product frame: gentle idle float after it has settled */
  .hero-frame .frame{ animation: heroFloat 7s ease-in-out 1.2s infinite; }
  @keyframes heroFloat{
    0%,100%{ transform: translateY(0); }
    50%    { transform: translateY(-7px); }
  }

  /* Parallax watermarks are translated from JS via --py */
  .approach-watermark, .case-quote-mark, .who-watermark{
    will-change: transform;
  }
  .approach-watermark{ transform: translateY(var(--py,0px)); }
  .case-quote-mark   { transform: translateY(var(--py,0px)); }

  /* Coverage strip: items lift subtly in sequence when revealed */
  .coverage-item{ transition: color .3s ease, transform .3s ease; }
  .coverage-row:hover .coverage-item{ color: var(--ink); }
}