/* ============================================
   RUTA 66 - Animations
   ============================================ */

/* ---- Neon Flicker ---- */
@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 5px #fff,
      0 0 10px var(--red),
      0 0 20px var(--red),
      0 0 40px #C41E3A,
      0 0 80px #C41E3A,
      3px 3px 0 #4a0010;
  }
  20%, 24%, 55% {
    text-shadow: none;
    color: rgba(196,30,58,0.5);
  }
}

/* ---- Sign Swing ---- */
@keyframes signSwing {
  0%, 100% { transform: translateY(-50%) rotate(-3deg); }
  50%       { transform: translateY(-50%) rotate(3deg); }
}

/* ---- Scroll Wheel ---- */
@keyframes scrollWheel {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(12px); }
}

/* ---- Bubble Rise ---- */
@keyframes bubbleRise {
  0%   { transform: translateY(0) scale(1); opacity: 0.8; }
  100% { transform: translateY(-200px) scale(0.3); opacity: 0; }
}

/* ---- Float Beer ---- */
@keyframes floatBeer {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%       { transform: translateY(-20px) rotate(5deg); }
}

/* ---- Light Sweep ---- */
@keyframes lightSweep {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.7; }
}

/* ---- Crowd Wave ---- */
@keyframes crowdWave {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(2.5); }
}

/* ---- Fade In Up ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* ---- Pulse Glow ---- */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(244,163,0,0.3); }
  50%       { box-shadow: 0 0 25px rgba(244,163,0,0.7), 0 0 50px rgba(244,163,0,0.3); }
}

/* ---- Slide In Left ---- */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- Slide In Right ---- */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- Bounce ---- */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  30%       { transform: translateY(-12px); }
  60%       { transform: translateY(-5px); }
}

/* ---- Spin ---- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Road Scroll ---- */
@keyframes roadScroll {
  from { background-position: 0 0; }
  to   { background-position: 0 200px; }
}

/* ---- Car Drive ---- */
@keyframes carDrive {
  0%   { left: -200px; }
  70%  { left: 55%; transform: translateX(-50%) rotate(0deg); }
  80%  { left: 60%; transform: translateX(-50%) rotate(5deg); }
  90%  { left: 70%; transform: translateX(-50%) rotate(20deg) translateY(-10px); }
  100% { left: 110%; transform: translateX(-50%) rotate(30deg) translateY(-40px); }
}

/* ---- Car Bounce ---- */
@keyframes carBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}

/* ---- Wheel Spin ---- */
@keyframes wheelSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Dust Cloud ---- */
@keyframes dustCloud {
  0%   { opacity: 0; transform: scale(0.2) translateX(0); }
  40%  { opacity: 0.6; }
  100% { opacity: 0; transform: scale(2) translateX(-60px); }
}

/* ---- Shake ---- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-4px); }
  30%, 70% { transform: translateX(4px); }
}

/* ---- Typing Cursor ---- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ---- Road Dash ---- */
@keyframes roadDash {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* ---- Stars Twinkle ---- */
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%       { opacity: 1; transform: scale(1.2); }
}

/* ---- Number Count ---- */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Gradient Shift ---- */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Banner slide directional transitions ---- */
@keyframes slideFromRight {
  from { opacity: 0; transform: translateX(60px) scale(1.02); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes slideFromLeft {
  from { opacity: 0; transform: translateX(-60px) scale(1.02); }
  to   { opacity: 1; transform: translateX(0)     scale(1); }
}
@keyframes exitToLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-40px); }
}
@keyframes exitToRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

/* ---- Road line expand ---- */
@keyframes roadLineExpand {
  0%   { opacity: 0;   transform: translateX(var(--tx, -50%)) scaleY(0); transform-origin: bottom; }
  40%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translateX(var(--tx, -50%)) scaleY(1); }
}

/* ---- Slide Transition classes ---- */
.slide-enter {
  animation: fadeInUp 0.6s ease forwards;
}

/* ---- Cookie Banner ---- */
@keyframes cookieBannerIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cookieIconPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25%       { transform: scale(1.15) rotate(-10deg); }
  75%       { transform: scale(1.1) rotate(10deg); }
}

/* ---- Page Loader ---- */
@keyframes loaderBar {
  0%   { width: 0%; }
  50%  { width: 70%; }
  100% { width: 100%; }
}

/* ---- Background Pan ---- */
@keyframes bgPan {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* ---- Heartbeat ---- */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.15); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.1); }
  56%       { transform: scale(1); }
}

/* ---- Smoke ---- */
@keyframes smoke {
  0%   { opacity: 0.8; transform: translateY(0) scale(0.5); }
  100% { opacity: 0; transform: translateY(-60px) scale(1.5); }
}

/* ---- Utility animation classes ---- */
.anim-pulse-glow  { animation: pulseGlow 2s ease-in-out infinite; }
.anim-bounce      { animation: bounce 2s ease-in-out infinite; }
.anim-float-beer  { animation: floatBeer 4s ease-in-out infinite; }
.anim-heartbeat   { animation: heartbeat 1.5s ease-in-out infinite; }
.anim-neon-flicker { animation: neonFlicker 4s infinite; }