@import url("https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Space+Grotesk:wght@300;400;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sarina&display=swap");

body {
  font-family: "Space Grotesk", sans-serif;
  background-image: radial-gradient(circle at 50% 0%, #0a1945 0%, #02040a 60%);
  background-attachment: fixed;
}

.font-sarina {
  font-family: "Sarina", cursive;
}
.font-y2k {
  font-family: "Syncopate", sans-serif;
}

.y2k-glow {
  text-shadow:
    0 0 15px rgba(125, 211, 252, 0.6),
    0 0 30px rgba(14, 165, 233, 0.4);
  will-change: text-shadow;
}

.glass-panel {
  background: rgba(10, 15, 36, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.y2k-border {
  border: 1px solid #1e40af;
  box-shadow:
    0 0 10px #1e40af inset,
    0 0 10px #1e40af;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.y2k-border:hover {
  border-color: #38bdf8;
  box-shadow:
    0 0 15px #38bdf8 inset,
    0 0 25px rgba(56, 189, 248, 0.6),
    0 0 45px rgba(56, 189, 248, 0.3);
  transform: scale(1.08); /* slightly enlarge */
}

/* Clase para el relieve del título */
.text-relief {
  text-shadow:
    3px 3px 0px #1e40af,
    6px 6px 0px #02040a,
    10px 10px 20px rgba(0, 0, 0, 0.9),
    0px 0px 40px rgba(125, 211, 252, 0.4);
  will-change: text-shadow;
}

/* Ocultar scrollbar en carrusel */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* --- CLASES DE ANIMACIÓN (Reemplazo del componente React FadeInSection) --- */
.fade-section {
  opacity: 0;
  transition: all 1000ms ease-out;
  will-change: transform, opacity;
}
.fade-up {
  transform: translateY(3rem);
}
.fade-left {
  transform: translateX(-3rem);
}
.fade-right {
  transform: translateX(3rem);
}
.fade-none {
  transform: scale(0.95);
}

.fade-section.is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Optimización de Rendering - Aplaza pintura de secciones fuera de pantalla */
section:not(#hero) {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px; /* Tamaño estimado de fallback */
}