/* Inter variable font */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Alpine.js: hide x-cloak elements until Alpine initializes */
[x-cloak] { display: none !important; }

/* Hero tagline scramble animation */
.hero-tagline-text {
  display: inline-block;
}
.hero-tagline-text .scramble-char {
  opacity: 0.35;
}

/* Smooth transitions for interactive elements */
a, button, [role="button"], input, select, textarea {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Design tokens - Light mode */
:root {
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #FAFAFA;
  --color-bg-tertiary: #F5F5F5;
  --color-surface: #FFFFFF;
  --color-surface-hover: #FAFAFA;
  --color-surface-glass: rgba(255,255,255,0.85);

  --color-brand: #759B12;
  --color-brand-hover: #5A780E;
  --color-brand-light: #F2F5EB;
  --color-brand-subtle: #DDE5C9;
  --color-brand-text: #FFFFFF;

  --color-text-primary: #111111;
  --color-text-secondary: #555555;
  --color-text-tertiary: #888888;
  --color-text-on-brand: #FFFFFF;
  --color-text-on-dark: #FFFFFF;
  --color-text-hero-heading: #111111;
  --color-text-hero-body: #555555;

  --color-border: #EAEAEA;
  --color-border-hover: #CCCCCC;
  --color-border-brand: rgba(117,155,18,0.3);
  --color-border-glass: rgba(0,0,0,0.05);

  --color-orb-brand: transparent;
  --color-orb-accent: transparent;
  --color-glow-brand: transparent;
  --color-gradient-hero-start: #FFFFFF;
  --color-gradient-hero-end: #FAFAFA;
}

/* Design tokens - Dark mode */
.dark {
  --color-bg-primary: #000000;
  --color-bg-secondary: #0A0A0A;
  --color-bg-tertiary: #111111;
  --color-surface: #000000;
  --color-surface-hover: #0A0A0A;
  --color-surface-glass: rgba(0,0,0,0.85);

  --color-brand: #90B820;
  --color-brand-hover: #A5CD35;
  --color-brand-light: rgba(117,155,18,0.15);
  --color-brand-subtle: rgba(117,155,18,0.25);
  --color-brand-text: #000000;

  --color-text-primary: #FFFFFF;
  --color-text-secondary: #AAAAAA;
  --color-text-tertiary: #777777;
  --color-text-on-brand: #000000;
  --color-text-on-dark: #FFFFFF;
  --color-text-hero-heading: #FFFFFF;
  --color-text-hero-body: #AAAAAA;

  --color-border: #222222;
  --color-border-hover: #444444;
  --color-border-brand: rgba(144,184,32,0.3);
  --color-border-glass: rgba(255,255,255,0.1);

  --color-orb-brand: transparent;
  --color-orb-accent: transparent;
  --color-glow-brand: transparent;
  --color-gradient-hero-start: #000000;
  --color-gradient-hero-end: #0A0A0A;
}

/* Smooth scrolling */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Scroll animations */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
}
.animate-fade-in {
  animation: fadeUp 0.6s ease-out forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
[data-animate-delay="1"] { animation-delay: 0.1s; }
[data-animate-delay="2"] { animation-delay: 0.2s; }
[data-animate-delay="3"] { animation-delay: 0.3s; }
[data-animate-delay="4"] { animation-delay: 0.4s; }

/* Scroll progress bar */
.scroll-progress {
  transform-origin: left;
  transform: scaleX(0);
}

/* Form shake animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.animate-shake { animation: shake 0.4s ease-in-out; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-brand);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: 0 0 0.5rem 0;
}
.skip-link:focus { left: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; }
  .animate-fade-in { animation: none; opacity: 1; transform: none; }
  .scroll-progress { display: none; }
  * { animation-duration: 0.01ms !important; }
}