/* ---------- Eigen videospeler ----------
   Een <video> met één glazen speelknop in het midden in plaats van een kale
   browserbalk over de poster. Na de eerste klik neemt de browser het over
   met zijn eigen knoppen (data-reel-native), zodat pauzeren en doorspoelen
   werken zoals mensen dat kennen. Zo staat het op de afspraakpagina en op
   de trainingspagina; daar zweeft de glazen specbalk op die plek, dus die
   vervaagt zolang de knoppen er staan (zie .has-controls in hero-ap.css).

   Zonder data-reel-native regelt reel.js het zelf: dan hoort er een
   [data-reel-bar] bij, de dunne voortgangslijn bovenlangs waarop je kunt
   zoeken. Op dit moment gebruikt geen enkele pagina die stand. */
[data-reel] {
  cursor: pointer;
}
[data-reel] video {
  cursor: pointer;
}
[data-reel].has-controls video {
  cursor: default;
}

/* de speelknop: de glazen lens uit play.css, hier alleen maat en plek */
.reel-play {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 5vw + 46px, 92px);
  height: clamp(64px, 5vw + 46px, 92px);
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
/* zwaartepunt van de driehoek ligt links van het midden; zie afspraak.css */
.reel-play svg {
  width: 35%;
  height: 35%;
  translate: 2.8% 0;
}
[data-reel]:hover .reel-play {
  transform: translate(-50%, -50%) scale(1.08);
}
.reel-play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
/* tijdens het spelen is de knop weg, maar blijft hij bereikbaar met het
   toetsenbord: spatie of enter pauzeert. Zodra de browserknoppen aan
   staan (afspraakpagina) blijft hij weg, ook in pauze. Na afloop ook: dan
   staat de aftiteling eroverheen met een eigen knop. */
[data-reel].is-playing .reel-play,
[data-reel].is-ended .reel-play,
[data-reel].has-controls .reel-play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  pointer-events: none;
  /* een backdrop-filter over een lopende video is elk frame werk, ook op
     een laag die je niet ziet */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* voortgangslijn bovenlangs; het klikvlak is hoger dan de lijn zelf */
.reel-bar {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  opacity: 0;
  transition: opacity var(--dur-1) ease;
}
.reel-bar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.22);
}
.reel-bar i {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
[data-reel].is-started .reel-bar {
  opacity: 1;
}
[data-reel].has-controls .reel-bar {
  display: none;
}
/* Na afloop staat de lijn vol en blijft hij staan, boven de waas van de
   aftiteling (die dekt het hele kader): één streep die zegt dat je alles
   gezien hebt. Klikken erop is nog steeds zoeken, en dat speelt dan
   meteen verder vanaf dat punt (reel.js). */
[data-reel].is-ended .reel-bar {
  z-index: 5;
}

/* ---------- Stille lus over de poster ----------
   Een stilstaand kader met een speelknop leest als een plaatje. Deze korte,
   geluidloze lus laat meteen zien dat hier echt een video staat. Hij ligt
   over de poster maar onder de speelknop en de voortgangslijn (z-index 3),
   en verdwijnt zodra de echte opname begint. reel.js zet hem er alleen in
   als de bezoeker beweging wil en niet op databesparing staat. */
.reel-loop {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
}
/* pas zichtbaar als hij daadwerkelijk draait: anders knippert er een zwart
   vlak over de poster zolang het bestand nog binnenkomt */
.reel-loop.is-in {
  opacity: 1;
}
[data-reel].is-started .reel-loop {
  opacity: 0;
}

/* ---------- De aftiteling ----------
   Een video die afloopt en dan terugvalt op zijn poster met de stille lus
   eroverheen, leest als een video die vanzelf opnieuw begint. Daarom eindigt
   hij nu zoals een film eindigt: het beeld blijft staan op het laatste kader
   (op de afspraakpagina is dat het merkteken), het kader valt weg in het
   donker en daar komt dit paneel overheen. Geen twijfel meer of je nog kijkt.

   Het paneel ziet eruit als het glas van de rest van de site en staat in de
   .on-dark-stand (dat is een klasse met alleen kleurtokens): de opname
   eronder is donker, ook als de pagina in lichte modus staat. Het materiaal
   staat hieronder wel zelf uitgeschreven en het paneel draagt géén .glass.
   Reden: .glass wordt elders drie keer overschreven (`.v2 .glass` in v2.css,
   een lichtere blur onder 767px, .glass--strong), en dit paneel moet op de
   telefoon juist helemaal geen materiaal hebben. Dat werd een
   specificiteitsgevecht dat je op een telefoon niet ziet en op desktop niet
   merkt. Nu staat alles in dit bestand, in één klasse, en is uitzetten
   gewoon uitzetten.

   Alleen zichtbaar via visibility, niet via [hidden]: zo vallen de knoppen
   vanzelf uit de tabvolgorde en kan de overgang toch lopen. */
.reel-end {
  position: absolute;
  /* boven de speelknop en de lijn (3), gelijk met de draaiende lichtrand */
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(0.7rem, 0.3rem + 1.6vw, 1.8rem);
  /* Het beeld zakt weg, maar blijft zichtbaar: je ziet waar je was. Niet
     lichter maken: op de afspraakpagina staat in dat laatste kader het
     merkteken, en dat piept anders in stukjes om het paneel heen. */
  background: radial-gradient(
    125% 115% at 50% 46%,
    rgba(4, 9, 18, 0.76),
    rgba(3, 7, 14, 0.93) 74%
  );
  opacity: 0;
  visibility: hidden;
  /* de kaart vangt de klikken, de rest van het kader niet: een klik naast
     het paneel valt op de opname en start hem opnieuw */
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out), visibility 0s 0.5s;
}
[data-reel].is-ended .reel-end {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--ease-out), visibility 0s;
}
.reel-end__card {
  /* .btn pakt --ink-invert voor zijn tekst; in lichte modus is dat licht,
     en dan staat er witte tekst op een witte pil */
  --ink-invert: #0a0e16;
  position: relative;
  isolation: isolate;
  /* het materiaal, gelijk aan .glass in glass.css plus de blur die v2.css
     eroverheen zet */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.12), transparent 60%),
    var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(26px) saturate(200%) brightness(1.06);
  backdrop-filter: blur(26px) saturate(200%) brightness(1.06);
  box-shadow: inset 0 1px 0 0 var(--glass-hi), var(--shadow-soft);
  max-width: min(36rem, 100%);
  padding: clamp(1rem, 0.5rem + 1.7vw, 1.9rem) clamp(1.2rem, 0.6rem + 2.1vw, 2.3rem);
  text-align: center;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.45s var(--ease-out), transform 0.7s var(--ease-spring);
}
/* de specular rand: een gemaskeerde 1px gradient, dezelfde techniek als
   .glass::before en de afspeelknop in play.css */
