/* =====================================================================
   AIMUN 2026 — Entrada cinematográfica «Del espacio al pleno»
   Se apoya en styles.css (variables, botones, píldoras, tipografía).
   El lienzo 3D vive fijo al fondo; el scroll solo empuja la narración.
   ===================================================================== */

.intro-body { overflow-x: hidden; }
.intro-body.esperando { overflow: hidden; }

/* Pista de scroll: ~5,4 pantallas de viaje */
#pista { height: 640vh; }

/* Estado fijo (reduced-motion o sin WebGL): no hay viaje, solo el destino */
.intro-fija #pista { height: 0; }

/* ---------- Capas fijas ---------------------------------------------- */
.intro-fallback {
  position: fixed;
  inset: 0;
  z-index: -1;
}
.intro-fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}
.intro-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 9, 26, 0.82) 0%, rgba(4, 9, 26, 0.6) 55%, var(--void) 100%);
}

#escena {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
}
.sin-webgl #escena { display: none; }

.flash {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(120% 130% at 50% 42%, #f4feff 0%, #d3f2fc 38%, rgba(65, 201, 232, 0.94) 100%);
}

/* ---------- Marca y salto --------------------------------------------- */
.intro-brand {
  position: fixed;
  top: 18px;
  left: 22px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.intro-brand:hover { text-decoration: none; }
.intro-brand img { width: 40px; filter: drop-shadow(0 0 14px rgba(65, 201, 232, 0.35)); }
.intro-brand .brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.18rem;
  letter-spacing: 0.14em;
  color: var(--ice);
}
.intro-brand .brand-sub {
  display: block;
  font-family: var(--font-data);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.intro-saltar {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 40;
  padding: 9px 18px;
  border: 1px solid rgba(238, 247, 252, 0.26);
  border-radius: 100px;
  /* Fondo sólido: sobrevive al fogonazo blanco de p≈0.60 (si no, el pill queda
     gris claro sobre blanco y el único escape se vuelve ilegible) */
  background: rgba(4, 9, 26, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-family: var(--font-data);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease,
    opacity 0.4s ease, visibility 0s linear 0s;
}
.intro-saltar:hover,
.intro-saltar:focus-visible {
  color: var(--ice);
  border-color: var(--cyan);
  box-shadow: 0 0 22px rgba(65, 201, 232, 0.2);
}
/* Oculto y fuera del orden de tabulación cuando la UI está abierta */
.ui-abierta .intro-saltar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* Durante el destello, la marca (texto claro) desaparecería sobre blanco */
.flash-activa .intro-brand { opacity: 0; transition: opacity 0.15s ease; }

/* ---------- Cláusulas del viaje --------------------------------------- */
.intro-clausula {
  position: fixed;
  left: 50%;
  top: 44%;
  z-index: 10;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0 24px;
  max-width: 30ch;
  opacity: 0;
  pointer-events: none;
  font-family: var(--font-clause);
  font-style: italic;
  font-size: clamp(1.7rem, 4.6vw, 3.1rem);
  line-height: 1.3;
  text-align: center;
  color: var(--ice);
  /* Doble halo oscuro para no perder contraste sobre el limbo iluminado del planeta */
  text-shadow: 0 2px 12px rgba(2, 6, 18, 0.95), 0 2px 30px rgba(2, 6, 18, 0.9),
    0 0 60px rgba(65, 201, 232, 0.25);
}
/* Cifras inequívocas: lining + tabular para que «193» no se lea como «198» */
.intro-clausula em {
  color: var(--gold);
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ---------- Guía de scroll --------------------------------------------- */
.intro-cue {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.cue-texto {
  font-family: var(--font-data);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text);
}
.cue-linea {
  display: block;
  width: 1px;
  height: 52px;
  overflow: hidden;
}
.cue-linea span {
  display: block;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--cyan));
  transform-origin: top;
  animation: cue-baja 2.4s ease-in-out infinite;
}

/* ---------- Interfaz final --------------------------------------------- */
.intro-ui {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: grid;
  align-items: center;
  overflow-y: auto;                 /* si no cabe en alto, se puede desplazar */
  visibility: hidden;
  pointer-events: none;
  /* La visibilidad se apaga con retraso para que el fundido de salida (0.9s) se vea */
  transition: visibility 0s linear 0.9s;
}
.intro-ui.visible {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}
/* Penumbra de lectura sobre el 3D, parte del propio fundido de la UI */
.intro-ui::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
  background:
    linear-gradient(90deg, rgba(4, 9, 26, 0.78) 0%, rgba(4, 9, 26, 0.42) 46%, rgba(4, 9, 26, 0.1) 100%),
    linear-gradient(180deg, rgba(4, 9, 26, 0.55) 0%, transparent 30%, transparent 62%, rgba(4, 9, 26, 0.72) 100%);
}
.intro-ui.visible::before { opacity: 1; }

.intro-ui-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 96px 24px 72px;
}

