/* ═══ Inicio (R-41) ═══════════════════════════════════════════════════
   Maqueta D (D-16) con el fondo de maquetas/home-fondo/: los videos del
   juego pasan en carrusel detrás de toda la página; el inicio queda con la
   presentación a la izquierda y el lado derecho libre para el personaje;
   abajo, noticias a la izquierda y eventos + top 5 a la derecha.
   Compone los bloques de base.css (page-header, server-status, race, card,
   countdown); acá va solo lo propio de la home. Mobile-first. */

/* ── Fondo: arte del trono y videos ───────────────────────────────── */
/* Queda quieto detrás de todo; el body aísla el apilado para que el fondo
   quede arriba del color de la página y abajo del contenido. */
body:has(.home-backdrop) {
  isolation: isolate;
  overflow-x: clip;  /* la capa de noticias va a todo el ancho (100vw) */
}
/* El arte del trono es el respaldo (tokens.css §12): se ve mientras carga el
   video, si no se puede reproducir, con movimiento reducido o pausado, y si
   la carpeta de videos está vacía. El celular baja el recorte vertical. */
.home-backdrop {
  position: fixed;
  z-index: var(--z-backdrop);
  inset: 0;
  overflow: hidden;
  background: var(--home-backdrop-image-mobile) var(--backdrop-position) / cover no-repeat var(--color-bg);
}
.home-backdrop__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--backdrop-position);
  opacity: 0;
}
/* El video aparece (con fundido) recién cuando arrancó: home.js le pone
   data-backdrop-ready. Así nunca tapa el arte con un cuadro negro. */
.home-backdrop__video[data-backdrop-active][data-backdrop-ready] { opacity: 1; }
/* "Pausar animaciones" del pie (base.css §17o): vuelve el arte quieto */
[data-ambient-motion="off"] .home-backdrop__video[data-backdrop-active][data-backdrop-ready] { opacity: 0; }
/* Oscurece el lado del texto (arriba en el celular, izquierda en escritorio) y
   deja más claro el personaje */
.home-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--backdrop-overlay-direction), var(--backdrop-overlay-strong), var(--backdrop-overlay-light) var(--backdrop-overlay-reach));
}
/* El fundido entre videos está en base.css §17f (y se apaga en §17i) */

/* ── Hero ─────────────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  min-height: var(--home-hero-min-height);
}
.home-hero__intro { max-width: var(--home-hero-intro-width); }
.home-hero__backdrop-toggle {
  position: absolute;
  right: 0;
  bottom: var(--space-md);
}

.home-hero__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}
/* En 390 px "Descargar el juego" no entra con el relleno normal del botón */
.home-hero__action {
  padding-inline: var(--space-xs);
  white-space: normal;
}

.home-hero__status { margin-top: var(--space-lg); }

/* Toda la fila del corredor lleva al perfil (más fácil de tocar en el celular) */
.home-race__runner { position: relative; }
.home-race__link {
  color: inherit;
  text-decoration: none;
}
.home-race__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.home-race__link:hover { text-decoration: underline; }

@media (min-width: 900px) {
  .home-backdrop { background-image: var(--home-backdrop-image); }
  .home-hero__actions {
    grid-template-columns: auto auto;
    justify-content: start;
  }
  .home-hero__action { padding-inline: var(--space-lg); }
}

/* ── Noticias y eventos ───────────────────────────────────────────── */
.home-news {
  display: grid;
  gap: var(--space-sm);
}

.home-events {
  display: grid;
  gap: var(--space-sm);
}
.home-event {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
}
/* Verde: un evento abierto es "lo bueno" de la tabla de rareza. En la letra
   romana de los títulos (D-19) */
.home-event__title {
  color: var(--color-success);
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-heading);
}
.home-event__text { grid-column: 1; }
.home-event__action {
  grid-column: 2;
  grid-row: 1 / 3;
}

/* Columna derecha: eventos y, abajo, el top 5 */
.home-side {
  display: grid;
  gap: var(--space-xl);
  align-content: start;
}
/* Noticias y eventos pasan sobre una capa más oscura que el inicio, para no
   competir con el video */
.home-columns {
  position: relative;
  isolation: isolate;
}
.home-columns::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--space-xl)) 0 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--backdrop-overlay-content) var(--space-2xl));
}

@media (min-width: 900px) {
  .home-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-xl);
  }
}