/* Ontwerp 3 — Living World
 *
 * De kleuren van het logo zelf: oceaanblauw en landgroen onder een nachthemel.
 *
 * Wat dit ontwerp onderscheidt is dat de wereld meegroeit. Alles hieronder rekent met
 * `--world-progress` — een waarde tussen 0 en 1 die world.js op de kaart zet. Begin je,
 * dan is het nacht en ligt de horizon leeg. Vorder je, dan komt de zon op, worden de
 * herkenningspunten zichtbaar, verdwijnen de sterren en krijgt het landschap diepte.
 *
 * Het moet nooit opvallen als effect. Je merkt het pas als je na twintig lessen terugkijkt.
 */

/* --main-pad-x: de wereldkaart (leerpad.css) vloeit precies zo ver uit als deze zijpadding. */
:root[data-design="living"] .main { --main-pad-x: var(--space-7); padding: var(--space-6) var(--main-pad-x) var(--space-8); }
:root[data-design="living"] .sidebar {
  padding: var(--space-6) var(--space-4);
  background: linear-gradient(180deg, var(--sidebar) 0%, var(--bg-deep) 100%);
}
:root[data-design="living"] .nav button { border-radius: var(--radius-s); }
:root[data-design="living"] .nav button.active {
  background: var(--accent-quiet);
  box-shadow: inset 2px 0 0 var(--accent);
}

:root[data-design="living"] h1 { font-size: clamp(28px, 3.6vw, 38px); }

:root[data-design="living"] .lesson-card {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background:
    radial-gradient(120% 100% at 0% 0%, var(--accent-quiet) 0%, transparent 55%),
    var(--surface);
}
:root[data-design="living"] .overview-group {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line-soft);
}
:root[data-design="living"] .flashcard {
  border-radius: var(--radius-l);
  background: radial-gradient(130% 90% at 50% 0%, var(--elev) 0%, var(--surface) 60%);
}
:root[data-design="living"] .primary-button,
:root[data-design="living"] .secondary-button { border-radius: var(--radius-s); }
:root[data-design="living"] .choice { border-radius: var(--radius-s); }
:root[data-design="living"] .lesson-main { padding: var(--space-6) var(--space-7) var(--space-8); }

/* ── De wereld die meegroeit ───────────────────────────────────────────────── */

:root[data-design="living"] .world { border-radius: var(--radius-l); }

/* De zon komt op. Aan het begin staat hij onder de horizon en zie je hem niet; tegen het
   eind hangt hij hoog en warm boven het landschap. */
:root[data-design="living"] .world-sun {
  opacity: calc(.04 + var(--world-progress, 0) * .34);
  transform: translateY(calc((1 - var(--world-progress, 0)) * 150px));
  transition: opacity var(--dur-4) var(--ease-out), transform 1.2s var(--ease-out);
}

/* Sterren doven naarmate het licht wordt. */
:root[data-design="living"] .world-star {
  opacity: calc(.36 - var(--world-progress, 0) * .3);
  transition: opacity var(--dur-4) var(--ease-out);
}

/* Het landschap wint aan diepte: de verste laag blijft vaag, de dichtstbijzijnde wordt
   steeds duidelijker. */
:root[data-design="living"] .world-band-far { opacity: calc(.5 + var(--world-progress, 0) * .35); }
:root[data-design="living"] .world-band-mid { opacity: calc(.62 + var(--world-progress, 0) * .3); }
:root[data-design="living"] .world-band-near { opacity: calc(.75 + var(--world-progress, 0) * .25); }
:root[data-design="living"] .world-band { transition: opacity 1s var(--ease-out); }

/* Herkenningspunten komen tevoorschijn zodra je in de buurt komt. In het begin is de
   verte werkelijk leeg — dat is precies wat het aankomen later betekenis geeft. */
:root[data-design="living"] .world-landmark-shape path,
:root[data-design="living"] .world-landmark-shape circle {
  opacity: calc(.12 + var(--world-progress, 0) * .5);
  stroke: var(--accent);
  transition: opacity 1s var(--ease-out);
}
:root[data-design="living"] .world-landmark-label {
  fill: var(--muted);
  opacity: calc(.45 + var(--world-progress, 0) * .55);
  font-size: 11.5px;
  letter-spacing: .04em;
}

/* De afgelegde route gloeit zacht na — het enige lichteffect in het hele ontwerp. */
:root[data-design="living"] .world-route-done {
  stroke-width: 4;
  filter: drop-shadow(0 0 10px var(--accent-quiet));
}
:root[data-design="living"] .world-node-current .world-node-disc {
  filter: drop-shadow(0 0 12px var(--accent-quiet));
}
:root[data-design="living"] .world-node-halo { animation-duration: 3.4s; }

/* Heel traag drijvende lucht. Twintig seconden per cyclus: je ziet het niet bewegen,
   je merkt alleen dat het niet stilstaat. */
@keyframes bl-drift { from { transform: translateX(0); } to { transform: translateX(-26px); } }
:root[data-design="living"] .world-bands { animation: bl-drift 26s var(--ease-in-out) infinite alternate; }
:root[data-design="living"] .world-stars { animation: bl-drift 60s linear infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  :root[data-design="living"] .world-bands,
  :root[data-design="living"] .world-stars { animation: none; }
}