/* ============================================================
   De glazen lens: elke afspeelknop op de site
   ============================================================
   Eén materiaal voor alle zes de afspeelknoppen: de werksessie en de
   welkomstvideo op de afspraakpagina, de podcastkaart daaronder, de
   uitgelichte video en de rasterkaarten in de videotheek, de posters op
   de afleveringspagina's en de YouTube-sectie op de homepage.

   Het is een glazen lens, geen gekleurde schijf. Het verschil zit in de
   backdrop-filter: het beeld eronder wordt echt vervaagd, dus de knop
   toont wat erachter zit in plaats van het te bedekken.

   Het glas is gerookt, niet melkwit. De thumbnails lopen van een witte
   kantoormuur tot een donker decor. Een lichte lens loste op het eerste
   volledig op; donker getint glas houdt contrast op een licht beeld en
   blijft leesbaar op een donker beeld. En pas tegen een donkere tint kan
   de witte specular rand oplichten.

   Dit bestand laadt als laatste, na de paginastylesheets. De maat en de
   plek van elke knop blijven daar staan, want die zijn per plek gekozen;
   hier staat alleen waar de knop van gemaakt is. */

.mt-film__play,
.reel-play,
.wt__play,
.vt-play,
.vt-card__play,
.ytxo__play {
  /* De tint is background-color en niet de laatste laag van de shorthand,
     zodat hij bij hover kan overvloeien. Een gradient kan dat niet. */
  --lens-tint: rgba(6, 13, 24, 0.26);
  /* Schaduwfragmenten als variabele, zodat een kleine knop dezelfde vorm
     krijgt op zijn eigen maat. Een 30px binnenschaduw vult een knop van
     46px bijna helemaal en maakt hem zwart in plaats van glazen. */
  --lens-hi: 2px 3px -2px;
  --lens-glow: -10px 18px -11px;
  --lens-inner: 30px -4px;
  --lens-drop: 24px 50px -18px;
  --lens-halo: 6px 24px -10px;
  --lens-ink: drop-shadow(0 2px 7px rgba(3, 10, 20, 0.55));

  isolation: isolate;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background-color: var(--lens-tint);
  background-image:
    /* de hotspot: het felle vlekje waar de lichtbron zich in het glas
       spiegelt. Dit ene ovaaltje doet meer voor de illusie dan alle
       schaduwen samen, want zonder spiegeling is het gewoon een schijf. */
    radial-gradient(40% 22% at 33% 17%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08) 62%, transparent 78%),
    /* licht van linksboven, zoals op elk bol glazen oppervlak */
    radial-gradient(115% 115% at 26% 10%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.04) 48%, transparent 72%),
    /* de merkkleur vangt onderin terug, dat houdt hem van de site */
    radial-gradient(150% 150% at 80% 96%, rgba(79, 147, 255, 0.4), transparent 60%);
  -webkit-backdrop-filter: blur(14px) saturate(205%) brightness(0.95) contrast(1.08);
  backdrop-filter: blur(14px) saturate(205%) brightness(0.95) contrast(1.08);
  box-shadow:
    /* bovenrand: een brede lichtsnede, dat is de dikte van het glas */
    inset 0 var(--lens-hi) rgba(255, 255, 255, 0.95),
    /* onderrand vangt de merkkleur terug, zoals licht dat door glas kaatst */
    inset 0 var(--lens-glow) rgba(174, 245, 253, 0.85),
    /* naar binnen toe donkerder: de lens is bol, niet plat */
    inset 0 0 var(--lens-inner) rgba(3, 10, 20, 0.42),
    0 var(--lens-drop) rgba(3, 10, 20, 0.9),
    0 var(--lens-halo) var(--accent-glow);
  transition:
    transform var(--dur-1) var(--ease-spring),
    scale var(--dur-1) var(--ease-spring),
    opacity var(--dur-1) ease,
    background-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

/* Specular rand: een gemaskeerde 1px gradient, dezelfde techniek als
   .glass::before. Fel op tien uur, dood op de zijkanten, opnieuw fel op
   vier uur. Twee lichtpunten in plaats van een gelijkmatig randje, want
   zo vangt een dikke glasrand licht. */
