/* =============================================================
   Aura Looks Up - main stylesheet
   Sections:
     1. Self-hosted fonts (drop-in @font-face)
     2. Design tokens
     3. Base + typography
     4. Utility / layout
     5. Header / nav
     6. Scene 1 - Hero
     7. Scene 2 - Meet the Family
     8. Scene 3 - What's Coming
     9. Footer
    10. Buttons
    11. Reduced-motion overrides
    12. Responsive breakpoints
   ============================================================= */


/* 1. FONTS ─────────────────────────────────────────────────────
   Self-hosted variable fonts. Until the .woff2 files exist in
   /assets/fonts/, the system stack below will be used (no FOIT,
   no extra requests). Drop the files in and they activate. */

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/nunito-variable.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}


/* 2. TOKENS ────────────────────────────────────────────────── */

:root {
  /* Cosmos */
  --bg-deep:       #060814;
  --bg-mid:        #0d1230;
  --bg-soft:       #1a1f4a;
  --nebula-purple: #6b46c1;
  --nebula-pink:   #ec4899;
  --nebula-blue:   #3b82f6;

  /* Warmth */
  --warm-glow:   #fbbf24;
  --warm-coral:  #fb7185;
  --warm-peach:  #fed7aa;

  /* Foreground */
  --star-white:    #fefce8;
  --moon-cream:    #fef3c7;
  --text-primary:  #f5f3ff;
  --text-soft:     #c7d2fe;

  /* Type */
  --font-display: 'Fraunces', ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body:    'Nunito', ui-rounded, 'SF Pro Rounded', 'Avenir Next', system-ui, -apple-system, sans-serif;

  /* Fluid type scale (clamp(min, preferred, max)) */
  --fs-hero:    clamp(2.75rem, 7vw + 1rem, 6rem);
  --fs-h1:      clamp(2rem,   4vw + 1rem, 3.5rem);
  --fs-h2:      clamp(1.5rem, 2vw + 1rem, 2.25rem);
  --fs-lead:    clamp(1.05rem, 1vw + 0.85rem, 1.4rem);
  --fs-body:    clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  --fs-small:   0.875rem;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.75rem;
  --space-lg:  3rem;
  --space-xl:  6rem;

  /* Radii / shadow */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-glow: 0 0 36px rgba(251, 191, 36, 0.35);
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.4);

  /* Layout */
  --content-max: 1200px;
}


/* 3. BASE ──────────────────────────────────────────────────── */

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  font-variation-settings: 'wght' 420;
  color: var(--text-primary);
  background: transparent;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Cinematic vignette - adds atmospheric depth without an extra DOM node */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background:
    radial-gradient(ellipse at center,
      transparent 40%,
      rgba(6, 8, 20, 0.35) 85%,
      rgba(6, 8, 20, 0.7) 100%);
  mix-blend-mode: multiply;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 600;
}

p {
  color: var(--text-soft);
  line-height: 1.65;
  font-variation-settings: 'wght' 420;
}

::selection {
  background: rgba(251, 191, 36, 0.4);
  color: var(--star-white);
}

/* Custom scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--nebula-purple), var(--bg-soft));
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg-deep);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--warm-glow), var(--nebula-purple));
}
html { scrollbar-color: var(--nebula-purple) var(--bg-deep); scrollbar-width: thin; }

/* Inner pages (privacy, contact, 404):
   - Body bg is transparent; the dark cosmos color is set on <html>
     (the canvas) instead. This is a workaround for a compositing
     quirk where an opaque body bg was blocking the fixed-positioned
     starfield (negative z-index) from rendering uniformly across the
     viewport on wide screens, leaving visible empty patches beside
     the text panel. With body transparent, the starfield paints
     directly over the html canvas with no blocker.
   - Footer is transparent so the same canvas extends through it.
   - Text content sits inside a translucent navy panel; stars are
     still visible THROUGH the panel itself. */
