/* Intro overlay – press-anything-to-start */

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro, 999);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 20% 0%, rgba(255, 250, 244, 0.96), rgba(230, 214, 200, 0.99));
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: auto;  /* ahora SÍ recibe clics */
  cursor: pointer;
}

/* visible al iniciar */
.intro-overlay.intro-visible {
  opacity: 1;
}

/* ocultar con fade cuando terminamos */
.intro-overlay.intro-hidden {
  opacity: 0;
  transition: opacity 450ms ease-out;
}

/* contenido centrado */
.intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

/* Usamos prácticamente el mismo tamaño que .wao-disc */
.intro-disc {
  width: min(255px, 64vw);
  height: min(255px, 64vw);
  background: var(--white);
  border-radius: 50%;
  border: 6px solid var(--gray-dark);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 45px; /* mismo offset vertical que el disco */
}

.intro-logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 5vw, 32px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-dark);
}

/* Texto “press anything to start” */
.intro-cta {
  margin-top: 2.4rem;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}

/* Por si quedaban restos de animaciones antiguas */
@keyframes intro-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}