/* ===========================================================================
   hsb-soepel.css — schokkerig scrollen op het overzicht en de homepagina

   HET PROBLEEM
   De profielpagina scrolt vloeiend, het sprekersoverzicht en de homepagina
   niet. Dat verschil zit in backdrop-filter: blur().

   Zo'n blur betekent: pak alles wat ACHTER dit element ligt, maak er een
   kopie van, vervaag die, en teken het element erbovenop. Dat moet opnieuw
   bij elke stap die de pagina verschuift. Eén zo'n element merk je niet.
   Maar op het overzicht staan er twee op ELKE kaart -- het hartje en het
   tarief -- dus bij veertig sprekers zijn het er tachtig, plus de filterbalk
   die ook nog eens blijft plakken terwijl hij vervaagt. Dan loopt de browser
   achter en voelt het scrollen schokkerig.

   De profielpagina laadt die stijlbladen niet. Vandaar het verschil.

   WAT DIT BESTAND DOET
   De blur gaat eraf bij alles wat zich per kaart herhaalt, en daar komt een
   vlakke achtergrond voor in de plaats die er vrijwel hetzelfde uitziet. Een
   wit vlakje van 92% dekking boven een foto is met het blote oog nauwelijks
   te onderscheiden van een vervaagd vlakje, maar het kost niets.

   De filterbalk bovenaan houdt zijn blur, maar lichter. Dat is één element
   in beeld, geen tachtig.

   WAAROM EEN APART BESTAND EN GEEN WIJZIGING IN DE BRONBESTANDEN
   De regels staan verspreid over vijf stijlbladen (hsb-sprekers.css,
   index.css, overzicht-genre.css, sprekers.css, favoriet-ster.css). Van een
   paar daarvan weet ik niet zeker of mijn kopie de nieuwste is. Dan is een
   los bestand dat er overheen gaat veiliger dan vijf bestanden overschrijven.

   Werkt het: dan verwerk ik het alsnog netjes in de bronbestanden, zodra ik
   van elk de actuele versie van de server heb.

   LAAD DIT ALS LAATSTE, na de andere stijlbladen.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Op de kaarten: het hartje en het tarief
   --------------------------------------------------------------------------- */

/* .sb-fav staat in sprekers.css als KALE selector (blur 4px) en in
   hsb-sprekers.css als .sb-card-media .sb-fav (blur 8px). Allebei noemen,
   anders wint er eentje alsnog. */
.sb-fav,
.sb-card-media .sb-fav,
.sb-card-tarief,
.wishlist-btn-round,
.prijs-badge {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Vlakke achtergronden in plaats van de vervaging. De waarden liggen dicht
   bij wat je nu ziet, alleen zonder de kopieerslag. */
.sb-fav,
.sb-card-media .sb-fav,
.wishlist-btn-round {
  background-color: rgba(255, 255, 255, .92);
}

.sb-card-tarief,
.prijs-badge {
  background-color: rgba(255, 255, 255, .94);
}


/* ---------------------------------------------------------------------------
   Op de homepagina: de cijfers over de foto
   --------------------------------------------------------------------------- */

.glass-number {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: rgba(255, 255, 255, .88);
}


/* ---------------------------------------------------------------------------
   De filterbalk die blijft plakken

   Deze houdt zijn vervaging -- hij ligt over de pagina heen en dan is het
   effect zichtbaar en gewenst. Alleen lichter: blur(20px) met saturate(180%)
   is zwaarder dan nodig, zeker op een element dat tijdens het scrollen in
   beeld blijft.
   --------------------------------------------------------------------------- */

.glass-container {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* .hsb-kop staat bovenaan het overzicht en scrolt gewoon mee; daar voegt de
   vervaging niets toe. */
.hsb-kop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}


/* ---------------------------------------------------------------------------
   HIER STOND content-visibility: auto OP DE KAARTEN. DAT IS ERUIT.

   Die regel laat de browser kaarten die ver buiten beeld liggen overslaan.
   Dat klinkt goed, maar hij moet dan wel raden hoe hoog zo'n kaart wordt. Dat
   raden deed hij met contain-intrinsic-size: auto 420px, en zodra een kaart
   echt in beeld komt en anders blijkt, verschuift alles eronder -- en daarmee
   ook de schuifbalk onder je vinger. Dat voelt precies als schokkerig
   scrollen.

   Bij 36 kaarten levert het bovendien nauwelijks iets op. Eruit dus.

   De kaarten krijgen alleen nog een eigen laag tijdens het zweven, zodat de
   browser bij het oplichten niet de hele rij opnieuw hoeft te tekenen.
   --------------------------------------------------------------------------- */

.sb-card:hover { will-change: transform; }