/* Revelado: fundido + deslizamiento vertical, escalonado */
.intro-ui .r1, .intro-ui .r2, .intro-ui .r3, .intro-ui .r4,
.intro-ui .r5, .intro-ui .r6, .intro-ui .r7 {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.intro-ui.visible .r1, .intro-ui.visible .r2, .intro-ui.visible .r3,
.intro-ui.visible .r4, .intro-ui.visible .r5, .intro-ui.visible .r6,
.intro-ui.visible .r7 {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.intro-ui.visible .r1 { transition-delay: 0.05s; }
.intro-ui.visible .r2 { transition-delay: 0.16s; }
.intro-ui.visible .r3 { transition-delay: 0.28s; }
.intro-ui.visible .r4 { transition-delay: 0.46s; }
.intro-ui.visible .r5 { transition-delay: 0.62s; }
.intro-ui.visible .r6 { transition-delay: 0.78s; }
.intro-ui.visible .r7 { transition-delay: 0.36s; }

.sesion-pill { margin-bottom: 20px; }

.intro-titulo {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.7rem, 6.8vw, 5rem);
  line-height: 1.04;
  color: var(--ice);
  text-shadow: 0 0 60px rgba(65, 201, 232, 0.25);
  outline: none;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .intro-titulo {
    background: linear-gradient(180deg, #ffffff 52%, #b9e2f2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 34px rgba(65, 201, 232, 0.22));
  }
}

.intro-entrar {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--font-data);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--text);
}
.intro-entrar:hover { color: var(--cyan); text-decoration: none; }

/* Columna derecha de la intro: emblema y, debajo, el contador 3D, apilados
   en vertical y centrados (misma idea que .hero-derecha del inicio). */
.intro-derecha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 30px);
}

.intro-emblema {
  position: relative;
  display: flex;
  justify-content: center;
}
.intro-emblema::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(65, 201, 232, 0.2) 0%, transparent 62%);
}
.intro-emblema img {
  position: relative;
  width: min(300px, 56vw);
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 34px rgba(65, 201, 232, 0.3));
  animation: flotar 7s ease-in-out infinite;
}

.intro-credito {
  position: absolute;
  bottom: 14px;
  left: 24px;
  margin: 0;
  font-family: var(--font-data);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

/* ---------- Pantalla de carga ------------------------------------------ */
.cargando {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--void);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.cargando img { width: 74px; filter: drop-shadow(0 0 24px rgba(65, 201, 232, 0.35)); animation: aliento-carga 2.6s ease-in-out infinite; }
@keyframes aliento-carga {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.05); opacity: 1; }
}
.cargando-texto {
  font-family: var(--font-data);
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cargando-barra {
  width: 210px;
  height: 2px;
  background: rgba(103, 165, 199, 0.18);
  overflow: hidden;
}
.cargando-barra span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  transition: width 0.3s ease;
}
.lista .cargando { opacity: 0; visibility: hidden; }

/* ---------- Móvil ------------------------------------------------------- */
@media (max-width: 880px) {
  .intro-ui-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 84px 22px 64px;
  }
  .intro-derecha { display: none; } /* en móvil la intro es compacta: sin columna derecha */
  .intro-emblema { display: none; }
  .intro-brand .brand-sub { display: none; }
  .intro-saltar { top: 16px; right: 16px; padding: 8px 14px; font-size: 0.7rem; }
  .intro-brand { top: 14px; left: 16px; }
  .intro-credito { left: 22px; right: 22px; }
  .hero-lede { font-size: 1rem; }
  /* A una columna, el texto ocupa todo el ancho: el scrim horizontal ya no
     basta. Se refuerza a un velo uniforme para que el lede no se funda con las
     zonas iluminadas de la foto del salón. */
  .intro-ui::before {
    background:
      linear-gradient(90deg, rgba(4, 9, 26, 0.72) 0%, rgba(4, 9, 26, 0.6) 100%),
      linear-gradient(180deg, rgba(4, 9, 26, 0.7) 0%, rgba(4, 9, 26, 0.25) 45%, rgba(4, 9, 26, 0.82) 100%);
  }
  .hero-lede { text-shadow: 0 1px 12px rgba(4, 9, 26, 0.9); }
}

/* Viewports bajos (móvil apaisado, ventanas cortas): que la UI no se centre y
   recorte los botones; se alinea arriba y se compacta. */
@media (max-height: 600px) {
  .intro-ui { align-items: start; }
  .intro-ui-inner { padding-top: 68px; padding-bottom: 40px; }
  .intro-titulo { font-size: clamp(2rem, 8vw, 3rem); margin-bottom: 14px; }
  .sesion-pill { margin-bottom: 12px; }
  .intro-credito { display: none; }
}

/* ---------- Movimiento reducido ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cue-linea span, .intro-emblema img, .cargando img { animation: none; }
  .intro-ui .r1, .intro-ui .r2, .intro-ui .r3, .intro-ui .r4,
  .intro-ui .r5, .intro-ui .r6, .intro-ui .r7 {
    transform: none;
    transition: opacity 0.4s ease;
  }
  .flash { display: none; }
}