/* ============================================================
   King Of The Wings — Animations
   Keyframes + reduced-motion fallback
   ============================================================ */

/* ============================================================
   CTA pulse — the ORDER NOW signature glow
   Box-shadow only (never scale/transform — avoids layout shift)
   ============================================================ */

@keyframes cta-pulse {
  0%, 100% { box-shadow: var(--glow-cta); }
  50%      { box-shadow: var(--glow-cta-hover); }
}

/* ============================================================
   ORDER NOW — rotating conic-gradient ring ("shine" animation)
   Registers --btn-r as an <angle> so it animates smoothly inside
   the conic-gradient. Without @property the gradient would jump
   between keyframes instead of sweeping.
   ============================================================ */

@property --btn-r {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes order-shine {
  to { --btn-r: 360deg; }
}

/* ============================================================
   Hero scroll-hint bounce
   ============================================================ */

@keyframes hint-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ============================================================
   Generic reveal — for IntersectionObserver targets.
   Progressive enhancement: only hidden once JS confirms it can animate.
   If JS fails / is disabled, content stays visible.
   ============================================================ */

.js-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-long) var(--ease-out),
              transform var(--dur-long) var(--ease-out);
  will-change: opacity, transform;
}

.js-reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.js-reveal-ready [data-reveal='fade'] {
  transform: none;
}

.js-reveal-ready [data-reveal='scale'] {
  transform: scale(0.95);
}

.js-reveal-ready [data-reveal='scale'].is-revealed {
  transform: scale(1);
}

/* ============================================================
   Marquee — horizontal scrolling content (trophy strip)
   ============================================================ */

@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.marquee-track {
  display: inline-flex;
  gap: var(--space-8);
  padding-block: var(--space-5);
  animation: marquee-left 30s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* ============================================================
   Hue-shift — subtle on the sunburst gradient backgrounds
   ============================================================ */

@keyframes hue-drift {
  0%, 100% { filter: hue-rotate(0deg); }
  50%      { filter: hue-rotate(8deg); }
}

.hue-drift {
  animation: hue-drift 30s ease-in-out infinite;
}

/* ============================================================
   Reduced-motion fallback — global override
   ============================================================ */

@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;
  }

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

  .marquee-track {
    animation: none;
  }

  .hue-drift {
    animation: none;
  }
}