/* ==========================================================================
   Estilos Customizados - Raido Studios
   ========================================================================== */

/* 1. Definición de Tipografías locales (Self-hosted) */

/* --- Nationale Font Family --- */
@font-face {
  font-family: 'Nationale';
  src: url('../fonts/Nationale-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Nationale';
  src: url('../fonts/Nationale-ThinItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: 'Nationale';
  src: url('../fonts/Nationale-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Nationale';
  src: url('../fonts/Nationale-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Nationale';
  src: url('../fonts/Nationale-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Nationale';
  src: url('../fonts/Nationale-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Nationale';
  src: url('../fonts/Nationale-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Nationale';
  src: url('../fonts/Nationale-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Nationale';
  src: url('../fonts/Nationale-DemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Nationale';
  src: url('../fonts/Nationale-DemiBoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Nationale';
  src: url('../fonts/Nationale-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Nationale';
  src: url('../fonts/Nationale-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Nationale';
  src: url('../fonts/Nationale-ExtraBoldItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: 'Nationale';
  src: url('../fonts/Nationale-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Nationale';
  src: url('../fonts/Nationale-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
}

/* --- Baloo 2 Font Family --- */
@font-face {
  font-family: 'Baloo 2';
  src: url('../fonts/Baloo2-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Baloo 2';
  src: url('../fonts/Baloo2-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Baloo 2';
  src: url('../fonts/Baloo2-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Baloo 2';
  src: url('../fonts/Baloo2-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Baloo 2';
  src: url('../fonts/Baloo2-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

/* 2. Reglas Globales */
html {
  scroll-behavior: smooth;
  background-color: #100045; /* Raido Dark Blue */
  color: #ffffff;
}

/* 3. Personalización del Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #100045;
}

::-webkit-scrollbar-thumb {
  background: #aafaf0;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #aafaf0;
}

/* 4. Utilidades de Diseño Premium (Glassmorphism & Glow) */
.glass-card {
  background: rgba(16, 0, 69, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(170, 250, 240, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-card-purple {
  background: rgba(75, 0, 120, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(75, 0, 120, 0.2);
}

.glow-cyan {
  box-shadow: 0 0 15px rgba(170, 250, 240, 0.3);
}

.glow-cyan-hover:hover {
  box-shadow: 0 0 25px rgba(170, 250, 240, 0.6);
  border-color: rgba(170, 250, 240, 0.8);
  transition: all 0.3s ease-in-out;
}

/* 5. Animación de Gradiente en el Fondo (Deshabilitado) */

/* 6. Efecto de Neón para Textos */
.text-neon-cyan {
  text-shadow: 0 0 5px rgba(170, 250, 240, 0.5), 0 0 10px rgba(170, 250, 240, 0.3);
}

.text-neon-purple {
  text-shadow: 0 0 5px rgba(75, 0, 120, 0.5), 0 0 10px rgba(75, 0, 120, 0.3);
}

/* 7. Animación de Glitch para Texto Dinámico */
.glitch-word {
  display: inline-block;
  position: relative;
}

.glitch-word.glitching {
  animation: textGlitch 0.25s steps(2, start) infinite;
}

@keyframes textGlitch {
  0% {
    transform: translate(1px, 1px) skew(1deg);
    text-shadow: -1px 0 #4b0078, 1px 0 #aafaf0;
  }
  20% {
    transform: translate(-1px, -1px) skew(-2deg);
    text-shadow: 1.5px -1.5px #4b0078, -1.5px 1.5px #aafaf0;
  }
  40% {
    transform: translate(2px, 0px) skew(0deg);
    text-shadow: -1.5px -1.5px #4b0078, 1.5px 1.5px #aafaf0;
  }
  60% {
    transform: translate(-2px, 1px) skew(3deg);
    text-shadow: 2px 2px #4b0078, -2px -2px #aafaf0;
  }
  80% {
    transform: translate(1px, -2px) skew(-1deg);
    text-shadow: -2px 2px #4b0078, 2px -2px #aafaf0;
  }
  100% {
    transform: translate(0) skew(0);
    text-shadow: none;
  }
}

/* 8. Fondo Degradado Inclinado para el Footer */
.footer-gradient {
  background: linear-gradient(115deg, #4b0078 0%, #100045 100%);
}

/* 9. Renderizado de Pixel Art (Sin antialiasing) */
.pixel-art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

/* 10. Estilos para Header Dinámico con Degradado (Azul a Púrpura) */
.header-scrolled {
  background: linear-gradient(115deg, rgba(16, 0, 69, 0.85) 0%, rgba(75, 0, 120, 0.85) 100%) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(170, 250, 240, 0.1);
}

.header-top {
  background: linear-gradient(115deg, rgba(16, 0, 69, 0.45) 0%, rgba(75, 0, 120, 0.45) 100%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.glow-purple-hover:hover {
  box-shadow: 0 0 25px rgba(75, 0, 120, 0.6);
  border-color: rgba(75, 0, 120, 0.8);
  transition: all 0.3s ease-in-out;
}