.reel-end__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--glass-hi) 0%,
    rgba(174, 245, 253, 0.6) 22%,
    transparent 44%,
    transparent 58%,
    rgba(102, 198, 255, 0.4) 82%,
    rgba(174, 245, 253, 0.55) 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;
}

/* net iets later dan de waas eroverheen: eerst valt het beeld weg, dan
   komt het paneel naar voren */
[data-reel].is-ended .reel-end__card {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}
/* base.css geeft elke <p> een max-width (--measure). Zonder margin auto
   staat zo'n blok links in de kaart en de gecentreerde tekst dus scheef,
   zodra de kop breder wil dan die maat. */
.reel-end__kop {
  margin-inline: auto;
  font-size: clamp(1.15rem, 0.85rem + 1.1vw, 1.7rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.reel-end__p {
  margin: 0.55em auto 0;
  max-width: 30ch;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.reel-end__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: clamp(0.85rem, 0.5rem + 1vw, 1.4rem);
}
.reel-end__acts .btn {
  padding: 0.8em 1.3em;
}
.reel-end__acts svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}
.reel-end__acts .btn:hover .reel-end__chev {
  transform: translateY(2px);
}
.reel-end__chev {
  transition: transform var(--dur-1) var(--ease-out);
}

/* Een 16:9-kader is op een telefoon maar zo'n 190 px hoog, en het paneel
   vulde daar bijna het hele beeld: een doos in een doos. Daar valt het glas
   dus weg en staan de kop en de knoppen rechtstreeks op de waas, die donker
   genoeg is om ze te dragen. De regel eronder mag als eerste weg: de kop
   zegt het al. */
@media (max-width: 700px) {
  .reel-end__p {
    display: none;
  }
  /* De waas is in het midden het lichtst, zodat je op desktop door het
     glazen paneel heen nog ziet waar je was. Zonder dat paneel staan de kop
     en de knoppen precies op dat lichtste stuk, en op de afspraakvideo zit
     daar ook nog het opgelichte vlak van de outro. Op de telefoon dus egaal
     en dieper: leesbaarheid wint van doorkijk op een kader van 190 px. */
  .reel-end {
    background: rgba(3, 7, 14, 0.88);
  }
  /* een rand van 26% wit lost op zo'n beeld op; de tweede knop moet net zo
     goed een knop zijn als de eerste */
  .reel-end__acts .btn--ghost {
    --bg-btn: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
  }
  /* Het materiaal helemaal weg. Blijft er ook maar iets van staan, dan zie
     je een lichter vlak in de maat van het paneel: de blur tilt met zijn
     saturate en brightness het beeld eronder op, en de kaart krimpt mee met
     zijn inhoud, dus dat vlak loopt precies om de knoppen heen. */
  .reel-end__card {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .reel-end__card::before {
    display: none;
  }
  /* Onder elkaar, niet naast elkaar. Naast elkaar pasten ze op een scherm
     van 390 px net niet (dan wikkelden ze vanzelf) en op 420 px net wel, en
     dan lopen de pillen tot tegen de ronding van het kader. Zo'n verschil
     mag niet van een paar pixels schermbreedte afhangen. */
  .reel-end__acts {
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
  }
  .reel-end__acts .btn {
    width: min(100%, 16rem);
    justify-content: center;
    padding: 0.72em 1.05em;
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reel-end,
  .reel-end__card {
    transition-duration: 0.01s;
  }
  .reel-end__card {
    transform: none;
  }
}