.mt-film__play::before,
.reel-play::before,
.wt__play::before,
.vt-play::before,
.vt-card__play::before,
.ytxo__play::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1px;
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(174, 245, 253, 0.6) 20%,
    rgba(255, 255, 255, 0.06) 44%,
    rgba(255, 255, 255, 0.04) 58%,
    rgba(102, 198, 255, 0.5) 82%,
    rgba(226, 250, 255, 0.85) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* De driehoek zweeft boven het glas, hij ligt er niet in. De optische
   centrering blijft per knop staan: de ene svg heeft zijn zwaartepunt op
   een andere plek dan de andere. */
.mt-film__play svg,
.reel-play svg,
.wt__play svg,
.vt-play svg,
.vt-card__play svg,
.ytxo__play svg {
  position: relative;
  z-index: 2;
  filter: var(--lens-ink);
}

/* Hover: het glas wordt een tikje dichter en de gloed eronder zwelt aan.
   De schaal blijft in de paginastylesheets staan, want die verschilt. */
.mt-film__player:hover .mt-film__play,
[data-reel]:hover .reel-play,
.wt--pod:hover .wt__play,
.vt-feat__card:hover .vt-play,
.vt-feat__card:focus-visible .vt-play,
.ep-player__poster:hover .vt-play,
.vt-card:hover .vt-card__play,
.vt-card:focus-visible .vt-card__play,
.ytxo__screen:hover .ytxo__play,
.ytxo__card:hover .ytxo__play {
  --lens-tint: rgba(6, 13, 24, 0.34);
  box-shadow:
    inset 0 var(--lens-hi) rgba(255, 255, 255, 0.98),
    inset 0 var(--lens-glow) rgba(174, 245, 253, 0.95),
    inset 0 0 var(--lens-inner) rgba(3, 10, 20, 0.38),
    0 var(--lens-drop) rgba(3, 10, 20, 0.92),
    0 var(--lens-halo) var(--accent-glow);
}

/* ---------- Kleine knoppen ----------
   46 en 52 pixels. Dezelfde vorm, maar de schaduwen moeten mee krimpen,
   anders slokken ze de knop op. */
.ytxo__play,
.vt-card__play {
  --lens-hi: 1.5px 2px -1.5px;
  --lens-glow: -6px 11px -7px;
  --lens-inner: 18px -3px;
  --lens-drop: 12px 26px -10px;
  --lens-halo: 4px 14px -8px;
  --lens-ink: drop-shadow(0 1px 4px rgba(3, 10, 20, 0.5));
}
/* de hub-knop op de homepage is groot, die valt terug op de standaard */
.ytxo__play--hub {
  --lens-hi: 2px 3px -2px;
  --lens-glow: -8px 15px -9px;
  --lens-inner: 24px -4px;
  --lens-drop: 18px 40px -14px;
  --lens-halo: 5px 20px -9px;
  --lens-ink: drop-shadow(0 2px 6px rgba(3, 10, 20, 0.55));
}

/* ---------- Rustende rasterkaarten ----------
   De knop op een rasterkaart staat op opacity 0 tot je erover gaat. Een
   backdrop-filter op een onzichtbare laag is werk voor niets, en op de
   videotheek staan er drieëntwintig tegelijk. Blur pas bij hover. */
.vt-card__play {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.vt-card:hover .vt-card__play,
.vt-card:focus-visible .vt-card__play {
  -webkit-backdrop-filter: blur(12px) saturate(205%) brightness(0.95) contrast(1.08);
  backdrop-filter: blur(12px) saturate(205%) brightness(0.95) contrast(1.08);
}

/* ---------- Telefoon ----------
   Op een aanraakscherm bestaat hover niet, dus de kaartknop blijft
   onzichtbaar. Blijft over: de grote knop op een posterkader. Die houdt
   zijn blur, dat is er één per pagina in plaats van drieëntwintig.
   De rasterkaart krijgt een dichtere tint voor het geval hij toch in
   beeld komt, bijvoorbeeld na een tik die als hover telt. */
@media (max-width: 767px) {
  .vt-card__play {
    --lens-tint: rgba(8, 14, 26, 0.62);
  }
  .vt-card:hover .vt-card__play,
  .vt-card:focus-visible .vt-card__play {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mt-film__play,
  .reel-play,
  .wt__play,
  .vt-play,
  .vt-card__play,
  .ytxo__play {
    transition: none;
  }
}