/* BannerBazen · team-raster.css (v16, 3 november; 5 november: de namen in de kaarten)
   Over ons, Wie je krijgt: het team als raster achter de kop (team-raster.js). Het canvas loopt van rand tot rand, iets
   boven de kop begint het (met een zachte rand) en het loopt door tot vlak boven de kaarten van het team; het kopje van
   het team (Wie je krijgt) staat daarom in de kop. De tekst staat erboven; waar tekst staat, wordt het raster lichter.
   Sinds 5 november (Frank: "deze mogen er uit en de nav mag op de namen die er onder staan") is de lijst namen onder de
   inleiding weg: de namen in de kaarten kiezen wie je ziet. Wie aan de beurt is, krijgt de oranje lijn boven zijn
   kaart; die loopt vol tot de volgende aan de beurt is (zelf gekozen of bij minder beweging staat hij vol).
   Op een telefoon staat het team in een band tussen de inleiding en het kopje van het team; zonder raster (geen WebGL2)
   valt die band weg. */
.over-held{position:relative;z-index:0}
.over-held>.label{margin-bottom:18px}
.over-held>.sk--klein{margin-top:clamp(90px,10vw,160px)}
.over-raster{position:absolute;z-index:-1;left:calc(-1 * var(--rand));right:calc(-1 * var(--rand));top:-140px;bottom:-12px;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease)}
.over-raster.is-aan{opacity:1}
.over-raster canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.over-raster__video{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}

/* de kaarten van het team (zonder portret: een lijn erboven); met raster is de naam een knop */
.over-kop .persoon{border-top:1px solid var(--lijn-2);padding-top:18px}
.team.is-knoppen .persoon[data-teamraster-lid]{position:relative}
.team.is-knoppen .persoon[data-teamraster-lid]::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--or);
  transform-origin:0 50%;transform:scaleX(var(--voortgang,1));opacity:0;transition:opacity .4s var(--ease)}
.team.is-knoppen .persoon.is-aan::before{opacity:1}
.persoon__knop{display:inline;margin:0;padding:0;border:0;border-radius:2px;background:none;color:inherit;font:inherit;letter-spacing:inherit;
  line-height:inherit;text-align:inherit;cursor:pointer}
.persoon__knop:focus-visible{outline:2px solid var(--or);outline-offset:4px}

@media (max-width:819px){
  /* smal: een band tussen de inleiding en het kopje van het team (team-raster.js zet het gezicht erin); het kopje staat
     over de uitloop. Zonder raster valt de band weg */
  .js .over-held>.sk--klein{margin-top:clamp(200px,58vw,350px)}
  .js .over-held.zonder-raster>.sk--klein{margin-top:clamp(90px,10vw,160px)}
}
.rustig .over-raster,.rustig .team .persoon::before{transition:none}
@media (prefers-reduced-motion:reduce){.over-raster,.team .persoon::before{transition:none}}