/* ============================================================
   Soluna — Welkom (maan-intro)

   Alle animaties lopen precies één keer en blijven op hun eindstaat staan
   (`forwards`). Er draait dus niets door terwijl iemand leest — dat is bewust:
   doorlopende beweging is precies wat deze app níet moet doen.

   Tijdlijn (seconden):
     0,0  donkere, warme nacht; lichtdeeltjes komen op
     0,8  de maan komt op en begint te groeien
     2,6  gloed bloeit, de nacht warmt op
     4,0  de naam verschijnt
     5,0  de regel verschijnt
     6,2  de knoppen verschijnen (via .is-settled uit JS)
   ============================================================ */

.welcome {
  position: relative;
  flex: 1 1 auto;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  overflow: hidden;
  /* Diepe, warme nacht — nooit blauwzwart; dat zou klinisch aanvoelen. */
  background: #14110E;
  color: #F6ECE0;
  padding: calc(var(--safe-top) + var(--sp-6)) var(--gutter)
           calc(var(--safe-bottom) + var(--sp-8));
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- De lucht: warmt op zodra de maan er is ---------- */
.welcome__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(115% 78% at 50% 30%, #4A3527 0%, #241B14 46%, #14110E 78%);
  opacity: 0;
  animation: sky-warm 4.2s 1.6s var(--ease-soft) forwards;
}
@keyframes sky-warm {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Zwevend licht ---------- */
.welcome__motes { position: absolute; inset: 0; z-index: 1; }
.mote {
  position: absolute;
  border-radius: 50%;
  background: #FFE9CC;
  opacity: 0;
  animation: mote-drift 11s var(--delay) ease-in-out forwards;
}
@keyframes mote-drift {
  0%   { opacity: 0; transform: translate(0, 0); }
  22%  { opacity: 0.5; }
  70%  { opacity: 0.32; }
  100% { opacity: 0.12; transform: translate(var(--drift), -22px); }
}

/* ---------- De maan ---------- */
.welcome__moon-wrap {
  position: relative;
  z-index: 2;
  grid-row: 1;
  align-self: center;
  display: grid;
  place-items: center;
  width: min(74vw, 300px);
  aspect-ratio: 1;
}
.moon {
  width: 100%;
  height: 100%;
  opacity: 0;
  /* Opkomen: van laag en klein naar zijn plek. */
  animation: moon-rise 3.4s 0.5s var(--ease-out) forwards;
}
@keyframes moon-rise {
  from { opacity: 0; transform: translateY(46px) scale(0.9); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

/* De fase: de schaduwcirkel schuift weg, dus de maan groeit van sikkel naar vol.
   Eén transform op één klein element — de goedkoopste manier om dit te doen. */
.moon__cut {
  transform: translateX(-4px);
  animation: moon-phase 4.6s 0.9s var(--ease-soft) forwards;
}
@keyframes moon-phase {
  from { transform: translateX(-4px); }
  to   { transform: translateX(126px); }
}

/* De gloed bloeit op ná de maan — dat is wat de nacht laat opwarmen. */
.moon__halo {
  opacity: 0;
  transform-origin: 110px 110px;
  animation: halo-bloom 4s 1.8s var(--ease-soft) forwards;
}
@keyframes halo-bloom {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- Naam en regel ---------- */
.welcome__text {
  position: relative;
  z-index: 3;
  grid-row: 2;
  text-align: center;
  padding-bottom: var(--sp-8);
}
.welcome__wordmark {
  font-size: 27px;
  color: #FBF3E8;
  opacity: 0;
  /* De letters komen tot rust: van te wijd naar de juiste tracking. */
  animation: wordmark-settle 2.6s 4s var(--ease-out) forwards;
}
@keyframes wordmark-settle {
  from { opacity: 0; letter-spacing: 0.62em; text-indent: 0.62em; }
  to   { opacity: 1; letter-spacing: var(--tracking-word); text-indent: var(--tracking-word); }
}
.welcome__line {
  margin: var(--sp-4) auto 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(246, 236, 224, 0.78);
  max-width: 24ch;
  opacity: 0;
  animation: welcome-fade-up 2s 5s var(--ease-out) forwards;
}
@keyframes welcome-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Knoppen ---------- */
.welcome__actions {
  position: relative;
  z-index: 3;
  grid-row: 3;
  width: 100%;
  max-width: 340px;
  min-height: 108px;      /* ruimte gereserveerd, zodat niets verschuift */
  display: grid;
  align-content: end;
  gap: var(--sp-2);
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.welcome.is-settled .welcome__actions { opacity: 1; }

.welcome__actions .btn--primary {
  /* Op de donkere nacht werkt een lichte knop rustiger dan terracotta. */
  --btn-bg: rgba(251, 243, 232, 0.95);
  --btn-fg: #241B14;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}
.welcome__actions .btn--primary:hover { --btn-bg: #FFFDF8; }

/* De tweede keuze mag er zijn, maar niet even hard roepen als de eerste. Een
   wit vlak naast een wit vlak maakt de nacht stuk. */
.welcome__actions .btn--secondary {
  --btn-bg: transparent;
  --btn-fg: rgba(246, 236, 224, 0.92);
  border-color: rgba(246, 236, 224, 0.32);
  box-shadow: none;
}
.welcome__actions .btn--secondary:hover {
  --btn-bg: rgba(246, 236, 224, 0.08);
  border-color: rgba(246, 236, 224, 0.5);
}

.welcome__skip {
  min-height: 44px;
  font-size: var(--fs-sm);
  color: rgba(246, 236, 224, 0.66);
  transition: color var(--dur-fast) var(--ease-out);
}
.welcome__skip:hover { color: rgba(246, 236, 224, 0.95); }

/* ---------- Overslaan: naar de eindstaat, kort maar niet abrupt ---------- */
.welcome.is-settled .welcome__sky,
.welcome.is-settled .moon,
.welcome.is-settled .moon__halo,
.welcome.is-settled .welcome__wordmark,
.welcome.is-settled .welcome__line {
  animation-delay: 0s;
  animation-duration: 520ms;
}
.welcome.is-settled .moon__cut {
  animation-delay: 0s;
  animation-duration: 620ms;
}

/* ---------- Geen beweging: alles staat er gewoon ---------- */
@media (prefers-reduced-motion: reduce) {
  .welcome__sky,
  .moon,
  .moon__halo,
  .welcome__wordmark,
  .welcome__line {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .welcome__wordmark {
    letter-spacing: var(--tracking-word);
    text-indent: var(--tracking-word);
  }
  .moon__cut { animation: none; transform: translateX(126px); }  /* volle maan */
  .mote { animation: none; opacity: 0.28; }
  .welcome__actions { transition: none; opacity: 1; }
}


/* ============================================================
   DE NACHT IN DE APP — het hele instappad

   De intro belooft een warme nacht, en daarna sprong de app naar een lichte
   pagina. Nu blijft het donker tot je binnen bent: profiel, 'zo werkt Soluna',
   de vijf elementen en de vragenlijst.

   ── Hoe dit werkt, en waarom niet met twintig uitzonderingen ──────────────

   `.screen--night` zet de KLEURTOKENS om in plaats van de onderdelen. Alles wat
   op zo'n scherm staat — velden, kaarten, randen, koppen — leest die tokens al,
   dus het wordt vanzelf donker. Zonder dat zou elk nieuw onderdeel op deze
   schermen opnieuw een uitzondering nodig hebben, en dan is de eerste die dat
   vergeet meteen een grijs vlak op een zwarte grond.

   Wat eronder staat, is de korte lijst die dat NIET vanzelf goed doet: dingen die
   met een vaste kleur uit het palet zijn getekend in plaats van met een token.
   ============================================================ */

.screen--night {
  /* De grond is dieper dan de gewone donkere modus: dit is dezelfde nacht als de
     intro (#14110E), niet 'de app maar dan donker'. */
  --bg:             #14110E;
  --bg-elevated:    #1E1915;
  --bg-sunken:      #100D0B;
  --surface:        #221C17;
  --surface-muted:  #29221C;
  --text:           #F6ECE0;
  /* Iets lichter dan in de gewone donkere modus. De gloed maakt de grond onder de
     tekst lichter, en daar viel deze kleur op het helderste punt net onder 4,5:1.
     De contrastmeter ziet dat niet: die leest achtergrondkleuren en geen
     verlopen. Nagerekend, niet gegokt. */
  --text-secondary: #D2C6B8;
  /* Ook lichter dan in de gewone donkere modus, en om dezelfde reden als
     hierboven: de kleine kopjes staan met hun rechterrand in de gloed, en daar
     haalde deze kleur 3,7:1 in plaats van 4,5:1. */
  --text-tertiary:  #B6A99B;
  --text-on-accent: #14110E;
  --accent:         #D79A78;
  --accent-soft:    #C58763;
  --accent-wash:    #33291F;
  --border:         rgba(246, 236, 224, 0.12);
  --border-strong:  rgba(246, 236, 224, 0.22);
  --hairline:       rgba(246, 236, 224, 0.08);
  --overlay:        rgba(8, 6, 5, 0.62);
  --nav-bg:         rgba(20, 17, 14, 0.88);
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-sm: 0 2px 10px rgba(0, 0, 0, 0.38);
  --sh-md: 0 8px 26px -8px rgba(0, 0, 0, 0.55);
  --sh-lg: 0 20px 50px -18px rgba(0, 0, 0, 0.65);

  position: relative;
  min-height: 100dvh;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
}

/* ---------- Het licht reist mee ----------

   `fixed` en niet `absolute`: de maan en de sterren blijven staan waar ze staan
   terwijl de inhoud eronder doorschuift. Je neemt het licht dus mee naar beneden,
   en daarom hoeft de bodem geen eigen lamp meer te hebben — die tweede gloed
   linksonder is weg.

   Dit kan alleen omdat `.screen` met opzet géén transform gebruikt (zie de
   toelichting in base.css): één transform hogerop maakt van dat element een
   containing block, en dan hangt `fixed` daaraan in plaats van aan het beeld.

   Geen scroll-handler, geen JavaScript: de browser tekent deze laag apart, dus
   het blijft vloeiend op een telefoon met een lange vragenlijst. */
.nightsky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* Ruimer dan eerst, en met een iets hogere piek. Dat laatste is geen smaak: de
     maan die hier stond gaf zelf licht — zijn halo was een flink deel van de
     helderheid in deze hoek. Zonder die compensatie zou het scherm donkerder
     worden terwijl de opdracht was: minder donker. De piek zelf ligt buiten
     beeld, dus binnen het scherm blijft het zacht. */
  background:
    radial-gradient(168% 108% at 97% -18%, rgba(255, 233, 204, 0.34), rgba(255, 226, 190, 0.12) 38%, transparent 82%);
}

/* De maan hoort bij de PAGINA en niet bij het beeld: hij staat bovenaan en
   scrolt weg, terwijl zijn licht (de vaste laag hierboven) bij je blijft.

   Dat moet zo. De schijf is bijna wit en de tekst loopt eroverheen; bleef hij in
   beeld staan, dan schuift er tekst dwars doorheen — op de vier schermen samen
   gebeurde dat op vijf plekken, gemeten met de rechthoeken van de letters zelf.

   De hele cirkel staat binnen de zijkanten: een schijf die door de schermrand
   wordt afgesneden leest als een fout en niet als een maan. */
.nightsky-moon {
  position: absolute;
  top: 0;
  right: 0;
  width: 210px; height: 210px;
  pointer-events: none;
}
.nightsky__moon {
  position: absolute;
  top: -55px;
  right: -18px;
  width: 210px; height: 210px;
}

.nightsky__stars { position: absolute; inset: 0; }
.nightsky__star {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #FFF6E6;
  opacity: 0.25;
  animation-name: sterlicht;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/* Opzwellen, niet knipperen: op deze schermen leest of typt iemand iets, en
   beweging in de ooghoek kost aandacht. Elk sterretje heeft zijn eigen duur en
   vertraging, dus ze lopen nooit synchroon — dat is wat het levend maakt. */
@keyframes sterlicht {
  0%, 100% { opacity: 0.18; transform: scale(0.9); }
  50%      { opacity: 0.85; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .nightsky__star { animation: none; opacity: 0.5; }
}

/* De inhoud boven de twee lichtlagen. Die twee zijn zelf uitgezonderd: ze zijn
   allebei absoluut of vast geplaatst, en `relative` zou dat overschrijven. */
.screen--night > *:not(.nightsky):not(.nightsky-moon) { position: relative; }

/* ---------- Wat niet vanzelf goed gaat ----------
   Onderdelen die met een vaste kleur uit het palet zijn getekend in plaats van
   met een token. Ze staan hier bij elkaar, zodat duidelijk is dat het om
   uitzonderingen gaat en niet om een tweede thema. */

/* Een gekozen tag: op licht is dat donker-op-licht, hier het omgekeerde. */
.screen--night .chip.is-active {
  background: #F6ECE0;
  border-color: #F6ECE0;
  color: #14110E;
}

/* De ring om de gekozen kleur; de donkere ring viel weg tegen de nacht. */
.screen--night .gradient-swatch.is-active { border-color: #F6ECE0; }

/* Voetbalken die met een harde achtergrond over de inhoud liggen. */
.screen--night .onboarding__foot,
.screen--night .quiz-foot { background: transparent; }
.screen--night .quiz-foot__inner {
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}
.screen--night .quiz-head { background: color-mix(in oklab, var(--bg) 92%, transparent); }

/* Vlakken met een vast zandverloop: op de nacht worden dat lichtvlekken. */
.screen--night .intro-invite,
.screen--night .quiz-intro__mark,
.screen--night .el-intro__wash {
  background: linear-gradient(160deg, rgba(246, 236, 224, 0.07), rgba(246, 236, 224, 0.03));
}

/* De kop houdt afstand van de maan. Zonder deze grens liep 'Hoe mag ik je
   noemen?' tot 344 px terwijl de schijf op 288 staat: de maan lag dan op het
   laatste woord. Uitgedrukt in de breedte van de maan en niet in tekens, zodat
   het klopt blijft als het lettertype of de schermbreedte verandert. */
.screen--night .onboarding__intro .display,
.screen--night .onboarding__intro h1 {
  color: var(--text);
  max-width: calc(100% - 130px);
}
.onboarding__intro { position: relative; padding-bottom: var(--sp-2); }
.onboarding__lede { margin-top: var(--sp-3); max-width: 34ch; }

.intention-grid { gap: var(--sp-2); }