/* Animación de inicio, sutil: brillo, logo que se escribe solo, la frase letra por letra y un fundido calmo */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; cursor: pointer; background: var(--noche); transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1); }
html.con-intro body { overflow: hidden; }
.intro-brillo { position: absolute; left: 50%; top: 46%; width: 120vmax; height: 120vmax; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,31,154,.32), rgba(216,0,122,.12) 45%, transparent 72%); opacity: 0; scale: .6; filter: blur(10px); }
.intro.vamos .intro-brillo { animation: ib-enciende 3.2s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes ib-enciende { 0% { opacity: 0; scale: .5; } 60% { opacity: 1; scale: 1; } 100% { opacity: .85; scale: 1.05; } }

.intro-centro { position: relative; display: grid; justify-items: center; gap: 22px; width: min(82vw, 560px); }
.intro-logo { width: 100%; height: auto; overflow: visible; }
.il-trazo { fill: #FF1F9A; fill-opacity: 0; stroke: #FF7FC0; stroke-width: 3.5; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.intro.vamos .il-trazo { animation: il-escribe 1.9s cubic-bezier(.45, 0, .25, 1) .25s forwards, il-rellena .9s cubic-bezier(.22, 1, .36, 1) 1.65s forwards; }
@keyframes il-escribe { to { stroke-dashoffset: 0; } }
@keyframes il-rellena { 0% { fill-opacity: 0; } 100% { fill-opacity: 1; stroke-opacity: 0; } }
.intro.vamos .intro-logo { animation: il-respira 3.6s ease-in-out .2s forwards; }
@keyframes il-respira { 0% { transform: scale(.96); filter: drop-shadow(0 0 0 rgba(255,31,154,0)); } 70% { filter: drop-shadow(0 0 26px rgba(255,31,154,.55)); } 100% { transform: scale(1); filter: drop-shadow(0 0 18px rgba(255,31,154,.45)); } }

.intro-frase { font-family: var(--texto); font-weight: 500; font-size: clamp(.66rem, 2.9vw, 1.05rem); letter-spacing: .26em; padding-left: .26em; max-width: 92vw; text-transform: uppercase; color: rgba(253,227,239,.92); text-align: center; white-space: nowrap; }
.il { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(6px); }
.il-esp { display: inline-block; width: .5em; }
.intro.vamos .il { animation: il-letra .9s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(1.75s + var(--i) * 34ms); }
@keyframes il-letra { to { opacity: 1; filter: blur(0); transform: none; } }

/* salida: todo crece apenas y se disuelve en la carta */
.intro.sale { opacity: 0; pointer-events: none; }
.intro.sale .intro-centro { transform: scale(1.06); filter: blur(4px); transition: transform 1.1s cubic-bezier(.4, 0, .2, 1), filter 1.1s; }
.intro-saltar { position: absolute; right: 16px; bottom: calc(18px + var(--seg-b)); min-height: 40px; padding: 0 16px; border-radius: 999px; color: rgba(255,255,255,.6); font-family: var(--texto); font-weight: 500; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.intro.quieta .il { opacity: 1; filter: none; transform: none; }
.intro.quieta .il-trazo { fill-opacity: 1; stroke-opacity: 0; }

/* cortina desde el primer cuadro, hasta que arranca la app */
.intro-pre { position: fixed; inset: 0; z-index: 199; background: var(--noche); pointer-events: none; transition: opacity .45s var(--suave); }
.intro-pre.fuera { opacity: 0; }