/* Intro animada del logo (index.html y nima.html).
   - Solo se muestra cuando <html> tiene la clase "intro" (la pone el script del <head>
     la primera vez que se abre cada página en la pestaña).
   - Arranca cuando #intro recibe la clase "play" (después de cargar la fuente).
   - Solo anima transform y opacity (van por GPU, fluidos en celular). El trazo de la onda
     es lo único que se redibuja, y es muy pequeño. */
#intro { display: none; }
.intro #intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100;
  background: #FBFAF7; cursor: pointer;
}
.intro body { overflow: hidden; }

#intro .logo { display: flex; align-items: center; gap: .32em; font-size: clamp(38px, 11vw, 56px); color: #0D1B45; }
#intro .mark { width: 1.6em; height: auto; overflow: visible; }
#intro .words { display: flex; flex-direction: column; gap: .12em; }
#intro .name { font-size: 1em; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
#intro .tag { font-size: .29em; font-weight: 500; letter-spacing: .48em; line-height: 1; text-transform: uppercase; color: var(--tag, #123A8C); }
#intro .name span, #intro .tag span { display: inline-block; opacity: 0; white-space: pre; }

/* Estado inicial */
#intro .wave { stroke-dasharray: 1; stroke-dashoffset: 1; }
#intro .dot, #intro .glow { transform-box: fill-box; transform-origin: center; transform: scale(0); }
#intro .glow { opacity: 0; }

/* Línea de tiempo (empieza con .play) */
#intro.play .wave { animation: intro-wave .85s cubic-bezier(.65,0,.35,1) .1s forwards; }
#intro.play .dot { animation: intro-dot .55s cubic-bezier(.3,1.6,.5,1) .85s forwards; }
#intro.play .glow { animation: intro-glow .9s ease-out .9s forwards; }
#intro.play .name span { animation: intro-letter .75s cubic-bezier(.22,1,.36,1) calc(1s + var(--i) * 65ms) forwards; }
#intro.play .tag span { animation: intro-fade .7s cubic-bezier(.22,1,.36,1) calc(1.45s + var(--i) * 40ms) forwards; }
#intro.play { animation: intro-out .7s cubic-bezier(.7,0,.2,1) var(--out, 2.7s) forwards; }

@keyframes intro-wave { to { stroke-dashoffset: 0; } }
@keyframes intro-dot { to { transform: scale(1); } }
@keyframes intro-glow { 0% { opacity: .5; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes intro-letter { from { opacity: 0; transform: translate3d(0, .32em, 0); } to { opacity: 1; transform: none; } }
@keyframes intro-fade { from { opacity: 0; transform: translate3d(-.4em, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes intro-out { to { opacity: 0; transform: translate3d(0, -3%, 0); visibility: hidden; } }

/* Las animaciones de la página esperan hasta que la intro empieza a salir */
.intro:not(.intro-out) .anim-in,
.intro:not(.intro-out) .rule-in { animation-play-state: paused; }