/* ============================================================
   DE SHOWREEL
   Gedeeld tussen de werkpagina en de homepage, zodat het startbeeld
   maar op één plek staat en overal hetzelfde is.
   ============================================================ */

.reel { padding: clamp(34px, 5vw, 60px) var(--pad-x) 0; }

.reel-doos {
  position: relative;
  overflow: hidden;
  border-radius: var(--ronding);
  background: var(--ink);
  box-shadow: var(--schaduw-3);
  /* de verspringende lijn, zoals overal op deze site */
  outline: var(--lijn-dik) solid var(--ink);
  outline-offset: 0;
}
.reel-doos::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--lijn-dik) solid var(--roze);
  border-radius: var(--ronding);
  transform: translate(var(--vspr), var(--vspr));
  transition: transform var(--snel);
  z-index: 4;
}
.reel-doos:hover::after { transform: translate(0, 0); }

.reel-doos video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  cursor: pointer;
}
/* ---------- HET STARTBEELD: ZO BRUTAAL MOGELIJK ----------
   Alles wat een nette pagina niet doet: de titel als behang schuin over
   het vlak, twee banden die tegen elkaar in schuiven, tekst rechtop
   langs beide randen, elke regel in een eigen blok scheef op elkaar
   gestapeld, en een afspeelknop die veel te groot is en het kader uit
   loopt. De knop blijft wel gewoon een afspeelknop: ronde vorm, driehoek
   erin, want anders weet niemand waar hij op moet klikken. */
.reel-knop {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--ink);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: opacity .4s var(--ease);
}

/* de titel eindeloos herhaald, schuin, heel flauw */
.reel-behang {
  position: absolute;
  inset: -30%;
  z-index: 0;
  transform: rotate(-14deg);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .055);
  white-space: pre-wrap;
  word-break: break-all;
  pointer-events: none;
}
.reel-behang::before {
  content: "DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK";
}

/* twee banden, tegen elkaar in */
.reel-band {
  position: absolute;
  left: 0;
  z-index: 4;
  width: max-content;
  padding: 7px 0;
  font-family: var(--mono);
  font-size: clamp(.58rem, 1vw, .74rem);
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}
.reel-band-boven {
  top: 0;
  color: var(--ink);
  background: var(--geel);
  animation: reelheen 20s linear infinite;
}
.reel-band-onder {
  bottom: 0;
  color: #fff;
  background: var(--roze-diep);
  animation: reelterug 24s linear infinite;
}
@keyframes reelheen  { from { transform: translateX(0); }      to { transform: translateX(-33.33%); } }
@keyframes reelterug { from { transform: translateX(-33.33%); } to { transform: translateX(0); } }

/* Rechtop langs de randen, en met opzet veel te groot: de linkerregel
   is net zo zwaar als de kop en loopt van boven tot onder door. Dat is
   het absurde eraan, en het duwt je blik naar de knop toe. */
.reel-staand {
  position: absolute;
  writing-mode: vertical-rl;
  z-index: 4;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  text-transform: uppercase;
}
.reel-staand-links {
  left: clamp(8px, 1.4vw, 18px);
  top: clamp(34px, 4.4vw, 52px);
  bottom: clamp(34px, 4.4vw, 52px);
  font-size: clamp(1.1rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--geel);
  overflow: hidden;
}
.reel-staand-rechts {
  right: clamp(10px, 1.6vw, 20px);
  bottom: clamp(38px, 5vw, 60px);
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: clamp(.56rem, 1vw, .72rem);
  font-weight: 700;
  letter-spacing: .28em;
  color: rgba(255, 255, 255, .55);
}

/* de knop: veel te groot, half het kader uit, maar wel herkenbaar */
.reel-bal {
  position: absolute;
  right: clamp(14px, 3vw, 54px);
  top: 50%;
  width: clamp(200px, 34vw, 420px);
  height: clamp(200px, 34vw, 420px);
  transform: translateY(-50%);
  background: var(--roze);
  border-radius: 50%;
  border: clamp(5px, .8vw, 12px) solid var(--ink);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 16px);
  box-shadow: var(--schaduw-3);
  transition: transform .32s var(--ease), background .32s var(--ease);
}

/* de driehoek, met een ring eromheen zodat het een echte knop wordt */
.reel-driehoek {
  position: relative;
  width: clamp(74px, 12vw, 150px);
  height: clamp(74px, 12vw, 150px);
  border: clamp(4px, .6vw, 8px) solid var(--ink);
  border-radius: 50%;
  flex-shrink: 0;
}
.reel-driehoek::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: clamp(17px, 2.7vw, 34px) 0 clamp(17px, 2.7vw, 34px) clamp(28px, 4.4vw, 55px);
  border-color: transparent transparent transparent var(--ink);
}

