/* ============================================================
   animations.css — MotoGarage
   ============================================================ */

/* Counter number animation */
@keyframes count-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shimmer skeleton loading */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Pulse ring (badge) */
@keyframes pulse-ring {
  0%   { transform: scale(.8); opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Tab indicator slide */
@keyframes tab-slide {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Card entrance */
@keyframes card-in {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Stripe dash */
@keyframes dash {
  to { stroke-dashoffset: 0; }
}

/* Topbar scroll marquee */
.marcas-track-clone { pointer-events: none; }

/* Nav active underline */
.nav-a.active-nav {
  position: relative;
}
.nav-a.active-nav::after {
  content: '';
  position: absolute; bottom: 2px; left: 13px; right: 13px;
  height: 2px; background: var(--rojo);
  border-radius: 2px;
  animation: tab-slide .25s ease forwards;
  transform-origin: left;
}

/* Hover tilt on moto cards */
.moto-card {
  transform-style: preserve-3d;
}

/* Form focus ripple */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  animation: input-focus .3s ease forwards;
}
@keyframes input-focus {
  from { box-shadow: 0 0 0 0 rgba(232,28,28,.2); }
  to   { box-shadow: 0 0 0 4px rgba(232,28,28,.1); }
}

/* Success message */
.form-success {
  text-align: center; padding: 32px 20px;
  animation: card-in .4s ease forwards;
}
.form-success svg {
  color: var(--verde-ok); margin: 0 auto 16px;
  animation: bounce-in .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes bounce-in {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
.form-success h3 {
  font-family: var(--font-tec); font-size: 1.4rem; font-weight: 700;
  color: var(--marfil); margin-bottom: 8px;
}
.form-success p { font-size: .9rem; color: var(--plata-claro); }

/* Preloader */
.preloader {
  position: fixed; inset: 0; background: var(--negro);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  z-index: 9998; transition: opacity .5s ease, visibility .5s ease;
}
.preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-logo { height: 60px; }
.preloader-bar {
  width: 160px; height: 2px; background: var(--acero-claro); border-radius: 2px; overflow: hidden;
}
.preloader-fill {
  height: 100%; background: var(--rojo); border-radius: 2px;
  animation: preload-fill 1.2s ease forwards;
}
@keyframes preload-fill {
  from { width: 0; }
  to   { width: 100%; }
}