/* ─────────────────────────────────────────────────────────────
   np-transitions.css — site-wide motion layer
   Loaded by every page via np-runtime.js. Designed to be additive:
   nothing here overrides existing layout; it only adds enter / hover
   transitions and respects `prefers-reduced-motion`.
   ───────────────────────────────────────────────────────────── */

/* ── 1. Page load: hero fade + slight slide ─────────────────── */
@keyframes np-hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Auto-target common hero containers. Pages can opt-in extra by
   adding .np-hero on any element. */
.np-hero,
[data-hero],
section[id="home"] > *,
section.hero > *,
.hc-hero > *,
.form-stage > .step.active,
.cb-hero > * {
  animation: np-hero-in 520ms cubic-bezier(.2,.7,.2,1) both;
}
/* Stagger the immediate children of hero containers */
.np-hero > *:nth-child(1),
[data-hero] > *:nth-child(1),
.hc-hero > *:nth-child(1)   { animation-delay: 0ms; }
.np-hero > *:nth-child(2),
[data-hero] > *:nth-child(2),
.hc-hero > *:nth-child(2)   { animation-delay: 80ms; }
.np-hero > *:nth-child(3),
[data-hero] > *:nth-child(3),
.hc-hero > *:nth-child(3)   { animation-delay: 160ms; }
.np-hero > *:nth-child(4),
[data-hero] > *:nth-child(4),
.hc-hero > *:nth-child(4)   { animation-delay: 240ms; }
.np-hero > *:nth-child(n+5),
[data-hero] > *:nth-child(n+5),
.hc-hero > *:nth-child(n+5) { animation-delay: 320ms; }

/* ── 2. Scroll reveal ───────────────────────────────────────── */
.np-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 460ms cubic-bezier(.2,.7,.2,1),
    transform 460ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.np-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger via inline --i CSS var set by JS (0..N) */
.np-reveal { transition-delay: calc(var(--i, 0) * 60ms); }

/* ── 3. Smooth scroll + fixed-nav anchor offset ─────────────── */
html {
  scroll-behavior: smooth;
  /* Keep anchored sections clear of the fixed top nav on every page */
  scroll-padding-top: 88px;
}

/* ── 4. Nav active underline ────────────────────────────────── */
.nav-links li a,
nav .nav-links a {
  position: relative;
  transition: color 220ms ease;
}
.nav-links li a::after,
nav .nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  height: 2px; width: 100%;
  background: currentColor;
  opacity: 0.85;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.nav-links li a:hover::after,
nav .nav-links a:hover::after,
.nav-links li a.is-active::after,
nav .nav-links a.is-active::after {
  transform: scaleX(1);
}
/* Don't underline the primary CTA pill */
.nav-cta::after,
.nav-cta:hover::after { display: none !important; }

/* ── 5. Buttons: scale + fill ───────────────────────────────── */
button, .btn, a.btn, .nav-cta, .btn-primary, .gate-btn-primary, .upload-btn {
  transition:
    transform 200ms cubic-bezier(.2,.7,.2,1),
    background-color 200ms ease,
    box-shadow 200ms ease,
    color 200ms ease,
    border-color 200ms ease;
}
button:not(:disabled):hover,
.btn:not(:disabled):hover,
a.btn:hover,
.nav-cta:hover,
.btn-primary:hover,
.gate-btn-primary:hover,
.upload-btn:hover {
  transform: translateY(-1px) scale(1.03);
}
button:not(:disabled):active,
.btn:not(:disabled):active,
a.btn:active,
.nav-cta:active,
.btn-primary:active,
.gate-btn-primary:active {
  transform: translateY(0) scale(0.99);
  transition-duration: 100ms;
}

/* ── 6. HDF wizard: slide between steps ─────────────────────── */
.form-stage { position: relative; overflow: hidden; }
.form-stage .step {
  transition:
    transform 360ms cubic-bezier(.2,.7,.2,1),
    opacity 220ms ease;
}
/* Direction classes set by JS on the form-stage */
.form-stage[data-anim="forward"]  .step.is-leaving { transform: translateX(-32px); opacity: 0; }
.form-stage[data-anim="forward"]  .step.is-entering { transform: translateX(32px);  opacity: 0; }
.form-stage[data-anim="backward"] .step.is-leaving { transform: translateX(32px);   opacity: 0; }
.form-stage[data-anim="backward"] .step.is-entering { transform: translateX(-32px); opacity: 0; }

.form-stage .step.active.is-settled {
  transform: translateX(0);
  opacity: 1;
}
/* Progress bar already animates width — make sure transition is buttery */
.progress-bar-fill { transition: width 480ms cubic-bezier(.2,.7,.2,1) !important; }

/* ── 7. Recipe card hover (Cookbook) ────────────────────────── */
.recipe {
  transition:
    transform 320ms cubic-bezier(.2,.7,.2,1),
    box-shadow 320ms ease,
    border-color 320ms ease;
  will-change: transform, box-shadow;
}
.recipe:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.14);
}
.recipe .recipe-img,
.recipe [class*="recipe-img"] {
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.recipe:hover .recipe-img,
.recipe:hover [class*="recipe-img"] {
  transform: scale(1.05);
}

/* Home Cure remedy cards get the same treatment when unblurred */
.remedy-card {
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), box-shadow 320ms ease;
}
.remedy-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(0,0,0,0.1);
}

/* ── 8. Health Audit count-up — driven by JS, just transitions ─ */
[data-countup] { transition: color 240ms ease; }

/* ── 9. Mobile menu slide ───────────────────────────────────── */
#mobile-menu,
.mobile-menu,
.nav-mobile-menu {
  transform-origin: top center;
  transition:
    transform 320ms cubic-bezier(.2,.7,.2,1),
    opacity 240ms ease;
}
#mobile-menu:not(.open),
.mobile-menu:not(.open),
.nav-mobile-menu:not(.open) {
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
}
#mobile-menu.open,
.mobile-menu.open,
.nav-mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ── 10. WhatsApp pulse ──────────────────────────────────────── */
@keyframes np-wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55), 0 8px 24px rgba(37,211,102,0.35); }
  70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0), 0 8px 24px rgba(37,211,102,0.35); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 8px 24px rgba(37,211,102,0.35); }
}
.np-wa-pulse {
  animation: np-wa-pulse 2.4s ease-out infinite;
}
.np-wa-pulse:hover { animation-play-state: paused; }

/* ── Reduced motion fallback ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .np-reveal { opacity: 1 !important; transform: none !important; }
}