/* Base Styles */
:root {
  --bg-color: #1a001a;
  /* Deep purple (space theme) */
  --primary-color: #8a2be2;
  /* Blue-violet */
  --secondary-color: #e0b0ff;
  /* Light purple */
  --text-color: #f0f0f0;
  --font-primary: 'Orbitron', sans-serif;
  /* Futuristic */
  --font-secondary: 'Space Mono', monospace;
  /* Space-themed */
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-secondary);

  color: var(--text-color);
  overflow-x: hidden;
}

/* Fixed background Spline (stars) behind everything */
.background-spline {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
}

#bgSpline {
  width: 100%;
  height: 100%;
}

/* Hide scrollbars globally while keeping scroll functionality */
* {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

*::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

/* =========================================
   SCROLL ANIMATIONS
   ========================================= */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.animate-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger delays are handled in JS, but we can set some defaults */
.animate-delay-1 {
  transition-delay: 0.1s;
}

.animate-delay-2 {
  transition-delay: 0.2s;
}

.animate-delay-3 {
  transition-delay: 0.3s;
}