/* ============================================
   PIXELCLUB — Pixel Art Effects
   ============================================ */

/* ── Pixel Borders (8-bit style) ── */
.pixel-border {
  border: var(--border-pixel) solid var(--text-secondary);
  box-shadow:
    var(--border-pixel) var(--border-pixel) 0px var(--bg-primary),
    calc(var(--border-pixel) + 1px) calc(var(--border-pixel) + 1px) 0px var(--text-secondary);
}

.pixel-border-cyan {
  border-color: var(--accent-games);
  box-shadow:
    var(--border-pixel) var(--border-pixel) 0px var(--bg-primary),
    calc(var(--border-pixel) + 1px) calc(var(--border-pixel) + 1px) 0px var(--accent-games);
}

.pixel-border-magenta {
  border-color: var(--accent-movies);
  box-shadow:
    var(--border-pixel) var(--border-pixel) 0px var(--bg-primary),
    calc(var(--border-pixel) + 1px) calc(var(--border-pixel) + 1px) 0px var(--accent-movies);
}

.pixel-border-yellow {
  border-color: var(--accent-series);
  box-shadow:
    var(--border-pixel) var(--border-pixel) 0px var(--bg-primary),
    calc(var(--border-pixel) + 1px) calc(var(--border-pixel) + 1px) 0px var(--accent-series);
}

/* ── CRT Scanlines ── */
.scanlines {
  position: relative;
}

.scanlines::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  );
  pointer-events: none;
  z-index: 2;
}

/* ── Global scanlines on body ── */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.025) 2px,
    rgba(0, 0, 0, 0.025) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── Glow Effects ── */
.glow-cyan {
  box-shadow: var(--shadow-glow-cyan);
}
.glow-magenta {
  box-shadow: var(--shadow-glow-magenta);
}
.glow-yellow {
  box-shadow: var(--shadow-glow-yellow);
}
.glow-green {
  box-shadow: var(--shadow-glow-green);
}
.glow-purple {
  box-shadow: var(--shadow-glow-purple);
}

/* ── Neon Text ── */
.neon-text-cyan {
  color: var(--accent-games);
  text-shadow:
    0 0 4px var(--accent-games),
    0 0 8px var(--accent-games),
    0 0 20px rgba(0, 245, 212, 0.4);
}
.neon-text-magenta {
  color: var(--accent-movies);
  text-shadow:
    0 0 4px var(--accent-movies),
    0 0 8px var(--accent-movies),
    0 0 20px rgba(247, 37, 133, 0.4);
}
.neon-text-yellow {
  color: var(--accent-series);
  text-shadow:
    0 0 4px var(--accent-series),
    0 0 8px var(--accent-series),
    0 0 20px rgba(255, 214, 10, 0.4);
}
.neon-text-green {
  color: var(--pixel-green);
  text-shadow:
    0 0 4px var(--pixel-green),
    0 0 8px var(--pixel-green),
    0 0 20px rgba(57, 255, 20, 0.4);
}

/* ── Neon Pulse Animation ── */
.neon-pulse {
  animation: neonPulse 2s ease-in-out infinite alternate;
}

@keyframes neonPulse {
  0% {
    text-shadow:
      0 0 4px var(--accent-games),
      0 0 8px var(--accent-games);
  }
  100% {
    text-shadow:
      0 0 8px var(--accent-games),
      0 0 20px var(--accent-games),
      0 0 40px rgba(0, 245, 212, 0.3);
  }
}

