/* ─── Zero To Hero — "WOW" enhancement layer ─────────────────────
   Motion + micro-interaction polish on top of styles.css.
   All entrance states are gated behind html.wow-on (set by wow.js)
   and prefers-reduced-motion, so no-JS and reduced-motion users
   always see fully visible content.
   ───────────────────────────────────────────────────────────────── */

:root {
  --wow-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* No-JS safety: if wow.js never ran, never hide revealed content */
html:not(.wow-on) .reveal { opacity: 1 !important; transform: none !important; }

/* Headline highlight — serif italic with underline sweep */
.hl-sweep {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 500;
  padding: 0 0.05em;
  background-image: linear-gradient(transparent 62%, var(--primary-200) 62%, var(--primary-200) 96%, transparent 96%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Hero image fx wrapper — must mirror the visual column so the
   absolutely-positioned image keeps its anchor once transforms apply */
.hero-img-fx { pointer-events: none; }
@media (min-width: 1081px) {
  .hero-img-fx { position: absolute; inset: 0; }
}
@media (max-width: 1080px) {
  .hero-img-fx { display: flex; justify-content: center; width: 100%; }
}

/* ============ HOVER MICRO-INTERACTIONS (always on) ============ */

.problem-card, .what-card, .strat-card, .ai-feature, .testimonial {
  transition: transform 350ms var(--wow-ease), box-shadow 350ms var(--wow-ease), border-color 350ms var(--wow-ease);
}
.problem-card:hover, .what-card:hover, .strat-card:hover, .ai-feature:hover, .testimonial:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-200);
}
.what-card:hover { border-left-color: var(--primary-600); }

.prob-icon { transition: background 350ms var(--wow-ease), color 350ms var(--wow-ease), transform 350ms var(--wow-ease); }
.problem-card:hover .prob-icon {
  background: var(--primary-600);
  color: var(--white);
  transform: scale(1.06) rotate(-3deg);
}
.ai-feature .num { transition: background 350ms var(--wow-ease), color 350ms var(--wow-ease); }
.ai-feature:hover .num { background: var(--primary-600); color: var(--white); border-color: var(--primary-600); }

/* How-it-works steps */
.how-step-card { transition: transform 350ms var(--wow-ease), box-shadow 350ms var(--wow-ease); }
.how-step-num { transition: background 350ms var(--wow-ease), color 350ms var(--wow-ease), transform 350ms var(--wow-ease); }
.how-step:hover .how-step-card {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.08), 0 20px 44px rgba(0,0,0,0.12);
}
.how-step:hover .how-step-num {
  background: #1a2d5a;
  color: var(--white);
  transform: translateX(-50%) scale(1.08);
}

/* Pricing plans */
.plan { transition: transform 350ms var(--wow-ease), box-shadow 350ms var(--wow-ease), border-color 350ms var(--wow-ease); }
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-300); }
.plan--featured:hover { transform: translateY(-14px); box-shadow: var(--shadow-2xl); border-color: var(--gray-900); }

/* Concept cards — image zoom */
.concept-card { transition: transform 350ms var(--wow-ease), box-shadow 350ms var(--wow-ease), border-color 350ms var(--wow-ease); }
.concept-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.concept-preview { overflow: hidden; }
.concept-preview img { transition: transform 700ms var(--wow-ease); }
.concept-card:hover .concept-preview img { transform: scale(1.045); }
.concept-link { transition: letter-spacing 250ms var(--wow-ease); }
.concept-card:hover .concept-link { letter-spacing: 0.01em; }

/* Doc checklist ticks */
.doc-ck { transition: background 300ms var(--wow-ease), color 300ms var(--wow-ease), transform 300ms var(--wow-ease); }
.doc-item:hover .doc-ck { background: var(--primary-600); color: var(--white); transform: scale(1.12); }

/* Button sheen sweep */
.btn--primary, .btn--inverse, .digi-aside .btn--white {
  position: relative;
  overflow: hidden;
}
.btn--primary::after, .btn--inverse::after, .digi-aside .btn--white::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -160%;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: skewX(-20deg);
  transition: left 650ms ease;
  pointer-events: none;
}
.btn--inverse::after { background: linear-gradient(105deg, transparent, rgba(26,53,102,0.14), transparent); }
.btn--primary:hover::after, .btn--inverse:hover::after, .digi-aside .btn--white:hover::after { left: 170%; }
.btn:active { transform: scale(0.985); }

/* Nav — elevated once scrolled */
.nav { transition: box-shadow 300ms var(--wow-ease), background 300ms var(--wow-ease); }
.nav.wow-scrolled { box-shadow: 0 10px 28px -14px rgba(28,25,23,0.22); }

