/* ============================================================
   Alleen de hero-achtergrond.

   Laadt NA stijl.css. Je site blijft zwart en verder zoals hij was:
   dezelfde knoppen, dezelfde teksten, dezelfde maten, dezelfde
   vensters, logotegels, cijferchips, formuliervelden en slotkader.
   Vijf dingen staan hier, en verder niets:

     1. Het mesh-verloop in de hero, en wat er nodig is om dat netjes in
        de pagina te laten overlopen.
     2. De navigatiebalk van glas.
     3. De kaarten, met heel licht glas en een rand die meeloopt met
        je muis. Jouw ronding van 6 blijft.
     4. Hetzelfde glas op het slotkader, de twee vensters en de
        logotegels, zodat het één materiaal is.
     5. De opmaak van de vier illustraties die als glas zijn hertekend.
        Die staan in visuals_glas.py.

   Het glasrecept komt uit een meting aan plumeform.com, hun .glass-dark:
     vulling  linear-gradient(wit 12% -> wit 6%)
     rand     1px wit 14%
     lichtlijn inset 0 1px wit 22%
     schaduw  0 18px 40px -30px zwart 90%
     waas     blur(22px) saturate(1.25) brightness(1.14)
   Eén afwijking: brightness staat hier op 1,06. Op 1,14 sloeg de balk
   wit uit zodra er een lichte plek uit de hero achter stond.
   ============================================================ */

:root {
  /* ---- de hero-achtergrond ----
     achtergrond.js leest deze waarden hier, zodat je ze op één plek
     afstelt zonder javascript aan te raken. De onderste kleur is zwart,
     gelijk aan de grond van de site, zodat het verloop daarin oplost. */
  --mesh-licht:  #DCE4DF;
  --mesh-midden: #8E9C95;
  --mesh-diep:   #3C4743;
  --mesh-vlak:   #000;
  --mesh-tempo:      0.28;   /* 0 zet hem stil; 0,1 is bijna stil, 1,5 onrustig */
  --mesh-vervorming: 0.8;
  --mesh-werveling:  0.36;
  --mesh-schaal:     1.1;
  --mesh-korrel:     0;      /* filmkorrel over het geheel */
  --mesh-randkorrel: 0;      /* korrel binnen het verloop; breekt de randen op */

  /* ---- glas ---- */
  --glas-vulling: linear-gradient(to bottom, rgba(255, 255, 255, .12), rgba(255, 255, 255, .055));
  --glas-rand: rgba(255, 255, 255, .14);
  --glas-lichtlijn: inset 0 1px 0 rgba(255, 255, 255, .22);
  --glas-schaduw: 0 18px 40px -30px rgba(0, 0, 0, .9);
  --glas-waas: blur(22px) saturate(1.25) brightness(1.06);
}

/* ============================================================
   1. De hero
   ============================================================ */

/* De shader zet zijn doek als eerste kind in .hero, met z-index -1. Dat
   werkt alleen als .hero een eigen stapelcontext heeft; anders zakt het
   doek achter de pagina weg en zie je niets. */
.hero.mesh-aan { isolation: isolate; }

/* Het css-verloop dat er stond vervalt zodra de shader draait. */
.hero.mesh-aan .verloop { display: none; }

/* De korrellaag lag alleen over de hero en lichtte hem daardoor op als
   een eigen vlak: precies de naad die je eerder zag. Met het verloop
   erachter heeft hij geen werk meer. */
.hero.mesh-aan .korrel { display: none; }

/* Waar de hero ophoudt, mag je niets zien gebeuren. Dat lukt alleen als
   op de onderrand van de hero precies de pagina zelf zichtbaar is, wat
   die pagina daar ook is. Dus vloeit het doek daar weg, en legt de
   schaduwlaag er geen vlak overheen.

   Twee eerdere versies zaten ernaast, allebei gemeten:
     1. Het doek vervaagde vanaf 58%. Maar op 1440 eindigt de h1 op 57,
        staat de intro op 62 tot 71 en de knop op 78 tot 86. Het masker
        at dus de hele onderste helft op, inclusief je knop.
     2. De schaduwlaag liep door tot puur zwart. Daar mat ik een sprong
        van +6,7 op de rand, want de pagina is daar niet zwart: de
        lichtplas achter de cases reikt tot onder de hero.

   Nu begint de vervaging onder de knop en eindigt hij op doorzichtig.
   De aansluiting klopt dan per definitie, ook als je de plassen later
   verzet. */
