/* ============================================================
   PIXELCLUB — Overlay de intro CRT / VHS (integrado en la SPA)
   Todo va scopeado bajo #intro-crt y con clases/keyframes propios
   (prefijo intro-) para no interferir con el resto de la web.
   ============================================================ */

#intro-crt{
  position:fixed;
  inset:0;
  z-index:2147483000;              /* por encima de navbar, loader y scanlines globales */
  background:#05060a;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-family:'Press Start 2P', monospace;
  --i-cyan:#00f5d4;
  --i-magenta:#f72585;
  --i-yellow:#ffd60a;
  --i-scan:rgba(0,0,0,.28);
  box-shadow:
    inset 0 0 120px 40px rgba(0,0,0,.9),
    inset 0 0 400px 120px rgba(0,0,0,.55);
}

/* Bloquea el scroll del fondo mientras la intro está visible */
body.intro-lock{ overflow:hidden; }

/* Cristal curvo: reflejo superior + oscurecido radial de esquinas (abombado) */
#intro-crt::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:6;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.06), transparent 45%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.75) 100%);
  border-radius:14px;
}

/* Pantalla interior (lo que colapsa al apagar) */
#intro-crt .intro-screen{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  transform-origin:center center;
  animation:introFlicker 5s infinite steps(60);
  will-change:transform,filter;
}
@keyframes introFlicker{
  0%,100%{filter:brightness(1);}
  49%{filter:brightness(1);}
  50%{filter:brightness(1.08);}
  51%{filter:brightness(.97);}
  70%{filter:brightness(1.03);}
}

/* Scanlines + barrido */
#intro-crt .intro-scan{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    var(--i-scan) 0px,
    var(--i-scan) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:multiply;
}
#intro-crt .intro-scan::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:120px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.05),transparent);
  animation:introSweep 7s linear infinite;
}
@keyframes introSweep{
  0%{top:-120px;}
  100%{top:100%;}
}

/* Ruido estático */
#intro-crt .intro-noise{
  position:absolute;
  inset:-50%;
  z-index:4;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:introGrain .28s steps(3) infinite, introNoiseFlicker 3s steps(10) infinite;
}
@keyframes introGrain{
  0%{transform:translate(0,0);}
  33%{transform:translate(-6%,4%);}
  66%{transform:translate(4%,-5%);}
  100%{transform:translate(0,0);}
}
@keyframes introNoiseFlicker{
  0%,100%{opacity:.05;}
  50%{opacity:.09;}
}

/* Contenido central */
#intro-crt .intro-content{
  position:relative;
  z-index:3;
  text-align:center;
  padding:24px;
}

/* Título PixelClub: Pixel cian + Club magenta, con neón y glitch */
#intro-crt .intro-title{
  position:relative;
  display:inline-block;
  font-size:clamp(2rem,9vw,6.5rem);
  line-height:1;
  letter-spacing:2px;
  animation:introTitleGlitch 4s infinite;
}
/* Núcleo de letra sólido y nítido + halo exterior (glow tighter para más definición) */
#intro-crt .intro-title .tp-cyan{
  color:#c9fff6;
  text-shadow:0 0 2px var(--i-cyan),0 0 4px var(--i-cyan),0 0 16px rgba(0,245,212,.75),0 0 34px rgba(0,245,212,.4);
}
#intro-crt .intro-title .tp-magenta{
  color:#ffd0e6;
  text-shadow:0 0 2px var(--i-magenta),0 0 4px var(--i-magenta),0 0 16px rgba(247,37,133,.75),0 0 34px rgba(247,37,133,.4);
}
#intro-crt .intro-title::before,
#intro-crt .intro-title::after{
  content:attr(data-text);
  position:absolute;
  left:0;top:0;
  width:100%;
  pointer-events:none;
}
#intro-crt .intro-title::before{
  color:#ff2e63;
  z-index:-1;
  text-shadow:0 0 8px rgba(255,46,99,.7);
  animation:introAberrRed 2.6s infinite steps(2);
}
#intro-crt .intro-title::after{
  color:var(--i-cyan);
  z-index:-2;
  text-shadow:0 0 8px rgba(0,245,212,.7);
  animation:introAberrCyan 3.1s infinite steps(2);
}
/* En reposo casi invisibles (título nítido); el desfase RGB solo asoma en los glitches */
@keyframes introAberrRed{
  0%,92%,100%{transform:translate(0,0);opacity:.16;}
  93%{transform:translate(-4px,2px);opacity:.85;}
  96%{transform:translate(3px,-2px);opacity:.7;}
}
@keyframes introAberrCyan{
  0%,90%,100%{transform:translate(0,0);opacity:.16;}
  91%{transform:translate(4px,-2px);opacity:.85;}
  95%{transform:translate(-3px,2px);opacity:.7;}
}
@keyframes introTitleGlitch{
  0%,100%{clip-path:inset(0 0 0 0);transform:translate(0,0);}
  42%{clip-path:inset(0 0 0 0);}
  43%{clip-path:inset(20% 0 40% 0);transform:translate(-3px,0);}
  44%{clip-path:inset(60% 0 10% 0);transform:translate(3px,0);}
  45%{clip-path:inset(0 0 0 0);transform:translate(0,0);}
  70%{clip-path:inset(0 0 0 0);}
  71%{clip-path:inset(45% 0 45% 0);transform:translate(2px,0);}
  72%{clip-path:inset(0 0 0 0);transform:translate(0,0);}
}

