/* Pantalla de inicio: logo animado y elección de modo (inc/intro.php). */

html.intro-activa,
html.intro-activa body { overflow: hidden; }
/* Ya eligió modo: la capa viene en el HTML (por la caché del servidor) pero no se pinta. */
html.intro-no #bait-intro { display: none !important; }

.intro {
  --i-fondo: #0F1211;
  --i-texto: #ECEFED;
  --i-suave: #9AA39F;
  --i-verde: #4FD1B8;
  --i-verde-tinta: #06231E;
  --i-verde-hover: #6EDDC8;
  --i-sup: #1A1F1D;
  --i-sup-hover: #232A27;
  --i-naranjo: #FF8A4C;
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--i-fondo);
  color: var(--i-texto);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: opacity .42s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .42s;
}
html[data-intro-tema="claro"] .intro {
  --i-fondo: #F5F4EF;
  --i-texto: #121614;
  --i-suave: #5E6662;
  --i-verde: #0B6B5D;
  --i-verde-tinta: #FFFFFF;
  --i-verde-hover: #0E7F6E;
  --i-sup: #E9E7E0;
  --i-sup-hover: #DFDDD4;
  --i-naranjo: #E4571B;
}
.intro:focus { outline: none; }
.intro.cerrando { opacity: 0; visibility: hidden; pointer-events: none; }
.intro.cerrando .intro-centro { transform: scale(.98); }
.intro *, .intro *::before, .intro *::after { box-sizing: border-box; }

.intro-centro {
  width: min(100%, 640px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}

/* ── Logo: el PNG oficial como máscara, recortado por letra ── */
.intro-logo {
  position: relative;
  width: clamp(200px, 44vw, 380px);
  aspect-ratio: 974 / 325;
  animation: intro-centrar .75s cubic-bezier(.65, 0, .25, 1) .85s both;
}
.intro-letra {
  position: absolute; inset: 0;
  background: currentColor;
  -webkit-mask: var(--intro-logo) center / 100% 100% no-repeat;
  mask: var(--intro-logo) center / 100% 100% no-repeat;
}
/* Recortes según las columnas del PNG: B 0–29.6 %, A 32.3–60.9 %, I 64.9–71.5 %, T 75.6–100 %. */
.intro-b { clip-path: inset(0 69% 0 0); color: var(--i-verde); animation: intro-dibujar-b .8s cubic-bezier(.3, 0, .2, 1) .1s both, intro-tinta .6s ease 1.65s forwards; }
.intro-a { clip-path: inset(0 37% 0 31%); animation: intro-subir-a .55s cubic-bezier(.2, .7, .2, 1) 1.05s both; }
.intro-i { clip-path: inset(0 26.5% 0 63%); animation: intro-subir-i .5s cubic-bezier(.2, .7, .2, 1) 1.17s both; }
.intro-t { clip-path: inset(0 0 0 73.5%); animation: intro-subir-t .55s cubic-bezier(.2, .7, .2, 1) 1.27s both; }

/* La B parte sola al centro y el logo se corre cuando llegan las demás letras. */
@keyframes intro-centrar { from { transform: translateX(35%); } to { transform: none; } }
@keyframes intro-dibujar-b {
  from { clip-path: inset(100% 69% 0 0); transform: scale(.94); }
  to { clip-path: inset(0 69% 0 0); transform: none; }
}
@keyframes intro-tinta { to { color: var(--i-texto); } }
@keyframes intro-subir-a { from { clip-path: inset(100% 37% 0 31%); transform: translateY(14%); } to { clip-path: inset(0 37% 0 31%); transform: none; } }
@keyframes intro-subir-i { from { clip-path: inset(100% 26.5% 0 63%); transform: translateY(14%); } to { clip-path: inset(0 26.5% 0 63%); transform: none; } }
@keyframes intro-subir-t { from { clip-path: inset(100% 0 0 73.5%); transform: translateY(14%); } to { clip-path: inset(0 0 0 73.5%); transform: none; } }

.intro-firma {
  margin: 18px 0 0;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: clamp(13px, 1.6vw, 15px);
  color: var(--i-suave);
  animation: intro-aparecer .6s cubic-bezier(.2, .7, .2, 1) 1.85s both;
}
.intro-firma::after {
  content: ''; display: inline-block; width: .55em; height: 1.1em; margin-left: 4px;
  vertical-align: -.2em; background: var(--i-verde);
  animation: intro-cursor 1s steps(1) 2.4s infinite;
}
@keyframes intro-cursor { 50% { opacity: 0; } }

/* ── Elección ── */
.intro-eleccion {
  width: 100%;
  margin-top: clamp(36px, 7vh, 64px);
  animation: intro-aparecer .6s cubic-bezier(.2, .7, .2, 1) 2.25s both;
}
.intro-titulo {
  margin: 0 0 18px;
  font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
  font-size: clamp(22px, 3vw, 28px); font-weight: 600; line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--i-texto);
}
.intro-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.intro-opcion {
  display: flex; align-items: center; gap: 14px;
  min-height: 76px; padding: 16px 18px;
  border-radius: 16px;
  text-align: left; text-decoration: none;
  background: var(--i-sup); color: var(--i-texto);
  transition: background-color .18s ease, transform .18s cubic-bezier(.2, .7, .2, 1);
  animation: intro-aparecer .5s cubic-bezier(.2, .7, .2, 1) 2.4s both;
  -webkit-tap-highlight-color: transparent;
}
.intro-opcion + .intro-opcion { animation-delay: 2.5s; }
.intro-opcion svg { flex: none; width: 26px; height: 26px; }
.intro-opcion span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.intro-opcion strong { font-size: 16px; font-weight: 600; line-height: 1.25; }
.intro-opcion small { font-size: 13px; line-height: 1.35; color: var(--i-suave); }
.intro-opcion:hover { background: var(--i-sup-hover); }
.intro-opcion:active { transform: scale(.98); }
.intro-opcion-esc { background: var(--i-verde); color: var(--i-verde-tinta); }
.intro-opcion-esc small { color: inherit; opacity: .78; }
.intro-opcion-esc:hover { background: var(--i-verde-hover); }
.intro-opcion:focus-visible, .intro-saltar:focus-visible { outline: 2px solid var(--i-naranjo); outline-offset: 3px; }

