/* VLAME - de glasversie (2026-09-15, klant: "die crème blokken en zwarte
 * teksten zijn te simpel; laat één versie zien met glas en kleur, meer pop
 * en diepte - en anders terug naar een goede git").
 *
 * Laadt ná system.css en verandert alleen het MATERIAAL, niet de opbouw:
 *
 *   achtergrond   drie zachte kleurvlekken uit het vlam-verloop, vast
 *                 achter de pagina, met de korrel eroverheen - het licht
 *                 waar het glas iets mee kan;
 *   panelen       melkglas: half doorzichtig wit, backdrop-blur, een dun
 *                 wit randje en een lichtlijn bovenaan, zachte schaduw
 *                 onder - de blokken zweven boven het licht;
 *   kaarten       hetzelfde glas, iets helderder, en bij hover een tikje
 *                 omhoog met meer schaduw;
 *   koppen        inkt met een subtiel diep-violet verloop naar beneden,
 *                 zodat ze niet plat zwart zijn;
 *   knoppen       de omlijnde knop krijgt een glasvulling.
 *
 * Terug naar de crème-versie: dit bestand uit de enqueue halen (of
 * git checkout v2.5.0). Alles wat erin staat is puur visueel.
 */

/* --- het licht achter de pagina --- */
body{background:#F4EFF2}
body::before{
  content:"";position:fixed;inset:-10%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(52% 44% at 12% 18%,rgba(255,177,60,.55) 0%,rgba(255,177,60,0) 70%),
    radial-gradient(46% 40% at 88% 26%,rgba(225,44,123,.42) 0%,rgba(225,44,123,0) 70%),
    radial-gradient(56% 46% at 50% 92%,rgba(139,43,176,.4) 0%,rgba(139,43,176,0) 70%),
    radial-gradient(40% 36% at 70% 62%,rgba(255,92,62,.32) 0%,rgba(255,92,62,0) 70%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--grain) 0 0/180px 180px repeat;opacity:.5;mix-blend-mode:multiply;
}

/* --- panelen: melkglas --- */
:root{
  --glass:rgba(255,255,255,.44);
  --glass-2:rgba(255,255,255,.58);
  --glass-edge:rgba(255,255,255,.7);
  --glass-shadow:0 34px 80px -34px rgba(23,17,26,.32),0 1px 0 rgba(255,255,255,.8) inset,0 -1px 0 rgba(23,17,26,.06) inset;
}
main>.sec,main>.marquee-bleed,main>#werk,main>#opdrachtgevers,main>#projecten,main>#over,main>#reacties,main>#contact,
main>.sec--tint,main>.sec--dark,.vl-foot{
  background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow);
}
main>.marquee-bleed .marquee{background:transparent}
.vl-foot{border-top:1px solid var(--glass-edge)}

/* --- kaarten en panelen in een paneel: helderder glas --- */
.card,.q,.pull__in,.logos__also,.lg,.mlabel,.blk,.svc__i:hover,.svc__i:focus-within,
.form input,.form textarea,.nextcase .wrap{
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  box-shadow:0 18px 50px -26px rgba(23,17,26,.35),0 1px 0 rgba(255,255,255,.85) inset;
}
.logos__in{background:rgba(255,255,255,.28);border-color:var(--glass-edge)}
.lg{border:0;box-shadow:none;background:transparent}
.card:hover{transform:translateY(-6px);box-shadow:0 40px 70px -30px rgba(23,17,26,.45),0 1px 0 rgba(255,255,255,.9) inset}
.card--own{
  background:linear-gradient(var(--glass-2),var(--glass-2)) padding-box,var(--flame) border-box;
  border:2px solid transparent;
}
.form input,.form textarea{border:var(--bw) solid rgba(23,17,26,.55)}
.form input:focus-visible,.form textarea:focus-visible{background:rgba(255,255,255,.85)}
.svc{border-top-color:rgba(23,17,26,.14)}
.svc__i{border-bottom-color:rgba(23,17,26,.14)}
.svc__i:hover,.svc__i:focus-within{border-radius:var(--r-s);border-bottom-color:transparent}
.pull__in{border-color:var(--glass-edge)}
.nextcase .wrap{background:var(--flame-tex);background-blend-mode:multiply;border:0}

/* --- koppen: inkt met diepte --- */
h1:not(.hero__word),h2,h3,.display{
  background:linear-gradient(180deg,#17111A 0%,#2A1F33 70%,#4A2A5C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.svc dt,.lg b,.mlabel__v,.nextcase__t{
  background:linear-gradient(180deg,#17111A 0%,#2A1F33 70%,#4A2A5C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
/* Waar een kop op het verloop staat blijft hij wit. */
.cta__say,.sec--dark .cta__say,.nextcase__t,.nextcase .wrap h2{background:none;color:#fff;-webkit-text-fill-color:#fff}
/* Het accentwoord houdt zijn markering: inkt-verloop niet op de markering. */
.spark__t{-webkit-text-fill-color:#fff;color:#fff}
.cta .spark__t{-webkit-text-fill-color:var(--ink);color:var(--ink)}
a.lg:hover b,a.lg:focus-visible b{background:none;color:#fff;-webkit-text-fill-color:#fff}
.svc__i:hover dt,.svc__i:focus-within dt{background:none;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.hero__fill .spark__t{-webkit-text-fill-color:#fff;color:#fff}
.hero__stroke{-webkit-text-fill-color:transparent;color:transparent;background:none}

/* --- knoppen: de omlijnde knop krijgt glas --- */
.btn:not(.btn--flame):not(.btn--ember):not(.btn--dark),.vl-bar__btn,.chip:not([aria-current]),.hero__scroll-pill{
  background:rgba(255,255,255,.4);
}
.vl-bar{background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--glass-edge)}
html.vl-at-top .vl-bar{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}

/* --- de pas: een glasrand erbij --- */
.vl-lam__face{border:1px solid rgba(255,255,255,.55)}
.vl-lam__list a{background:rgba(255,255,255,.14)}

/* Ruimte: de blokken mogen elkaar iets meer lucht geven, zodat het licht
   ertussen zichtbaar is. */
main>.sec,main>.marquee-bleed{margin-bottom:clamp(16px,2vw,32px)}

@media (max-width:760px){
  main>.sec,main>.marquee-bleed{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
@media (prefers-reduced-transparency:reduce){
  main>.sec,main>.marquee-bleed,.card,.q,.vl-foot{background:rgba(255,255,255,.92);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* De dock in glas. */
.vl-dock{background:rgba(23,17,26,.72);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.22)}
/* Prestatie: één blur-laag per paneel is genoeg. De kleurvlekken achter de
   pagina zijn al zacht (radial-gradient), dus geen filter erop, en kaarten
   in een paneel blurren niet nog eens - de headless-renderer viel om bij
   geneste backdrop-filters op een pagina van 12.000 px. */
/* Koppen die scrollfx in een regelmasker zet: het verloop moet op de
   regel (span.vl-line) staan, niet op de kop eromheen - een kop met
   background-clip:text tekent niets meer zodra zijn kind een transform
   krijgt (gemeten: de sectiekoppen waren onzichtbaar). */
html.vl-fx .vl-mask{background:none}
.vl-mask>.vl-line{
  background:linear-gradient(180deg,#17111A 0%,#2A1F33 70%,#4A2A5C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.cta__say>.vl-line,.nextcase__t>.vl-line{background:none;color:#fff;-webkit-text-fill-color:#fff}