/* HET MATERIAAL — wat een stand van de vormtaal natuurkundig BETEKENT.

   Uit vormtaal.css gehaald toen dat blad over zijn maat ging. De naad is
   inhoudelijk en niet willekeurig:

     vormtaal.css  -- WELKE stand een praktijk koos. Configuratie: hoek, vlak,
                      band, kader, accent, onthaal, en de tokens die daaruit
                      volgen.
     materiaal.css -- wat die stand betekent voor licht, diepte en beweging.
                      Ontwerp, geen keuze. Dit blad kent geen praktijk.

   Laadt NA vormtaal.css: het gebruikt de schakelaars en de tokens die daar
   gezet worden. */

/* ═══════════════════════════════════════════════════════════════════════════
   GLAS — een oppervlak dat licht doorlaat

   De derde stand van `vlak`. Waar `plat` niets doet en `zacht` een schaduw
   legt, maakt `glas` van een vlak een LAAG.

   Drie dingen maken glas glas, en zonder alle drie is het gewoon een lichte
   kaart:

   1. ER MOET IETS ACHTER ZITTEN. Een doorschijnend vlak op een egale grond is
      per definitie onzichtbaar werk -- je rekent een kleur uit die je ook had
      kunnen intikken. Daarom staat glas hieronder op de plekken waar de sierband
      van de praktijk, een foto of de pagina zelf eronder doorloopt, en NIET op
      elke kaart die toevallig wit is. Dat is de hele reden dat de lijst met
      selectors kort is.

   2. HOOGTE IS VERSCHIL. Een balk die over de pagina zweeft laat meer door en
      vangt meer licht dan een kaart die er plat op ligt. Drie hoogtes, elk met
      een eigen doorlaat, waas, rand en schaduw. Eén recept voor alles ziet er
      gestapeld uit, niet gelaagd.

   3. LICHT KOMT VAN ÉÉN KANT. Linksboven, overal, altijd. Een glasrand die aan
      alle zijden even licht is leest als een omlijning; een rand die bovenaan
      oplicht en onderaan wegvalt leest als een schuine kant die licht vangt.
      De schaduw valt de andere kant op.

   De tint komt uit HAAR papier, niet uit wit. Glas in een licht palet is bijna
   melk; glas in een donker palet is rook. Beide van dezelfde regels.

   Valt netjes terug: zonder backdrop-filter blijft alles een gewone kaart, want
   de ondergrondkleur staat als volle waarde ónder de doorschijnende laag.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-vorm-vlak="glas"] {
  /* Twee dingen bepalen hoeveel een laag doorlaat, en ze trekken aan elkaar:
     HOOGTE (hoger = doorzichtiger) en TEKSTLAST (meer tekst = dichter). Een balk
     met drie woorden mag ver open staan; een lade waarin je moet kunnen lezen
     niet. Vandaar twee reeksen in plaats van één -- de eerste voor vlakken die
     vooral vorm dragen, de tweede voor vlakken waar tekst op staat. */
  --glas-1: color-mix(in srgb, var(--paper) 62%, transparent);
  --glas-2: color-mix(in srgb, var(--paper) 48%, transparent);
  --glas-3: color-mix(in srgb, var(--paper) 40%, transparent);
  --glas-1-tekst: color-mix(in srgb, var(--paper) 78%, transparent);
  --glas-2-tekst: color-mix(in srgb, var(--paper) 68%, transparent);
  --glas-3-tekst: color-mix(in srgb, var(--paper) 62%, transparent);
  /* De waas groeit mee: verder weg van de inhoud eronder = meer vertroebeling.
     De verzadiging erbij, anders wordt alles achter het glas grauw. */
  --glas-waas-1: blur(10px) saturate(1.25);
  --glas-waas-2: blur(18px) saturate(1.4);
  --glas-waas-3: blur(28px) saturate(1.5);
  /* Licht en schaduw op de rand zelf. */
  --glas-licht: color-mix(in srgb, var(--white) 72%, transparent);
  --glas-licht-zacht: color-mix(in srgb, var(--white) 42%, transparent);
  --glas-rand: color-mix(in srgb, var(--white) 34%, transparent);
  --glas-onderrand: color-mix(in srgb, var(--ink) 8%, transparent);
}

