/* Apertura: cortinas negras con el sello al centro. Las animaciones las dirige js/intro.js. */
#intro { position: fixed; inset: 0; z-index: 200; overflow: hidden; touch-action: manipulation; }
.cortina { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--c-negro); }
.cortina--izq { left: 0; }
.cortina--der { right: 0; }
.intro__costura { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--c-crema); transform: scaleY(0); }
.intro__centro { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.intro__sello { width: min(66vw, 300px); aspect-ratio: 1; border-radius: 50%; opacity: 0; will-change: transform; }
.intro__pie {
  position: absolute; left: 0; right: 0; bottom: calc(10vh + env(safe-area-inset-bottom)); text-align: center;
  font: 700 13px var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--c-crema-suave); opacity: 0;
}

/* Estado previo a la entrada: el contenido espera la apertura y luego entra escalonado */
.mundo__titulo, .mundo__sub, .rayas,
#mundo-burguer .mundo__scroll > :nth-child(n + 4):nth-child(-n + 6) {
  transition: opacity var(--d-largo) var(--ease-salida), transform var(--d-largo) var(--ease-salida);
}
.mundo__titulo { transition-delay: .06s; }
.mundo__sub { transition-delay: .14s; }
#mundo-burguer .mundo__scroll > :nth-child(4) { transition-delay: .22s; }
#mundo-burguer .mundo__scroll > :nth-child(5) { transition-delay: .29s; }
#mundo-burguer .mundo__scroll > :nth-child(6) { transition-delay: .36s; }
.pre #mundo-burguer .mundo__titulo, .pre #mundo-burguer .mundo__sub, .pre #mundo-burguer .rayas,
.pre #mundo-burguer .mundo__scroll > :nth-child(n + 4):nth-child(-n + 6) { opacity: 0; transform: translateY(26px); }
.pre .cabecera { opacity: 0; }
.cabecera { transition: opacity var(--d-largo) var(--ease-salida) .3s; }
.pre .dock { transform: translateY(140%); }
.sin-sello .dock__sello { opacity: 0; }

/* Entrada de tarjetas al aparecer por primera vez */
.por-entrar { opacity: 0; transform: translateY(22px); }
.por-entrar.entro { opacity: 1; transform: none; transition: opacity var(--d-largo) var(--ease-salida), transform var(--d-largo) var(--ease-salida); }

/* Pista sobre el dock */
.pista {
  position: absolute; z-index: 31; left: 50%; translate: -50% 8px; opacity: 0; pointer-events: none; white-space: nowrap;
  bottom: calc(14px + 68px + 12px + env(safe-area-inset-bottom));
  padding: 9px 16px; border-radius: var(--r-pildora); background: var(--c-ambar); color: var(--c-negro);
  font: 700 14px / 1 var(--f-display); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: var(--el-flotante); transition: opacity var(--d-medio) var(--ease-salida), translate var(--d-medio) var(--ease-salida);
}
.pista--on { opacity: 1; translate: -50% 0; }

@media (prefers-reduced-motion: reduce) {
  .pre #mundo-burguer .mundo__titulo, .pre #mundo-burguer .mundo__sub, .pre #mundo-burguer .rayas,
  .pre #mundo-burguer .mundo__scroll > :nth-child(n + 4):nth-child(-n + 6) { transform: none; }
}