/* ===================================================================
   KIMOLIZER III - BIBLIOTECA DE EFECTOS VISUALES
   ===================================================================
   
   Este archivo contiene efectos CSS reutilizables.
   Cada efecto tiene:
     1. Un nombre único (clase base)
     2. Documentación clara de qué hace
     3. Ejemplo de cómo aplicarlo
     4. Especificaciones de fuente y tamaño (cuando aplica)
   
   Para aplicar un efecto, simplemente añade la clase al elemento
   en el HTML (si tienes acceso) o usa un selector en tu CSS personalizado.
   
   =================================================================== */


/* ===================================================================
   IMPORTS DE FUENTES (para efectos de texto)
   ===================================================================
   Estas fuentes son necesarias para que los efectos se vean como
   en el diseño original ochentero / synthwave.
*/

@import url('https://fonts.googleapis.com/css?family=Titillium+Web:900');
@import url('https://fonts.googleapis.com/css?family=Mr+Dafoe');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
@import url('https://fonts.googleapis.com/css?family=Monoton');
@import url('https://fonts.googleapis.com/css?family=Candal');
@import url('https://fonts.googleapis.com/css?family=Righteous');


/* ===================================================================
   TABLA DE REFERENCIA RÁPIDA - EFECTOS DE TEXTO
   ===================================================================
   
   | Clase CSS                | Fuente              | Tamaño ref | Estilo clave           |
   |--------------------------|---------------------|------------|------------------------|
   | .effect-chrome           | Titillium Web 900   | 200px      | italic + reflejo       |
   | .effect-dreams           | Mr Dafoe            | 160px      | rotate(-15deg)         |
   | .effect-victory          | Permanent Marker    | 180px      | skew + gradiente       |
   | .effect-future-cop       | Monoton             | 200px      | gradiente azul/cian    |
   | .effect-street-machine   | Candal              | 180px      | italic + sombra roja   |
   | .effect-vectro           | Righteous           | 160px      | RGB separado           |
   
   =================================================================== */


/* ===================================================================
   EFECTO 1: RETRO NEON (estilo vaporwave / synthwave)
   ===================================================================
   
   Descripción: Gradiente azul/cyan + ruido de estática + sombras psicodélicas
   
   Ideal para: Botones de navegación, ruedita de settings, elementos destacados
   
   Cómo usar:
     <button class="effect-retro-neon">Texto</button>
*/

.effect-retro-neon {
  background: linear-gradient(to bottom, #00f2ff 0%, #e2fbff 50%, #0a343f 51%, #0094f7 100%);
  background-blend-mode: multiply;
  background-size: 10px 100px;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  display: inline-block;
  position: relative;
  letter-spacing: 4px;
}

.effect-retro-neon:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 5px #00f2ff);
  cursor: pointer;
}

.effect-retro-neon::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://i.imgur.com/Ym9HCsT.gif');
  background-blend-mode: screen;
  background-size: 150px;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}

.effect-retro-neon::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-shadow: 1px -1px 0 rgba(255,255,255,0.5),
               3px 1px 3px rgba(255,0,255,0.85),
               -3px -2px 3px rgba(0,0,255,0.85),
               1px -2px 0 rgba(255,255,255,0.8);
  pointer-events: none;
  z-index: -1;
}

.effect-retro-neon:hover::before {
  opacity: 0.35;
}


/* ===================================================================
   EFECTO 2: MAGENTA GLOW (kimolizer signature)
   ===================================================================
   
   Descripción: Gradiente magenta/rosa + brillo neón
   
   Ideal para: Botones de acción principal, elementos destacados
*/