/* De schuine kant die licht vangt: een lichte lijn bovenaan die naar rechts
   wegvalt, plus een donkere lijn onderaan. Samen suggereren ze een dikte die er
   niet is. Dit is het verschil tussen "doorschijnend vlak" en "glas". */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  [data-vorm-vlak="glas"] .flip-card__face,
  [data-vorm-vlak="glas"] .site-nav__inner,
  [data-vorm-vlak="glas"] body.app .cal-daypanel,
  [data-vorm-vlak="glas"] body.app .site-nav__drawer,
  [data-vorm-vlak="glas"] .install-gate__card {
    border: 1px solid var(--glas-rand);
  }
  /* De lichtvanger hieronder is absoluut geplaatst en heeft dus een geplaatste
     ouder nodig. Die zetten we ALLEEN waar het element nog statisch staat: een
     blinde `position: relative` over deze hele lijst overschreef de `fixed` van
     de lade, en die klapte naar de linkerbovenhoek van de pagina. Twee
     schermafdrukken lang dacht ik dat het aan backdrop-filter lag. */
  [data-vorm-vlak="glas"] body.app .cal-daypanel { position: relative; }
  /* De lichtvanger. `mask` knipt hem tot een haarlijn langs de bovenrand, zodat
     hij de hoeken volgt zonder een tweede element in de opmaak. */
  [data-vorm-vlak="glas"] .flip-card__face::before,
  [data-vorm-vlak="glas"] .site-nav__inner::before,
  [data-vorm-vlak="glas"] body.app .cal-daypanel::before,
  [data-vorm-vlak="glas"] body.app .site-nav__drawer::before,
  [data-vorm-vlak="glas"] .install-gate__card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    padding: 1px;
    background: linear-gradient(104deg,
      var(--glas-licht) 0%,
      var(--glas-licht-zacht) 34%,
      transparent 62%);
    /* Een masker kijkt alleen naar doorzichtigheid, dus WELKE kleur hier staat
       doet er niet toe zolang hij dekkend is -- var(--ink) is dat, en de
       kleurratel houdt zo gelijk: geen losse kleurwaarde in dit blad. */
    -webkit-mask: linear-gradient(var(--ink) 0 0) content-box, linear-gradient(var(--ink) 0 0);
    mask: linear-gradient(var(--ink) 0 0) content-box, linear-gradient(var(--ink) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  /* Laag 1 — ligt op de pagina, met de sectie eronder. Een flipkaart staat vol
     tekst, dus de dichte reeks. */
  [data-vorm-vlak="glas"] .flip-card__face {
    background: var(--glas-1-tekst);
    -webkit-backdrop-filter: var(--glas-waas-1);
    backdrop-filter: var(--glas-waas-1);
    box-shadow: 0 1px 2px var(--schaduw-kleur-zacht), 0 10px 26px -12px var(--schaduw-kleur),
      inset 0 -1px 0 var(--glas-onderrand);
  }
  /* Laag 2 — een balk of paneel dat over de inhoud schuift. De balk boven de
     site ligt over de hero; in de app ligt hij over de sierband van de praktijk.
     Het dagpaneel schuift onder de maandkalender door. */
  [data-vorm-vlak="glas"] .site-nav__inner {
    background: var(--glas-2);
    -webkit-backdrop-filter: var(--glas-waas-2);
    backdrop-filter: var(--glas-waas-2);
    box-shadow: 0 2px 6px -2px var(--schaduw-kleur-zacht), 0 16px 40px -18px var(--schaduw-kleur),
      inset 0 -1px 0 var(--glas-onderrand);
  }
  /* Het waas-scherm achter de lade mag lichter: bij glas doet de waas van de
     lade zelf het scheiden al. Bleef het op zijn volle sterkte staan, dan keek
     je door glas naar een grijze deken -- en dan is er niets om doorheen te
     kijken, wat het hele punt van deze stand is. */
  [data-vorm-vlak="glas"] .site-nav__scrim {
    background: color-mix(in srgb, var(--ink) 14%, transparent);
  }

  /* Het dagpaneel en de installatiekaart dragen tekst: zelfde hoogte, dichter. */
  [data-vorm-vlak="glas"] body.app .cal-daypanel,
  [data-vorm-vlak="glas"] .install-gate__card {
    background: var(--glas-2-tekst);
    -webkit-backdrop-filter: var(--glas-waas-2);
    backdrop-filter: var(--glas-waas-2);
    box-shadow: 0 2px 6px -2px var(--schaduw-kleur-zacht), 0 16px 40px -18px var(--schaduw-kleur),
      inset 0 -1px 0 var(--glas-onderrand);
  }

  /* Laag 3 — zweeft los boven alles: de lade schuift over de hele app. Er staat
     een menu op dat leesbaar moet zijn, dus de dichte reeks. */
  [data-vorm-vlak="glas"] body.app .site-nav__drawer {
    background: var(--glas-3-tekst);
    -webkit-backdrop-filter: var(--glas-waas-3);
    backdrop-filter: var(--glas-waas-3);
    box-shadow: 0 4px 10px -4px var(--schaduw-kleur-zacht), 0 30px 70px -24px var(--schaduw-kleur),
      inset 0 -1px 0 var(--glas-onderrand);
  }

  /* ── waar het glas landt ────────────────────────────────────────────────
     Alleen plekken met iets eronder. Elke regel hieronder wijst een bestaand
     onderdeel toe aan een hoogte; de opmaak hoeft er niets voor te weten. */

  /* Alleen de onderrand: een balk die van rand tot rand loopt heeft geen zijkant.
     LET OP: het glas zit op .site-nav__inner en niet op .site-nav. Een
     backdrop-filter maakt van zijn element een containing block voor alles wat
     erbinnen `position: fixed` is -- en de lade en het waas-scherm zitten in de
     balk. Met het glas op .site-nav sprong de lade naar de hoek van de balk.
     Kostte één schermafdruk om te zien; staat hier zodat het niet terugkomt. */
  [data-vorm-vlak="glas"] .site-nav__inner {
    border-left: 0; border-right: 0; border-top: 0; pointer-events: auto;
  }
  /* Het dagpaneel is een kaal blok in de opmaak; als het glas wordt, hoort het
     ook de hoek van de praktijk te volgen. */
  [data-vorm-vlak="glas"] body.app .cal-daypanel { border-radius: var(--radius-lg); }
}

