:root {
  --vantablack: #09090B;
  --zinc-900: #18181B;
  --acid-yellow: #D6FF00;
  --off-white: #FAFAFA;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--vantablack);
  color: var(--off-white);
  font-family: 'Geist Mono', monospace;
  overflow-x: hidden;
  cursor: none;
}

@media (max-width: 768px) {
  body {
    cursor: auto;
  }
  .custom-cursor {
    display: none !important;
  }
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Outfit', sans-serif;
}

/* Custom Cursor */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: var(--acid-yellow);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
  mix-blend-mode: difference;
}

.custom-cursor.hovered {
  width: 60px;
  height: 60px;
  background-color: var(--off-white);
  mix-blend-mode: difference;
}

/* Glassmorphism Cards */
.glass-card {
  background: rgba(24, 24, 27, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.4s ease, border-color 0.4s ease;
}

.glass-card:hover {
  border-color: rgba(214, 255, 0, 0.3); /* Acid yellow subtle border */
}

/* Hide scrollbar for clean look */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--vantablack);
}

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

::-webkit-scrollbar-thumb:hover {
  background: var(--acid-yellow);
}

/* Utility classes for GSAP */
.reveal-text {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.horizontal-scroll-container {
  display: flex;
  width: 300vw;
}

.panel {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Text Noise / Grain */
.bg-noise {
  position: relative;
}

.bg-noise::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: url('https://grainy-gradients.vercel.app/noise.svg');
  opacity: 0.05;
  pointer-events: none;
  z-index: 50;
}

/* Animated Ambient Background */
.ambient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  background-color: var(--vantablack);
  pointer-events: none;
}

/* Engineering Blueprint Grid Animado */
.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 1;
  animation: moveGrid 8s linear infinite;
}

@keyframes moveGrid {
  0% { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}

/* Glowing Orbs Dinámicos */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.25; /* Un poco más de opacidad para que destaquen */
  animation: float 10s infinite ease-in-out alternate;
}

.orb-1 {
  width: 45vw;
  height: 45vw;
  background-color: var(--acid-yellow);
  top: -10vw;
  left: -10vw;
  animation-delay: 0s;
  animation-duration: 12s;
}

.orb-2 {
  width: 40vw;
  height: 40vw;
  background-color: var(--off-white);
  bottom: -10vw;
  right: -10vw;
  animation-direction: alternate-reverse;
  animation-duration: 15s;
}

.orb-3 {
  width: 35vw;
  height: 35vw;
  background-color: var(--acid-yellow);
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  animation-duration: 10s;
  opacity: 0.15;
}

@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(15vw, 15vh) scale(1.2); }
  50% { transform: translate(-10vw, 25vh) scale(0.9); }
  75% { transform: translate(-15vw, -10vh) scale(1.1); }
  100% { transform: translate(0vw, -15vh) scale(1); }
}

/* Efecto Cenizas / Partículas */
.ash-particle {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  animation: fly-ash linear infinite;
}

@keyframes fly-ash {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: var(--max-opacity);
  }
  80% {
    opacity: var(--max-opacity);
  }
  100% {
    transform: translateY(-110vh) translateX(calc(15vw * var(--direction))) rotate(360deg);
    opacity: 0;
  }
}