/* "In de picture" — uitgelichte banner naar het model van een streamingdienst.
   Hoort bij app/spotlight.php en assets/spotlight.js. */

/* ── De band en haar uitloop ───────────────────────────────────────────────
   --uit is het enige getal dat telt: zoveel steekt de voorgrond boven de band
   uit, en exact zoveel ruimte houdt de band erboven vrij (margin-top). Eén
   variabele voor allebei, dus ze kunnen niet uit de pas lopen — schaalt de
   uitloop mee met het scherm, dan schuift de band vanzelf mee.

   De klipping is asymmetrisch: boven open, links, rechts en onder dicht. Twee
   eigenschappen doen samen het werk, en allebei zijn ze nodig:
     overflow:clip + marge  laat verf naar buiten maar telt niet meer mee voor
                            de schuifruimte, dus een voorgrond die naast de band
                            hangt maakt de pagina niet langer breder dan het
                            scherm — dat deed hij op een telefoon wél;
     clip-path              snijdt daarna links, rechts en onder alsnog strak op
                            de rand, zodat alleen bovenaan iets naar buiten komt
                            en de slagschaduw niet in de sectie eronder smeert.
   De marge staat op een vast, royaal getal: een calc() met var() wordt bij
   overflow-clip-margin genegeerd en valt terug op nul — dan blijft de kop tegen
   de rand geplakt. Ruimer mag, want clip-path snijdt toch bij.

   Alles wat wél binnen de band hoort te blijven — doek, video, zwevers — zit in
   .spot-vlak en wordt daar geknipt. */

.spot{
  position:relative; width:100%; background:#0C0A07;
  height:clamp(420px, 62vh, 640px); isolation:isolate;
  /* In vh, net als de bandhoogte zelf: zo blijft de uitloop dezelfde breuk van
     de band op elk scherm in plaats van bij een lage viewport te overheersen. */
  --uit:clamp(30px, 6vh, 78px);
  margin-top:var(--uit);
  overflow:clip; overflow-clip-margin:200px;
  clip-path:inset(-20vh 0 0 0);
}

.spot-item{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .7s ease, visibility 0s linear .7s;
}
.spot-item.on{ opacity:1; visibility:visible; transition:opacity .7s ease; }

/* Het geknipte vlak: precies de band, niets erbuiten. */
.spot-vlak{ position:absolute; inset:0; overflow:hidden; z-index:0; }

/* Het doek zoomt heel traag in zolang het item in beeld staat. Bij een
   videobron staat de video eroverheen en stopt dit. */
.spot-doek{
  position:absolute; inset:0; background-size:cover; background-position:center 58%;
  transform:scale(1.04); transition:transform 9s linear;
}
.spot-item.on .spot-doek{ transform:scale(1.12); }

/* Volle breedte in plaats van bijsnijden: voor een doek dat veel breder is dan
   de band. De trage zoom gaat er dan af — die zou de bovenrand van het beeld
   zichtbaar laten wandelen. Daarachter ligt hetzelfde beeld, uitvergroot en
   onscherp, zodat de band gevuld blijft zonder balk. */
/* De bovenrand van het scherpe beeld vervaagt in de wazige achtergrond, anders
   staat er een liniaalrechte naad dwars door de band. */
.spot-doek.breed{
  background-size:100% auto; background-position:center bottom; transform:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 clamp(60px,14vh,130px));
  mask-image:linear-gradient(to bottom, transparent 0, #000 clamp(60px,14vh,130px));
}
.spot-item.on .spot-doek.breed{ transform:none; }
.spot-waas{
  position:absolute; inset:-80px; background-size:cover; background-position:center;
  filter:blur(64px) brightness(.24) saturate(.6); transform:scale(1.12);
}
.spot-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s ease;
}
.spot-video.speelt{ opacity:1; }

