/* Dreamlibrium site — same tokens as the app (mobile/src/theme/tokens.ts), voice in docs/product/BRAND.md.
   Nothing loads from anyone else: fonts, images and the one script are served from this site.
   All motion stops for people who ask their system for reduced motion. */

@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/PlayfairDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('/assets/fonts/Caveat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  --midnight: #0F1020;
  --slate: #1D1E33;
  --slate-raised: #262842;
  --line: #2E3050;
  --amethyst: #7B42BC;
  --amethyst-light: #B18AE8;
  --gold: #F3C653;
  --starlight: #E4E4ED;
  --muted: #9A9AB5;
  --paper: #1E1A15;
  --ivory: #EDE6D3;
  --title: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ink: 'Caveat', cursive;
  --body: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--midnight);
  color: var(--starlight);
  font: 17px/1.65 var(--body);
  overflow-x: hidden;
}

/* ---------- The night: sky, moon glow, fireflies ---------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(228, 228, 237, 0.9), transparent 55%),
    radial-gradient(1px 1px at 78% 9%, rgba(228, 228, 237, 0.7), transparent 55%),
    radial-gradient(1.5px 1.5px at 33% 64%, rgba(243, 198, 83, 0.6), transparent 55%),
    radial-gradient(1px 1px at 61% 38%, rgba(228, 228, 237, 0.55), transparent 55%),
    radial-gradient(1px 1px at 89% 55%, rgba(177, 138, 232, 0.5), transparent 55%),
    radial-gradient(1.5px 1.5px at 22% 86%, rgba(228, 228, 237, 0.5), transparent 55%),
    radial-gradient(1px 1px at 47% 12%, rgba(228, 228, 237, 0.65), transparent 55%),
    radial-gradient(1px 1px at 71% 79%, rgba(228, 228, 237, 0.45), transparent 55%),
    var(--midnight);
}
.sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 55% 28%, rgba(228, 228, 237, 0.8), transparent 55%),
    radial-gradient(1px 1px at 18% 42%, rgba(228, 228, 237, 0.6), transparent 55%),
    radial-gradient(1.5px 1.5px at 83% 30%, rgba(228, 228, 237, 0.55), transparent 55%);
  animation: twinkle 5s ease-in-out infinite alternate;
}

/* A moon glow that drifts up slowly as you scroll (site.js). */
.glow {
  position: fixed;
  z-index: -1;
  top: -260px;
  right: -220px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(177, 138, 232, 0.16) 0%, rgba(123, 66, 188, 0.08) 38%, transparent 68%);
  pointer-events: none;
  will-change: transform;
}
.glow.low {
  top: auto;
  right: auto;
  bottom: -320px;
  left: -260px;
  background: radial-gradient(circle, rgba(243, 198, 83, 0.09) 0%, rgba(243, 198, 83, 0.03) 40%, transparent 68%);
}

/* Fireflies: made by site.js, each with its own path, speed and pulse. */
.fireflies { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.firefly {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: rgb(var(--c));
  box-shadow: 0 0 6px 2px rgba(var(--c), 0.75), 0 0 18px 6px rgba(var(--c), 0.25);
  opacity: 0;
  animation:
    drift var(--d) ease-in-out var(--delay) infinite alternate,
    pulse var(--p) ease-in-out var(--delay) infinite;
}
@keyframes drift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(calc(var(--dx) * 0.6), calc(var(--dy) * -0.4), 0); }
  100% { transform: translate3d(var(--dx), var(--dy), 0); }
}
@keyframes pulse {
  0%, 100% { opacity: 0; }
  35% { opacity: 0.95; }
  60% { opacity: 0.35; }
  80% { opacity: 0.85; }
}
@keyframes twinkle {
  from { opacity: 0.25; }
  to { opacity: 1; }
}

