/* =========================================================
   BudgetEasy: het palet van de marketingsite

   De site draagt een eigen ontwerp (`BudgetEasy Landing v4`) en niet de tokens van de app.
   Dat is een bewuste afwijking: de app is een ingelogd scherm in Bricolage Grotesque op
   #FAFAF7, de landingspagina is een verhaal in DM Sans op #f6f4ef met een teal accent dat
   de app niet kent. Zou de site `tokens.css` laden, dan haalde ze een reset, twee
   ongebruikte lettertypen en een palet binnen die ze alledrie niet gebruikt -- en de reset
   alleen al (`*{box-sizing:border-box}`) zet het ontwerp op tien plekken net naast zichzelf.

   Wat site en app wél delen is het merkteken; dat komt uit `BrandMark`.

   Dit bestand is de enige plek op deze portal waar een kleur staat. `site.css` noemt er
   geen en verwijst alleen naar de namen hieronder; `website_portal_test` bewaakt dat.
   ========================================================= */

:root {
  /*
   * De site is licht. Zonder deze regel tekent een computer in donkere modus zijn eigen
   * onderdelen -- scrollbalken, schuifregelaars, focusringen -- dwars door het warme crème heen.
   * Met de bespaarcheck erbij is dat geen theorie meer: die heeft zeven `input[type=range]`.
   */
  color-scheme: light;

  /* ---------- Letter ---------- */
  /* De `<link>` naar Google Fonts staat in de layout, zodat er geen import-waterval ontstaat. */
  --site-font: 'DM Sans', system-ui, sans-serif;

  /* ---------- Inkt en ondergrond ---------- */
  --site-bg:            #f6f4ef;
  --site-ink:           #1c1b18;
  --site-ink-2:         #3d3a33;
  --site-ink-3:         #6a665c;
  --site-screen:        #f8f6f1;   /* het scherm in de telefoonmockup */
  --site-placeholder:   #8a857a;   /* de tekst in een leeg invoerveld */

  /* ---------- Accenten ---------- */
  --site-teal:          #0f766e;
  --site-teal-deep:     #0b5d57;
  --site-orange:        #f26a1b;
  --site-orange-deep:   #d95a12;
  --site-orange-lift:   #ff7a2d;
  --site-orange-soft:   #f9a66e;   /* oranje dat op donker leesbaar blijft */
  /*
   * Oranje dat als kleine tekst leesbaar blijft. #f26a1b haalt 2,8:1 op het crème en zakt
   * daarmee ruim onder de grens van 4,5:1; dit haalt 4,6:1 op crème en 5,0:1 op wit. Het is
   * bovendien de `--tafel-orange-deep` die de app al voert, dus er komt geen kleur bij het merk.
   * De knoppen houden #f26a1b: wit op oranje is een merkkeuze en geen vergissing.
   */
  --site-orange-text:   #c2470e;
  --site-warn:          #c2410c;   /* "loopt af in 3 wkn" -- dringend, niet alarmerend */

  /* ---------- Glas ----------
   * De kaarten en de balk zijn halfdoorzichtig wit op de driftende vlakken. De dekking
   * verschilt per element en dat is opzet: hoe dichter bij de lezer, hoe vaster het glas.
   */
  --site-glass-50:      rgba(255, 255, 255, 0.5);
  --site-glass-55:      rgba(255, 255, 255, 0.55);
  --site-glass-60:      rgba(255, 255, 255, 0.6);
  --site-glass-65:      rgba(255, 255, 255, 0.65);
  --site-glass-70:      rgba(255, 255, 255, 0.7);
  --site-glass-80:      rgba(255, 255, 255, 0.8);
  --site-glass-96:      rgba(255, 255, 255, 0.96);
  --site-glass-line:    rgba(255, 255, 255, 0.6);
  --site-glass-edge:    rgba(255, 255, 255, 0.85);
  --site-glass-border:  rgba(255, 255, 255, 0.9);
  --site-glass-bright:  rgba(255, 255, 255, 0.95);
  --site-nav-bg:        rgba(246, 244, 239, 0.72);

  /* ---------- Lijnen en rasters op de inkt ---------- */
  --site-dot:           rgba(28, 27, 24, 0.09);   /* het puntenraster onder de kop */
  --site-track:         rgba(28, 27, 24, 0.08);   /* de goot van de ring */
  --site-ring-track:    rgba(28, 27, 24, 0.1);
  --site-rule:          rgba(28, 27, 24, 0.1);    /* de streep boven de voet */
  --site-faq-line:      rgba(28, 27, 24, 0.12);   /* de scheiding tussen twee vragen */
  --site-dash:          rgba(28, 27, 24, 0.15);   /* de draaiende gestippelde cirkel */
  --site-step-line:     rgba(28, 27, 24, 0.18);   /* de stippellijn langs de stappen */
  --site-wash:          rgba(28, 27, 24, 0.05);   /* hover in het mobiele menu */
  --site-toggle-track:  rgba(28, 27, 24, 0.06);

  /* ---------- Op donker ---------- */
  --site-on-dark:       rgba(255, 255, 255, 0.72);
  --site-on-dark-80:    rgba(255, 255, 255, 0.8);
  --site-on-dark-2:     rgba(255, 255, 255, 0.65);
  --site-on-dark-3:     rgba(255, 255, 255, 0.6);
  --site-on-dark-55:    rgba(255, 255, 255, 0.55);
  --site-on-dark-50:    rgba(255, 255, 255, 0.5);
  --site-on-dark-30:    rgba(255, 255, 255, 0.3);
  --site-on-dark-20:    rgba(255, 255, 255, 0.2);
  --site-on-dark-18:    rgba(255, 255, 255, 0.18);
  --site-on-dark-14:    rgba(255, 255, 255, 0.14);
  --site-on-dark-10:    rgba(255, 255, 255, 0.1);
  --site-on-dark-hair:  rgba(255, 255, 255, 0.12);

  /* ---------- Teal in lagen ----------
   * De staven van de maandcheck en de voortgangsbalken lopen op in dekking; dat is wat ze
   * aflopend maakt zonder een tweede kleur nodig te hebben.
   */
  --site-teal-wash:     rgba(15, 118, 110, 0.1);
  --site-teal-12:       rgba(15, 118, 110, 0.12);
  --site-teal-22:       rgba(15, 118, 110, 0.22);
  --site-teal-25:       rgba(15, 118, 110, 0.25);
  --site-teal-40:       rgba(15, 118, 110, 0.4);
  --site-teal-55:       rgba(15, 118, 110, 0.55);
  --site-teal-75:       rgba(15, 118, 110, 0.75);

  /* ---------- Gloed en vlakken ---------- */
  --site-glow-teal-2:   rgba(15, 118, 110, 0.18);
  --site-glow-teal-3:   rgba(15, 118, 110, 0.5);
  --site-glow-teal-55:  rgba(15, 118, 110, 0.55);
  --site-glow-orange-14: rgba(242, 106, 27, 0.14);
  --site-glow-orange-16: rgba(242, 106, 27, 0.16);
  --site-glow-orange-40: rgba(242, 106, 27, 0.4);
  --site-glow-orange:   rgba(242, 106, 27, 0.45);
  --site-glow-orange-2: rgba(242, 106, 27, 0.5);
  --site-pulse:         rgba(15, 118, 110, 0.4);
  --site-pulse-out:     rgba(15, 118, 110, 0);

  /*
   * Een masker leest alleen het alfakanaal, dus welke kleur hier staat maakt niet uit --
   * maar het ís een kleurwaarde, en die hoort in dit bestand en niet in `site.css`.
   */
  --site-mask:          #000;

  /*
   * De drie driftende vlakken staan in oklch, zoals het ontwerp ze zet: in die ruimte
   * blijft een lichte tint licht als je de tint draait, en dat is precies wat hier gebeurt
   * (60 graden is warm zand, 170 is koel groen).
   */
  --site-blob-1:        oklch(0.93 0.07 60);
  --site-blob-2:        oklch(0.93 0.05 170);
  --site-blob-3:        oklch(0.94 0.05 60);

  /* ---------- Schaduw ---------- */
  --site-shadow-pill:   inset 0 1px 0 #fff, 0 8px 24px -12px rgba(60, 40, 20, 0.2);
  --site-shadow-menu:   inset 0 1px 0 #fff, 0 20px 40px -20px rgba(60, 40, 20, 0.3);
  --site-shadow-float:  inset 0 1px 0 #fff, 0 24px 48px -20px rgba(60, 40, 20, 0.35);
  --site-shadow-panel:  inset 0 1px 0 #fff, 0 30px 60px -30px rgba(60, 40, 20, 0.25);
  --site-shadow-glass:  inset 0 1px 0 #fff;
  --site-shadow-form:   inset 0 1px 0 #fff, 0 16px 40px -20px rgba(60, 40, 20, 0.3);
  --site-shadow-bank:   inset 0 1px 0 #fff, 0 10px 24px -16px rgba(60, 40, 20, 0.25);
  --site-shadow-bank-h: inset 0 1px 0 #fff, 0 22px 40px -18px rgba(60, 40, 20, 0.35);
  --site-shadow-phone:  0 40px 80px -30px rgba(60, 40, 20, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  --site-shadow-tile:   0 1px 2px rgba(0, 0, 0, 0.04);
  --site-shadow-knob:   0 2px 8px rgba(0, 0, 0, 0.08);
  --site-shadow-cta-s:  0 8px 20px -8px rgba(242, 106, 27, 0.6);
  --site-shadow-cta-m:  0 12px 28px -10px rgba(242, 106, 27, 0.6);
  --site-shadow-cta-xs: 0 10px 24px -10px rgba(242, 106, 27, 0.6);
  --site-shadow-step3:  0 8px 20px -8px rgba(15, 118, 110, 0.6);

  /* ---------- Beweging ---------- */
  --site-ease:          cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Basis ----------
 * Bewust géén `*{box-sizing:border-box}`. Het ontwerp kent die regel niet en zet hem waar
 * hij nodig is; een globale reset zou daar andere maten opleveren dan het ontwerp laat zien.
 */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--site-bg);
  font-family: var(--site-font);
  color: var(--site-ink);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--site-teal);
  text-decoration: none;
}