.hero.mesh-aan > canvas {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 86%, rgba(0, 0, 0, .45) 94%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 86%, rgba(0, 0, 0, .45) 94%, transparent 100%);
}

/* Twee lagen schaduw: een band bovenaan zodat de balk leesbaar blijft,
   en een zachte plas achter de kop. Zonder die plas loopt de witte kop
   over een lichte plek in het verloop en wordt hij slecht leesbaar. Het
   is een verloop en geen vlak, dus je ziet er geen kader van. De tekst
   zelf blijft onaangeroerd. */
.hero.mesh-aan .uitloop {
  z-index: 1;
  background:
    /* de plas achter de kop, zodat wit op een lichte plek leesbaar blijft */
    radial-gradient(56% 42% at 50% 46%, rgba(0, 0, 0, .46), rgba(0, 0, 0, .18) 58%, rgba(0, 0, 0, 0) 78%),
    /* de band bovenaan, zodat de balk leesbaar blijft */
    linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .10) 24%, rgba(0, 0, 0, 0) 52%),
    /* onderin niets: het doek vervaagt daar zelf al, en een vlak zou
       juist een rand maken tegen de pagina eronder */
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
}
.hero.mesh-aan .c { position: relative; z-index: 2; }

/* Op een telefoon staat de tekst over de volle breedte, dus de plas moet
   breder en iets dieper; anders loopt de kicker over een lichte plek. */
@media (max-width: 900px) {
  /* Op 390 vult de tekst de hero bijna helemaal: de knop eindigt daar op
     92% in plaats van 86. De vervaging heeft dus minder ruimte en moet
     later beginnen. */
  .hero.mesh-aan > canvas {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 92%, rgba(0, 0, 0, .45) 96.5%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 92%, rgba(0, 0, 0, .45) 96.5%, transparent 100%);
  }
  .hero.mesh-aan .uitloop {
    background:
      radial-gradient(96% 44% at 50% 44%, rgba(0, 0, 0, .52), rgba(0, 0, 0, .24) 62%, rgba(0, 0, 0, 0) 86%),
      linear-gradient(180deg, rgba(0, 0, 0, .48) 0%, rgba(0, 0, 0, .14) 26%, rgba(0, 0, 0, 0) 56%);
  }
}

/* ============================================================
   2. De navigatiebalk
   ============================================================ */
.pil {
  background: var(--glas-vulling);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-lichtlijn), var(--glas-schaduw);
  -webkit-backdrop-filter: var(--glas-waas);
  backdrop-filter: var(--glas-waas);
}
@media (max-width: 900px) {
  .pil .menu-lijst {
    background: var(--glas-vulling);
    border: 1px solid var(--glas-rand);
    box-shadow: var(--glas-lichtlijn), var(--glas-schaduw);
    -webkit-backdrop-filter: var(--glas-waas);
    backdrop-filter: var(--glas-waas);
  }
}

/* ============================================================
   3. De kaarten, subtiel

   Dit stond eerder veel te zwaar aan: ronding 14, een vulling van 12%
   wit, een rand die tot 75% oplichtte en een kaart die bij hover omhoog
   sprong. Een afgeronde glazen doos met een getekende grafiek erin is
   precies de SaaS-look waar je vanaf wil.

   Terug naar jouw eigen ronding van 6, een vulling die je nauwelijks
   ziet, en een rand die alleen meeloopt met je muis. Het verschil met
   je oorspronkelijke kaart is een paar procent licht, meer niet. Dat is
   wat subtiel glas hoort te zijn: je ziet het pas als je erop let.
   ============================================================ */
.kaart {
  position: relative;
  background: var(--glas-vul);
  border: 1px solid transparent;
  box-shadow: var(--glas-lijn), var(--glas-schaduw);
  -webkit-backdrop-filter: var(--glas-waas);
  backdrop-filter: var(--glas-waas);
  transition: box-shadow 260ms;
}
.kaart::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(60% 120% at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, .30), rgba(255, 255, 255, .11) 46%, rgba(255, 255, 255, .08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none; z-index: 3;
}
/* geen sprong bij hover, alleen iets meer licht op de rand */
.kaart:hover::before {
  background: radial-gradient(60% 120% at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, .50), rgba(255, 255, 255, .13) 46%, rgba(255, 255, 255, .08));
}
.kaart > * { position: relative; z-index: 4; }