.intro-nota { margin: 16px 0 0; font-size: 13px; color: var(--i-suave); }

.intro-saltar {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 14px; text-decoration: none;
  color: var(--i-suave); background: transparent;
  transition: background-color .18s ease, color .18s ease;
}
.intro-saltar:hover { color: var(--i-texto); background: var(--i-sup); }

@keyframes intro-aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Saltar la animación (Esc o una tecla) deja todo en su estado final. */
.intro.al-final .intro-logo,
.intro.al-final .intro-letra,
.intro.al-final .intro-firma,
.intro.al-final .intro-eleccion,
.intro.al-final .intro-opcion { animation-duration: 0s !important; animation-delay: 0s !important; }
.intro.al-final .intro-firma::after { animation-delay: 0s; }

@media (max-width: 640px) {
  .intro-opciones { grid-template-columns: 1fr; }
  .intro-opcion { min-height: 68px; }
}
@media (max-height: 560px) {
  .intro-eleccion { margin-top: 24px; }
}

/* Movimiento reducido: el logo completo y la elección de una vez, con un fundido corto. */
@media (prefers-reduced-motion: reduce) {
  .intro-logo, .intro-letra, .intro-firma, .intro-eleccion, .intro-opcion { animation: none !important; }
  .intro-b { color: var(--i-texto); }
  .intro-firma::after { animation: none; }
  .intro-centro { animation: intro-fundido .25s ease both; transition: none; }
  .intro { transition-duration: .2s, 0s; transition-delay: 0s, .2s; }
  .intro-opcion { transition: background-color .18s ease; }
  .intro-opcion:active { transform: none; }
}
@keyframes intro-fundido { from { opacity: 0; } to { opacity: 1; } }