body.inner-page {
  background: transparent;
  background-attachment: scroll;
}
body.inner-page .site-footer {
  background: transparent;
}
/* Disable the full-page vignette on inner pages. With the body bg already
   uniformly dark, the vignette's mix-blend-mode multiply was crushing
   stars to invisibility. The translucent panel is enough framing on its
   own. */
body.inner-page::after { display: none; }
body.inner-page .nebula { opacity: 0.7; }

/* The text panel itself. Translucent blue navy so the stars twinkle
   through. Soft border + shadow give it a glass-card feel. We deliberately
   do NOT set position: relative + z-index here, because that creates a
   stacking context that interferes with the fixed starfield rendering in
   the area beside the panel. Painting order from base flow is enough. */
body.inner-page .page-wrap {
  background: rgba(26, 33, 82, 0.55);
  border: 1px solid rgba(199, 210, 254, 0.14);
  border-radius: var(--radius-lg);
  padding: 3rem clamp(1.5rem, 4vw, 2.75rem) 3rem;
  margin: 6rem auto 4rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  position: static;
  z-index: auto;
}
@media (max-width: 520px) {
  body.inner-page .page-wrap {
    margin: 5rem 1rem 3rem;
    padding: 2rem 1.25rem;
  }
}


/* 4. UTILITY / LAYOUT ──────────────────────────────────────── */

.scene {
  position: relative;
  min-height: 100vh;
  padding-block: var(--space-xl);
  padding-inline: clamp(1.25rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
}

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

.cosmic-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* Home page atmospheric gradient lives on cosmic-bg (NOT on body) so the
   fixed-positioned starfield at z-index -1 paints unobstructed above it.
   Inner pages skip the gradient and let the html canvas show through. */
body:not(.inner-page) .cosmic-bg {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(107, 70, 193, 0.35), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(236, 72, 153, 0.18), transparent 55%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 50%, var(--bg-deep) 100%);
}

.starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.starfield .star {
  position: absolute;
  background: var(--star-white);
  border-radius: 50%;
  opacity: 0;
  will-change: opacity, transform;
  animation: twinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.starfield .star.s { width: 1.5px; height: 1.5px; }
.starfield .star.m { width: 2.5px; height: 2.5px; box-shadow: 0 0 4px var(--star-white); }
.starfield .star.l { width: 3.5px; height: 3.5px; box-shadow: 0 0 8px var(--star-white); }

@keyframes twinkle {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

.nebula {
  position: absolute;
  pointer-events: none;
  filter: blur(40px) saturate(1.2);
  opacity: 0.65;
  will-change: transform;
  animation: nebula-drift 90s ease-in-out infinite alternate;
}
.nebula.n1 { width: 60vw; height: 60vw; top: -10vw; left: -15vw; }
.nebula.n2 { width: 55vw; height: 55vw; bottom: -10vw; right: -10vw; animation-duration: 120s; animation-direction: alternate-reverse; }

@keyframes nebula-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3vw, -2vw, 0) scale(1.08); }
  100% { transform: translate3d(-2vw, 4vw, 0) scale(0.96); }
}


/* 5. HEADER / NAV ──────────────────────────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem clamp(1.25rem, 4vw, 4rem);
  z-index: 50;
  background: linear-gradient(180deg, rgba(6, 8, 20, 0.4), transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
          mask-image: linear-gradient(180deg, #000 60%, transparent);
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.brand-mark::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--star-white), var(--warm-glow) 60%, var(--warm-coral));
  box-shadow: 0 0 10px var(--warm-glow);
}


/* 6. SCENE 1 - HERO ────────────────────────────────────────── */

#scene-hero {
  min-height: 100svh;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* floating SVG positions */
.hero-rocket {
  position: absolute;
  top: 8%;
  right: 6%;
  width: clamp(80px, 14vw, 180px);
  opacity: 0;
  will-change: transform, opacity;
}

