/* ==========================================================================
   ANIMATIONS.CSS — Scroll reveals, transitions, counters, motion
   Battlezone Laser Tag — Website Redesign 2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll reveal system
   -------------------------------------------------------------------------- */

/* Default: elements start invisible */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--ease-out),
              transform 0.65s var(--ease-out);
}

.rv.rv-left {
  transform: translateX(-24px);
}

.rv.rv-right {
  transform: translateX(24px);
}

.rv.rv-scale {
  transform: scale(0.95);
}

/* Animated state */
.rv.visible {
  opacity: 1;
  transform: none;
}

/* Stagger delay classes */
.d1 { transition-delay: 0.05s; }
.d2 { transition-delay: 0.12s; }
.d3 { transition-delay: 0.19s; }
.d4 { transition-delay: 0.26s; }
.d5 { transition-delay: 0.33s; }
.d6 { transition-delay: 0.40s; }

/* --------------------------------------------------------------------------
   Parallax hero bg (CSS-only, subtle)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-bg-img {
    will-change: transform;
    transition: transform 0.05s linear;
  }
}

/* --------------------------------------------------------------------------
   Ochre heading underline draw-on
   -------------------------------------------------------------------------- */
.draw-underline {
  position: relative;
  display: inline-block;
}

.draw-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--ochre);
  transition: width 0.9s var(--ease-out);
  transition-delay: 0.3s;
}

.draw-underline.red::after {
  background: var(--red);
}

.draw-underline.visible::after {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Package card border-draw
   -------------------------------------------------------------------------- */
.pkg-card {
  --border-progress: 0%;
}

.pkg-card.border-animate::before {
  width: 100%;
  transition: width 0.7s var(--ease-out);
}

/* --------------------------------------------------------------------------
   Counter animation
   -------------------------------------------------------------------------- */
[data-counter] {
  display: inline-block;
  transition: opacity var(--t-slow) var(--ease);
}

[data-counter].counting {
  /* Counting in progress — JS updates textContent */
}

/* --------------------------------------------------------------------------
   Entrance animations
   -------------------------------------------------------------------------- */

/* Fade up (default for most elements) */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide in left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   Hero entrance
   -------------------------------------------------------------------------- */
.hero-eyebrow {
  animation: fadeIn 0.6s var(--ease-out) 0.2s both;
}

.hero-h1 {
  animation: fadeUp 0.8s var(--ease-out) 0.35s both;
}

.hero-sub {
  animation: fadeUp 0.7s var(--ease-out) 0.5s both;
}

.hero-ctas {
  animation: fadeUp 0.7s var(--ease-out) 0.65s both;
}

.hero-trust {
  animation: fadeUp 0.6s var(--ease-out) 0.8s both;
}

/* --------------------------------------------------------------------------
   Card hover micro-interactions
   -------------------------------------------------------------------------- */
.card,
.pkg-card,
.weapon-card,
.review-card {
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}

/* --------------------------------------------------------------------------
   Button pulse (red CTA — draws attention on idle)
   -------------------------------------------------------------------------- */
@keyframes btnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(204, 32, 39, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(204, 32, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(204, 32, 39, 0); }
}

.btn-red.pulse {
  animation: btnPulse 2.5s ease-out infinite;
}

/* --------------------------------------------------------------------------
   Floating CTA entrance
   -------------------------------------------------------------------------- */
@keyframes floatCta {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.mobile-book-btn {
  animation: floatCta 0.5s var(--ease-out) 1.2s both;
}

/* --------------------------------------------------------------------------
   Audience panel interaction
   -------------------------------------------------------------------------- */
.audience-panel {
  transition: flex var(--t-slow) var(--ease);
}

/* --------------------------------------------------------------------------
   Shimmer (defined in global, keyframe here too for completeness)
   -------------------------------------------------------------------------- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* --------------------------------------------------------------------------
   Marquee pause on hover
   -------------------------------------------------------------------------- */
.marquee-track:hover .marquee-inner {
  animation-play-state: paused;
}

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

  .rv {
    opacity: 1;
    transform: none;
  }

  .marquee-inner {
    animation: none;
    width: auto;
  }
}