/* ==========================================================================
   ANIMATION.CSS — Reveal, Particles, Hover Micro-interactions, Popup
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Fade / Slide reveal variants (used via data-reveal="up|left|right") ---------- */
[data-reveal="left"]{ transform: translateX(-28px); }
[data-reveal="left"].is-visible{ transform: translateX(0); }
[data-reveal="right"]{ transform: translateX(28px); }
[data-reveal="right"].is-visible{ transform: translateX(0); }
[data-reveal="zoom"]{ transform: scale(.92); }
[data-reveal="zoom"].is-visible{ transform: scale(1); }

/* Stagger children helper: add data-reveal-group and style JS sets --d */
[data-reveal]{ transition-delay: var(--d, 0ms); }

/* ---------- Hero particles canvas ---------- */
.hero__particles{
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ---------- Floating badge subtle bob ---------- */
.hero__speed-badge{ animation: float-bob 4s ease-in-out infinite; }
@keyframes float-bob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* ---------- Popup Promo ---------- */
.popup-overlay{
  position: fixed; inset: 0; z-index: 900;
  background: rgba(7,17,41,.6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.popup-overlay.is-open{ opacity: 1; visibility: visible; }
.popup{
  width: min(420px, 92vw);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  text-align: center;
  transform: scale(.9);
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-lg);
}
.popup-overlay.is-open .popup{ transform: scale(1); }
.popup__close{
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-bg-soft);
  display: flex; align-items: center; justify-content: center;
}
.popup__badge{ font-size: 2.2rem; margin-bottom: 12px; }
.popup h3{ margin-bottom: 10px; }
.popup p{ color: var(--color-text-muted); margin-bottom: 22px; font-size: .9rem; }

/* ---------- Sidebar mobile nav transition ---------- */
.mobile-nav{
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(320px, 84vw);
  background: var(--color-surface);
  z-index: 700;
  transform: translateX(100%);
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
.mobile-nav.is-open{ transform: translateX(0); }
.mobile-nav__backdrop{
  position: fixed; inset: 0; z-index: 690;
  background: rgba(7,17,41,.5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.mobile-nav__backdrop.is-open{ opacity: 1; visibility: visible; }