.hero-planet {
  position: absolute;
  top: 22%;
  left: -4%;
  width: clamp(140px, 22vw, 320px);
  opacity: 0;
  will-change: transform, opacity;
}

.hero-astronaut {
  position: absolute;
  top: 55%;
  left: 8%;
  width: clamp(90px, 11vw, 160px);
  opacity: 0;
  will-change: transform, opacity;
}

.hero-moon {
  position: absolute;
  bottom: 6%;
  right: 4%;
  width: clamp(100px, 14vw, 200px);
  opacity: 0;
  will-change: transform, opacity;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 740px;
  margin-inline: auto;
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 600;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 620;
  letter-spacing: -0.035em;
  line-height: 0.92;
  background:
    linear-gradient(135deg,
      var(--warm-glow) 0%,
      var(--star-white) 35%,
      var(--moon-cream) 55%,
      var(--nebula-pink) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
  margin-bottom: 1.25rem;
  filter:
    drop-shadow(0 2px 8px rgba(251, 191, 36, 0.25))
    drop-shadow(0 12px 48px rgba(236, 72, 153, 0.18));
  position: relative;
}
.wordmark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 60%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    transparent, rgba(251, 191, 36, 0.5), transparent);
  margin-top: 1.25rem;
}

.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead);
  font-variation-settings: 'opsz' 36, 'wght' 380;
  color: var(--text-soft);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.005em;
}

.tagline-sub {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--warm-peach);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: var(--space-md);
  font-variation-settings: 'wght' 600;
}
.tagline-sub::before, .tagline-sub::after {
  content: '·';
  margin-inline: 0.5rem;
  color: var(--warm-glow);
  opacity: 0.7;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.scroll-cue {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-soft);
  font-size: var(--fs-small);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: scroll-bounce 2.5s ease-in-out infinite;
}
.scroll-cue::after {
  content: '';
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, var(--text-soft), transparent);
}
@keyframes scroll-bounce {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
  50%      { transform: translate(-50%, 8px); opacity: 0.95; }
}


/* 7. SCENE 2 - FAMILY ──────────────────────────────────────── */

#scene-family {
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(13, 18, 48, 0.4) 30%,
      rgba(251, 113, 133, 0.08) 70%,
      rgba(254, 215, 170, 0.1) 100%);
  position: relative;
  overflow: hidden;
  padding-bottom: calc(var(--space-xl) + 4rem);
}

#scene-family .earth-curve {
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  max-width: none;
  pointer-events: none;
  opacity: 0.85;
  z-index: 0;
}

.scene-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm-glow);
  margin-bottom: 0.75rem;
}

.scene-h2 {
  font-size: var(--fs-h2);
  color: var(--text-primary);
  margin-bottom: 1rem;
  text-wrap: balance;
}

.scene-intro {
  max-width: 56ch;
  font-size: var(--fs-lead);
  color: var(--text-soft);
  margin-bottom: var(--space-lg);
}
.scene-intro em { color: var(--warm-peach); font-style: italic; }

.family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

.family-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(26, 31, 74, 0.65), rgba(13, 18, 48, 0.45));
  border: 1px solid rgba(199, 210, 254, 0.1);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  isolation: isolate;
  overflow: hidden;
}
.family-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(251, 191, 36, 0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.family-card:hover::before { opacity: 1; }
.family-card > * { position: relative; z-index: 1; }
.family-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.family-card:hover {
  transform: translateY(-6px);
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow:
    var(--shadow-card),
    0 0 32px rgba(251, 191, 36, 0.18);
}

.portrait {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 35%,
      rgba(107, 70, 193, 0.6),
      rgba(13, 18, 48, 0.95));
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(251, 191, 36, 0.22),
    0 0 32px rgba(107, 70, 193, 0.45);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s ease;
  isolation: isolate;
}
.family-card:hover .portrait {
  transform: scale(1.06);
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(251, 191, 36, 0.55),
    0 0 48px rgba(251, 191, 36, 0.35);
}