/* en het woord erbij, want dan hoeft niemand te raden */
.reel-woord {
  font-family: var(--mono);
  font-size: clamp(.68rem, 1.5vw, 1rem);
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink);
  padding-left: .34em;
}
/* blijft roze, ook als je hem aanwijst: alleen iets dieper en groter */
.reel-knop:hover .reel-bal {
  transform: translateY(-50%) scale(1.06) rotate(-4deg);
  background: var(--roze-diep);
}

/* de tekstblokken mogen de knop niet overlappen nu hij helemaal in beeld staat */
.reel-woorden { max-width: 46%; }

/* de regels: elk een eigen blok, scheef op elkaar */
/* ruim rechts van de staande tekst, die is nu veel breder geworden */
.reel-woorden {
  position: absolute;
  left: clamp(74px, 9vw, 130px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  max-width: 56%;
}
.reel-regel {
  display: block;
  padding: 4px 14px 7px;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  font-size: clamp(1.3rem, 3.8vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.reel-r1 { background: #fff;          color: var(--ink); transform: rotate(-1.4deg); }
.reel-r2 { background: var(--geel);   color: var(--ink); transform: rotate(1.2deg) translateX(16px); }
.reel-r3 { background: var(--ink);    color: #fff; box-shadow: 0 0 0 3px #fff; transform: rotate(-.8deg); }

@media (prefers-reduced-motion: reduce) {
  .reel-band { animation: none; }
}



/* De stopknop: hetzelfde middel als de afspeelknop, maar dan met een
   vierkant in plaats van een driehoek en het woord erbij. Zo hoeft
   niemand te raden wat er gebeurt als je erop drukt. */
.reel-stop {
  position: absolute;
  top: clamp(12px, 1.8vw, 22px);
  right: clamp(12px, 1.8vw, 22px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--geel);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  cursor: pointer;
  box-shadow: var(--schaduw-2);
  transition: transform var(--snel), background var(--snel);
}
/* het hidden-kenmerk verliest het van display:flex, dus dat zetten we
   hier expliciet terug: anders staat de stopknop er ook als hij stil is */
.reel-stop[hidden] { display: none; }

.reel-vierkant {
  width: 14px;
  height: 14px;
  background: var(--ink);
  flex-shrink: 0;
}
.reel-stop:hover {
  transform: translate(-2px, 2px);
  background: var(--roze);
  color: #fff;
}
.reel-stop:hover .reel-vierkant { background: #fff; }
/* zodra hij speelt gaat het hele dekvlak weg, zodat je de film ziet */
.reel-doos.speelt .reel-knop {
  opacity: 0;
  pointer-events: none;
}
/* ---------- HET STARTBEELD OP EEN TELEFOON ----------
   Een liggend vak van 16:9 is op een telefoon maar 189px hoog, en daar
   past deze opbouw niet in: de tekst viel over de staande tekst en over
   de knop, en de knop liep het beeld uit. Op smalle schermen wordt het
   vak daarom staand, alles onder elkaar, en de film past er met zwarte
   randen in zodat er niets van wordt afgesneden. */
@media (max-width: 700px) {
  /* staand vak voor het startbeeld, want daar moet veel in passen */
  .reel-doos video {
    aspect-ratio: 3 / 4;
    object-fit: contain;
    background: var(--ink);
  }
  /* zodra hij speelt gaat het vak terug naar liggend, dan heeft de film
     geen zwarte balken meer boven en onder */
  .reel-doos.speelt video {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .reel-knop {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(18px, 5vw, 30px);
    padding: 40px 20px 40px clamp(42px, 12vw, 58px);
  }

  /* de staande tekst blijft, maar smaller en langs de hele rand */
  .reel-staand-links {
    top: 34px;
    bottom: 34px;
    left: 10px;
    font-size: clamp(.92rem, 4.4vw, 1.3rem);
  }
  .reel-staand-rechts { display: none; }

  /* de regels komen bovenaan, in het volle blok */
  .reel-woorden {
    position: static;
    transform: none;
    max-width: 100%;
    left: auto;
  }
  .reel-regel { font-size: clamp(1.15rem, 6.4vw, 1.9rem); }

  /* de knop staat eronder, helemaal in beeld */
  .reel-bal {
    position: static;
    transform: none;
    width: clamp(150px, 46vw, 210px);
    height: clamp(150px, 46vw, 210px);
    align-self: center;
  }
  .reel-knop:hover .reel-bal { transform: scale(1.05) rotate(-4deg); }
  .reel-driehoek { width: clamp(56px, 17vw, 78px); height: clamp(56px, 17vw, 78px); }
  .reel-driehoek::before {
    border-width: clamp(13px, 4vw, 18px) 0 clamp(13px, 4vw, 18px) clamp(21px, 6.4vw, 29px);
  }

  .reel-stop { top: 10px; right: 10px; padding: 9px 14px 9px 11px; }
}