/* Uitgesneden voorgrond die losjes meebeweegt met de muis. Staat met de voeten
   op de vloer van de band (bottom:0) en is precies --uit hoger dan de band, dus
   dat is wat er bovenaan uitsteekt. Buiten .spot-vlak, dus ongeknipt en zonder
   sluier: het stuk boven de rand staat vol in het licht.
   --sy is de traagheid bij het scrollen, uit spotlight.js. */
.spot-voor{
  position:absolute; right:1vw; bottom:0; height:calc(100% + var(--uit)); z-index:1;
  transform:translate3d(var(--vx,0px), calc(var(--vy,0px) + var(--sy,0px)), 0);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
/* Blok, geen grid: als grid-item lost height:100% niet op tegen een rij die
   zichzelf naar de inhoud meet, en dan pakt het beeld zijn eigen pixelmaat.
   Als gewoon blok meet het zich netjes aan de hoogte hierboven. */
.spot-voor img{ display:block; height:100%; width:auto; object-fit:contain; object-position:bottom;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55)); }

/* Het toestel: chassis in CSS, scherm is een echte opname. Staat iets gekanteld
   zodat het een object is en geen schermafdruk op een vlak. */
/* Links van het personage, en weg zodra een module het overneemt: dan is een
   afbeelding van de app naast de werkende app alleen maar drukte. */
.spot-fon{ right:31vw; height:auto; bottom:auto; top:50%;
  transition:opacity .35s ease, transform .35s ease; }
.spot-fon .fon{
  /* Past binnen de laagste bandhoogte (420px) zonder te snijden: 9/19,5 van
     236px is 511px, en met de kanteling blijft dat binnen de rand. */
  position:relative; width:clamp(126px,10.5vw,176px); aspect-ratio:9/19.5;
  border-radius:2.2rem; padding:.5rem; background:linear-gradient(155deg,#3B3B41,#141417 42%,#2A2A30);
  box-shadow:0 40px 70px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.09) inset;
  transform:translateY(-50%) rotate(-7deg);
}
.spot-fon .fon-scherm{
  position:relative; height:100%; border-radius:1.8rem; overflow:hidden; background:#000;
}
.spot-fon .fon-scherm img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .18s ease; }
.spot-voor img{ transition:opacity .18s ease; }
.spot-fon .fon-eiland{
  position:absolute; top:1.1rem; left:50%; transform:translateX(-50%);
  width:26%; height:1.1rem; border-radius:999px; background:#0A0A0C; z-index:2;
}

/* Twee sluiers: onder voor de tekst, links voor de leesbaarheid. Zonder de
   tweede valt de titel weg zodra er een licht doek onder ligt. */
.spot-sluier{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(8,6,4,.96) 0%, rgba(8,6,4,.72) 26%, rgba(8,6,4,.12) 58%, rgba(8,6,4,.35) 100%),
    linear-gradient(to right, rgba(8,6,4,.9) 0%, rgba(8,6,4,.55) 38%, rgba(8,6,4,0) 72%);
}

/* Zwaardere sluier voor een vol doek: dezelfde vorm, alleen dieper en verder
   doorgetrokken, zodat de tekst links blijft staan zonder dat het beeld rechts
   dichtslibt. */
.spot-item.zwaar .spot-sluier{
  background:
    linear-gradient(to top, rgba(6,4,3,.96) 0%, rgba(6,4,3,.76) 26%, rgba(6,4,3,.22) 58%, rgba(6,4,3,.34) 100%),
    linear-gradient(to right, rgba(6,4,3,.9) 0%, rgba(6,4,3,.56) 32%, rgba(6,4,3,.12) 62%, rgba(6,4,3,0) 80%);
}

/* De grote telefoon: geen rekwisiet maar het onderwerp. Staat met zijn voet in
   de band en barst er bovenaan uit — de klipping laat dat alleen boven toe.
   Zijn maat hangt aan de bandhoogte, niet aan de schermbreedte: zo steekt hij
   er precies --uit bovenuit en klopt de gereserveerde ruimte erboven. */
