/* =========================================================
   Fly Beyond — Static Site Stylesheet
   Design tokens converted from the original Tailwind v4
   theme (oklch color system). Utility classes are provided
   by Tailwind CDN (see <script> in index.html); this file
   holds the CSS variables, base styles, and the small set
   of bespoke utility/animation classes the design needs.
   ========================================================= */

:root {
  --radius: 0.75rem;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  /* Core palette */
  --background: oklch(0.98 0.004 90);
  --foreground: oklch(0.15 0.03 260);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0.03 260);
  --primary: oklch(0.65 0.18 55);
  --primary-foreground: oklch(0.15 0.03 260);
  --secondary: oklch(0.94 0.01 90);
  --secondary-foreground: oklch(0.15 0.03 260);
  --muted: oklch(0.94 0.01 90);
  --muted-foreground: oklch(0.45 0.04 260);
  --accent: oklch(0.6 0.12 220);
  --accent-foreground: oklch(0.15 0.03 260);
  --destructive: oklch(0.58 0.23 25);
  --destructive-foreground: oklch(0.98 0.005 90);
  --border: oklch(0.85 0.02 260);
  --input: oklch(0.85 0.02 260);
  --ring: oklch(0.65 0.18 55);

  --surface: oklch(0.96 0.005 90);
  --surface-elevated: oklch(1 0 0);
  --glow: oklch(0.65 0.18 55);
  --primary-muted: oklch(0.75 0.12 55);
}

* {
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* =========================================================
   Bespoke utility classes (not part of Tailwind's defaults)
   ========================================================= */

.text-gradient {
  background-image: linear-gradient(135deg, var(--primary) 30%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-gradient-radial {
  background: radial-gradient(circle at 50% 0%, color-mix(in oklch, var(--glow) 15%, transparent) 0%, transparent 60%);
}

.bg-glow-blur {
  background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--glow) 20%, transparent) 0%, transparent 70%);
  filter: blur(80px);
}

.card-glow {
  box-shadow: 0 0 0 1px var(--border), 0 24px 48px -24px oklch(0 0 0 / 35%);
}

/* =========================================================
   Scroll-reveal animation (progressive enhancement)
   Elements start hidden only once JS confirms it can animate
   them back in — if JS is disabled, content stays visible.
   ========================================================= */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js .reveal.reveal-left {
  transform: translateX(-24px);
}

.js .reveal.reveal-right {
  transform: translateX(24px);
}

.js .reveal.reveal-scale {
  transform: scale(0.96);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Stagger children of a reveal-group */
.reveal-group .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-group .reveal:nth-child(2) { transition-delay: 60ms; }
.reveal-group .reveal:nth-child(3) { transition-delay: 120ms; }
.reveal-group .reveal:nth-child(4) { transition-delay: 180ms; }
.reveal-group .reveal:nth-child(5) { transition-delay: 240ms; }
.reveal-group .reveal:nth-child(6) { transition-delay: 300ms; }
.reveal-group .reveal:nth-child(n+7) { transition-delay: 340ms; }

/* Portfolio screenshot slow pan on hover */
.browser-shot img {
  transition: transform 6s linear;
}
.browser-shot:hover img {
  transform: translateY(-40%);
}

/* Mobile nav panel */
#mobile-menu {
  display: none;
}
#mobile-menu.open {
  display: block;
}