/* interactions.css — shared hover micro-interactions (buttons + content cards).
   Pure CSS, no JS. Mirrors the homepage's validated lift treatment.
   Gated so it only applies to fine-pointer + hover devices, and the transform
   (motion) is additionally gated behind prefers-reduced-motion:no-preference.
   Buttons opt in via the injected .ncl-cta-lift / .ncl-ghost-lift classes;
   content cards are matched by their existing per-page class names. */

/* Text links (nav, footer, inline) — smooth color change on hover.
   Element-level so per-page nav links (with their own :hover color rule but no
   transition) animate the change. Buttons define their own transition at higher
   specificity, so this never overrides their lift. Matches the reference timing. */
a { transition: color .15s cubic-bezier(.4, 0, .2, 1); }
/* Nav + footer text links carry an inline `color`, which out-ranks their class
   :hover rule — so the change never fired. !important lets the hover color win;
   the transition above animates it. Scoped to text links (not the pill CTAs). */
header nav:not(.ncl-mobile-menu) > a:hover { color: var(--driftwood) !important; }
.ncl-mobile-menu > a:hover,
.ncl-mobile-menu .ncl-mwho-link:hover { color: var(--driftwood) !important; }
footer .ncl-foot-list a:hover { color: var(--ink) !important; }

/* Hero entrance — one-shot staggered fade + slide-up via @starting-style.
   Content is visible by default (no JS, degrades to instant where @starting-style
   is unsupported). Motion only under prefers-reduced-motion:no-preference. */
@media (prefers-reduced-motion: no-preference) {
  [data-enter] {
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
  }
  [data-enter] { @starting-style { opacity: 0; transform: translateY(28px); } }
  [data-enter="1"] { transition-delay: .05s; }
  [data-enter="2"] { transition-delay: .15s; }
  [data-enter="3"] { transition-delay: .25s; }
  [data-enter="4"] { transition-delay: .35s; }
}

@media (hover: hover) and (pointer: fine) {
  /* primary (orange) CTAs */
  .ncl-cta-lift {
    transition: transform 180ms cubic-bezier(.22, 1, .36, 1), filter 160ms ease, box-shadow 240ms ease;
  }
  .ncl-cta-lift:hover {
    filter: brightness(0.96);
    box-shadow: 0 14px 30px -8px rgba(192, 53, 10, 0.55);
  }
  .ncl-cta-lift:active { transform: translateY(0) scale(0.97); }

  /* ghost / outline CTAs */
  .ncl-ghost-lift {
    transition: transform 180ms cubic-bezier(.22, 1, .36, 1), box-shadow 240ms ease, background 160ms ease;
  }
  .ncl-ghost-lift:hover { box-shadow: 0 12px 26px -10px rgba(4, 71, 255, 0.35); }

  /* content cards (existing per-page class names) */
  .fm-card, .nat-card, .con-card, .con-step,
  .tel-card, .tel-flow-step, .cash-flow-step, .cash-panel,
  .multi-card, .multi-faqcard, .ncl-adv-card, .ncl-why-card {
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 280ms ease;
  }
  .fm-card:hover, .nat-card:hover, .con-card:hover, .con-step:hover,
  .tel-card:hover, .tel-flow-step:hover, .cash-flow-step:hover, .cash-panel:hover,
  .multi-card:hover, .multi-faqcard:hover, .ncl-adv-card:hover, .ncl-why-card:hover {
    box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.30);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ncl-cta-lift:hover { transform: translateY(-3px); }
  .ncl-ghost-lift:hover { transform: translateY(-3px); }

  /* arrow nudge for CTAs that have a trailing <span> arrow */
  .ncl-cta-lift > span { display: inline-block; transition: transform 200ms cubic-bezier(.22, 1, .36, 1); }
  .ncl-cta-lift:hover > span { transform: translateX(5px); }

  .fm-card:hover, .nat-card:hover, .con-card:hover, .con-step:hover,
  .tel-card:hover, .tel-flow-step:hover, .cash-flow-step:hover, .cash-panel:hover,
  .multi-card:hover, .multi-faqcard:hover, .ncl-adv-card:hover, .ncl-why-card:hover {
    transform: translateY(-6px);
  }
}