.spot-fon.groot{ right:22vw; top:auto; bottom:-9%; height:calc(109% + var(--uit)); }
.spot-fon.groot .fon{
  height:100%; width:auto; aspect-ratio:9/19.5;
  border-radius:2.8rem; padding:.62rem;
  transform:rotate(-6deg);
  box-shadow:0 60px 90px -32px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1) inset,
             0 0 70px -10px color-mix(in srgb, var(--merk) 55%, transparent);
}
.spot-fon.groot .fon-scherm{ border-radius:2.3rem; }
.spot-fon.groot .fon-eiland{ top:1.4rem; height:1.35rem; }
@media (max-width:1100px){ .spot-fon.groot{ right:17vw; } }

/* Het kader: hout, passe-partout, beeld. Hangt tegen de bovenrand en steekt er
   --uit bovenuit — bij een doek vol lijsten is dit de lijst die eruit stapt.
   Alles is CSS behalve het beeld zelf, dus elk formaat past erin. */
.spot-kader{
  --touw:52px;
  position:absolute; right:6vw; top:calc(-1 * var(--uit) - var(--touw)); z-index:2;
  width:clamp(240px,34vw,520px); padding-top:var(--touw);
  transform:translate3d(var(--vx,0px), var(--sy,0px), 0);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.6));
  cursor:pointer;
}
/* De nagel: klein, hard, en met een eigen schaduwtje op de muur. */
.kader-nagel{
  position:absolute; top:0; left:50%; width:9px; height:9px; margin-left:-4.5px;
  border-radius:50%; background:radial-gradient(circle at 34% 30%, #F2E4C4, #8A6A32 62%, #4A3717);
  box-shadow:0 2px 3px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.35);
}
/* Twee touwen naar de bovenhoeken. Ze snijden niet mee met de lijst: de lijnen
   blijven even dik hoe breed het kader ook wordt. */
.kader-touw{ position:absolute; top:4px; left:0; width:100%; height:var(--touw); overflow:visible; }
.kader-touw path{ fill:none; stroke:#C6A467; stroke-width:2.4; vector-effect:non-scaling-stroke;
  stroke-linecap:round; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));
  stroke-dasharray:none; transition:opacity .12s linear; }
/* Rekken, dan knappen, dan weg. Het touw dat na de val nog in de lucht hangt,
   verraadt dat er niets echt gebeurd is — dus het verdwijnt mee. */
.spot-kader.kraakt .kader-touw path{ animation:touw-rek .42s ease-in both; }
@keyframes touw-rek{
  0%  { transform:none; }
  70% { transform:scaleY(1.06); opacity:1; }
  100%{ transform:scaleY(1.13); opacity:.9; }
}
.spot-kader.kraakt .kader-zwaai{ animation:kader-kraak .42s ease-in both; }
@keyframes kader-kraak{
  0%  { transform:rotate(var(--hoek,-3deg)); }
  55% { transform:rotate(calc(var(--hoek,-3deg) - 1.6deg)) translateY(2px); }
  100%{ transform:rotate(calc(var(--hoek,-3deg) + 2.4deg)) translateY(5px); }
}
.spot-kader.geknapt .kader-touw{ animation:touw-weg .3s ease-out both; }
@keyframes touw-weg{
  0%  { opacity:1; }
  100%{ opacity:0; transform:translateY(10px) scaleY(.7); }
}
.spot-kader.geknapt .kader-nagel{ opacity:.75; }

/* Uit balans hangen: heel traag, een paar tienden van een graad. Een lijst die
   perfect stilhangt, hangt niet — die is geplakt. */
