/* ========================================
   BASE STYLES
   Variables, Reset, Typography
   ======================================== */

:root {
  /* Colors */
  --color-bg: #0b0b0b;
  --color-surface: rgba(20, 20, 20, 0.8);
  --color-surface-strong: #151515;
  --color-primary: #96af02;
  --color-primary-secondary: #879d02;
  --color-text: #f4f4f4;
  --color-muted: rgba(244, 244, 244, 0.7);
  --color-border: rgba(150, 175, 2, 0.25);
  
  /* Shadows */
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-soft-green: 0 18px 45px rgba(150, 175, 2, 0.25);
  
  /* Layout */
  --max-width: 1220px;
  
  /* Transitions */
  --transition-base: 220ms ease;
  --transition-long: 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========================================
   RESET
   ======================================== */

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  /* Prevent scroll restoration */
  overscroll-behavior: none;
  width: 100%;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, rgba(58, 63, 30, 0.2), transparent 45%),
    radial-gradient(circle at bottom right, rgba(150, 175, 2, 0.25), transparent 55%),
    var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
  /* Prevent flash of wrong position on load */
  opacity: 0;
  transition: opacity 0.1s ease;
}

/* Show body once JS has positioned scroll correctly */
body.loaded,
body.ready {
  opacity: 1;
}

/* Scrollbar customization */
body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background: rgba(244, 244, 244, 0.03);
}

body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-secondary) 100%);
  border-radius: 5px;
}

body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--color-primary-secondary) 0%, var(--color-primary) 100%);
}

/* Firefox scrollbar */
body {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) rgba(244, 244, 244, 0.03);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.36em;
  font-size: 0.75rem;
  color: var(--color-primary);
  margin-bottom: 24px;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }
  
  body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}