/* Marquee — edge fades + pause on hover */
.marquee-track {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { transition: color 250ms var(--wow-ease); }
.marquee-item:hover { color: var(--primary-600); }

/* Trust pills */
.trust-pill { transition: transform 300ms var(--wow-ease), box-shadow 300ms var(--wow-ease), border-color 300ms var(--wow-ease); }
.trust-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--primary-300); }

/* WhatsApp float — gentle attention */
.wa-float { transition: transform 300ms var(--wow-ease); }
.wa-float:hover { transform: translateY(-3px) scale(1.03); }

/* ════════════ MOTION (JS-enabled + motion-OK users only) ════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* ---- Hero entrance choreography ---- */
  @keyframes wowUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes wowWord {
    from { opacity: 0; transform: translateY(0.55em); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes wowSweep {
    from { background-size: 0% 100%; }
    to   { background-size: 100% 100%; }
  }
  @keyframes wowHeroImg {
    from { opacity: 0; transform: translateX(48px) scale(0.965); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes wowFloat {
    from { transform: translateY(0); }
    to   { transform: translateY(-9px); }
  }
  @keyframes wowBreathe {
    from { transform: scale(1); }
    to   { transform: scale(1.05) translateY(-10px); }
  }
  @keyframes wowDrift {
    from { transform: translate(0, 0); }
    to   { transform: translate(-46px, 32px) scale(1.07); }
  }

  html.wow-on .h1 .w {
    display: inline-block;
    opacity: 0;
    animation: wowWord 850ms var(--wow-ease) forwards;
    animation-delay: calc(120ms + var(--wd, 0) * 55ms);
  }
  html.wow-on .hl-sweep {
    background-size: 0% 100%;
    animation: wowSweep 700ms ease 950ms forwards;
  }
  html.wow-on .wow-rise {
    opacity: 0;
    animation: wowUp 800ms var(--wow-ease) calc(120ms + var(--wd, 0) * 130ms) forwards;
  }
  html.wow-on .hero p.lead {
    opacity: 0;
    animation: wowUp 800ms var(--wow-ease) 550ms forwards;
  }
  html.wow-on .hero-trust .trust-pill {
    opacity: 0;
    animation: wowUp 700ms var(--wow-ease) calc(700ms + var(--wd, 0) * 90ms) forwards;
  }
  html.wow-on .hero-proof-bar {
    opacity: 0;
    animation: wowUp 800ms var(--wow-ease) 1050ms forwards;
  }
  html.wow-on .hero-img-fx {
    opacity: 0;
    animation:
      wowHeroImg 1100ms var(--wow-ease) 350ms forwards,
      wowFloat 9s ease-in-out 2.2s infinite alternate;
  }
  html.wow-on .hero-halo { animation: wowBreathe 16s ease-in-out infinite alternate; }

  /* Hero image — pointer tilt + scroll parallax (vars set by wow.js) */
  html.wow-on .hero-img-fx .hero-composed-img {
    transform: perspective(1100px)
      translate3d(0, var(--wow-py, 0px), 0)
      rotateX(var(--wow-rx, 0deg))
      rotateY(var(--wow-ry, 0deg));
    transition: transform 450ms ease-out;
    will-change: transform;
  }

  /* ---- Scroll reveals, upgraded with stagger ---- */
  html.wow-on .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 750ms var(--wow-ease),
      transform 750ms var(--wow-ease);
    transition-delay: calc(var(--wd, 0) * 85ms);
  }
  html.wow-on .reveal.in {
    opacity: 1;
    transform: none;
  }

  /* ---- Featured plan: slow conic ring ---- */
  @property --wow-ang {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }
  @keyframes wowRing { to { --wow-ang: 360deg; } }
  html.wow-on .plan--featured::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--r-lg) + 2px);
    padding: 2px;
    background: conic-gradient(from var(--wow-ang),
      transparent 0deg, transparent 250deg,
      rgba(124,159,212,0.85) 305deg,
      rgba(194,212,238,0.95) 330deg,
      transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: wowRing 7s linear infinite;
    pointer-events: none;
    z-index: 1;
  }

  /* ---- Final CTA glow drift ---- */
  html.wow-on .final-cta::before { animation: wowDrift 13s ease-in-out infinite alternate; }

  /* ---- FAQ answer fade ---- */
  html.wow-on .faq-ai {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 380ms ease 60ms, transform 380ms ease 60ms;
  }
  html.wow-on .faq-item.open .faq-ai { opacity: 1; transform: none; }
}