/* ── Glitch Text Effect ── */
.glitch-text {
  position: relative;
  display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.glitch-text::before {
  color: var(--accent-games);
  animation: glitch1 3s infinite linear alternate-reverse;
  clip-path: inset(0 0 80% 0);
}

.glitch-text::after {
  color: var(--accent-movies);
  animation: glitch2 2.5s infinite linear alternate-reverse;
  clip-path: inset(80% 0 0 0);
}

@keyframes glitch1 {
  0%, 90% { transform: translate(0); }
  91% { transform: translate(-2px, 1px); }
  92% { transform: translate(2px, -1px); }
  93% { transform: translate(-1px, 2px); }
  94%, 100% { transform: translate(0); }
}

@keyframes glitch2 {
  0%, 88% { transform: translate(0); }
  89% { transform: translate(2px, 1px); }
  90% { transform: translate(-2px, -1px); }
  91% { transform: translate(1px, -2px); }
  92%, 100% { transform: translate(0); }
}

/* ── CRT Flicker ── */
.crt-flicker {
  animation: crtFlicker 0.15s infinite;
}

@keyframes crtFlicker {
  0% { opacity: 0.97; }
  50% { opacity: 1; }
  100% { opacity: 0.98; }
}

/* ── Pixel Buttons ── */
.pixel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  border: var(--border-pixel) solid var(--text-secondary);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
  box-shadow:
    var(--border-pixel) var(--border-pixel) 0px rgba(0,0,0,0.6);
  image-rendering: pixelated;
}

.pixel-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow:
    calc(var(--border-pixel) + 1px) calc(var(--border-pixel) + 1px) 0px rgba(0,0,0,0.6);
}

.pixel-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.pixel-btn-primary {
  border-color: var(--accent-games);
  color: var(--accent-games);
  background: rgba(0, 245, 212, 0.08);
}
.pixel-btn-primary:hover {
  background: rgba(0, 245, 212, 0.18);
  box-shadow:
    calc(var(--border-pixel) + 1px) calc(var(--border-pixel) + 1px) 0px rgba(0,0,0,0.6),
    0 0 15px rgba(0, 245, 212, 0.2);
}

.pixel-btn-secondary {
  border-color: var(--accent-movies);
  color: var(--accent-movies);
  background: rgba(247, 37, 133, 0.08);
}
.pixel-btn-secondary:hover {
  background: rgba(247, 37, 133, 0.18);
  box-shadow:
    calc(var(--border-pixel) + 1px) calc(var(--border-pixel) + 1px) 0px rgba(0,0,0,0.6),
    0 0 15px rgba(247, 37, 133, 0.2);
}

.pixel-btn-accent {
  border-color: var(--accent-series);
  color: var(--accent-series);
  background: rgba(255, 214, 10, 0.08);
}
.pixel-btn-accent:hover {
  background: rgba(255, 214, 10, 0.18);
  box-shadow:
    calc(var(--border-pixel) + 1px) calc(var(--border-pixel) + 1px) 0px rgba(0,0,0,0.6),
    0 0 15px rgba(255, 214, 10, 0.2);
}

.pixel-btn-filled {
  background: var(--accent-games);
  color: var(--text-inverse);
  border-color: var(--accent-games);
}
.pixel-btn-filled:hover {
  background: #33f7dd;
}

.pixel-btn-lg {
  padding: var(--space-md) var(--space-xl);
  /* Antes --pixel-sm (10px): en Press Start 2P un CTA principal a 10px se lee
     mal (q-01). Es el único tamaño que sube — --pixel-xs/sm siguen igual
     para el resto de botones y etiquetas que sí caben apretados. */
  font-size: var(--pixel-base);
}

.pixel-btn-sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--pixel-xs);
}

/* ── Entrance Animations ── */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

.slide-up {
  animation: slideUp 0.6s ease forwards;
}

.slide-in-left {
  animation: slideInLeft 0.5s ease forwards;
}

.slide-in-right {
  animation: slideInRight 0.5s ease forwards;
}

.scale-in {
  animation: scaleIn 0.4s ease forwards;
}

/* Stagger support */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.stagger-item.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ── Pixel Divider: RETIRADO (t-02 y t-04, 11/09/2026) ──
   Aquí vivía `.pixel-divider`, la raya de guiones de colores entre secciones,
   con sus variantes `-magenta` y `-yellow`. A Rubén no le gustaba en ningún
   sitio: se quitó de Inicio, Juegos, Películas y Series (t-02) y de Gratis,
   Ranking y Recomendados (t-04), y con ello su CSS (aquí, en pages.css,
   polish.css y redesign.css). Si hace falta separar dos secciones, que lo
   haga el aire (`--pc-ritmo`, `--pc-ritmo-corto` de sistema.css), no una raya
   de guiones. */

