/* ===== CSS VARIABLES ===== */
:root {
  --bg: #08090d;
  --bg-soft: #111318;
  --text: #f1e9e2;
  --muted: #b9aca1;
  --brand: #f48a3f;
  --stroke: rgba(255,255,255,.10);
  --card-overlay: rgba(10,10,10,0.72);
  --card-text: #fff;
  --card-muted: rgba(255,255,255,0.65);
  --mobile-menu-bg: rgba(14,15,20,0.96);
  --nav-bg-scrolled: rgba(8,9,13,0.88);
  --footer-fade: rgba(8,9,13,0);
  --divider-color: rgba(244,138,63,0.22);
  --hero-bg: #05060a;
  --sections-bg: #08090d;
  --layout-gap-standard: 52px;
  --layout-inline-padding: 52px;
}

:root[data-theme="light"] {
  --bg: #f5eee4;
  --bg-soft: #ffffff;
  --text: #171513;
  --muted: #63584f;
  --brand: #d86d24;
  --stroke: rgba(23,21,19,.12);
  --card-overlay: rgba(255,255,255,0.88);
  --card-text: #171513;
  --card-muted: rgba(23,21,19,0.65);
  --mobile-menu-bg: rgba(255,255,255,0.96);
  --nav-bg-scrolled: rgba(245,238,228,0.90);
  --footer-fade: rgba(245,238,228,0);
  --divider-color: rgba(216,109,36,0.2);
  --hero-bg: #ede4d8;
  --sections-bg: #f5eee4;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { overflow-x: clip; scroll-behavior: smooth; }
a { color: inherit; text-decoration: none; }

body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  transition: background-color 0.4s ease, color 0.4s ease;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: -22% -20%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  background:
    radial-gradient(circle at 18% 24%, rgba(244,138,63,.18), transparent 38%),
    radial-gradient(circle at 84% 16%, rgba(90,122,255,.08), transparent 44%),
    radial-gradient(circle at 52% 84%, rgba(244,138,63,.10), transparent 42%);
  animation: bodyGlow 18s ease-in-out infinite alternate;
}



/* ===== REVEAL ANIMATIONS ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

.hero__copy > * { opacity: 0; animation: fadeInUp .75s ease forwards; }
.hero__copy h1 { animation-delay: .06s; }
.hero__copy p { animation-delay: .16s; }
.hero__ctas { animation-delay: .26s; }
.hero__guide { opacity: 0; animation: fadeInUp .75s ease .36s forwards; }


/* ===== KEYFRAMES ===== */
@keyframes bodyGlow {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .68; }
  100% { transform: translate3d(2%, 1%, 0) scale(1.08); opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: .60; }
  50% { transform: scale(1.05); opacity: .80; }
}
@keyframes bounceArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@keyframes cardStagger {
  from { opacity: 0; transform: translateY(32px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Card stagger on fan area open */
.fan-card-enter {
  animation: cardStagger 0.5s cubic-bezier(.2,.8,.2,1) both;
}


/* ===== LIGHT MODE ===== */
:root[data-theme="light"] body::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(216,109,36,.12), transparent 38%),
    radial-gradient(circle at 84% 16%, rgba(90,122,255,.06), transparent 44%),
    radial-gradient(circle at 52% 84%, rgba(216,109,36,.09), transparent 42%);
}
:root[data-theme="light"] .age-modal__backdrop { background: rgba(10,8,5,.78); }
:root[data-theme="light"] .legal-modal__backdrop { background: rgba(10,8,5,.72); }

/* ===== LEGAL PAGE (standalone) ===== */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: min(100% - 32px, 860px);
  margin-inline: auto;
  padding: 80px 0 40px;
}
.legal-page { gap: 40px; }
.legal-section { flex: 1; }
.section-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.section-header__title.legal-title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; margin: 0; text-transform: lowercase; }
.section-header__line { flex: 1; height: 1px; background: var(--stroke); }
.link-card {
  border: 1px solid var(--stroke);
  border-radius: 22px;
  padding: 32px;
  background: var(--bg-soft);
}
.legal-card { display: flex; flex-direction: column; gap: 14px; }
.legal-meta { font-size: 0.78rem; color: var(--brand); font-weight: 600; margin: 0; }
.link-card__meta { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.7; text-align: justify; text-justify: inter-word; hyphens: none; }
.link-card__meta strong { color: var(--text); }
.legal-back { align-self: flex-start; margin-top: 8px; }
.footer { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 0; color: var(--muted); font-size: 0.78rem; }
.footer__links { display: flex; gap: 16px; }
.footer__link { color: var(--muted); transition: color 0.2s ease; }
.footer__link:hover { color: var(--brand); }