/* Content sits above the fireflies. */
.wrap { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ---------- Reveal on scroll (only when the script runs; without it, everything is simply visible) ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(4px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1s ease;
  transition-delay: var(--delay, 0s);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

/* ---------- Header ---------- */

header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 8px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--starlight); }
.brand span { font-family: var(--title); font-size: 1.25rem; letter-spacing: 0.02em; }
.brand svg { filter: drop-shadow(0 0 8px rgba(243, 198, 83, 0.55)); }
.lang { font-family: var(--body); color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; }
.lang:hover, .lang:focus-visible { color: var(--gold); border-color: var(--gold); }

/* ---------- Hero ---------- */

.hero { display: flex; align-items: center; gap: 56px; min-height: min(88vh, 860px); padding: 40px 0 56px; }
.hero-copy { flex: 1.25; min-width: 0; }
.question {
  font-family: var(--ink);
  color: var(--gold);
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  margin: 0 0 10px;
  text-shadow: 0 0 22px rgba(243, 198, 83, 0.35);
}
h1 {
  font-family: var(--title);
  font-weight: 500;
  font-size: clamp(2.3rem, 5.4vw, 3.5rem);
  line-height: 1.12;
  margin: 0 0 18px;
}
h1 em {
  display: block;
  font-style: normal;
  background: linear-gradient(100deg, var(--gold) 0%, #FFE9A8 45%, var(--gold) 55%, #E9B94A 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.lede { color: var(--muted); font-size: 1.12rem; max-width: 33em; margin: 0 0 28px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 20px;
  color: var(--starlight);
  text-decoration: none;
  font-family: var(--body);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.badge:hover, .badge:focus-visible { border-color: var(--gold); box-shadow: 0 0 24px rgba(243, 198, 83, 0.2); }
.badge b { display: block; font-weight: normal; }
.badge small { display: block; color: var(--muted); font-size: 0.78rem; }
.ghost { color: var(--amethyst-light); text-decoration: none; padding: 12px 4px; }
.ghost:hover, .ghost:focus-visible { color: var(--gold); }

/* Phone mockup: floats, and moves a little slower than the page (site.js). */
.phone-slot { flex: 0 0 290px; will-change: transform; }
.phone {
  border: 6px solid var(--slate-raised);
  border-radius: 38px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line), 0 0 90px rgba(123, 66, 188, 0.25);
  background: var(--midnight);
  animation: float 7s ease-in-out infinite;
}
.phone img { display: block; width: 100%; height: auto; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-12px) rotate(0.6deg); }
}

/* ---------- Sections ---------- */

section { padding: 44px 0; }
h2 {
  font-family: var(--title);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  line-height: 1.2;
  margin: 0 0 10px;
}
.kicker { font-family: var(--ink); font-size: 1.4rem; color: var(--amethyst-light); margin: 0; }
.sub { color: var(--muted); max-width: 40em; margin: 0 0 26px; }

/* Three mornings you already know. */
.scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scene {
  position: relative;
  background: linear-gradient(160deg, var(--slate) 0%, rgba(29, 30, 51, 0.6) 100%);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px 22px 22px;
  overflow: hidden;
}
.scene::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 198, 83, 0.12), transparent 70%);
}
.scene .mark { font-family: var(--ink); color: var(--gold); font-size: 1.5rem; line-height: 1; margin: 0 0 12px; }
.scene h3 { font-family: var(--title); font-weight: 500; font-size: 1.2rem; margin: 0 0 8px; }
.scene p { color: var(--muted); font-size: 0.98rem; margin: 0; }

