/* ============================================================
   REEMPLAZAR LOGO BUTTERCHURN POR "KIMOLIZER 3"
   VERSIÓN SIMPLE - Respeta la estructura original
   ============================================================ */

/* ============================================================
   RETRO GRID SYNTHWAVE - Variables CSS
   ============================================================ */
:root {
  --grid-neon-cyan: #00f2ff;
  --grid-neon-pink: #ff006e;
  --grid-size: 50px;
  --grid-speed: 3s;
}

/* 1. IMPORTAR FUENTE HONK */
@import url('https://fonts.googleapis.com/css2?family=Honk&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Candal&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128+Text&display=swap');

/* Airstrike Academy - Fuente retro */
@font-face {
  font-family: 'Airstrike Academy';
  src: url('/public/fonts/airstrikegrad.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   INTRO KIMOLIZER - ESTILOS UNIFICADOS
   ============================================ */
#kimo-intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0a0a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 1.5s ease;
}

.kimo-intro-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#00f2ff 1px, transparent 1px), linear-gradient(90deg, #00f2ff 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: center bottom;
  animation: kimo-move-grid 3s linear infinite;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}

.kimo-intro-radial {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.8) 70%, rgba(0,0,0,0.95) 100%);
  pointer-events: none;
  z-index: 2;
}

.kimo-intro-content {
  position: relative;
  z-index: 3;
  text-align: center;
}

.kimo-intro-title {
  font-family: 'Airstrike Academy', 'Monoton', cursive;
  font-size: 4.5rem;
  margin: 0;
  animation: kimo-pulse 2s infinite;
  display: inline-block;
  white-space: nowrap;
  letter-spacing: 2px;
  padding: 0 15px;
  transform: scaleX(0.95);
}

.kimo-intro-subtitle {
  font-family: 'Libre Barcode 128 Text', 'Candal', monospace;
  font-size: 1.8rem;
  font-weight: normal;
  color: #ed2121;
  margin-top: 20px;
  letter-spacing: 6px;
  text-shadow: 0 0 5px #ff006e, 0 0 10px #ff006e;
  white-space: nowrap;
}

@keyframes kimo-move-grid {
  from { background-position: 0 0; }
  to { background-position: 0 50px; }
}

@keyframes kimo-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Desactivar pseudo-elemento amarillo dentro de la intro */
#kimo-intro h1::before,
#kimo-intro [class*="title"]::before,
#kimo-intro div > h1::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* 2. OCULTAR LA IMAGEN DEL LOGO */
.jss4 img {
  display: none !important;
}

/* 3. CONVERTIR EL <a> EN UN CONTENEDOR DE TEXTO */
a[label="Visualizer"] {
  background: transparent !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;  /* Respeta la altura del header */
  padding: 0 15px !important;
}

/* 4. EL TEXTO "KIMOLIZER 3" DENTRO DEL MISMO <a> */
a[label="Visualizer"] {
  font-family: 'Honk', 'Orbitron', monospace !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  color: #FF006E !important;
  text-shadow: 0 0 8px #FF006E, 0 0 12px #00D9FF !important;
  white-space: nowrap !important;
  transition: all 0.3s ease !important;
}

/* 5. EFECTO HOVER */
a[label="Visualizer"]:hover {
  color: #00D9FF !important;
  text-shadow: 0 0 12px #FF006E, 0 0 20px #00D9FF, 0 0 30px #8338EC !important;
  transform: scale(1.02) !important;
}

/* Cambiar color del logo SVG a neón */
.jss4 svg path,
.jss4 svg g {
  fill: #FF006E !important;
  stroke: #00D9FF !important;
}

/* ============================================================
   EFECTOS PARA LA IMAGEN DE FONDO MILKYWAY
   ============================================================ */

/* Selector correcto: .milkyway (tiene background-image de milkyway.jpg) */
/* SOLUCIÓN: Opacity 0.5 para hacer la imagen semitransparente y ver el degradado de #root */
.milkyway {
  opacity: 0.5 !important;
}

/* Quitar blend modes que puedan interferir */
/*
.milkyway {
  background-blend-mode: overlay;
  background-color: rgba(255, 0, 110, 0.5);
  mix-blend-mode: screen;
}
*/

/* Ajustar la capa de cover (.milkywayCover) para 50% fusión */
.milkywayCover {
  opacity: 0.5 !important; /* Mantener en 0.5 para 50% */
}

/* ============================================================
   KIMOLIZER BACKDROP - Imagen de fondo
   ============================================================ */
.kimo-backdrop {
  background: url('/static/media/milky.jpg') no-repeat center center !important;
  background-size: cover !important;
  opacity: 0.2 !important;
  mix-blend-mode: overlay !important;
}

/* ============================================================
   EFECTOS DE PARTÍCULAS ANIMADAS
   ============================================================ */

/* Contenedor de partículas */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1; /* Debajo del logo pero encima del fondo */
  overflow: hidden;
  opacity: 0.5; /* 50% opacidad general */
}

/* Partículas individuales */
.particle {
  position: absolute;
  background: radial-gradient(circle, #FF006E 0%, #00D9FF 50%, transparent 100%);
  border-radius: 50%;
  animation: float 6s infinite linear;
  opacity: 0.5; /* 50% opacidad por partícula */
}

.particle:nth-child(odd) {
  animation-duration: 8s;
  animation-delay: -2s;
}

.particle:nth-child(3n) {
  animation-duration: 10s;
  animation-delay: -4s;
}

/* Animación de flotación */
@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.5; /* 50% en el pico */
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

/* Generar partículas dinámicamente con JavaScript (10 partículas para 50%) - Movido a index.html */

/* ============================================================
   RETRO GRID SYNTHWAVE - Grid 3D con perspectiva
   ============================================================ */
.retro-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(var(--grid-neon-cyan) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-neon-cyan) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  transform: perspective(500px) rotateX(60deg);
  transform-origin: center bottom;
  animation: moveGrid var(--grid-speed) linear infinite;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   INTRO BACKGROUND - Fondo radial con desvanecimiento
   ============================================================ */
.kimo-intro-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0) 0%,      /* Centro completamente transparente */
    rgba(0, 0, 0, 0.3) 50%,   /* Transición suave */
    rgba(0, 0, 0, 0.8) 80%,   /* Oscurece hacia bordes */
    rgba(0, 0, 0, 0.95) 100%  /* Bordes casi negros */
  ),
  linear-gradient(135deg, rgba(255, 0, 110, 0.05) 0%, rgba(0, 242, 255, 0.05) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ============================================================
   ANIMACIÓN: Movimiento del grid
   ============================================================ */
@keyframes moveGrid {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 var(--grid-size);
  }
}

/* Efecto neón hover */
.jss4:hover svg path,
.jss4:hover svg g {
  fill: #00D9FF !important;
  stroke: #FF006E !important;
  filter: drop-shadow(0 0 4px #FF006E) drop-shadow(0 0 8px #00D9FF);
  transition: all 0.3s ease;
}

/* ============================================
   MILKYWAY IMAGE - INYECTADA POR CSS
   ============================================ */

/* Forzamos que el contenedor exista y muestre nuestra imagen */
.milkyway {
  background: url('/static/media/milky.jpg') no-repeat center center !important;
  background-size: cover !important;
  opacity: 0.2 !important;
  mix-blend-mode: overlay !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;  /* #root es 0, partículas probablemente z-index 3 o 4 */
}

/* Respaldo: asegurar que el header sea visible */
.jss1 {
  opacity: 1 !important;
}