.portrait::before {
  content: '';
  position: absolute;
  inset: -25%;
  background: conic-gradient(from 0deg,
    var(--nebula-purple), var(--nebula-pink),
    var(--warm-glow), var(--nebula-blue), var(--nebula-purple));
  opacity: 0.7;
  filter: blur(18px);
  z-index: 0;
  animation: portrait-spin 14s linear infinite;
}
@keyframes portrait-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .portrait::before { animation: none; }
}

.portrait::after {
  /* glassy inner highlight */
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.04) 30%,
      transparent 60%);
  pointer-events: none;
  z-index: 2;
}

.portrait .initial {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 620;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 620;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--moon-cream), var(--warm-peach));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}

.family-card h3 {
  font-size: 1.4rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.family-card .role {
  font-size: var(--fs-small);
  color: var(--warm-glow);
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
}
.family-card .blurb {
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.55;
}


/* 8. SCENE 3 - WHAT'S COMING ───────────────────────────────── */

#scene-coming {
  position: relative;
  overflow: hidden;
}

#scene-coming .telescope-bg {
  position: absolute;
  bottom: -10%;
  right: -8%;
  width: clamp(280px, 48vw, 620px);
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}

#scene-coming .container { position: relative; z-index: 1; }

.episode-list {
  display: grid;
  gap: 0.85rem;
  margin-block: var(--space-md) var(--space-lg);
  max-width: 640px;
}

.episode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  background:
    linear-gradient(90deg, rgba(13, 18, 48, 0.7), rgba(26, 31, 74, 0.4));
  border: 1px solid rgba(199, 210, 254, 0.1);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 36, 'wght' 500;
  font-size: 1.2rem;
  color: var(--text-primary);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.6s ease, transform 0.6s ease,
              border-color 0.3s ease, background 0.3s ease;
  will-change: opacity, transform;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.episode.is-visible { opacity: 1; transform: translateX(0); }
.episode:hover {
  border-color: rgba(251, 191, 36, 0.45);
  background: linear-gradient(90deg,
    rgba(13, 18, 48, 0.8),
    rgba(107, 70, 193, 0.25));
}

.episode .num {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--warm-glow);
  letter-spacing: 0.1em;
  margin-right: 0.5rem;
}
.episode .pill {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  background: rgba(107, 70, 193, 0.4);
  color: var(--text-soft);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}


/* 9. FOOTER ────────────────────────────────────────────────── */

.site-footer {
  background: var(--bg-deep);
  padding: var(--space-lg) clamp(1.25rem, 4vw, 4rem) var(--space-md);
  border-top: 1px solid rgba(199, 210, 254, 0.08);
  text-align: center;
}

.site-footer p {
  font-size: 0.92rem;
  color: var(--text-soft);
  margin-bottom: 0.4rem;
  opacity: 0.85;
}
.site-footer .footer-attr { color: var(--warm-peach); opacity: 0.7; }

.fiction-note {
  max-width: 56ch;
  margin: 0 auto 1.25rem !important;
  padding: 0.85rem 1.25rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem !important;
  color: var(--warm-peach) !important;
  background:
    linear-gradient(180deg, rgba(107, 70, 193, 0.18), rgba(13, 18, 48, 0.4));
  border: 1px solid rgba(251, 191, 36, 0.18);
  border-radius: var(--radius-md);
  opacity: 0.95 !important;
  font-variation-settings: 'opsz' 36, 'wght' 400;
}
.fiction-note span {
  color: var(--warm-glow);
  margin-right: 0.4rem;
  opacity: 0.9;
}

