/* ============================================================
   merk.css — kleuren, letters en de merkmomenten van Gezenda.

   De vier kleuren komen uit het logo: blauw (de G), goud, koraal en teal
   (de drie figuurtjes). Blauw is de actiekleur; de andere drie zijn
   accenten die het gezin voorstellen en nooit een knop worden.
   Achtergrond is warm linnen, geen koel grijs: het is een gezinsproduct,
   geen kantoorsoftware.

   Geen box-shadow op iets dat ook op het wandpaneel verschijnt
   (CLAUDE.md 13g); daarom staan de schaduwen hier alleen achter
   (hover: hover) of in klassen die het paneel niet gebruikt.
   ============================================================ */
:root {
  --gz-blauw: #4565c7; --gz-blauw-diep: #3552ad; --gz-blauw-zacht: #e4e9f8;
  --gz-goud: #eac86f; --gz-koraal: #ec826f; --gz-teal: #8bbdbb;
  --gz-bg: #f6f0e6; --gz-vlak: #fffcf7; --gz-vlak-2: #f1e9dc; --gz-lijn: #e7dccb;
  --gz-inkt: #262033; --gz-zacht: #7d7182; --gz-dim: #b9adb5;
  --gz-ok: #4f9a78; --gz-fout: #c8553d;
  --gz-display: 'Fredoka', ui-rounded, system-ui, -apple-system, sans-serif;
  --gz-body: 'Nunito', ui-rounded, system-ui, -apple-system, sans-serif;
  --gz-uit: cubic-bezier(.23, 1, .32, 1);
  --gz-lade: cubic-bezier(.32, .72, 0, 1);
  --merk-huis: #fff;
}

/* ---------- Intro ---------- */
.gz-intro {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  background: var(--gz-bg); color: var(--gz-inkt);
  overflow: hidden; cursor: pointer;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.gz-intro.donker { background: #15131b; color: #f4efe8; }
/* Levende achtergrond (merk.js achtergrond()): het shader-canvas vult de
   laag. Zonder WebGL blijft dit CSS-verloop staan, in dezelfde kleuren. */
.gz-intro-bg { position: absolute; inset: 0; }
.gz-shader { overflow: hidden; /* positie regelt de gebruiker (absolute laag of relative kaart) */
  background:
    radial-gradient(60% 50% at 15% 10%, var(--gz-v1, #f4dca3), transparent 70%),
    radial-gradient(55% 45% at 90% 35%, var(--gz-v2, #f6c3b4), transparent 70%),
    radial-gradient(60% 50% at 25% 95%, var(--gz-v3, #cde5e2), transparent 70%),
    radial-gradient(50% 45% at 85% 90%, var(--gz-v4, #cdd8f6), transparent 70%),
    var(--gz-v0, #f6f0e6); }
.gz-shader.gz-shader-aan { background: var(--gz-v0, #f6f0e6); }
.gz-shader > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.gz-overslaan { position: absolute; left: 0; right: 0; bottom: calc(28px + env(safe-area-inset-bottom)); margin: 0; text-align: center;
  font: 700 13px/1 var(--gz-body); letter-spacing: .04em; color: color-mix(in srgb, currentColor 45%, transparent); }

.gz-stage { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; }
.gz-intro-logo { width: min(46vw, 200px); height: auto; overflow: visible; }
.gz-woord .char, .gz-woord > div { display: inline-block; }
.gz-naam { margin-top: 18px; }
.gz-woord {
  display: inline-flex; font-family: var(--gz-display); font-weight: 600;
  font-size: clamp(40px, 11vw, 64px); letter-spacing: -.02em; line-height: 1;
}
.gz-woord i { font-style: normal; display: inline-block; }
.gz-tag { margin: 14px 0 0; font-family: var(--gz-body); font-weight: 600; font-size: 17px; color: var(--gz-zacht); text-wrap: balance; }
.gz-intro.donker .gz-tag { color: #b8aeb9; }
.gz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* De lagen van het logo schalen om hun eigen middelpunt; de figuurtjes
   komen van onderen (ze stappen het huis in), de G draait om zijn hart. */
.gz-logo g { transform-box: fill-box; transform-origin: 50% 50%; }
.gz-logo .lg-goud, .gz-logo .lg-koraal, .gz-logo .lg-teal { transform-origin: 50% 100%; }
.gz-logo .lg-huis { transform-origin: 50% 90%; }

/* ---------- Het vinkje ---------- */
.gz-vink { position: relative; display: inline-grid; place-items: center; width: 88px; height: 88px; flex: none; }
.gz-vink > * { grid-area: 1 / 1; }
.gz-vink-bol { width: 100%; height: 100%; border-radius: 50%; background: var(--gz-ok); }
.gz-vink-ring { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--gz-ok); opacity: 0; }
.gz-vink svg { width: 100%; height: 100%; position: relative; overflow: visible; }
.gz-vink path { fill: none; stroke: #fff; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.gz-vink-rand { fill: none; stroke: var(--gz-ok); stroke-width: 2.5; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }


/* De poort vóór de intro: "Tik om te beginnen" (nodig om geluid te mogen
   spelen). Vier stippen in de merkkleuren ademen. */
.gz-poort { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; }
.gz-poort[hidden] { display: none; }
.gz-poort-stippen { display: flex; gap: 14px; }
.gz-poort-stippen i { width: 16px; height: 16px; border-radius: 50%; display: block; }
.gz-poort-stippen i:nth-child(1) { background: var(--gz-blauw); }
.gz-poort-stippen i:nth-child(2) { background: var(--gz-koraal); }
.gz-poort-stippen i:nth-child(3) { background: var(--gz-goud); }
.gz-poort-stippen i:nth-child(4) { background: var(--gz-teal); }
.gz-poort-knop { font: 600 19px/1 var(--gz-display); color: var(--gz-inkt); background: color-mix(in srgb, #fff 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--gz-inkt) 12%, transparent); border-radius: 999px; padding: 16px 28px; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gz-intro.donker .gz-poort-knop { color: #f4efe8; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }