/* Intro: el logo se dibuja, la luz lo cruza y se asienta con una leve refracción */
#intro {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  touch-action: manipulation;
}

.intro-bg {
  position: absolute;
  inset: 0;
  background: #000;
  transition: opacity .7s var(--ease);
}

.intro-bg::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(130vw, 760px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(190, 220, 255, .09), transparent);
  opacity: 0;
}

#intro.is-leaving .intro-bg { opacity: 0; }

.intro-logo {
  position: relative;
  z-index: 1;
  width: min(48vw, 230px);
  aspect-ratio: 1;
  color: rgba(255, 255, 255, .86);
  will-change: transform;
}

/* Estado inicial (antes de reproducir) */
#intro .lg-base { stroke-dasharray: 1; stroke-dashoffset: 1; }
#intro .lg-ch { opacity: 0; mix-blend-mode: screen; }
#intro .lg-ch-a { color: #8fd0ff; }
#intro .lg-ch-b { color: #ff9fd8; }

/* Reproducción */
.is-playing #intro .lg-base { animation: rc-draw 1.3s var(--ease) .2s forwards; }
.is-playing #intro .lg-ch-a { animation: rc-ch-a .9s ease-in-out 1.2s both; }
.is-playing #intro .lg-ch-b { animation: rc-ch-b .9s ease-in-out 1.2s both; }
.is-playing #intro .sweep   { animation: rc-sweep 1s var(--ease) 1.1s both; }
.is-playing #intro .intro-bg::after { animation: rc-glow 1.6s ease-in-out 1s both; }

/* Salto de intro (toque) o movimiento reducido: logo completo, sin animaciones */
#intro.is-skipped .lg-base { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
#intro.is-skipped .lg-ch, #intro.is-skipped .sweep, #intro.is-skipped .intro-bg::after { animation: none; opacity: 0; }

@keyframes rc-draw {
  0%   { stroke-dasharray: 1; stroke-dashoffset: 1; }
  99%  { stroke-dasharray: 1; stroke-dashoffset: 0; }
  100% { stroke-dasharray: none; stroke-dashoffset: 0; }
}
@keyframes rc-sweep {
  0%   { opacity: 0; transform: translateX(0); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(480px); }
}
@keyframes rc-ch-a {
  0%, 100% { opacity: 0; transform: translateX(0); }
  45%      { opacity: .55; transform: translateX(-5px); }
}
@keyframes rc-ch-b {
  0%, 100% { opacity: 0; transform: translateX(0); }
  45%      { opacity: .55; transform: translateX(5px); }
}
@keyframes rc-glow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}