/* ==========================================================================
   ANIMATIONS
   Reveal-on-scroll, hover effects, decorative loops.
   All keyframes here so they can be reused across components.
   ========================================================================== */

/* ----------------------------------------------------------------------
   KEYFRAMES
   ---------------------------------------------------------------------- */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-start {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-end {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.85); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes blur-in {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes float-x {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(8px); }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(239, 177, 42, 0.6); }
  70%  { box-shadow: 0 0 0 18px rgba(239, 177, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 177, 42, 0); }
}

@keyframes pulse-ring-red {
  0%   { box-shadow: 0 0 0 0 rgba(207, 45, 45, 0.55); }
  70%  { box-shadow: 0 0 0 22px rgba(207, 45, 45, 0); }
  100% { box-shadow: 0 0 0 0 rgba(207, 45, 45, 0); }
}

@keyframes wave-flag {
  0%, 100% { transform: skewY(0); }
  50%      { transform: skewY(-1.5deg); }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-2deg); }
  75%      { transform: rotate(2deg); }
}

@keyframes bounce-in {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.06); }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes count-up-bg {
  from { background-position: 0 100%; }
  to   { background-position: 0 0; }
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@keyframes type {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink-caret {
  50% { border-color: transparent; }
}

@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 4px currentColor); opacity: 0.85; }
  50%      { filter: drop-shadow(0 0 18px currentColor); opacity: 1; }
}

@keyframes ripple {
  to { transform: scale(2.5); opacity: 0; }
}

/* ----------------------------------------------------------------------
   ANIMATION UTILITIES
   ---------------------------------------------------------------------- */

.animate-fade-in     { animation: fade-in var(--motion-slow) var(--ease-out) both; }
.animate-slide-up    { animation: slide-up var(--motion-slow) var(--ease-out) both; }
.animate-slide-down  { animation: slide-down var(--motion-slow) var(--ease-out) both; }
.animate-slide-start { animation: slide-in-start var(--motion-slow) var(--ease-out) both; }
.animate-slide-end   { animation: slide-in-end var(--motion-slow) var(--ease-out) both; }
.animate-scale-in    { animation: scale-in var(--motion-slow) var(--ease-out) both; }
.animate-pop-in      { animation: pop-in var(--motion-slow) var(--ease-spring) both; }
.animate-blur-in     { animation: blur-in var(--motion-slow) var(--ease-out) both; }
.animate-bounce-in   { animation: bounce-in var(--motion-slow) var(--ease-spring) both; }

.animate-float       { animation: float-y 4s var(--ease-in-out) infinite; }
.animate-pulse-ring  { animation: pulse-ring 2s var(--ease-out) infinite; }
.animate-pulse-ring-red { animation: pulse-ring-red 2s var(--ease-out) infinite; }
.animate-wave        { animation: wave-flag 6s var(--ease-in-out) infinite; transform-origin: top left; }
.animate-glow        { animation: glow 3s var(--ease-in-out) infinite; }
.animate-spin-slow   { animation: spin-slow 8s linear infinite; }

.animate-delay-1     { animation-delay: 0.1s; }
.animate-delay-2     { animation-delay: 0.2s; }
.animate-delay-3     { animation-delay: 0.3s; }
.animate-delay-4     { animation-delay: 0.4s; }
.animate-delay-5     { animation-delay: 0.5s; }
.animate-delay-6     { animation-delay: 0.6s; }
.animate-delay-7     { animation-delay: 0.7s; }
.animate-delay-8     { animation-delay: 0.8s; }

/* Stagger children (uses CSS counter) */
.stagger-children > * {
  --i: 0;
  opacity: 0;
  animation: slide-up var(--motion-slow) var(--ease-out) forwards;
  animation-delay: calc(80ms * var(--i));
}
.stagger-children > :nth-child(1)  { --i: 1; }
.stagger-children > :nth-child(2)  { --i: 2; }
.stagger-children > :nth-child(3)  { --i: 3; }
.stagger-children > :nth-child(4)  { --i: 4; }
.stagger-children > :nth-child(5)  { --i: 5; }
.stagger-children > :nth-child(6)  { --i: 6; }
.stagger-children > :nth-child(7)  { --i: 7; }
.stagger-children > :nth-child(8)  { --i: 8; }
.stagger-children > :nth-child(9)  { --i: 9; }
.stagger-children > :nth-child(10) { --i: 10; }
.stagger-children > :nth-child(11) { --i: 11; }
.stagger-children > :nth-child(12) { --i: 12; }