.footer-links {
  display: inline-flex;
  gap: 1.25rem;
  margin-block: 0.75rem 1.25rem;
  font-size: 0.9rem;
}
.footer-links a {
  color: var(--text-soft);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-links a:hover, .footer-links a:focus-visible {
  color: var(--warm-glow);
  border-bottom-color: var(--warm-glow);
}

.footer-mark {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--warm-glow);
  text-transform: uppercase;
  opacity: 0.65;
}


/* 10. BUTTONS ──────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.25s ease,
              background 0.25s ease,
              color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background:
    linear-gradient(135deg, var(--warm-glow) 0%, var(--warm-coral) 100%);
  color: #2a1300;
  font-variation-settings: 'wght' 700;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 -1px 0 rgba(180, 60, 30, 0.4) inset,
    0 8px 24px rgba(251, 191, 36, 0.35),
    0 0 0 1px rgba(251, 191, 36, 0.4);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 50%);
  pointer-events: none;
}
.btn-primary:hover, .btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -1px 0 rgba(180, 60, 30, 0.4) inset,
    0 14px 32px rgba(251, 191, 36, 0.55),
    0 0 0 1px rgba(251, 191, 36, 0.6),
    0 0 40px rgba(251, 191, 36, 0.25);
}

.btn-ghost {
  background: rgba(199, 210, 254, 0.06);
  color: var(--text-primary);
  border: 1px solid rgba(199, 210, 254, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-variation-settings: 'wght' 600;
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  transform: translateY(-2px);
  background: rgba(199, 210, 254, 0.12);
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.4);
}


/* 10b. LEGAL / CONTENT PAGES (privacy, contact) ──────────── */

.page-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 7rem 1.5rem 4rem;
  position: relative;
  z-index: 1;
}

.page-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--warm-glow);
  margin-bottom: 0.6rem;
  font-variation-settings: 'wght' 600;
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw + 1rem, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 620;
  background: linear-gradient(135deg,
    var(--warm-glow) 0%, var(--star-white) 35%,
    var(--moon-cream) 55%, var(--nebula-pink) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.12em;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.2));
  overflow: visible;
}

.page-meta {
  font-size: 0.85rem;
  color: var(--text-soft);
  opacity: 0.7;
  margin-bottom: 2.25rem;
  letter-spacing: 0.04em;
}

.lede {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-primary);
  font-variation-settings: 'opsz' 36, 'wght' 380;
  margin-bottom: 2.5rem;
  text-wrap: pretty;
}

.legal h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--text-primary);
  margin: 2.5rem 0 0.75rem;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 144, 'wght' 600;
}

.legal .legal-h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--warm-peach);
  margin: 1.75rem 0 0.5rem;
  letter-spacing: -0.005em;
  font-style: italic;
  font-variation-settings: 'opsz' 36, 'wght' 500;
}

.legal p {
  margin-bottom: 1rem;
  color: var(--text-soft);
  line-height: 1.7;
}

.legal a {
  color: var(--warm-glow);
  border-bottom: 1px solid rgba(251, 191, 36, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.legal a:hover { color: var(--moon-cream); border-color: var(--moon-cream); }

.legal-list {
  margin: 0 0 1.25rem 0;
  padding-left: 1.5rem;
  list-style: none;
}
.legal-list li {
  position: relative;
  padding-left: 0.5rem;
  margin-bottom: 0.55rem;
  color: var(--text-soft);
  line-height: 1.65;
}
.legal-list li::before {
  content: '✦';
  position: absolute;
  left: -1rem;
  color: var(--warm-glow);
  opacity: 0.8;
  font-size: 0.85em;
}

.back-link {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 3rem;
  font-size: 0.95rem;
  color: var(--text-soft);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.back-link:hover, .back-link:focus-visible {
  color: var(--warm-glow);
  border-bottom-color: var(--warm-glow);
}

/* Contact page */

.contact-promise {
  margin: 1.5rem 0 2.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(251, 191, 36, 0.22);
  background: linear-gradient(180deg,
    rgba(107, 70, 193, 0.18), rgba(13, 18, 48, 0.4));
  border-radius: var(--radius-md);
  color: var(--warm-peach);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  font-variation-settings: 'opsz' 36, 'wght' 400;
  line-height: 1.55;
}
.contact-promise span { color: var(--warm-glow); margin-right: 0.4rem; }
.contact-promise a {
  color: var(--warm-glow);
  border-bottom: 1px solid rgba(251, 191, 36, 0.5);
  font-style: normal;
}

.contact-form { display: grid; gap: 1.25rem; }

.contact-form .field { display: grid; gap: 0.4rem; }

.contact-form .field-row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 520px) {
  .contact-form .field-row { grid-template-columns: 1fr; }
}

.contact-form label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-variation-settings: 'wght' 600;
}
.contact-form .req { color: var(--warm-coral); margin-left: 0.2rem; }

.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-primary);
  padding: 0.85rem 1rem;
  background: rgba(13, 18, 48, 0.55);
  border: 1px solid rgba(199, 210, 254, 0.16);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}
