/* ==========================================================================
   FLRYFY — Milestone 1 Holding Page
   Core stylesheet: tokens, reset, typography, layout, components
   ========================================================================== */

/* ---- Font faces (self-hosted, subset to weights in use) ---- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ---- */
:root {
  /* colour */
  --bg: #09090F;
  --bg-elevated: #101018;
  --surface-glass: rgba(255, 255, 255, 0.04);
  --surface-glass-border: rgba(255, 255, 255, 0.09);
  --purple: #9D3DFF;
  --cyan: #2EE6FF;
  --blue: #3D6BFF;
  --gold: #C9A65D;
  --gold-bright: #E4C583;
  --text-primary: #F5F5F7;
  --text-secondary: #9A9AA3;
  --text-tertiary: #5C5C64;
  --border-hair: rgba(255, 255, 255, 0.08);

  /* Ambient coupling: updated live by particles.js to match the helix's
     current hue, so the wordmark sits in the same lit space as the object
     rather than floating over an unrelated animation. Deliberately tiny —
     see the huge blur / near-zero alpha on .hero-word below. */
  --ambient-hue: 189;
  --ambient-alpha: 0;

  /* gradients */
  --gradient-brand: linear-gradient(90deg, var(--purple), var(--blue), var(--cyan));
  --gradient-text: linear-gradient(90deg, #F3F3F6 0%, #DEDEE6 100%);

  /* type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* spacing rhythm */
  --space-1: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --space-2: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.75rem);
  --space-4: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  --space-5: clamp(4rem, 3rem + 5vw, 8rem);

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;   /* fallback for browsers without svh support */
  min-height: 100svh;
  overflow-x: hidden;
}

/* ---- Accessibility utilities ---- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 100;
  background: var(--gold);
  color: #14110a;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Ambient particle field (fixed, full-bleed, behind everything) ---- */
.field {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg);
}
#particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Header ---- */
.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  opacity: 0.92;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.brand-mark:hover { opacity: 1; }
.brand-mark img { width: 28px; height: 28px; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
}

.social-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.social-row .icon {
  width: 17px;
  height: 17px;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.social-row a:hover .icon,
.social-row a:focus-visible .icon {
  color: var(--gold-bright);
  transform: translateY(-2px);
}

/* ---- Hero ---- */
.hero {
  position: relative;
  z-index: 5;
  min-height: 100vh;   /* fallback for browsers without svh support */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4) var(--space-3);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
}

.hero-mark {
  width: clamp(64px, 8vw, 96px);
  height: auto;
  margin-bottom: var(--space-3);
}

.hero-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 2.1rem + 3.2vw, 5.5rem);
  letter-spacing: 0.05em;
  line-height: 1;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Reflected ambient light from the helix — huge blur, near-zero alpha.
     This is not a glow effect (that would be tight blur + real opacity);
     it's a whisper that the text occupies the same lit space as the
     object, not a flat layer sitting over an unrelated animation. */
  text-shadow: 0 0 90px hsla(var(--ambient-hue), 65%, 55%, var(--ambient-alpha));
}

.hero-divider {
  width: 84px;
  height: 2px;
  margin: var(--space-3) 0 var(--space-2);
  background: var(--gradient-brand);
  border-radius: 2px;
}

.hero-tagline {
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.9rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  text-shadow: 0 0 70px hsla(var(--ambient-hue), 60%, 55%, calc(var(--ambient-alpha) * 0.7));
}

.pillars {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}
.pillars li:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin-left: var(--space-2);
  background: var(--border-hair);
  vertical-align: middle;
}
.pillars li {
  display: flex;
  align-items: center;
}
/* Plain margin for spacing rather than flex `gap` — avoids any ambiguity
   across engines instead of feature-detecting it. */
.pillars li:not(:first-child) {
  margin-left: var(--space-2);
}

/* ---- Primary button ---- */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2.25rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: #14110a;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  /* Same ambient light coupling as the wordmark, at rest; hover/focus adds
     its own stronger gold shadow below without fighting this one. */
  box-shadow: 0 0 60px hsla(var(--ambient-hue), 60%, 55%, calc(var(--ambient-alpha) * 0.8));
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #fff, var(--gold-bright));
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(201, 166, 93, 0.45);
}
.btn-primary:hover::before,
.btn-primary:focus-visible::before {
  opacity: 1;
}
.btn-primary span { position: relative; z-index: 1; }

.btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(20, 17, 10, 0.3);
  border-top-color: #14110a;
  position: relative;
  z-index: 1;
}
.waitlist-form.is-loading .btn-spinner {
  display: inline-block;
  animation: spin 700ms linear infinite;
}
.waitlist-form.is-loading .btn-label { opacity: 0.6; }
.waitlist-form.is-loading button { pointer-events: none; }

.scroll-cue {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 32px;
  border: 1.5px solid var(--border-hair);
  border-radius: 12px;
}
.scroll-cue span {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: var(--gold);
  animation: scroll-cue 1.8s var(--ease-out) infinite;
}

/* ---- Waitlist section ---- */
.waitlist {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-3);
}

.waitlist-card {
  width: 100%;
  max-width: 480px;
  text-align: center;
  padding: var(--space-4) var(--space-3);
  border-radius: 20px;
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}

.waitlist-card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  margin-bottom: var(--space-2);
}

.waitlist-copy {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
}

.field-row {
  display: flex;
  gap: 0.6rem;
}

#email {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1.1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--surface-glass-border);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
#email::placeholder { color: var(--text-tertiary); }
#email:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  min-height: 1.2em;
  color: var(--text-secondary);
}
.form-status.is-success { color: #6EE7B7; }
.form-status.is-error { color: #F87171; }

/* ---- Footer ---- */
.site-footer {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3) var(--space-3);
  border-top: 1px solid var(--border-hair);
}
.footer-mark img { width: 22px; height: 22px; opacity: 0.7; }

.legal-row {
  display: flex;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}
.legal-row a { transition: color var(--dur-fast) var(--ease-out); }
.legal-row a:hover, .legal-row a:focus-visible { color: var(--text-secondary); }

.copyright {
  font-size: 0.72rem;
  color: var(--text-tertiary);
}