/* Optillen bij aanraking -- klein, en alleen waar iemand ook echt kan klikken.
   Wie beweging heeft uitgezet krijgt hem niet. */
@media (prefers-reduced-motion: no-preference) {
  [data-vorm-vlak="glas"] .card,
  [data-vorm-vlak="glas"] .flip-card,
  [data-vorm-vlak="glas"] .btn {
    transition: transform var(--beweging-snel) var(--curve), box-shadow var(--beweging-snel) var(--curve);
  }
  [data-vorm-vlak="glas"] .card:hover,
  [data-vorm-vlak="glas"] .btn:hover {
    transform: translateY(-2px);
  }
}


/* ── groeien uit de plek waar je tikt ──────────────────────────────────────
   Het dagpaneel van de kalender komt binnen vanaf de dag die je aanraakte. De
   oorsprong wordt door beweging.js uit de aanraking zelf gehaald; staat die er
   niet, dan groeit het uit het midden en is er niets stuk.

   Alleen op de bewegende stand: `onthaal: stil` betekent dat een praktijk geen
   beweging wil, en dan hoort ook dit niet te gebeuren. */
[data-vorm-onthaal="animatie"] .cal-daypanel.groeit {
  animation: groeien var(--beweging-traag) var(--curve) both;
  transform-origin: var(--tik-x, 50%) var(--tik-y, 50%);
}
@keyframes groeien {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  [data-vorm-onthaal="animatie"] .cal-daypanel.groeit { animation: none; }
}