/* ==========================================
   CSS Variables
   ========================================== */
:root {
  --ink: #0f172a;
  --accent: #0ea5e9;
  --accent-2: #f97316;
  --paper: #f8fafc;
}

/* ==========================================
   Base
   ========================================== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
}

/* ==========================================
   Typography
   ========================================== */
.font-display {
  font-family: "Fraunces", Georgia, serif;
}

.gradient-text {
  background: linear-gradient(120deg, #0ea5e9, #f97316, #22c55e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================
   Components
   ========================================== */
.glass {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.9);
  backdrop-filter: blur(10px);
}

.progress-bar {
  height: 2px;
  background: linear-gradient(90deg, #0ea5e9, #f97316, #22c55e);
  width: 0%;
  transition: width 0.4s ease;
}

/* ==========================================
   Animations
   ========================================== */
.orbit {
  animation: orbit 18s linear infinite;
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) translateX(12px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(12px) rotate(-360deg);
  }
}

.float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* ==========================================
   Reveal on Scroll
   ========================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ==========================================
   Marquee / Toolbox
   ========================================== */
.marquee {
  display: flex;
  gap: 2rem;
  animation: marquee 20s linear infinite;
  width: max-content;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ==========================================
   Page Transitions
   ========================================== */
.page-exit {
  opacity: 1;
  transform: translateY(0);
}

.page-exit-active {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-enter {
  opacity: 0;
  transform: translateY(20px);
}

.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ==========================================
   Nav Active Indicator
   ========================================== */
.nav-indicator {
  transition: width 0.15s ease;
}

/* ==========================================
   3D Mountain Canvas
   ========================================== */
.mountain-canvas-wrap {
  aspect-ratio: 4 / 3;
  min-height: 280px;
}

.mountain-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .mountain-canvas-wrap {
    aspect-ratio: auto;
    min-height: 340px;
  }
}

/* ==========================================
   Layout
   ========================================== */
.scroll-target {
  scroll-margin-top: 110px;
}