#intro-crt .intro-subtitle{
  margin-top:28px;
  font-size:clamp(.8rem,2.4vw,1.25rem);
  color:#ff6fb3;
  letter-spacing:3px;
  line-height:1.5;
  text-shadow:0 0 3px var(--i-magenta),0 0 12px rgba(247,37,133,.7);
  animation:introHue 6s linear infinite;
}
@keyframes introHue{
  0%,100%{filter:hue-rotate(0deg);}
  50%{filter:hue-rotate(25deg);}
}

/* Botón 8-bit COMENZAR */
#intro-crt .intro-start{
  margin-top:52px;
  font-family:inherit;
  font-size:clamp(1.05rem,3.2vw,1.7rem);
  color:var(--i-yellow);
  background:transparent;
  border:5px solid var(--i-yellow);
  padding:26px 52px;
  cursor:pointer;
  letter-spacing:3px;
  text-shadow:0 0 3px var(--i-yellow),0 0 12px rgba(255,214,10,.8);
  box-shadow:7px 7px 0 rgba(0,0,0,.6),0 0 22px rgba(255,214,10,.28);
  image-rendering:pixelated;
  animation:introBlink 1.15s steps(1) infinite;
  transition:transform .08s steps(1), background .1s, color .1s;
}
@keyframes introBlink{
  0%,49%{opacity:1;}
  50%,100%{opacity:.25;}
}
#intro-crt .intro-start:hover,
#intro-crt .intro-start:focus-visible{
  animation:none;
  opacity:1;
  background:var(--i-yellow);
  color:#0a0a0f;
  text-shadow:none;
  outline:none;
  box-shadow:6px 6px 0 rgba(0,0,0,.6),0 0 28px rgba(255,214,10,.6);
}
#intro-crt .intro-start:active{
  transform:translate(6px,6px);
  box-shadow:0 0 20px rgba(255,214,10,.4);
}

#intro-crt .intro-coin{
  margin-top:30px;
  font-size:clamp(.6rem,1.7vw,.85rem);
  color:#7a8698;
  letter-spacing:2px;
  animation:introBlink 1.6s steps(1) infinite;
}

/* Botón de silenciar sonido (esquina) */
#intro-crt .intro-mute{
  position:absolute;
  top:18px;
  right:18px;
  z-index:7;
  width:46px;
  height:46px;
  font-size:var(--text-base);
  line-height:1;
  background:rgba(6,8,15,.6);
  color:var(--i-cyan);
  border:2px solid rgba(0,245,212,.45);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .12s;
}
#intro-crt .intro-mute:hover,
#intro-crt .intro-mute:focus-visible{
  background:rgba(0,245,212,.15);
  border-color:var(--i-cyan);
  outline:none;
}

/* Encendido al cargar */
#intro-crt.intro-power-on .intro-screen{ animation:introTurnOn .85s ease-out forwards; }
@keyframes introTurnOn{
  0%{ transform:scale(1,.001); filter:brightness(6); background:#fff; }
  55%{ transform:scale(1,.02); filter:brightness(3); }
  70%{ transform:scale(1,1); filter:brightness(1.6); }
  100%{ transform:scale(1,1); filter:brightness(1); background:transparent; }
}

/* Apagado de TV al pulsar COMENZAR */
#intro-crt.intro-off{ background:#000 !important; }
#intro-crt.intro-off .intro-screen{ animation:introTurnOff .6s cubic-bezier(.23,1,.32,1) forwards; }
#intro-crt.intro-off .intro-scan,
#intro-crt.intro-off .intro-noise,
#intro-crt.intro-off::before{ opacity:0; transition:opacity .2s; }
@keyframes introTurnOff{
  0%{ transform:scale(1,1); filter:brightness(1); }
  45%{ transform:scale(1,.012); filter:brightness(4); background:#fff; box-shadow:0 0 80px 30px rgba(255,255,255,.8); }
  55%{ transform:scale(1,.012); filter:brightness(6); background:#fff; }
  80%{ transform:scale(.02,.012); filter:brightness(8); background:#fff; }
  100%{ transform:scale(0,0); filter:brightness(0); opacity:0; }
}

/* Accesibilidad */
@media (prefers-reduced-motion:reduce){
  #intro-crt *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  #intro-crt .intro-start{ opacity:1 !important; }
  #intro-crt .intro-noise{ display:none; }
}