.contact-form input:hover,
.contact-form textarea:hover {
  border-color: rgba(199, 210, 254, 0.32);
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(13, 18, 48, 0.75);
  box-shadow:
    0 0 0 3px rgba(251, 191, 36, 0.18),
    0 0 24px rgba(251, 191, 36, 0.12);
}
.contact-form textarea { min-height: 140px; line-height: 1.5; }
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(199, 210, 254, 0.45);
}

.contact-form .char-count {
  font-size: 0.75rem;
  color: var(--text-soft);
  opacity: 0.6;
  text-align: right;
  margin-top: 0.25rem;
}

.contact-form .form-fineprint {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.55;
  margin-top: 0.25rem;
  font-variation-settings: 'opsz' 36, 'wght' 380;
}
.contact-form .form-fineprint em { color: var(--warm-peach); font-style: italic; }

.contact-form .cf-submit {
  justify-self: start;
  margin-top: 0.5rem;
}

/* Honeypot field. Visually hidden but kept off the a11y tree
   (wrapper sets aria-hidden). Bots fill anything they can find. */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.cf-turnstile-wrap {
  margin-top: 0.25rem;
  min-height: 2px;
}
/* Center the Turnstile iframe and tone down its border */
.cf-turnstile-wrap iframe {
  border-radius: var(--radius-sm);
}

.cf-status {
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  min-height: 1.5em;
  color: var(--text-soft);
}
.cf-status.is-success { color: var(--warm-glow); }
.cf-status.is-error   { color: var(--warm-coral); }


/* 11. REDUCED MOTION ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .starfield .star { opacity: 0.85; }
  .nebula { animation: none; }
  .scroll-cue { animation: none; }
  .hero-rocket, .hero-planet, .hero-astronaut, .hero-moon { opacity: 1 !important; }
  .family-card, .episode { opacity: 1 !important; transform: none !important; }
}


/* 12. RESPONSIVE BREAKPOINTS ───────────────────────────────── */

/* Mobile-first defaults are above. Tweaks for larger screens: */

@media (max-width: 480px) {
  #scene-hero { padding-block: 7rem 5rem; }
  .hero-rocket { top: 6%; right: 4%; width: 80px; }
  .hero-planet { top: 18%; left: -8%; width: 130px; }
  .hero-astronaut { display: none; }
  .hero-moon { width: 90px; bottom: 8%; right: 4%; }
  .scroll-cue { font-size: 0.7rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
}

@media (min-width: 768px) {
  .hero-content { padding-block: 4rem; }
}

@media (min-width: 1024px) {
  .scene { padding-inline: 4rem; }
  .family-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1440px) {
  :root { --content-max: 1320px; }
}

/* Force GPU acceleration for animated layers */
.hero-rocket, .hero-planet, .hero-astronaut, .hero-moon,
.starfield .star, .nebula {
  transform: translateZ(0);
  backface-visibility: hidden;
}