/* The path, lit by a thread that fills as you scroll (site.js sets --progress). */
.path { position: relative; list-style: none; padding: 0; margin: 8px 0 0; max-width: 44em; }
.path::before,
.path::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 14px;
  width: 2px;
  border-radius: 2px;
}
.path::before { bottom: 40px; background: var(--line); }
.path::after {
  height: calc((100% - 54px) * var(--progress, 1));
  background: linear-gradient(var(--gold), var(--amethyst-light));
  box-shadow: 0 0 14px rgba(243, 198, 83, 0.55);
}
.path li { position: relative; padding: 0 0 36px 66px; }
.path .dot {
  position: absolute;
  left: 8px;
  top: 2px;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 0.85rem var(--title);
  border: 2px solid var(--gold);
  background: var(--gold);
  color: var(--midnight);
  box-shadow: 0 0 18px rgba(243, 198, 83, 0.6);
  transition: background 0.6s, color 0.6s, border-color 0.6s, box-shadow 0.6s;
}
.js .path li:not(.is-lit) .dot { background: var(--midnight); color: var(--muted); border-color: var(--line); box-shadow: none; }
.path h3 { font-family: var(--title); font-weight: 500; font-size: 1.3rem; margin: 0 0 6px; }
.path p { color: var(--muted); margin: 0; }
.aside { color: var(--muted); font-style: italic; max-width: 40em; margin: 4px 0 0 66px; }

/* Somnus */
.split { display: flex; gap: 44px; align-items: center; }
.split > div { flex: 1; min-width: 0; }
.paper {
  position: relative;
  background: var(--paper);
  border: 1px solid #342d24;
  border-radius: 22px;
  padding: 28px 30px;
  color: var(--ivory);
  max-width: 620px;
  box-shadow: 0 0 60px rgba(243, 198, 83, 0.08);
}
.paper::before {
  /* candle light */
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  background: radial-gradient(420px 220px at 20% 0%, rgba(243, 198, 83, 0.1), transparent 70%);
  pointer-events: none;
  animation: candle 4.5s ease-in-out infinite alternate;
}
@keyframes candle {
  from { opacity: 0.55; }
  to { opacity: 1; }
}
.paper .title { font-family: var(--ink); color: var(--gold); font-size: 1.9rem; margin: 0 0 8px; }
.paper p { margin: 0 0 12px; }
.paper .ai { color: #a99b7f; font-size: 0.82rem; margin: 14px 0 0; }

/* Privacy vows */
.vows { list-style: none; padding: 0; margin: 0; max-width: 46em; }
.vows li { padding: 12px 0 12px 34px; position: relative; border-bottom: 1px solid var(--line); }
.vows li:last-child { border-bottom: 0; }
.vows li::before { content: '✦'; position: absolute; left: 6px; color: var(--gold); text-shadow: 0 0 10px rgba(243, 198, 83, 0.6); }
.vows b { font-weight: normal; color: var(--starlight); }
.vows span { color: var(--muted); }

/* FAQ */
details {
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 10px 0;
  padding: 4px 18px;
  transition: border-color 0.3s;
}
details[open] { border-color: rgba(243, 198, 83, 0.45); }
summary { cursor: pointer; padding: 12px 0; font-family: var(--title); font-size: 1.05rem; }
summary::marker { color: var(--gold); }
details p { color: var(--muted); margin: 4px 0 14px; }

/* Footer */
footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 30px 0 48px; color: var(--muted); font-size: 0.95rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 18px; }
footer a { color: var(--amethyst-light); text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--gold); }
footer p { margin: 6px 0; max-width: 60em; }

main a { color: var(--amethyst-light); text-decoration-color: var(--line); text-underline-offset: 3px; }
main a:hover, main a:focus-visible { color: var(--gold); }

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

/* ---------- Small screens ---------- */

@media (max-width: 900px) {
  /* The question comes first on a phone; the app picture follows. */
  .hero { flex-direction: column; gap: 40px; min-height: 0; padding-top: 34px; text-align: center; }
  .hero-copy { width: 100%; }
  .lede { margin-inline: auto; }
  .cta-row { justify-content: center; }
  .phone-slot { flex-basis: auto; width: min(250px, 68vw); }
  .scenes { grid-template-columns: 1fr; }
  .split { flex-direction: column; gap: 26px; }
  .glow { width: 520px; height: 520px; }
}

/* ---------- Reduced motion: a still night ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sky::after, h1 em, .phone, .paper::before { animation: none; }
  .fireflies { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}