/* ============================================================
   titleAnimation.css — Animación de entrada hero (index)
   Secuencia:
     0.00s → hero-label aparece
     0.20s → coche entra desde la izquierda a velocidad constante
     ~0.75s → título aparece mientras el coche cruza
     ~1.00s → subtítulo aparece
     el coche sale por la derecha del viewport y desaparece
   ============================================================ */

.hero {
  overflow: hidden;
  position: relative;
}

/* ── Coche ─────────────────────────────────────────────────── */
.f1-car-intro {
  position: fixed;
  top: 30vh;
  left: -300px;
  width: clamp(160px, 20vw, 260px);
  height: auto;
  z-index: 100;
  pointer-events: none;
  animation: carSweep 1.2s linear forwards;
  animation-delay: 0.2s;
}

@keyframes carSweep {
  from { left: -300px; }
  to   { left: 110vw;  }
}

/* ── Textos ────────────────────────────────────────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.hero-label {
  opacity: 0;
  animation: heroFadeUp 0.45s ease forwards;
  animation-delay: 0s;
}

.hero-title {
  opacity: 0;
  animation: heroFadeUp 0.55s ease forwards;
  animation-delay: 0.65s;
}

.hero-sub {
  opacity: 0;
  animation: heroFadeUp 0.45s ease forwards;
  animation-delay: 0.9s;
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .f1-car-intro { display: none; animation: none; }
  .hero-title, .hero-label, .hero-sub {
    opacity: 1; transform: none; animation: none;
  }
}