/* ============================================================
   LavaWave — Base & shared styles
   Reset, backdrop stack, nav, buttons, links, reveal primitives.
   ============================================================ */

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

html {
  scrollbar-width: thin;
  scrollbar-color: var(--ocean-surface) var(--ocean-abyss);
}
/* Lenis handles smooth scroll; keep a native fallback when JS is off. */
html:not(.js) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-body);
  background: var(--ocean-abyss);
  color: var(--text-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(255, 107, 44, 0.3); color: var(--text-bright); }

a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--lava-amber); outline-offset: 3px; border-radius: 3px; }

/* Skip link — accessibility */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 1000;
  background: var(--lava-orange); color: #0a0a0a; font-weight: 600;
  padding: 0.7rem 1.1rem; border-radius: 8px; text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* ── Backdrop stack (fixed, behind everything) ── */
#backdrop {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: var(--z-backdrop); pointer-events: none; display: block;
}
.ambient {
  position: fixed; inset: 0; z-index: var(--z-ambient); pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255,107,44,0.03) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 50%, rgba(26,74,122,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(61,143,212,0.05) 0%, transparent 60%);
}
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 256px;
}
.cursor-glow {
  position: fixed; width: 500px; height: 500px; border-radius: 50%; pointer-events: none;
  z-index: var(--z-cursor);
  background: radial-gradient(circle, rgba(255,107,44,0.035) 0%, rgba(26,74,122,0.02) 40%, transparent 70%);
  transform: translate(-50%, -50%); transition: opacity 0.4s ease; opacity: 0; will-change: transform;
}
.cursor-glow.active { opacity: 1; }

.content { position: relative; z-index: var(--z-content); }

/* ── Layout ── */
.section-inner { max-width: var(--maxw); margin: 0 auto; width: 100%; }
section { padding: 9rem var(--gutter); position: relative; }

/* ── Eyebrow label ── */
.eyebrow {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lava-orange); display: inline-flex; align-items: center; gap: 0.75rem;
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--lava-orange); }
.eyebrow.is-centered { justify-content: center; }
.eyebrow.is-centered::after { content: ''; width: 24px; height: 1px; background: var(--lava-orange); }

/* Section headings */
.h-section {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; line-height: 1.12;
  color: var(--text-bright);
}
.h-section em { font-family: var(--font-serif); font-weight: 400; font-style: italic; color: var(--ocean-glow); }

/* ── Buttons & links ── */
.btn {
  --btn-bg: rgba(255,107,44,0.1);
  --btn-bd: rgba(255,107,44,0.25);
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.6rem; border-radius: 10px;
  background: var(--btn-bg); border: 1px solid var(--btn-bd);
  color: var(--lava-amber); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; position: relative;
  transition: background var(--dur-fast) var(--ease-out-expo),
              border-color var(--dur-fast) var(--ease-out-expo),
              transform 0.2s var(--ease-out-expo);
  will-change: transform;
}
.btn:hover { background: rgba(255,107,44,0.18); border-color: rgba(255,107,44,0.45); }
.btn .btn-arrow { transition: transform var(--dur-fast) var(--ease-out-expo); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn--ghost { --btn-bg: transparent; --btn-bd: var(--hairline); color: var(--text-primary); }
.btn--ghost:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); }

.text-link {
  position: relative; text-decoration: none; color: var(--text-bright);
  transition: color var(--dur-fast) ease;
}
.text-link::after {
  content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--lava-orange), var(--ocean-glow));
  opacity: 0.3; transition: opacity var(--dur-fast) ease;
}
.text-link:hover { color: var(--lava-amber); }
.text-link:hover::after { opacity: 0.8; }

/* ── NAV ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  padding: 1.5rem var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  transition: padding 0.5s var(--ease-out-expo), background 0.5s var(--ease-out-expo), border-color 0.5s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  padding: 0.9rem var(--gutter);
  background: rgba(5, 10, 24, 0.85);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-bottom-color: var(--hairline-soft);
}
.nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--text-bright); }
.logo-icon { width: 34px; height: 34px; }
.logo-icon img { width: 100%; height: 100%; object-fit: contain; }
.logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; }
.logo-text span {
  background: var(--grad-lava); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-links { display: flex; align-items: center; gap: 2.4rem; list-style: none; }
.nav-links a {
  font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); text-decoration: none;
  letter-spacing: 0.03em; transition: color var(--dur-fast) ease; position: relative;
}
.nav-links a:not(.nav-cta)::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px;
  background: var(--lava-orange); transition: width var(--dur-fast) ease;
}
.nav-links a:not(.nav-cta):hover { color: var(--text-bright); }
.nav-links a:not(.nav-cta):hover::after { width: 100%; }
.nav-cta {
  padding: 0.55rem 1.25rem; background: rgba(255,107,44,0.1);
  border: 1px solid rgba(255,107,44,0.25); border-radius: 8px; color: var(--lava-amber) !important;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.nav-cta:hover { background: rgba(255,107,44,0.18); border-color: rgba(255,107,44,0.42); }

/* ── Section divider ── */
.section-divider {
  width: 100%; max-width: var(--maxw); margin: 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06) 20%, rgba(255,107,44,0.12) 50%, rgba(255,255,255,0.06) 80%, transparent);
}

/* ── Reveal primitives (progressive enhancement) ──
   Default: fully visible (no JS / no motion).
   html.js: set pre-animation state; JS animates in.            */
.reveal, .stagger > * { will-change: transform, opacity; }
html.js .reveal { opacity: 0; transform: translateY(40px); }
html.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); }
html.js .stagger > * { opacity: 0; transform: translateY(30px); }
html.js .stagger.is-visible > * { opacity: 1; transform: none; }