/* huisstijl/glas.css — de glas-componenten van Code Evo (WP-002-02, WT-04).
   Vereist tokens.css (de --glas-*-tokens komen uit kleuren.py, gemeten via kleur.meng).

   Regel (kennis/UI-KENNIS-2026.md § 5b): glas is sier, nooit dracht. Elke plaat is een
   halfdoorzichtig vlak dat op zichzelf al leesbaar is — gemeten over de dekkende val, het
   grondvlak én de inkt die eronder kan schuiven; `backdrop-filter` is bonus binnen
   @supports. Zonder backdrop-filter, en bij prefers-reduced-transparency, wordt de plaat de
   dekkende val. Beweging (lichtval op hover, overgangen) staat stil bij
   prefers-reduced-motion. Breking (SVG-filter #breking, alleen Chromium) alleen als sier
   achter @supports en alleen op kaarten. Geen enkele regel JavaScript. */

/* ---------- de plaat: gedeeld door nav, kaart en cta ---------- */

.glas {
  position: relative;
  color: var(--kleur-inkt);
  background-color: var(--glas-kaart-val);       /* de val: dekkend, gemeten */
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-l);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.10),       /* de lichtrand bovenaan */
    var(--schaduw-m);
}

.glas--nav { background-color: var(--glas-nav-val); }
.glas--cta { background-color: var(--glas-cta-val); }
/* Een kaart met een knop erop (WT-08, pakketten) gebruikt de cta-plaat: daar is het
   knopvlak (accent) op gemeten, over val, grond én gloed; op de kaartplaat (0,82) haalt het
   lichte knopvlak over de gloed 2,98:1 (kleuren.py, 19-09-2026). */
.glas--kaart.glas--knopplaat { background-color: var(--glas-cta-val); }

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glas {
    background-color: var(--glas-kaart);         /* de plaat met alpha, gemeten */
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
  }
  .glas--nav { background-color: var(--glas-nav); }
  .glas--cta { background-color: var(--glas-cta); }
  .glas--kaart.glas--knopplaat { background-color: var(--glas-cta); }
}

/* Breking: het echte "liquid glass". Alleen Chromium leest een SVG-filter in
   backdrop-filter; elders geldt de blur hierboven. Alleen op kaarten. */
@supports (backdrop-filter: url("#breking")) {
  .glas--kaart.glas--breking {
    backdrop-filter: url("#breking") blur(14px) saturate(1.4);
  }
}

/* ---------- de navigatiebalk: zweeft, vervaagt de inhoud eronder ---------- */

.glas--nav {
  position: sticky;
  top: var(--ruimte-3);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--ruimte-5);
  padding: var(--ruimte-3) var(--ruimte-5);
  border-radius: var(--radius-rond);
}

.glas--nav a {
  color: var(--kleur-inkt);
  text-decoration: none;
  font-weight: var(--gewicht-halfvet);
  font-size: var(--tekst-s);
}

.glas--nav a:hover,
.glas--nav a:focus-visible { color: var(--kleur-accent-tekst); }

/* ---------- de kaart: hover = de lichtval verschuift ---------- */

.glas--kaart {
  padding: var(--ruimte-6);
  overflow: hidden;
  transition: transform var(--duur) var(--curve), box-shadow var(--duur) var(--curve);
}

.glas--kaart::before {
  /* de lichtval: een zachte lichtvlek linksboven die op hover naar rechts schuift */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 50% at 20% 0%, oklch(100% 0 0 / 0.14), transparent 70%);
  transition: transform var(--duur) var(--curve), opacity var(--duur) var(--curve);
}

.glas--kaart:hover { transform: translateY(-2px); }
.glas--kaart:hover::before { transform: translateX(28%); opacity: 1.3; }

.glas--kaart h3 {
  font-family: var(--letter-display);
  font-size: var(--tekst-l);
  line-height: var(--regel-strak);
  margin: 0 0 var(--ruimte-2);
}

.glas--kaart p { color: var(--kleur-inkt-gedempt); margin: 0; font-size: var(--tekst-s); }

/* ---------- de CTA: een plaat met de knop erop ---------- */

.glas--cta {
  display: grid;
  gap: var(--ruimte-4);
  padding: var(--ruimte-7) var(--ruimte-6);
  text-align: center;
}

.glas--cta h2 {
  font-family: var(--letter-display);
  font-size: var(--tekst-2xl);
  line-height: var(--regel-strak);
  letter-spacing: var(--spatiering-kop);
  margin: 0;
}

.glas--cta p { color: var(--kleur-inkt-gedempt); margin: 0; }

/* ---------- de knop (cyaan met donkere tekst; op grond, vlak-1 of een glasplaat) ---------- */

.knop {
  display: inline-block;
  justify-self: center;
  color: var(--kleur-accent-inkt);
  background-color: var(--kleur-accent);
  font-weight: var(--gewicht-halfvet);
  padding: var(--ruimte-3) var(--ruimte-5);
  border-radius: var(--radius-rond);
  text-decoration: none;
  transition: transform var(--duur-kort) var(--curve), box-shadow var(--duur-kort) var(--curve);
}

.knop:hover { transform: translateY(-1px); box-shadow: var(--schaduw-s); }

.knop--omlijnd {
  color: var(--kleur-inkt);
  background-color: transparent;
  border: 1.5px solid var(--kleur-rand-sterk);
}

:where(.knop, .glas--nav a, .thema-knop):focus-visible {
  outline: 2px solid var(--kleur-focus);
  outline-offset: 3px;
}

/* ---------- stil en dekkend op verzoek ---------- */

@media (prefers-reduced-transparency: reduce) {
  .glas, .glas--nav, .glas--cta, .glas--kaart.glas--breking {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .glas { background-color: var(--glas-kaart-val); }
  .glas--nav { background-color: var(--glas-nav-val); }
  .glas--cta { background-color: var(--glas-cta-val); }
  .glas--kaart.glas--knopplaat { background-color: var(--glas-cta-val); }
}

@media (prefers-reduced-motion: reduce) {
  .glas--kaart, .glas--kaart::before, .knop { transition: none; }
  .glas--kaart:hover { transform: none; }
  .glas--kaart:hover::before { transform: none; opacity: 1; }
  .knop:hover { transform: none; }
}