/* ============================================================
   RepRecap Landing — animations.css
   All motion rules are scoped to prefers-reduced-motion: no-preference
   so users who prefer reduced motion always see a fully visible,
   static version of the page.
   ============================================================ */

/* ── Reduced-motion fallback (always applies first) ─────────── */
[data-reveal] {
  opacity: 1;
  transform: none;
}

/* ============================================================
   MOTION STYLES
   Everything below is guarded by prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* ── 1. Scroll Reveal — initial hidden states ──────────────── */
  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity  0.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  [data-reveal="left"] {
    opacity: 0;
    transform: translateX(-40px);
  }

  [data-reveal="right"] {
    opacity: 0;
    transform: translateX(40px);
  }

  [data-reveal="scale"] {
    opacity: 0;
    transform: scale(0.94);
  }

  /* Revealed state — JS adds this class via IntersectionObserver */
  [data-reveal].revealed {
    opacity: 1;
    transform: none;
  }

  /* ── 2a. Hero glow pulse ───────────────────────────────────── */
  @keyframes heroGlow {
    0%,
    100% {
      opacity: 0.6;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.1);
    }
  }

  /* ── 2b. Phone float ──────────────────────────────────────── */
  @keyframes phoneFloat {
    0%,
    100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-14px);
    }
  }

  .phone-mockup--hero {
    animation: phoneFloat 6s ease-in-out infinite;
  }

  .phone-mockup--large {
    animation: phoneFloat 7s ease-in-out infinite;
    animation-delay: 0.5s;
  }

  /* ── 2c. Shimmer — featured pricing card border/highlight ─── */
  @keyframes shimmer {
    0% {
      background-position: -200% center;
    }
    100% {
      background-position: 200% center;
    }
  }

  /* ── 2d. Fade in up — general utility ─────────────────────── */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(32px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ── 2e. Hero word stagger entrance ───────────────────────── */
  /* JS splits hero headline into .hero__word spans then adds    */
  /* .animated class with staggered setTimeout calls.           */
  .hero__word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
  }

  .hero__word.animated {
    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .hero__word:nth-child(1) { animation-delay: 0.1s; }
  .hero__word:nth-child(2) { animation-delay: 0.2s; }
  .hero__word:nth-child(3) { animation-delay: 0.3s; }

  /* ── 2f. Callout float ────────────────────────────────────── */
  @keyframes calloutFloat {
    0%,
    100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-6px);
    }
  }

  .callout--1 {
    animation: calloutFloat 4s ease-in-out infinite;
  }

  .callout--2 {
    animation: calloutFloat 4s ease-in-out infinite;
    animation-delay: 1.5s;
  }

  /* ── 2g. Step number pulse on hover ───────────────────────── */
  @keyframes stepPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
  }

  .step:hover .step__number {
    animation: stepPulse 0.3s ease;
  }

  /* ── 2h. Feature card glow on hover ───────────────────────── */
  @keyframes cardGlow {
    from {
      box-shadow: 0 0 0 0 rgba(0, 122, 255, 0);
    }
    to {
      box-shadow: 0 0 40px rgba(0, 122, 255, 0.08);
    }
  }

  .feature-card--ai:hover {
    animation: cardGlow 0.3s forwards;
  }

  /* ── 3. Nav scroll effect ─────────────────────────────────── */
  /* JS adds .nav--scrolled when window.scrollY > 20            */
  .nav--scrolled {
    background: rgba(10, 10, 10, 0.95);
    border-bottom-color: rgba(38, 38, 38, 0.8);
  }

  /* ── 4. Mobile menu transitions ───────────────────────────── */
  .nav__mobile {
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0, 0.67, 0);
  }

  .nav__mobile.open {
    transform: translateX(0);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nav__overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  .nav__overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Hamburger icon morphing into × */
  .nav__hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--on-surface-variant);
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .nav__hamburger.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .nav__hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .nav__hamburger.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* ── 5. Stagger utility classes ───────────────────────────── */
  /* JS assigns these to grid children so each item              */
  /* enters slightly after the previous one.                     */
  .stagger-1 { transition-delay:  60ms; }
  .stagger-2 { transition-delay: 120ms; }
  .stagger-3 { transition-delay: 180ms; }
  .stagger-4 { transition-delay: 240ms; }
  .stagger-5 { transition-delay: 300ms; }
  .stagger-6 { transition-delay: 360ms; }

} /* end @media (prefers-reduced-motion: no-preference) */

/* ── Counter number formatting (not motion, safe outside guard) */
.proof-number {
  font-variant-numeric: tabular-nums;
}