a:hover {
  color: var(--site-teal-deep);
}

button,
input {
  font: inherit;
}

input::placeholder {
  color: var(--site-placeholder);
}

/*
 * `[hidden]` moet winnen van een klasse die `display` zet. Zonder deze regel staan het
 * wachtlijstformulier en zijn bevestiging tegelijk op het scherm: de UA-stijl `[hidden]`
 * heeft minder gewicht dan `.site-joined{display:grid}`.
 */
[hidden] {
  display: none !important;
}

/* De zeven regelaars van de bespaarcheck houden de merkkleur van de browser zelf. */
input[type="range"] {
  accent-color: var(--site-orange);
}

/*
 * Het ontwerp tekent geen focus. Dat kan het zich veroorloven, een statisch beeld heeft geen
 * toetsenbord; een pagina wel -- en op deze pagina staan nu twee formulieren, zeven regelaars
 * en vijf uitklapbare vragen. `:focus-visible` laat een muisklik met rust.
 */
:focus-visible {
  outline: 2px solid var(--site-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Invliegen ----------
 * Alleen als het script er is. Zonder `.site-js` blijft alles staan waar het staat: een
 * blok dat op `opacity:0` begint en nooit een waarnemer krijgt is een lege pagina.
 */

.site-js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--site-ease), transform 0.8s var(--site-ease);
}

