@layer animations {
  /* ──────────────────────────────────────
     Background animations
  ────────────────────────────────────── */
  @keyframes bg-shift {
    0%   { opacity: 0.8; transform: scale(1)      rotate(0deg);   }
    50%  { opacity: 1;   transform: scale(1.05)   rotate(1deg);   }
    100% { opacity: 0.9; transform: scale(1.02)   rotate(-1deg);  }
  }

  @keyframes stars-twinkle {
    0%   { opacity: 0.6; }
    50%  { opacity: 1;   }
    100% { opacity: 0.7; }
  }

  /* ──────────────────────────────────────
     Background planes (hero)
  ────────────────────────────────────── */
  @keyframes plane-ltr {
    from { transform: translateX(-120px); }
    to   { transform: translateX(calc(100vw + 120px)); }
  }

  @keyframes plane-rtl {
    from { transform: translateX(calc(100vw + 120px)); }
    to   { transform: translateX(-120px); }
  }

  /* ──────────────────────────────────────
     Phone mockup float
  ────────────────────────────────────── */
  @keyframes float {
    0%   { transform: translateY(0px)       rotate(0deg);    }
    33%  { transform: translateY(-12px)     rotate(0.5deg);  }
    66%  { transform: translateY(-6px)      rotate(-0.5deg); }
    100% { transform: translateY(0px)       rotate(0deg);    }
  }

  @keyframes float-tilted {
    0%   { transform: translateY(0px)  rotate(6deg);   }
    33%  { transform: translateY(-10px) rotate(7deg);  }
    66%  { transform: translateY(-4px)  rotate(5deg);  }
    100% { transform: translateY(0px)  rotate(6deg);   }
  }

  /* ──────────────────────────────────────
     Feature card icons
  ────────────────────────────────────── */

  /* Radar sweep */
  @keyframes radar-spin {
    to { transform: rotate(360deg); }
  }

  /* Radar blip blink */
  @keyframes blip {
    0%, 60%, 100% { opacity: 0; transform: scale(0.5); }
    30%           { opacity: 1; transform: scale(1.2); }
    45%           { opacity: 0.8; transform: scale(1); }
  }

  /* Plane gentle fly */
  @keyframes plane-fly {
    0%   { transform: translateX(0)   translateY(0)    rotate(0deg);   }
    25%  { transform: translateX(4px)  translateY(-4px) rotate(5deg);   }
    50%  { transform: translateX(0)   translateY(-6px) rotate(0deg);   }
    75%  { transform: translateX(-4px) translateY(-4px) rotate(-5deg); }
    100% { transform: translateX(0)   translateY(0)    rotate(0deg);   }
  }

  /* Passport stamp pop */
  @keyframes stamp-pop {
    0%   { transform: scale(1)    rotate(0deg);   opacity: 1; }
    30%  { transform: scale(1.3)  rotate(-10deg); opacity: 1; }
    50%  { transform: scale(0.95) rotate(5deg);   opacity: 1; }
    70%  { transform: scale(1.05) rotate(-3deg);  opacity: 1; }
    100% { transform: scale(1)    rotate(0deg);   opacity: 1; }
  }

  /* Bell ring */
  @keyframes bell-ring {
    0%  , 100% { transform: rotate(0deg); }
    10%         { transform: rotate(14deg); }
    20%         { transform: rotate(-10deg); }
    30%         { transform: rotate(8deg); }
    40%         { transform: rotate(-6deg); }
    50%         { transform: rotate(0deg); }
  }

  /* Live pulsing dot */
  @keyframes pulse-dot {
    0%, 100% { transform: scale(1);   box-shadow: 0 0 6px #22d3ee; }
    50%       { transform: scale(1.5); box-shadow: 0 0 12px #22d3ee, 0 0 20px rgba(34,211,238,0.4); }
  }

  /* ──────────────────────────────────────
     Gradient CTA background animation
  ────────────────────────────────────── */
  @keyframes gradient-shift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
  }

  .cta-section__inner {
    background: linear-gradient(
      -45deg,
      rgba(59,130,246,0.04),
      rgba(99,102,241,0.06),
      rgba(59,130,246,0.03),
      rgba(129,140,248,0.05)
    );
    background-size: 400% 400%;
    animation: gradient-shift 12s ease infinite;
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 5vw, 5rem);
    border: 1px solid var(--clr-glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* ──────────────────────────────────────
     Counter number scale-in
  ────────────────────────────────────── */
  @keyframes count-in {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
  }

  .stat-item__number {
    animation: count-in 0.5s var(--ease-spring) both;
  }

  /* ──────────────────────────────────────
     Section divider glow line
  ────────────────────────────────────── */
  .divider-glow {
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(59,130,246,0.4) 30%,
      rgba(99,102,241,0.5) 50%,
      rgba(59,130,246,0.4) 70%,
      transparent 100%
    );
    margin-block: var(--space-xl);
    animation: divider-pulse 4s ease-in-out infinite;
  }

  @keyframes divider-pulse {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
  }

  /* ──────────────────────────────────────
     Stagger children reveal helper
  ────────────────────────────────────── */
  .stagger-children > *:nth-child(1) { transition-delay: 0ms;   }
  .stagger-children > *:nth-child(2) { transition-delay: 120ms; }
  .stagger-children > *:nth-child(3) { transition-delay: 240ms; }
  .stagger-children > *:nth-child(4) { transition-delay: 360ms; }

  /* ──────────────────────────────────────
     Reduced motion
  ────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    [data-reveal] {
      opacity: 1;
      transform: none;
    }
  }
}