.kader-zwaai{
  transform-origin:50% -6%;
  transform:rotate(var(--hoek,-3deg));
  animation:kader-wieg 9s ease-in-out infinite alternate;
}
@keyframes kader-wieg{
  from{ transform:rotate(calc(var(--hoek,-3deg) - .9deg)); }
  to  { transform:rotate(calc(var(--hoek,-3deg) + 1.1deg)); }
}
.spot-kader:hover .kader-zwaai{ animation-duration:3.2s; }
@media (prefers-reduced-motion:reduce){ .kader-zwaai{ animation:none; } }
/* De lijst zelf, met diepte in plaats van een gouden randje. Vier lagen:
     1. de buitenkant van het hout, met het licht van linksboven
     2. een afschuining: lichte bovenrand, donkere onderrand — daar zit de dikte
     3. het passe-partout, dat het beeld terugduwt in de doos
     4. glas: een schuine glans die net niet symmetrisch is
   Alles CSS, want een kader dat als beeld wordt aangeleverd schaalt niet mee
   met de band en kan niet in scherven uiteenvallen. */
.spot-kader .lijst{
  position:relative;
  padding:clamp(.5rem,1.15vw,.95rem); border-radius:.2rem;
  background:
    linear-gradient(148deg,#F0D79B 0%,#C8A25C 18%,#8A6A30 46%,#5E4520 68%,#E3C482 100%);
  box-shadow:
    0 0 0 1px rgba(24,14,4,.55),
    inset 0 1px 0 rgba(255,242,214,.55),
    inset 1px 0 0 rgba(255,240,206,.28),
    inset -1px 0 0 rgba(28,17,5,.5),
    inset 0 -2px 0 rgba(28,17,5,.6),
    inset 0 -10px 16px -10px rgba(20,12,3,.7);
}
/* De afschuining naar binnen: een dun randje dat de dikte van het hout toont. */
.spot-kader .lijst::before{
  content:""; position:absolute; inset:clamp(.34rem,.8vw,.66rem); border-radius:.1rem;
  box-shadow:
    inset 0 2px 3px rgba(20,12,3,.75),
    inset 0 -1px 0 rgba(255,240,206,.35),
    0 1px 0 rgba(255,240,206,.18);
  pointer-events:none; z-index:2;
}
/* Het glas: een schuine glans over de bovenhoek, en een tweede, zwakkere.
   Niet symmetrisch — symmetrisch glas leest als een verloop. */
.spot-kader .lijst::after{
  content:""; position:absolute; inset:0; border-radius:.2rem; z-index:3;
  pointer-events:none; mix-blend-mode:screen;
  background:
    linear-gradient(118deg, rgba(255,255,255,.22) 0 14%, rgba(255,255,255,0) 30%),
    linear-gradient(118deg, rgba(255,255,255,.08) 38% , rgba(255,255,255,0) 52%);
}
.spot-kader .mat{
  position:relative; padding:clamp(.5rem,1.1vw,.95rem);
  background:linear-gradient(160deg,#FBF4E4,#EDE0C6);
  box-shadow:
    inset 0 0 0 1px rgba(60,42,16,.22),
    inset 0 3px 7px -2px rgba(40,26,8,.4);
}
.spot-kader img{ display:block; width:100%; height:auto;
  box-shadow:0 1px 3px rgba(30,18,5,.45); }
@media (max-width:760px){
  /* Op mobiel hangt hij in het midden. De hoek zit op .kader-zwaai, dus hier
     alleen verschuiven — anders draait hij twee keer. */
  .spot-kader{ right:auto; left:50%; width:min(78vw,420px); transform:translateX(-50%); }
}

/* De strook tegen de linkerrand: staand, van onder naar boven te lezen. Onderaan
   de handtekening, daarboven de fijndruk. Klein genoeg om de banner niet te
   storen, groot genoeg om er te staan. */
.spot-strook{
  position:absolute; left:.5rem; bottom:clamp(2rem,5vh,3.4rem); z-index:3;
  display:flex; gap:1.1rem; align-items:flex-start;
  writing-mode:vertical-rl; transform:rotate(180deg);
  max-height:min(84%,34rem);
  font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  text-shadow:0 1px 6px rgba(0,0,0,.8);
}
.spot-bouw{
  color:#F4ECDD; opacity:.9; text-decoration:none; white-space:nowrap;
  border-inline-end:1px solid color-mix(in srgb, var(--merk) 75%, transparent);
  padding-inline-end:.22rem; transition:opacity .16s ease;
}
.spot-bouw:hover{ opacity:1; }
.spot-bouw:focus-visible{ outline:2px solid var(--merk); outline-offset:2px; }
.spot-fijn{ margin:0; color:#EDE3D2; opacity:.4; overflow:hidden; pointer-events:none; }
@media (max-width:760px){
  .spot-strook{ font-size:.5rem; left:.25rem; max-height:60%; gap:.8rem; }
}

.spot-in{
  position:relative; z-index:2; height:100%;
  width:min(1180px,92vw); margin:0 auto;
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  padding-bottom:clamp(2rem,5vh,3.4rem);
}
.spot-tekst{ max-width:min(46rem,58%); }

.spot-merk{
  display:flex; align-items:center; gap:.55rem; margin:0 0 .6rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:#E8DCC6;
}
.spot-punt{ width:.5rem; height:.5rem; border-radius:999px; background:var(--merk);
  box-shadow:0 0 0 .28rem color-mix(in srgb, var(--merk) 28%, transparent); }

.spot-titel{
  color:#fff; margin:0 0 .55rem; line-height:.94; letter-spacing:-.02em;
  font-size:clamp(2.4rem,6.4vw,4.6rem); text-wrap:balance;
  text-shadow:0 4px 30px rgba(0,0,0,.5);
}
.spot-meta{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:0 0 .8rem;
  font-size:.86rem; color:#D8CBB3;
}
.spot-meta span:first-child{ color:var(--merk); font-weight:700; }
.spot-scheider{ opacity:.5; }
.spot-lead{
  color:#EDE3D2; line-height:1.6; margin:0 0 1.4rem; max-width:52ch;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}

.spot-knoppen{ display:flex; gap:.7rem; flex-wrap:wrap; margin:0; }
.spot-knop{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  padding:.72rem 1.5rem; border-radius:.45rem; font-weight:700; font-size:1rem;
  transition:transform .14s ease, background .18s ease;
}
.spot-knop:hover{ transform:translateY(-1px); }
.spot-p{ background:#fff; color:#151009; }
.spot-p:hover{ background:#F2E7D3; }
.spot-p .spot-icoon{ width:0; height:0; border-style:solid;
  border-width:.4rem 0 .4rem .66rem; border-color:transparent transparent transparent #151009; }
.spot-s{ background:rgba(240,232,216,.22); color:#fff; backdrop-filter:blur(4px); }
.spot-s:hover{ background:rgba(240,232,216,.34); }
.spot-s .spot-icoon{
  width:1.05rem; height:1.05rem; border-radius:999px; border:1.6px solid currentColor;
  position:relative;
}
.spot-s .spot-icoon::after{
  content:"i"; position:absolute; inset:0; display:grid; place-items:center;
  font:700 .68rem/1 var(--disp); font-style:normal;
}
.spot-knop:focus-visible{ outline:2px solid var(--merk); outline-offset:3px; }

/* Waar een module zichzelf in hangt: onder de tekst, in dezelfde kolom. De
   speler staat er meteen — een speler die je eerst moet openen wordt niet
   gespeeld — en de knop eronder verdwijnt zodra hij er is. */
.spot-paneel:empty{ display:none; }
.spot-paneel{ position:relative; z-index:2; margin-top:1.1rem; }


/* Streepjes onderaan, zoals de hoofdstukken van een trailer. */
.spot-nav{
  position:absolute; right:max(4vw,calc((100vw - 1180px)/2)); bottom:clamp(2rem,5vh,3.4rem);
  z-index:3; display:flex; gap:.4rem;
}
.spot-nav button{ background:none; border:0; padding:.5rem .1rem; cursor:pointer; }
.spot-nav i{ display:block; width:1.6rem; height:2px; background:rgba(255,255,255,.4); }
.spot-nav button.on i{ background:#fff; }

/* Op een telefoon is het personage geen tegenspeler meer maar een achtergrond:
   halfdoorzichtig, half buiten het scherm, en de tekst staat eroverheen. De
   uitloop krimpt mee — hij blijft dezelfde breuk van de bandhoogte als op een
   groot scherm, dus wat uitsteekt is de kop en niet het halve personage. Omdat
   de reservering aan dezelfde variabele hangt, klopt de ruimte erboven vanzelf. */
@media (max-width:760px){
  .spot{ height:auto; min-height:78vh; --uit:clamp(18px, 3.4vh, 42px); }
  .spot-in{ align-items:flex-end; }
  .spot-tekst{ max-width:100%; }
  /* Hier mag de hoogte niet in procenten: de band is op mobiel auto-hoog
     (min-height), dus een percentage heeft niets om zich aan te meten en het
     beeld valt terug op zijn eigen pixelmaat — een personage van 1100px op een
     band van 660. Vandaar dezelfde 78vh als de band, plus de uitloop. */
  .spot-voor{ opacity:.5; right:-6vw; height:calc(78vh + var(--uit)); }
  .spot-nav{ right:4vw; }
}
/* Op een telefoon is een grote telefoon in beeld juist wél het onderwerp: die
   blijft staan en schuift naar de rand, en het personage zakt weg naar decor.
   Het kleine toestel naast een personage is op smalle schermen enkel drukte. */
@media (max-width:760px){
  /* opacity:1 tegen de mobiele regel van .spot-voor hierboven: die maakt een
     personage decor, maar een toestel moet gewoon een toestel blijven. */
  .spot-fon.groot{ right:-6vw; bottom:-7%; height:calc(86% + var(--uit)); opacity:1; }
  .spot-item:has(.spot-fon.groot) .spot-voor:not(.spot-fon){ opacity:.22; right:-24vw; }
}
@media (max-width:560px){
  .spot-fon:not(.groot){ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .spot-item, .spot-doek, .spot-voor, .spot-video{ transition:none; }
  .spot-item.on .spot-doek{ transform:scale(1.04); }
}

/* ── Module-paneel: de metronoom van Tocktopus ─────────────────────────── */
.tk{
  width:clamp(240px,26vw,330px); display:grid; gap:.8rem;
  padding:1rem 1.1rem 1.1rem; border-radius:1rem;
  background:rgba(14,10,8,.62); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px); box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
  /* Zweeft rustig, als een paneeltje dat los in de band hangt. */
  animation:tk-zweef 7s ease-in-out infinite alternate;
}
@keyframes tk-zweef{
  from{ transform:translateY(0) rotate(-.35deg); }
  to  { transform:translateY(-9px) rotate(.35deg); }
}
@media (prefers-reduced-motion:reduce){ .tk{ animation:none; } }
.tk-kop{ display:flex; align-items:center; gap:.7rem; }
.tk-start{
  display:inline-flex; align-items:center; gap:.5rem; border:0; cursor:pointer;
  padding:.5rem 1rem .5rem .85rem; border-radius:999px;
  background:var(--a,#fff); color:#0B0910; font-weight:700; font-size:.92rem;
}
.tk-ico{ width:0; height:0; border-style:solid; border-width:.34rem 0 .34rem .56rem;
  border-color:transparent transparent transparent #0B0910; }
.tk-start[aria-pressed="true"] .tk-ico{ width:.5rem; height:.56rem; border:0; background:#0B0910; }
.tk-bpm{ margin:0 0 0 auto; font-family:var(--mono); color:#CFC2AE; font-size:.72rem;
  display:flex; align-items:baseline; gap:.25rem; }
.tk-bpm strong{ color:#fff; font-size:1rem; }
.tk-weg{ background:none; border:0; color:#9C8F7D; font-size:1.15rem; line-height:1; cursor:pointer; }
.tk-weg:hover{ color:#fff; }

.tk-tellers{ display:flex; gap:.32rem; }
.tk-tel{ flex:1; height:.55rem; border-radius:999px; background:rgba(255,255,255,.16);
  transition:background .07s linear, transform .07s linear; }
.tk-tel.aan{ background:var(--a,#fff); transform:scaleY(1.6); }
.tk-tel.eerste.aan{ background:var(--b,#fff); }

.tk-schuif{ width:100%; accent-color:var(--a,#fff); }

.tk-skins{ display:flex; gap:.4rem; }
.tk-skin{
  width:1.5rem; height:1.5rem; border-radius:999px; cursor:pointer; padding:0;
  border:1.5px solid rgba(255,255,255,.25);
  background:linear-gradient(135deg,var(--a) 0 50%,var(--b) 50% 100%);
  transition:transform .14s ease, box-shadow .14s ease;
}
.tk-skin:hover{ transform:scale(1.12); }
.tk-skin.on{ box-shadow:0 0 0 2px #fff; transform:scale(1.12); }

@media (max-width:760px){ .tk{ width:min(88vw,330px); } }
@media (prefers-reduced-motion:reduce){ .tk-tel{ transition:none; } }

/* ── Zwevers: grote figuren die traag op en neer gaan ──────────────────── */
.spot-zwevers{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.zwever{
  position:absolute; left:var(--x); top:var(--y); height:var(--h); width:auto;
  opacity:var(--door); filter:blur(var(--waas)) saturate(.85);
  transform:translate3d(-50%,-50%,0);
  animation:zweef var(--duur,14s) ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes zweef{
  from{ transform:translate3d(-50%,calc(-50% - 1.4%),0) rotate(-1.6deg) scale(1); }
  to  { transform:translate3d(-50%,calc(-50% + 1.8%),0) rotate(1.4deg) scale(1.03); }
}

/* Het personage vooraan ademt mee, maar rustiger dan de zwevers erachter. */
.spot-voor img{ animation:adem 9s ease-in-out infinite alternate; }
@keyframes adem{
  from{ transform:translateY(0) rotate(-.5deg); }
  to  { transform:translateY(-1.4%) rotate(.6deg); }
}

@media (prefers-reduced-motion:reduce){
  .zwever, .spot-voor img{ animation:none; }
}

/* ── De vallende lijst ─────────────────────────────────────────────────────
   Hoort bij assets/js/picture/kaderval.js. De laag ligt over de volle pagina
   in documentcoördinaten: de lijst valt dus dóór de pagina heen en blijft
   liggen waar hij ligt, ook als jij verder scrollt. */
.val-laag{
  position:absolute; inset:0 0 auto 0; height:100%; z-index:70;
  pointer-events:none; overflow:visible;
}
.val-lijst{
  position:absolute; top:0; left:0; will-change:transform;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.55));
}
.val-lijst .lijst{ width:100%; }
.val-lijst img{ display:block; width:100%; height:auto; }
/* Een klap plet even. Zonder die vervorming ziet een kaats eruit als zweven. */
.val-lijst.bots{ transform-origin:50% 100%; animation:val-plet .16s ease-out; }
@keyframes val-plet{
  0%{ scale:1 1; } 40%{ scale:1.07 .9; } 100%{ scale:1 1; }
}

.val-scherf{
  position:absolute; top:0; left:0; display:block; background-repeat:no-repeat;
  will-change:transform, opacity;
  animation:val-scherf 1.5s cubic-bezier(.2,.65,.35,1) var(--d,0s) forwards;
}
@keyframes val-scherf{
  0%  { opacity:1; }
  100%{ opacity:0; translate:var(--dx) var(--dy); rotate:var(--dr); }
}

.val-stof{
  position:absolute; top:0; left:0; width:180px; height:120px;
  background:radial-gradient(ellipse at 50% 70%, rgba(214,198,170,.55), rgba(214,198,170,0) 68%);
  animation:val-stof 1.1s ease-out forwards;
}
@keyframes val-stof{
  0%  { opacity:0; scale:.4 .3; }
  30% { opacity:.9; }
  100%{ opacity:0; scale:1.6 1.1; translate:0 -26px; }
}

/* Waar hij op geland is, schudt even mee. */
.geraakt{ animation:val-schud .38s cubic-bezier(.36,.07,.19,.97); }
@keyframes val-schud{
  10%,90%{ translate:-2px 0; }
  20%,80%{ translate:3px 0; }
  30%,50%,70%{ translate:-5px 0; }
  40%,60%{ translate:5px 0; }
}

/* Terug aan de nagel: hij zwaait één keer stevig uit en komt tot rust. */
.spot-kader.terug .kader-zwaai{ animation:kader-terug .9s cubic-bezier(.2,.8,.3,1); }
@keyframes kader-terug{
  0%  { transform:rotate(calc(var(--hoek,-3deg) + 9deg)); }
  55% { transform:rotate(calc(var(--hoek,-3deg) - 4deg)); }
  100%{ transform:rotate(var(--hoek,-3deg)); }
}

@media (prefers-reduced-motion:reduce){
  .val-lijst.bots, .val-scherf, .val-stof, .geraakt, .spot-kader.terug .kader-zwaai{ animation:none; }
  .val-scherf{ opacity:0; }
}

/* ── Verfijning van de val ─────────────────────────────────────────────────
   Snelheid en klap komen als --snel en --klap uit kaderval.js. Daarmee wordt
   de schaduw langer, het beeld een tik onscherp, en de plet bij een botsing
   even hard als de botsing zelf. */
.val-lijst{
  --snel:0; --klap:0;
  filter:drop-shadow(0 calc(14px + 26px * var(--snel)) calc(18px + 26px * var(--snel))
         rgba(0,0,0,calc(.5 - .16 * var(--snel))))
         blur(calc(.7px * var(--snel)));
}
.val-lijst.bots{ animation:val-plet .18s cubic-bezier(.3,1.4,.5,1); }
@keyframes val-plet{
  0%  { scale:1 1; }
  35% { scale:calc(1 + .12 * var(--klap)) calc(1 - .12 * var(--klap)); }
  100%{ scale:1 1; }
}

/* Glas vliegt verder dan hout, en het vangt licht. */
.val-glas{
  position:absolute; top:0; left:0; display:block;
  background:linear-gradient(126deg, rgba(255,255,255,.85), rgba(198,228,255,.35) 45%, rgba(255,255,255,.6));
  clip-path:polygon(12% 0, 100% 26%, 74% 100%, 0 62%);
  animation:val-glas 1.5s cubic-bezier(.15,.7,.35,1) forwards;
}
@keyframes val-glas{
  0%  { opacity:.95; }
  35% { opacity:.8; }
  100%{ opacity:0; translate:var(--dx) calc(var(--dy) * -1 + 240px); rotate:var(--dr); }
}

/* Wat geraakt wordt, schudt naar verhouding van de klap. */
.geraakt{ animation:val-schud .44s cubic-bezier(.36,.07,.19,.97); }
@keyframes val-schud{
  10%,90%{ translate:calc(-2px * var(--kracht,1)) 0; }
  20%,80%{ translate:calc(3px * var(--kracht,1)) 0; }
  30%,50%,70%{ translate:calc(-6px * var(--kracht,1)) 0; rotate:calc(-.25deg * var(--kracht,1)); }
  40%,60%{ translate:calc(6px * var(--kracht,1)) 0; rotate:calc(.25deg * var(--kracht,1)); }
}

/* ?pins in de URL: het pinnenveld wordt zichtbaar. Om af te stellen. */
.val-pin{
  position:absolute; top:0; left:0; border-radius:50%;
  border:1px solid rgba(255,60,120,.75); background:rgba(255,60,120,.12);
}