.site-js [data-reveal="in"] {
  opacity: 1;
  transform: none;
}

/* ---------- Beweging ---------- */

@keyframes site-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes site-float2 {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-16px) rotate(1deg); }
}

@keyframes site-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(70px, 50px) scale(1.15); }
}

@keyframes site-drift2 {
  0%   { transform: translate(0, 0) scale(1.1); }
  100% { transform: translate(-60px, -40px) scale(0.95); }
}

/*
 * De bankstrook schuift precies zover als er buiten beeld valt en niet verder; past alles,
 * dan staat hij stil. Vandaar `min(0px, ...)` in plaats van een vast percentage.
 */
@keyframes site-bankpan {
  0%   { transform: translateX(0); }
  100% { transform: translateX(min(0px, calc(-100% + 100vw))); }
}

@keyframes site-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--site-pulse); }
  70%      { box-shadow: 0 0 0 10px var(--site-pulse-out); }
}

@keyframes site-spin {
  to { transform: rotate(360deg); }
}

/*
 * De gloed draagt zijn eigen centrering. In v3 stond `translate(-50%,-50%)` in de stijl en
 * zette de animatie alleen `scale`, waardoor hij tijdens het ademen van het midden wegliep.
 */
@keyframes site-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.7; }
  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

@keyframes site-pop {
  0%   { opacity: 0; transform: scale(0.96) translateY(6px); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .site-js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}