.effect-magenta-glow {
  background: linear-gradient(135deg, #FF006E 0%, #FF8C42 50%, #FF006E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 0 8px #FF006E);
  transition: all 0.3s ease;
}

.effect-magenta-glow:hover {
  filter: drop-shadow(0 0 15px #FF006E) drop-shadow(0 0 5px #FF8C42);
  transform: scale(1.05);
}


/* ===================================================================
   EFECTO 3: CYAN PULSE
   ===================================================================
   
   Descripción: Cyan sólido con pulso de opacidad (ideal para estados activos)
   
   Ideal para: Botón Play cuando está sonando, indicadores "en vivo"
*/

.effect-cyan-pulse {
  color: #00f2ff !important;
  filter: drop-shadow(0 0 5px #00f2ff);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 5px #00f2ff);
  }
  50% {
    opacity: 0.6;
    filter: drop-shadow(0 0 2px #00f2ff);
  }
}


/* ===================================================================
   EFECTO 4: STATIC NOISE (solo ruido)
   ===================================================================
   
   Descripción: Solo la capa de ruido, sin gradiente
   
   Ideal para: Overlays, fondos secundarios
*/

.effect-static-noise {
  position: relative;
}

.effect-static-noise::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://i.imgur.com/Ym9HCsT.gif');
  background-size: cover;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}


/* ===================================================================
   EFECTO 5: RETRO GLITCH (estilo error de VHS)
   ===================================================================
   
   Descripción: Efecto de "desplazamiento" tipo glitch
   
   Ideal para: Mensajes de error, transiciones, elementos dramáticos
   
   NOTA: El elemento debe tener el atributo data-text con el mismo texto
   Ejemplo: <h1 data-text="ERROR" class="effect-retro-glitch">ERROR</h1>
*/

.effect-retro-glitch {
  position: relative;
  animation: glitch-skew 3s infinite linear alternate-reverse;
}

.effect-retro-glitch::before,
.effect-retro-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.effect-retro-glitch::before {
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
  left: 2px;
  text-shadow: -2px 0 #ff00c1;
}

.effect-retro-glitch::after {
  animation: glitch-anim-2 2s infinite linear alternate-reverse;
  left: -2px;
  text-shadow: 2px 0 #00fff9;
}

@keyframes glitch-anim-1 {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  20% { clip-path: inset(20% 0 30% 0); transform: translate(-2px); }
  40% { clip-path: inset(50% 0 20% 0); transform: translate(2px); }
  60% { clip-path: inset(10% 0 60% 0); transform: translate(-1px); }
  80% { clip-path: inset(80% 0 5% 0); transform: translate(1px); }
}

@keyframes glitch-anim-2 {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  20% { clip-path: inset(30% 0 20% 0); transform: translate(2px); }
  40% { clip-path: inset(20% 0 50% 0); transform: translate(-2px); }
  60% { clip-path: inset(60% 0 10% 0); transform: translate(1px); }
  80% { clip-path: inset(5% 0 80% 0); transform: translate(-1px); }
}

@keyframes glitch-skew {
  0%, 100% { transform: skew(0deg); }
  20% { transform: skew(2deg); }
  40% { transform: skew(-2deg); }
  60% { transform: skew(1deg); }
  80% { transform: skew(-1deg); }
}


/* ===================================================================
   EFECTO 6: SCANLINE (líneas de escaneo CRT)
   ===================================================================
   
   Descripción: Líneas horizontales tipo monitor antiguo
   
   Ideal para: Fondos, contenedores, overlay global
*/

.effect-scanline {
  position: relative;
  overflow: hidden;
}

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


/* ===================================================================
   EFECTO 7: VIGNETTE (oscurecimiento de bordes)
   ===================================================================
   
   Descripción: Oscurece los bordes para focalizar el centro
   
   Ideal para: Canvas, overlays de pantalla completa
*/

.effect-vignette {
  position: relative;
}

.effect-vignette::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
  z-index: 2;
}


/* ===================================================================
   EFECTO 8: CHROME (texto metálico con reflejo animado)
   ===================================================================
   
   Descripción: Gradiente metálico + animación de brillo tipo cromo
   
   Fuente requerida: 'Titillium Web', peso 900, estilo italic
   Tamaño de referencia: 200px
   
   Ideal para: Títulos principales, logotipos, elementos destacados
   
   Cómo usar: <h1 class="effect-chrome">CHROME</h1>
*/

.effect-chrome {
  position: relative;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 200px;
  line-height: 1;
  background-image: linear-gradient(#378DBC 0%, #B6E8F1 46%, #ffffff 50%, #32120E 54%, #FFC488 58%, #582C11 90%, #EC9B4E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  margin: 0;
}

.effect-chrome::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  background-image: linear-gradient(-40deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
  background-position: -680px 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: chromeShine 6s linear 2s infinite;
}

@keyframes chromeShine {
  0% { background-position: -680px 0; }
  10%, 100% { background-position: 420px 0; }
}


/* ===================================================================
   EFECTO 9: DREAMS (texto neón rosa inclinado)
   ===================================================================
   
   Descripción: Rosa neón con sombra y rotación estilo "Miami Vice"
   
   Fuente requerida: 'Mr Dafoe', cursive
   Tamaño de referencia: 160px
   
   Ideal para: Textos destacados, citas, elementos atmosféricos
   
   Cómo usar: <h3 class="effect-dreams">Dreams</h3>
*/

.effect-dreams {
  font-family: 'Mr Dafoe', cursive;
  font-weight: normal;
  font-size: 160px;
  color: #F975F7 !important;
  transform: rotate(-15deg);
  filter: drop-shadow(2px 2px 20px #f008b7);
  text-shadow: 1px 1px 0 #f008b7;
  margin: 0;
  line-height: 1;
}


/* ===================================================================
   EFECTO 10: VICTORY (texto inclinado con gradiente rosa)
   ===================================================================
   
   Descripción: Transformación skew + gradiente rosa/magenta brillante
   
   Fuente requerida: 'Permanent Marker', cursive
   Tamaño de referencia: 180px
   
   Ideal para: Títulos hero, mensajes de éxito
   
   Cómo usar: <h1 class="effect-victory">Victory</h1>
*/

.effect-victory {
  font-family: 'Permanent Marker', cursive;
  font-weight: normal;
  font-size: 180px;
  font-variant: small-caps;
  transform: skew(-15deg, -15deg);
  background-image: linear-gradient(#FF0FF8 0%, #F9F9F7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(2px 2px 20px #f008b7);
  margin: 0;
  line-height: 1;
}


/* ===================================================================
   EFECTO 11: FUTURE COP (futurista azul/cian)
   ===================================================================
   
   Descripción: Gradiente de azules profundos a cian brillante
   
   Fuente requerida: 'Monoton', cursive
   Tamaño de referencia: 200px
   
   Ideal para: Títulos con temática cyberpunk/retro-futurista
   
   Cómo usar: <h1 class="effect-future-cop">FUTURE COP</h1>
*/

.effect-future-cop {
  font-family: 'Monoton', cursive;
  font-weight: normal;
  font-size: 200px;
  background-image: linear-gradient(#022486 0%, #0AD0FD 30%, #BDFCFC 40%, #D8FFFF 44%, #00081C 44%, #00081C 50%, #074A67 52%, #1CD8FE 60%, #7FEDFE 62%, #96F5FC 70%, #0FD8FA 73%, #0BD2FD 88%, #AFFDFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  line-height: 1;
  margin: 0;
}


/* ===================================================================
   EFECTO 12: STREET MACHINE (rojo con barras decorativas)
   ===================================================================
   
   Descripción: Rojo intenso con sombra tipo "3D" estilo letrero
   
   Fuente requerida: 'Candal', sans-serif, estilo italic
   Tamaño de referencia: 180px
   
   Ideal para: Secciones agresivas, mensajes de advertencia, títulos de acción
   
   Cómo usar: <h1 class="effect-street-machine">STREET</h1>
*/

.effect-street-machine {
  font-family: 'Candal', sans-serif;
  font-weight: normal;
  font-style: italic;
  font-size: 180px;
  color: #fff !important;
  text-shadow: -10px 10px 0 #ed2121;
  margin: 0;
  line-height: 1;
  display: inline-block;
}

/* Variante rojo sólido (para texto normal) */
.effect-street-red {
  font-family: 'Candal', sans-serif;
  font-weight: normal;
  font-style: italic;
  color: #ed2121 !important;
  text-shadow: 3px 3px 0px #F9D2D2;
}


/* ===================================================================
   EFECTO 13: VECTRO (RGB separado estilo neón)
   ===================================================================
   
   Descripción: Efecto de texto con capas RGB rojo, verde y azul separadas
   
   Fuente requerida: 'Righteous', cursive
   Tamaño de referencia: 160px
   
   Ideal para: Títulos con efecto 3D psicodélico
   
   Cómo usar: 
     <h1 class="effect-vectro">
       <span class="vectro-body">VECTRO</span>
       <span class="vectro-red">R</span>
       <span class="vectro-green">G</span>
       <span class="vectro-blue">B</span>
     </h1>
*/

.effect-vectro {
  font-family: 'Righteous', cursive;
  font-size: 160px;
  margin: 0;
  line-height: 1;
}

.vectro-body {
  background-image: linear-gradient(#C3BFB4 0%, #FDFCFA 50%, #E8E7E5 51%, #757172 52%, #E8E9DB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(2px 2px 15px #3F59F4);
}

.vectro-red {
  color: #F10C20;
  filter: drop-shadow(2px 2px 15px #F10C20);
  font-style: italic;
}

.vectro-green {
  color: #6BFF2B;
  filter: drop-shadow(2px 2px 15px #6BFF2B);
  font-style: italic;
}

.vectro-blue {
  color: #3F59F4;
  filter: drop-shadow(2px 2px 15px #3F59F4);
  font-style: italic;
}


/* ===================================================================
   NOTAS ADICIONALES SOBRE TAMAÑOS RESPONSIVOS
   ===================================================================
   
   Los tamaños de fuente de referencia (160-200px) son para pantallas grandes.
   Para tamaños más pequeños, usa media queries o escala proporcionalmente:
   
   @media (max-width: 768px) {
     .effect-chrome { font-size: 80px; }
     .effect-dreams { font-size: 64px; }
     .effect-victory { font-size: 72px; }
     .effect-future-cop { font-size: 80px; }
     .effect-street-machine { font-size: 72px; }
     .effect-vectro { font-size: 64px; }
   }
   d
   =================================================================== */