/* ── Retro Grid Background ── */
.retro-grid-bg {
  background-image:
    linear-gradient(rgba(0, 245, 212, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 212, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Floating Pixels Animation ── */
@keyframes floatPixel {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  50% { transform: translateY(-15px) rotate(180deg); opacity: 1; }
}

.float-pixel {
  animation: floatPixel 3s ease-in-out infinite;
}

/* ── Blink cursor ── */
.blink-cursor::after {
  content: '▊';
  animation: blink 1s step-start infinite;
  color: var(--accent-games);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Loading bar pixel ── */
@keyframes pixelLoad {
  0% { width: 0%; }
  100% { width: 100%; }
}

.pixel-progress {
  height: 6px;
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.pixel-progress-bar {
  height: 100%;
  background: var(--accent-games);
  animation: pixelLoad 1.5s ease-in-out;
  image-rendering: pixelated;
}


/* ── Botón macizo ──────────────────────────────────────────────────────────
   El `pixel-btn` de contorno está bien para lo secundario, pero las tres webs
   de referencia usan para la acción principal un botón **relleno con una
   sombra dura debajo**: el borde inferior más oscuro es lo que hace que
   parezca una tecla que se puede hundir.

   Y al pulsarlo se hunde de verdad —baja los mismos píxeles que mide su
   sombra— en vez de cambiar de color. Es la diferencia entre un botón que
   parece pixel art y uno que se comporta como pixel art. */
.pixel-btn-macizo {
  border: none;
  background: var(--accent-games);
  color: var(--text-inverse);
  box-shadow: 0 4px 0 0 #00a892, 4px 4px 0 0 rgba(0, 0, 0, .55);
  transform: translateY(0);
}
.pixel-btn-macizo:hover {
  background: #2affe0;
  box-shadow: 0 4px 0 0 #00a892, 4px 4px 0 0 rgba(0, 0, 0, .55), 0 0 20px rgba(0, 245, 212, .35);
  transform: translateY(0);
}
.pixel-btn-macizo:active {
  /* Se hunde exactamente lo que mide la sombra: 4 px. */
  transform: translateY(4px);
  box-shadow: 0 0 0 0 #00a892, 0 0 0 0 rgba(0, 0, 0, .55);
}

/* ── El polvo de estrellas del fondo ───────────────────────────────────────
   Las cuatro referencias tienen el fondo salpicado de puntos y cruces
   diminutas. No es decoración gratuita: es lo que impide que un fondo negro
   plano se lea como «web oscura» en vez de como «espacio».

   Son dos degradados repetidos, no una imagen: pesa cero y escala solo. */
.fondo-estrellas {
  position: relative;
}
.fondo-estrellas::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px),
    radial-gradient(rgba(0, 245, 212, .12) 1px, transparent 1px);
  background-size: 64px 64px, 96px 96px;
  background-position: 0 0, 32px 48px;
}
.fondo-estrellas > * { position: relative; z-index: 1; }

/* ── La cinta que corre ────────────────────────────────────────────────────
   Milady separa sus secciones con una banda de texto que se desplaza. Es de
   las pocas cosas de esas webs que además de bonita es **útil**: aquí lleva
   lo que está gratis ahora mismo, así que informa mientras decora.

   Va a `steps()` como todo lo demás: un desplazamiento suave delataría que
   esto no es un juego. */
.cinta {
  overflow: hidden;
  border-top: 2px solid var(--accent-games);
  border-bottom: 2px solid var(--accent-games);
  background: rgba(0, 245, 212, .07);
  padding: 9px 0;
  margin: var(--space-lg) 0;
}
.cinta-pista {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--accent-games);
  letter-spacing: .08em;
  animation: cintaCorre 38s steps(120) infinite;
}
.cinta-sep { color: var(--text-muted); margin: 0 var(--space-md); }

@keyframes cintaCorre {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Quien haya pedido menos movimiento, que la cinta se pare. */
@media (prefers-reduced-motion: reduce) {
  .cinta-pista { animation: none; }
}