/* Hero animations — claude theme.
   Three-act badge sequence on the noraline homepage hero + gently floating
   background waves. Inert anywhere else (selectors require .hero-icon-badge /
   .hero-wave classes added only on the homepage hero override).

   Badge timeline (single 6 s loop, looped forever):
     0.0 – 0.6 s : .hero-icon-bolt    — strong electric pulse + double-flash glow
     1.0 – 1.7 s : .hero-icon-check   — spring stamp with held peak (overshoot)
     2.5 – 3.7 s : .hero-icon-bulb    — light on (glow halo + brightness)
     3.7 – 6.0 s : all idle
     6.0 s       : loop

   Waves: four independent translateY+translateX float loops, each 11–14 s
   with negative delays so the page does not start with all four in phase.

   Plain CSS — no Tailwind utilities → no tailwind-compiled.css rebuild. */

.hero-icon-badge {
  /* badges already have width/height from Tailwind utilities; we only need
     animation defaults here. transform-origin centred so scale stays in place. */
  transform-origin: center;
  will-change: transform, box-shadow, filter;
}

.hero-wave {
  transform-origin: center;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {

  .hero-icon-badge {
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }

  /* === Act 1: lightning bolt — 0.0–0.7 s (0% → 12% of cycle) ===
     Strengthened: scale 1.20 (was 1.14), shadow expanded ~2× and held
     longer, with a quick double-flash so the bolt actually reads as a
     "zap" rather than a faint twitch. */
  .hero-icon-bolt { animation-name: hero-anim-bolt; }
  @keyframes hero-anim-bolt {
    0%, 12%, 100% {
      transform: scale(1) rotate(0deg);
      filter: brightness(1);
      box-shadow: 0 8px 16px -8px rgba(44, 14, 111, 0.4);
    }
    3% {
      transform: scale(1.20) rotate(-6deg);
      filter: brightness(1.45);
      box-shadow: 0 0 56px 12px rgba(124, 58, 237, 0.75),
                  0 0 24px 4px rgba(168, 85, 247, 0.55);
    }
    5% {
      /* dip between flashes so the second flash reads as a distinct pulse */
      transform: scale(1.10) rotate(-2deg);
      filter: brightness(1.15);
      box-shadow: 0 0 28px 6px rgba(124, 58, 237, 0.4);
    }
    7% {
      /* second flash — slightly weaker, like a residual spark */
      transform: scale(1.16) rotate(4deg);
      filter: brightness(1.35);
      box-shadow: 0 0 48px 10px rgba(124, 58, 237, 0.65),
                  0 0 20px 3px rgba(168, 85, 247, 0.45);
    }
    10% {
      transform: scale(1.04) rotate(1deg);
      filter: brightness(1.08);
    }
  }

  /* === Act 2: check stamp — 1.0–1.9 s (16.7% → 31% of cycle) ===
     Strengthened: scale 1.22 (was 1.16), held peak (18→22% sits at the
     overshoot apex) before the bounce settles. */
  .hero-icon-check { animation-name: hero-anim-check; }
  @keyframes hero-anim-check {
    0%, 14%, 31%, 100% {
      transform: scale(1) rotate(0deg);
      box-shadow: 0 8px 16px -8px rgba(180, 167, 214, 0.4);
    }
    18% {
      transform: scale(1.22) rotate(-9deg);
      box-shadow: 0 0 36px 8px rgba(180, 167, 214, 0.7),
                  0 0 16px 2px rgba(124, 58, 237, 0.45);
    }
    22% {
      /* hold peak — same scale, slight rotation roll, shadow eased
         outward so the "stamp landed" reads for ~0.24 s */
      transform: scale(1.20) rotate(-4deg);
      box-shadow: 0 0 30px 6px rgba(180, 167, 214, 0.6),
                  0 0 14px 2px rgba(124, 58, 237, 0.35);
    }
    25% {
      transform: scale(0.94) rotate(3deg);
    }
    28% {
      transform: scale(1.03) rotate(-1deg);
    }
  }

  /* === Act 3: lightbulb — 2.5–3.7 s (41.7% → 61.7% of cycle) === */
  .hero-icon-bulb { animation-name: hero-anim-bulb; }
  @keyframes hero-anim-bulb {
    0%, 38%, 62%, 100% {
      transform: scale(1);
      filter: brightness(1);
      box-shadow: 0 8px 16px -8px rgba(245, 166, 35, 0.4);
    }
    44% {
      transform: scale(1.10);
      filter: brightness(1.18);
      box-shadow: 0 0 40px 10px rgba(251, 191, 36, 0.75),
                  0 0 80px 18px rgba(251, 191, 36, 0.30);
    }
    52% {
      transform: scale(1.04);
      filter: brightness(1.08);
      box-shadow: 0 0 28px 6px rgba(251, 191, 36, 0.5);
    }
  }

  /* === Background waves — gentle 11–14 s float loops ===
     Each wave gets a distinct duration + negative delay so they do not
     start in phase. translateX kept tiny (≤6 px) to avoid revealing the
     path endpoints; translateY does the main work. ease-in-out so motion
     never feels mechanical. */
  .hero-wave {
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
  }

  .hero-wave-1 {
    animation-name: hero-wave-float-a;
    animation-duration: 12s;
    animation-delay: 0s;
  }
  .hero-wave-2 {
    animation-name: hero-wave-float-b;
    animation-duration: 14s;
    animation-delay: -3s;
  }
  .hero-wave-3 {
    animation-name: hero-wave-float-a;
    animation-duration: 11s;
    animation-delay: -7s;
  }
  .hero-wave-4 {
    animation-name: hero-wave-float-b;
    animation-duration: 13s;
    animation-delay: -2s;
  }

  @keyframes hero-wave-float-a {
    0%   { transform: translate3d(0,    0,     0); }
    50%  { transform: translate3d(-4px, -10px, 0); }
    100% { transform: translate3d(3px,  -4px,  0); }
  }

  @keyframes hero-wave-float-b {
    0%   { transform: translate3d(0,   0,    0); }
    50%  { transform: translate3d(5px, 8px,  0); }
    100% { transform: translate3d(-2px, 4px, 0); }
  }
}