/* ============================================================================
   site.css — estilos propios del sitio estático (Renfe OpenData Hackathon)
   Externaliza todo lo que en el build de React iba inline:
   - degradados magenta del hero y del CTA
   - animación de "reveal" y sus retardos escalonados
   - capa de imagen de fondo del hero + overlay
   - banda editorial de equipo/personas
   Sin CSS inline en el HTML. Cargar DESPUÉS del CSS de Tailwind.
   ========================================================================== */

/* --- Superficies con degradado magenta (antes inline en hero y CTA) ------- */

/* Degradado original del build, reutilizado. */
.cta-surface {
  background-image: radial-gradient(
    125% 125% at 50% 18%,
    oklch(0.47 0.175 341.579) 0%,
    var(--rf-magenta) 52%,
    oklch(0.33 0.155 341.579) 100%
  );
}

/* En el hero el degradado va en una capa overlay translúcida para dejar ver
   la fotografía del tren manteniendo la legibilidad del texto blanco. */
.hero-surface {
  background-color: var(--rf-magenta); /* color base si la imagen no carga */
}

/* --- Imagen de fondo del hero -------------------------------------------- */

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Capa 1: scrim oscuro central detrás del texto (legibilidad garantizada).
     Capa 2: viñeta inferior. Capa 3: degradado magenta de marca sobre la foto,
     algo translúcido para que la fotografía se perciba como textura. */
  background-image:
    radial-gradient(ellipse 92% 62% at 50% 52%, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.2) 46%, rgba(0, 0, 0, 0) 76%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.32) 100%),
    radial-gradient(
      125% 125% at 50% 18%,
      color-mix(in oklab, oklch(0.47 0.175 341.579) 40%, transparent) 0%,
      color-mix(in oklab, var(--rf-magenta) 34%, transparent) 52%,
      color-mix(in oklab, oklch(0.33 0.155 341.579) 48%, transparent) 100%
    );
}

/* El contenido del hero por encima de imagen + overlay. */
.hero-content {
  position: relative;
  z-index: 2;
}

/* En móvil reforzamos el overlay para garantizar contraste sobre la foto. */
@media (max-width: 640px) {
  .hero-overlay {
    background-image:
      radial-gradient(ellipse 110% 55% at 50% 52%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0) 80%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.38) 100%),
      radial-gradient(
        140% 120% at 50% 16%,
        color-mix(in oklab, oklch(0.47 0.175 341.579) 46%, transparent) 0%,
        color-mix(in oklab, var(--rf-magenta) 40%, transparent) 55%,
        color-mix(in oklab, oklch(0.33 0.155 341.579) 54%, transparent) 100%
      );
  }
}

/* --- Carrusel infinito de la jornada (marquee CSS, sin JS) ---------------- */
/* Tira full-bleed que se desplaza en bucle continuo de derecha a izquierda.
   El track contiene el set de imágenes DUPLICADO; al animar de 0 a -50% el
   punto final coincide con el inicio de la copia => bucle sin saltos. */

.rf-marquee {
  width: 100%;
  overflow: hidden; /* clipa el desbordamiento: evita scroll horizontal de página */
}

.rf-marquee__track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: rf-marquee-scroll 75s linear infinite;
}

.rf-marquee__item {
  flex: 0 0 auto;
}

/* Todas las imágenes al MISMO tamaño (ancho y alto fijos) + object-cover. */
.rf-marquee__item img {
  display: block;
  width: 25.2rem;
  height: 15.75rem;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border-radius: calc(var(--radius) + 8px); /* = rounded-2xl */
  border: 1px solid color-mix(in srgb, var(--rf-gray-3) 50%, transparent);
  background-color: var(--surface-muted);
}

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

@media (max-width: 640px) {
  .rf-marquee__track {
    gap: 1rem;
  }
  .rf-marquee__item img {
    width: 17.85rem;
    height: 11.55rem;
  }
}

/* Sin movimiento automático si el usuario prefiere reducir el movimiento;
   en su lugar, la tira se puede desplazar manualmente. */
@media (prefers-reduced-motion: reduce) {
  .rf-marquee__track {
    animation: none;
  }
  .rf-marquee {
    overflow-x: auto;
  }
}

/* --- Sistema de "reveal" (entrada al hacer scroll) ------------------------ */
/* Replica el comportamiento del build: los .reveal-item empiezan ocultos y
   aparecen con un fadeUp cuando su sección se marca como revealed (lo hace
   app.js vía IntersectionObserver). Los retardos antes inline ahora viven en
   atributos data-delay mapeados más abajo. */

@keyframes rf-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mejora progresiva: solo se oculta/anima si hay JS (clase .js en <html>).
   Sin JS, todo el contenido permanece visible (nunca secciones en blanco). */
.js [data-reveal="idle"] .reveal-item {
  opacity: 0;
}

.js [data-reveal="revealed"] .reveal-item {
  animation: rf-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: opacity, transform;
}

/* Mapa de retardos escalonados (antes style="animation-delay:Xms"). */
[data-delay="0"]   { animation-delay: 0ms; }
[data-delay="70"]  { animation-delay: 70ms; }
[data-delay="90"]  { animation-delay: 90ms; }
[data-delay="100"] { animation-delay: 100ms; }
[data-delay="120"] { animation-delay: 120ms; }
[data-delay="130"] { animation-delay: 130ms; }
[data-delay="140"] { animation-delay: 140ms; }
[data-delay="150"] { animation-delay: 150ms; }
[data-delay="160"] { animation-delay: 160ms; }
[data-delay="180"] { animation-delay: 180ms; }
[data-delay="220"] { animation-delay: 220ms; }
[data-delay="230"] { animation-delay: 230ms; }
[data-delay="240"] { animation-delay: 240ms; }
[data-delay="260"] { animation-delay: 260ms; }
[data-delay="310"] { animation-delay: 310ms; }
[data-delay="320"] { animation-delay: 320ms; }
[data-delay="330"] { animation-delay: 330ms; }
[data-delay="340"] { animation-delay: 340ms; }
[data-delay="390"] { animation-delay: 390ms; }
[data-delay="400"] { animation-delay: 400ms; }
[data-delay="410"] { animation-delay: 410ms; }
[data-delay="420"] { animation-delay: 420ms; }
[data-delay="470"] { animation-delay: 470ms; }
[data-delay="480"] { animation-delay: 480ms; }
[data-delay="490"] { animation-delay: 490ms; }
[data-delay="500"] { animation-delay: 500ms; }
[data-delay="520"] { animation-delay: 520ms; }
[data-delay="540"] { animation-delay: 540ms; }
[data-delay="610"] { animation-delay: 610ms; }
[data-delay="680"] { animation-delay: 680ms; }
[data-delay="750"] { animation-delay: 750ms; }
[data-delay="820"] { animation-delay: 820ms; }

/* Respeto de preferencias de movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] .reveal-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- Menú móvil ----------------------------------------------------------- */

#mobile-nav[hidden] {
  display: none;
}

#mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}