/* ============================================================
   4. De overige vlakken, hetzelfde recept

   Zodat het één materiaal is en niet drie. Het slotkader met het
   formulier, de twee vensters en de logotegels krijgen precies dezelfde
   vulling, lichtlijn en waas als de kaarten. Hun eigen ronding en maten
   uit stijl.css blijven staan.
   ============================================================ */
.c.kader, .vs {
  position: relative;
  background: var(--glas-vul);
  border: 1px solid transparent;
  box-shadow: var(--glas-lijn), var(--glas-schaduw);
  -webkit-backdrop-filter: var(--glas-waas);
  backdrop-filter: var(--glas-waas);
}
/* dezelfde meelopende rand als op de kaarten. .vs heeft zijn eigen
   ::before in stijl.css, dus die krijgt hem via ::after. */
.c.kader::before, .vs::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(60% 120% at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, .30), rgba(255, 255, 255, .11) 46%, rgba(255, 255, 255, .08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none; z-index: 6;
}
.c.kader > * { position: relative; z-index: 2; }

/* De logotegels bewust zonder waas: tweeentwintig vervagende lagen over
   elkaar kosten veel en maken de logo's juist troebel. */
.orbit .ik {
  background: var(--glas-vul);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-lijn);
}

/* ============================================================
   5. De hertekende glas-illustraties

   Alleen de drie tekeningen die van glas zijn gemaakt. De vierde (de
   productpagina) en de twee vensters houden hun eigen opmaak uit
   stijl.css. De letter blijft die van de site.
   ============================================================ */

/* Geen eigen achtergrond, geen rand, geen bijsnijding: de kaart is het
   vlak, de tekening ligt erop. Een zwart vlak hier zou een dicht gat in
   die kaart slaan. */
.scene.glas {
  background: transparent; border: 0;
  clip-path: none; overflow: visible;
}

.scene.glas text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.scene.glas .gl-kop { font-size: 12px; fill: rgba(255, 255, 255, .62); }
.scene.glas .gl-waarde {
  font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300; font-size: 19px; letter-spacing: -.02em; fill: #fff;
}
.scene.glas .gl-waarde.dim { fill: rgba(255, 255, 255, .5); }
.scene.glas .gl-cat { font-size: 11px; fill: rgba(255, 255, 255, .45); }
.scene.glas .gl-chip { font-size: 10px; fill: rgba(255, 255, 255, .72); }
.scene.glas .gl-kop.dim { fill: rgba(255, 255, 255, .45); }
.scene.glas .gl-rij { font-size: 12px; fill: rgba(255, 255, 255, .80); }
.scene.glas .gl-onder { font-size: 11px; fill: rgba(255, 255, 255, .66); }
.scene.glas .gl-rij.dim { fill: rgba(255, 255, 255, .50); }
.scene.glas .gl-onder.dim { fill: rgba(255, 255, 255, .46); }
/* het nummer in een markering en in de lijst ernaast */
.scene.glas .gl-merk { font-size: 10px; font-weight: 500; fill: #86B99A; }
/* de knop op de nagebouwde productpagina is een wit vlak, dus daar hoort
   donkere tekst op */
.scene.glas .gl-knop { font-size: 11px; font-weight: 500; fill: #0b0b0b; }
.scene.glas .gl-getal {
  font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300; font-size: 17px; letter-spacing: -.02em; fill: rgba(255, 255, 255, .88);
}
.scene.glas .gl-getal.op { fill: #fff; }
.scene.glas .gl-lijn { stroke: rgba(255, 255, 255, .28); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.scene.glas .gl-lijn.op { stroke: #86B99A; stroke-width: 1.6; }
.scene.glas .gl-groot {
  font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300; font-size: 32px; letter-spacing: -.03em; fill: #fff;
}
@media (max-width: 900px) {
  .scene.glas .gl-kop { font-size: 15px; }
  .scene.glas .gl-waarde { font-size: 21px; }
  .scene.glas .gl-cat { font-size: 13px; }
  .scene.glas .gl-chip { font-size: 12px; }
  .scene.glas .gl-rij { font-size: 14px; }
  .scene.glas .gl-onder { font-size: 13px; }
  .scene.glas .gl-getal { font-size: 19px; }
  .scene.glas .gl-merk { font-size: 12px; }
  .scene.glas .gl-knop { font-size: 13px; }
  .scene.glas .gl-groot { font-size: 34px; }
}