/* Scroll-driven reveals (IntersectionObserver flips .is-revealed) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--motion-slow) var(--ease-out),
              transform var(--motion-slow) var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-blur {
  opacity: 0;
  filter: blur(8px);
  transition: opacity var(--motion-slow) var(--ease-out),
              filter var(--motion-slow) var(--ease-out);
}

.reveal-blur.is-revealed {
  opacity: 1;
  filter: blur(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--motion-slow) var(--ease-out),
              transform var(--motion-slow) var(--ease-spring);
}

.reveal-scale.is-revealed {
  opacity: 1;
  transform: scale(1);
}

.reveal-slide-l {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity var(--motion-slow) var(--ease-out),
              transform var(--motion-slow) var(--ease-out);
}

.reveal-slide-l.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-slide-r {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity var(--motion-slow) var(--ease-out),
              transform var(--motion-slow) var(--ease-out);
}

.reveal-slide-r.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal[data-reveal-delay="100"] { transition-delay: 100ms; }
.reveal[data-reveal-delay="200"] { transition-delay: 200ms; }
.reveal[data-reveal-delay="300"] { transition-delay: 300ms; }
.reveal[data-reveal-delay="400"] { transition-delay: 400ms; }
.reveal[data-reveal-delay="500"] { transition-delay: 500ms; }
.reveal[data-reveal-delay="600"] { transition-delay: 600ms; }
.reveal[data-reveal-delay="700"] { transition-delay: 700ms; }
.reveal[data-reveal-delay="800"] { transition-delay: 800ms; }

/* Hover lift */
.hover-lift {
  transition: transform var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hover-tilt {
  transition: transform var(--motion-base) var(--ease-out);
  transform-origin: center;
}

.hover-tilt:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-2px);
}

/* Shimmer text on hover */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--text-strong),
    var(--color-navy-600),
    var(--color-gold-600),
    var(--text-strong)
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

/* Underline reveal */
.underline-reveal {
  position: relative;
  display: inline-block;
}

.underline-reveal::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -3px;
  block-size: 3px;
  background: var(--color-gold-500);
  border-radius: 1.5px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-base) var(--ease-out);
}

.underline-reveal:hover::after,
.underline-reveal:focus-visible::after {
  transform: scaleX(1);
}

/* ----------------------------------------------------------------------
   COUNT-UP NUMBERS
   ---------------------------------------------------------------------- */

[data-count] {
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------
   PARALLAX (light)
   ---------------------------------------------------------------------- */

.parallax-slow {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ----------------------------------------------------------------------
   RIPPLE — button click effect (JS-augmented)
   ---------------------------------------------------------------------- */

.ripple {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.4), transparent 65%);
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  animation: ripple 0.6s var(--ease-out);
}

/* ----------------------------------------------------------------------
   AURORA / GLOW BACKDROP
   ---------------------------------------------------------------------- */

.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  inline-size: 50rem;
  block-size: 50rem;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  animation: float-y 10s var(--ease-in-out) infinite;
}

.aurora::before {
  background: radial-gradient(circle, var(--color-navy-500) 0%, transparent 70%);
  inset-block-start: -20%;
  inset-inline-start: -10%;
}

.aurora::after {
  background: radial-gradient(circle, var(--color-red-500) 0%, transparent 70%);
  inset-block-end: -20%;
  inset-inline-end: -10%;
  animation-delay: -3s;
}

/* ----------------------------------------------------------------------
   TICKER — horizontally scrolling text
   ---------------------------------------------------------------------- */

.ticker {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ticker__track {
  display: flex;
  gap: var(--space-12);
  flex-shrink: 0;
  min-inline-size: 100%;
  animation: ticker 35s linear infinite;
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  font-size: var(--font-size-md);
}

.ticker__item::before {
  content: "★";
  color: var(--color-gold-500);
  font-size: 0.875em;
}

.ticker--paused .ticker__track,
.ticker:hover .ticker__track {
  animation-play-state: paused;
}

/* ----------------------------------------------------------------------
   GRADIENT TEXT ANIMATION (used on home headline)
   ---------------------------------------------------------------------- */

.gradient-text-anim {
  background: linear-gradient(
    120deg,
    var(--color-gold-300) 0%,
    var(--color-gold-500) 30%,
    var(--color-red-400) 60%,
    var(--color-gold-500) 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 14s linear infinite;
}

/* ----------------------------------------------------------------------
   CARET / CURSOR for hero typewriter
   ---------------------------------------------------------------------- */

.caret::after {
  content: "";
  display: inline-block;
  inline-size: 0.08em;
  block-size: 1em;
  background: currentColor;
  margin-inline-start: 0.05em;
  vertical-align: -0.05em;
  animation: blink-caret 1s steps(2) infinite;
}

/* ----------------------------------------------------------------------
   FLAG WAVE — decorative
   ---------------------------------------------------------------------- */

.flag-wave {
  display: inline-block;
  animation: wave-flag 3s ease-in-out infinite;
  transform-origin: bottom left;
}

/* ----------------------------------------------------------------------
   ENTRANCE — combined for first-render
   ---------------------------------------------------------------------- */

.first-load {
  animation: blur-in var(--motion-slowest) var(--ease-out) both;
}

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

  .reveal,
  .reveal-blur,
  .reveal-scale,
  .reveal-slide-l,
  .reveal-slide-r {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .animate-float,
  .animate-pulse-ring,
  .animate-pulse-ring-red,
  .animate-glow,
  .animate-spin-slow,
  .shimmer-text,
  .gradient-text-anim,
  .ticker__track {
    animation: none !important;
  }
}