/* ===================== STARTSCHERM / LAADSCHERM (boot-splash) =====================
   Full-screen splash die bij het opstarten van de app verschijnt en uitfadet zodra
   de app klaar is (splash_controller.js). Design-handoff: docs/design/
   design_handoff_startscherm/. Web-equivalent van een native splash: één keer per
   sessie (PWA-launch), niet bij elke Turbo-navigatie.

   Fonts: wordmark = Funnel Display (self-hosted, --font-display); slogan/laadtekst =
   de app-fontstack (--font-sans). Bewust GÉÉN Hanken Grotesk via Google Fonts — dat
   lekt het bezoeker-IP (AVG), zie application.css §Self-hosted Funnel Display.

   Kleuren volgen bestaande tokens: bg = --color-bg (crème), accent = --color-accent
   (terracotta), track = --color-line (#ece4db). De warme muted-tekst #8B8076 is
   splash-specifiek (design-token, geen app-brede rol). */

.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-bg);
  /* Vangnet: mocht Stimulus niet draaien, dan blokkeert de splash de app niet —
     na 4,2s fadet 'ie via pure CSS toch weg. De JS-route (splash--hide) is sneller. */
  animation: splashSafety 300ms ease 4200ms forwards;
}

/* Al getoond deze sessie (html-class gezet door de head-gate of het controller-hide):
   geen flits bij een volgende Turbo-render of full reload. */
.splash-done .splash { display: none !important; }

/* Uitfaden zodra de app klaar is (JS). Zet het CSS-vangnet uit zodat de transition
   niet met de safety-animatie botst. */
.splash--hide {
  animation: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

/* --- Middenblok: logo, wordmark, slogan --- */
.splash__stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
}

/* Logo-vorm: dezelfde afgeronde-vierkant "b" als het app-icoon (public/favicon.svg,
   rx 120/512 ≈ 23%). Bewust identiek aan het icoon dat de native PWA-opstartsplash toont,
   zodat die splash naadloos overloopt in dit startscherm (één schijnbaar scherm i.p.v. een
   plotselinge vorm-wissel). Zachte icoon-schaduw i.p.v. de vroegere organische morph-blob. */
.splash__logo {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  box-shadow: 0 8px 20px rgba(181, 102, 63, 0.22);
  border-radius: 23%;
}

.splash__logo-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-56);
  line-height: 1;
  color: var(--color-on-accent);
  margin-top: 3px; /* optische centrering van de "b" */
}

/* Wordmark (shared/_logo-partial): eenmalige fade-in-omhoog. Formaat naar design. */
.splash__wordmark {
  margin-top: 26px;
  animation: splashRise 0.7s ease both;
}
.splash__wordmark .blinco-logo { font-size: var(--text-32); }

.splash__slogan {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.1px;
  color: var(--color-muted-warm);
  animation: splashRise 0.7s ease 0.08s both;
}

/* --- Onderblok: indeterminate voortgangsbalk + laadtekst --- */
.splash__loader {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-bottom: 54px;
}

.splash__track {
  position: relative;
  width: 132px;
  height: 3px;
  border-radius: 99px;
  background: var(--color-line);
  overflow: hidden;
}

.splash__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 100%;
  border-radius: 99px;
  background: var(--color-accent);
  animation: splashTrack 1.5s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}

.splash__message {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-muted-warm);
}

/* --- Keyframes (uit de handoff) --- */
@keyframes splashRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes splashTrack {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

@keyframes splashSafety {
  to { opacity: 0; visibility: hidden; }
}

/* Respecteer verminderde beweging: geen morph/rise/loop, wel zichtbaar en de balk
   blijft (statisch) staan zodat het scherm niet leeg oogt. */
@media (prefers-reduced-motion: reduce) {
  .splash__wordmark,
  .splash__slogan,
  .splash__bar { animation: none; }
  .splash__bar { width: 100%; }
}