/* La portada de bienvenida: pase de imágenes a pantalla completa
   con el nombre encima. */

.welcome {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}

.welcome__media { position: absolute; inset: 0; }

.welcome__slot {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* el fundido largo es lo que hace que el pase no parezca un parpadeo;
     si se cambia, cambiar también FUNDIDO_MS en js/welcome.js */
  transition: opacity 1.1s ease;
}

.welcome__slot.is-front { opacity: 1; }

/* los loops se encadenan más rápido: cada clip ya trae su propio movimiento */
.welcome--loop .welcome__slot { transition: opacity .6s ease; }

/* el velo baja el contraste del pase para que el nombre se lea siempre */
.welcome__veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
}

.welcome__name {
  position: relative;
  margin: 0;
  padding: 0 var(--pad);
  font-family: var(--font-title);
  /* con Wild Trave el nombre mide ~8,8 veces esto: 8vw ≈ 70 % del ancho */
  font-size: clamp(30px, 8vw, 16rem);
  white-space: nowrap;
  line-height: .95;
  font-weight: 400;
  text-align: center;
  color: #fff;
  mix-blend-mode: normal;
  text-shadow: 0 0 60px rgba(0, 0, 0, .55);
}

.welcome__hint {
  position: absolute;
  bottom: calc(var(--pad) * 2);
  margin: 0;
  color: rgba(255, 255, 255, .7);
  text-transform: lowercase;
  letter-spacing: .2em;
  font-size: .77rem;
  animation: welcome-latido 2.4s ease-in-out infinite;
}

@keyframes welcome-latido {
  0%, 100% { opacity: .35; }
  50% { opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome__hint { animation: none; }
}