/* ═══════════════════════════════════════════════════════════
   ACE RAID RALLYE — Animaciones y keyframes
   ═══════════════════════════════════════════════════════════ */

/* ── Glitch effect en título ─────────────────────────────── */
.hero-title-glitch {
  position: absolute;
  inset: 0;
  color: transparent;
  pointer-events: none;
  user-select: none;
  display: block;
  font-family: var(--font-pixel);
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.hero-title {
  position: relative;
  isolation: isolate;
}

.hero-title-glitch::before,
.hero-title-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
}
.hero-title-glitch::before {
  color: var(--cyan);
  text-shadow: -2px 0 rgba(0,200,232,.8);
  animation: glitch-top 4s steps(1) infinite;
}
.hero-title-glitch::after {
  color: var(--orange);
  text-shadow: 2px 0 rgba(232,100,32,.8);
  animation: glitch-bottom 4s steps(1) infinite;
  animation-delay: .1s;
}

@keyframes glitch-top {
  0%, 92%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  93%  { clip-path: inset(0 0 60% 0);  transform: translate(-3px, -2px); }
  94%  { clip-path: inset(20% 0 50% 0); transform: translate(3px, 0); }
  95%  { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 1px); }
  96%  { clip-path: inset(0 0 100% 0);  transform: none; }
  97%  { clip-path: inset(10% 0 70% 0); transform: translate(4px, -1px); }
  98%  { clip-path: inset(0 0 100% 0);  transform: none; }
}

@keyframes glitch-bottom {
  0%, 92%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
  93%  { clip-path: inset(60% 0 0 0);  transform: translate(3px, 2px); }
  94%  { clip-path: inset(50% 0 20% 0); transform: translate(-3px, 0); }
  95%  { clip-path: inset(30% 0 40% 0); transform: translate(2px, -1px); }
  96%  { clip-path: inset(100% 0 0 0);  transform: none; }
  97%  { clip-path: inset(70% 0 10% 0); transform: translate(-4px, 1px); }
  98%  { clip-path: inset(100% 0 0 0);  transform: none; }
}

/* ── Parpadeo genérico ───────────────────────────────────── */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ── Pulso del sol ───────────────────────────────────────── */
@keyframes sun-pulse {
  0%, 100% {
    box-shadow:
      0 0 40px 20px rgba(240,184,40,.5),
      0 0 80px 40px rgba(232,120,40,.3),
      0 0 160px 80px rgba(200,64,24,.15);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 50px 25px rgba(240,184,40,.6),
      0 0 100px 50px rgba(232,120,40,.35),
      0 0 200px 100px rgba(200,64,24,.2);
    transform: scale(1.04);
  }
}

/* ── Drift polvo ─────────────────────────────────────────── */
@keyframes dust-drift {
  0%, 100% { transform: translateX(0) scaleX(1); opacity: .6; }
  50%       { transform: translateX(8px) scaleX(1.1); opacity: .4; }
}

/* ── Trail del coche ─────────────────────────────────────── */
@keyframes dust-trail {
  0%, 100% { transform: translateY(-50%) scaleX(1); opacity: .6; }
  50%       { transform: translateY(-50%) scaleX(0.8); opacity: .3; }
}

/* ── Idle del coche ──────────────────────────────────────── */
@keyframes car-idle {
  0%, 100% { transform: translateY(0); }
  25%       { transform: translateY(-2px) rotate(.3deg); }
  75%       { transform: translateY(1px) rotate(-.2deg); }
}

/* ── Ruido CRT ───────────────────────────────────────────── */
@keyframes noise-shift {
  0%   { background-position: 0px   0px; }
  25%  { background-position: -3px  2px; }
  50%  { background-position: 4px  -2px; }
  75%  { background-position: -2px  3px; }
  100% { background-position: 0px   0px; }
}

/* ── Scroll hint ─────────────────────────────────────────── */
@keyframes bounce-down {
  from { transform: translateY(0); opacity: .4; }
  to   { transform: translateY(6px); opacity: 1; }
}

/* ── Ticker ──────────────────────────────────────────────── */
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Reveal de secciones (JS agrega .visible) ────────────── */
.reveal-item:nth-child(1) { transition-delay: 0s; }
.reveal-item:nth-child(2) { transition-delay: .1s; }
.reveal-item:nth-child(3) { transition-delay: .2s; }
.reveal-item:nth-child(4) { transition-delay: .3s; }
.reveal-item:nth-child(5) { transition-delay: .4s; }
.reveal-item:nth-child(6) { transition-delay: .5s; }

/* ── Entrada hero (primera carga) ────────────────────────── */
.hero-content {
  animation: hero-enter 1.2s var(--ease-out) both;
}
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.hero-badge    { animation-delay: .1s; }
.hero-title    { animation: hero-enter 1.2s var(--ease-out) .2s both; }
.hero-tagline  { animation: hero-enter 1.2s var(--ease-out) .5s both; }
.hero-specs    { animation: hero-enter 1.2s var(--ease-out) .7s both; }
.hero-cta      { animation: hero-enter 1.2s var(--ease-out) .9s both; }
.scroll-hint   { animation: hero-enter 1.2s var(--ease-out) 1.4s both; }

/* ── Scanlines animadas ──────────────────────────────────── */
.crt-scanlines {
  animation: scanlines-scroll 8s linear infinite;
}
@keyframes scanlines-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 24px; }
}

/* ── Odómetro: animación JS-driven ──────────────────────── */
.odometer {
  display: inline-block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  transition: color .3s;
}

/* ── Card hover shimmer ──────────────────────────────────── */
.feature-card::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,.04) 50%,
    transparent 80%
  );
  transform: skewX(-10deg);
  transition: left .5s var(--ease-out);
  pointer-events: none;
}
.feature-card:hover::after { left: 120%; }

/* ── Download card shine ─────────────────────────────────── */
.download-card::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 30%; height: 200%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,.04) 50%,
    transparent 80%
  );
  transform: skewX(-10deg);
  transition: left .5s var(--ease-out);
  pointer-events: none;
}
.download-card { overflow: hidden; position: relative; }
.download-card:not(.download-card--steam):hover::after { left: 130%; }

/* ── Roadbook entry pulse ────────────────────────────────── */
@keyframes rb-pulse {
  0%, 100% { background: rgba(240,200,32,.08); }
  50%       { background: rgba(240,200,32,.14); }
}
.rb-entry--active { animation: rb-pulse 2s ease-in-out infinite; }

/* ── Partícula canvas fade ───────────────────────────────── */
@keyframes particle-fade {
  from { opacity: .6; }
  to   { opacity: 0; }
}

/* ── Glow pulse en stat numbers ──────────────────────────── */
@keyframes stat-glow {
  0%, 100% { text-shadow: var(--glow-orange); }
  50%       {
    text-shadow:
      0 0 12px rgba(232,100,32,1),
      0 0 32px rgba(232,100,32,.6),
      0 0 64px rgba(232,100,32,.3);
  }
}
.stat-card:hover .stat-number {
  animation: stat-glow 1.5s ease-in-out infinite;
}

/* ── Navbar: indicador de sección activa ─────────────────── */
.nav-link.active {
  color: var(--white);
  border-color: var(--orange);
}

/* ── Scroll indicator en header ──────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--yellow));
  box-shadow: var(--glow-orange);
  z-index: 200;
  transition: width .1s linear;
}

/* ── Focus ring animado ──────────────────────────────────── */
@keyframes focus-pulse {
  0%, 100% { outline-color: var(--cyan); }
  50%       { outline-color: var(--yellow); }
}
:focus-visible {
  animation: focus-pulse 1.5s ease-in-out infinite;
}