/* Knipselstijl voor klokfilms, versie 2 (concept 15 okt 2026).
 *
 * Robert: "kleurrijk clean cut out", "nog wat speelser qua animatie".
 * Strakke papiervormen met een fijne korrel en zachte schaduw tussen de
 * lagen, een landschap in lagen, en beweging die de uitleg helpt: een kaartje
 * plopt erin op het woord van Fenna, een antwoord krijgt sterretjes.
 *
 * Alles geldt alleen binnen .kd-uitlegfilm.kdufi-knipsel, dus de gewone films
 * veranderen niet. Bewust NIET aangeraakt, omdat de uitleg erop leunt: de
 * wijzers en hun kleuren (rood = uur, donkerblauw = minuten), de cijfers en
 * streepjes van de oefenklok, de minutentaart, de ringen om de cijfers, de
 * timing en de plek van alles.
 *
 * Specificiteit: de filmopmaak gebruikt .kd-uitlegfilm[data-film="..."] .x,
 * hier staat er steeds .kdufi-knipsel[data-film] bij, zodat dit wint.
 * De speler zet kaartjes zichtbaar met een overgang op de buitenste groep;
 * knipsel.js legt daarbinnen een .kn-binnen laag die de plop maakt.
 */

/* ===== Papier en landschap ===== */
.kd-uitlegfilm.kdufi-knipsel {
  border: none;
  border-radius: 20px;
  /* Gladde lucht zonder stippen (Robert, 15 okt 2026), lichter naar de horizon. */
  background-color: #cfe9fb;
  background-image: linear-gradient(180deg, #bde1f7 0%, #d3ecfb 55%, #e6f5fd 100%);
  box-shadow: 0 5px 0 rgba(44, 62, 80, 0.10), 0 10px 26px rgba(75, 173, 255, 0.18);
}
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-lucht { fill: transparent; }
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-wolk { fill: #fffaf0; opacity: 1; filter: url(#kn-schaduw); }

.kd-uitlegfilm.kdufi-knipsel .kn-zonschijf { fill: #ffd23f; filter: url(#kn-papier); }
.kd-uitlegfilm.kdufi-knipsel .kn-straal { fill: #ffb84d; }
.kd-uitlegfilm.kdufi-knipsel .kn-zon { transform-box: view-box; transform-origin: 0 0; animation: kn-draai 60s linear infinite; }
.kd-uitlegfilm.kdufi-knipsel .kn-berg { fill: #a9dad6; filter: url(#kn-laag); }
.kd-uitlegfilm.kdufi-knipsel .kn-heuvel3 { fill: #a3d88f; filter: url(#kn-laag); }
.kd-uitlegfilm.kdufi-knipsel .kn-heuvel2 { fill: #6fc274; filter: url(#kn-laag); }
.kd-uitlegfilm.kdufi-knipsel .kn-heuvel1 { fill: #4aab68; filter: url(#kn-laag); }
.kd-uitlegfilm.kdufi-knipsel .kn-stam { fill: #9b5a34; }
.kd-uitlegfilm.kdufi-knipsel .kn-kruin2 { fill: #3f9d5f; }
.kd-uitlegfilm.kdufi-knipsel .kn-kruin1 { fill: #5cb86e; }
.kd-uitlegfilm.kdufi-knipsel .kn-naald1 { fill: #2f8a5b; }
.kd-uitlegfilm.kdufi-knipsel .kn-naald2 { fill: #45a870; }
.kd-uitlegfilm.kdufi-knipsel .kn-boom {
  filter: url(#kn-schaduw);
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: kn-wieg 5.5s ease-in-out infinite alternate;
}
.kd-uitlegfilm.kdufi-knipsel .kn-den-b { animation-duration: 6.5s; animation-delay: -2s; }
.kd-uitlegfilm.kdufi-knipsel .kn-boom-links { animation-duration: 7s; animation-delay: -1s; }
@keyframes kn-draai { to { transform: rotate(360deg); } }
@keyframes kn-wieg { from { transform: rotate(-1.8deg); } to { transform: rotate(1.8deg); } }

/* ===== Klok: opgeplakt op een witte papieren rand ===== */
.kd-uitlegfilm.kdufi-knipsel .kn-klokrand { fill: #fffdf8; filter: url(#kn-achtervel); }
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-klok > circle:nth-of-type(2) { filter: url(#kn-papier); }
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-ring { filter: url(#kn-schaduw); }

/* ===== Kaartjes: papiertjes in een tint van hun eigen kleur ===== */
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-kaartvlak {
  fill: #fffdf7;
  stroke: none;
  filter: url(#kn-papier);
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-0.8deg);
}
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-scenes > g:nth-of-type(even) .kl-kaartvlak { transform: rotate(0.7deg); filter: url(#kn-papier-b); }
/* Vlak onder de vergrootknop ligt een papiertje recht: gekanteld steekt een
   hoek de vrije ruimte van de knop in. */
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-scenes > g.kn-bij-knop .kl-kaartvlak { transform: none; }
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-kaart:has(rect[fill="#FFC440"]) .kl-kaartvlak { fill: #fff1c2; }
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-kaart:has(rect[fill="#cc1f27"]) .kl-kaartvlak { fill: #ffe3de; }
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-kaart:has(rect[fill="#2f8fd6"]) .kl-kaartvlak { fill: #dff0ff; }
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-kaart:has(rect[fill="#1e2d6e"]) .kl-kaartvlak { fill: #e9ebfd; }
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-kaart:has(rect[fill="#1fd18a"]) .kl-kaartvlak { fill: #ddf6ea; }

/* Geen dikke kleurstreep voor de tekst (Robert, 15 okt 2026): de kleur zit al
   in de tint van het papiertje en in de kop. De streep is de enige rechthoek
   zonder klasse in een kaartje; de tekst schuift 12 naar links. */
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-kaart .kn-binnen > rect:not([class]) { display: none; }
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-kaart .kn-binnen > text { transform: translateX(-12px); }

/* Plakband: een gekleurd strookje bovenop elk kaartje. */
.kd-uitlegfilm.kdufi-knipsel .kn-tape { opacity: 0.85; }
.kd-uitlegfilm.kdufi-knipsel .kn-tape-roze { fill: #ff9fbd; }
.kd-uitlegfilm.kdufi-knipsel .kn-tape-blauw { fill: #8ccbff; }
.kd-uitlegfilm.kdufi-knipsel .kn-tape-geel { fill: #ffd86b; }
.kd-uitlegfilm.kdufi-knipsel .kn-tape-groen { fill: #95e08c; }

/* Net iets minder vet (Robert, 15 okt 2026): koppen, grote tijd en digitale
   cijfers van 800 naar 700, titel en startknop van 700 naar 600. De rode
   klokcijfers blijven 700: die horen bij de oefenklok uit de les. */
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-kaartkop,
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-tijdgroot,
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-digitaal,
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-digigroot,
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-digilabel,
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-min { font-weight: 700; }

/* ===== Plop: een kaartje wordt neergelegd op het woord van Fenna ===== */
.kd-uitlegfilm.kdufi-knipsel .kn-binnen { transform-box: fill-box; transform-origin: 50% 60%; }
.kd-uitlegfilm.kdufi-knipsel .kn-plop > .kn-binnen { animation: kn-plop 750ms cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes kn-plop {
  0%   { transform: scale(0.55) rotate(-6deg); }
  55%  { transform: scale(1.07) rotate(2deg); }
  78%  { transform: scale(0.97) rotate(-1deg); }
  100% { transform: none; }
}
/* Een antwoord (tijdkaartje) krijgt vier gele sterretjes die eruit springen. */
.kd-uitlegfilm.kdufi-knipsel .kn-vonk { fill: #ffc93c; opacity: 0; transform-box: fill-box; transform-origin: center; }
.kd-uitlegfilm.kdufi-knipsel .kn-vonk0 { --dx: -40px; --dy: -34px; }
.kd-uitlegfilm.kdufi-knipsel .kn-vonk1 { --dx: 40px; --dy: -36px; }
.kd-uitlegfilm.kdufi-knipsel .kn-vonk2 { --dx: -38px; --dy: 30px; }
.kd-uitlegfilm.kdufi-knipsel .kn-vonk3 { --dx: 40px; --dy: 32px; }
.kd-uitlegfilm.kdufi-knipsel .kn-plop > .kn-vonk { animation: kn-vonk 950ms ease-out 280ms both; }
@keyframes kn-vonk {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.15) rotate(90deg); }
}

/* ===== "Wat heb je geleerd?" over het hele beeld ===== */
/* Blauw papier met gele sterren en de vraag groot in wit (contrast 3,6 bij
   grote letter). Het kaartje zelf verdwijnt; het vel schuift niet en schaalt
   niet mee met de kaartjes (ook niet op de telefoon), maar valt erin. */
.kd-uitlegfilm.kdufi-knipsel[data-film]:not(.kn-wat-klaar) .kl-kaart.kn-wat { transform: none !important; }
.kd-uitlegfilm.kdufi-knipsel[data-film]:not(.kn-wat-klaar) .kn-wat .kn-binnen > :is(.kl-kaartvlak, .kl-kaartkop, .kl-kaarttekst, .kn-tape, rect:not([class])) { display: none; }
/* Vanaf de zin na "Wat heb je geleerd?" weer het gewone kopje boven de tips. */
.kd-uitlegfilm.kdufi-knipsel.kn-wat-klaar .kn-wat :is(.kn-wat-lucht, .kn-wat-breed, .kn-wat-smal) { display: none; }
.kd-uitlegfilm.kdufi-knipsel .kn-wat-lucht { fill: #cfe9fb; }
.kd-uitlegfilm.kdufi-knipsel .kn-wat-vel { fill: #2f8fd6; filter: url(#kn-papier); }
.kd-uitlegfilm.kdufi-knipsel .kn-wat-ster { fill: #ffd23f; filter: url(#kn-schaduw); transform-box: fill-box; transform-origin: center; }
.kd-uitlegfilm.kdufi-knipsel[data-film] .kn-wat-tekst {
  font-family: 'Baloo 2', 'Nunito', sans-serif; font-weight: 700;
  fill: #ffffff; text-anchor: middle;
}
.kd-uitlegfilm.kdufi-knipsel.kdufi-smal .kn-wat-breed,
.kd-uitlegfilm.kdufi-knipsel:not(.kdufi-smal) .kn-wat-smal { display: none; }
.kd-uitlegfilm.kdufi-knipsel .kn-wat.kn-plop > .kn-binnen { transform-origin: 50% 0%; animation: kn-vel 800ms cubic-bezier(.2, .9, .3, 1.2) both; }
.kd-uitlegfilm.kdufi-knipsel .kn-wat.kn-plop .kn-wat-ster { animation: kn-ster 650ms cubic-bezier(.2, .9, .3, 1.6) both; }
.kd-uitlegfilm.kdufi-knipsel .kn-wat.kn-plop .kn-wat-ster0 { animation-delay: 350ms; }
.kd-uitlegfilm.kdufi-knipsel .kn-wat.kn-plop .kn-wat-ster1 { animation-delay: 500ms; }
.kd-uitlegfilm.kdufi-knipsel .kn-wat.kn-plop .kn-wat-ster2 { animation-delay: 650ms; }
.kd-uitlegfilm.kdufi-knipsel .kn-wat.kn-plop .kn-wat-ster3 { animation-delay: 800ms; }
.kd-uitlegfilm.kdufi-knipsel .kn-wat.kn-plop .kn-wat-tekst { animation: kn-tekst 500ms ease-out 200ms both; }
@keyframes kn-vel {
  0%   { transform: translateY(-34px) rotate(-2.5deg) scale(0.94); }
  60%  { transform: translateY(4px) rotate(0.8deg) scale(1.01); }
  100% { transform: none; }
}
@keyframes kn-ster {
  0%   { transform: scale(0) rotate(-90deg); }
  70%  { transform: scale(1.2) rotate(10deg); }
  100% { transform: none; }
}
@keyframes kn-tekst { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ===== Hoofdstukschermen ("Voorbeeld 1", bouwer: actie "hoofdstuk") ===== */
/* Zelfde blauwe papiervel als "Wat heb je geleerd?"; het vel valt erin en de
   sterren springen erbij. In de gewone stijl zorgt de film zelf voor een wit
   scherm met blauwe letters. */
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-hs-lucht { fill: #cfe9fb; }
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-hs-vel { fill: #2f8fd6; stroke: none; filter: url(#kn-papier); }
.kd-uitlegfilm.kdufi-knipsel[data-film] .kl-hs-tekst { font-weight: 700; fill: #ffffff; }
.kd-uitlegfilm.kdufi-knipsel .kn-hs-ster { fill: #ffd23f; filter: url(#kn-schaduw); transform-box: fill-box; transform-origin: center; }
.kd-uitlegfilm.kdufi-knipsel .kl-hoofdstuk.kn-plop > .kn-binnen { transform-origin: 50% 0%; animation: kn-vel 800ms cubic-bezier(.2, .9, .3, 1.2) both; }
.kd-uitlegfilm.kdufi-knipsel .kl-hoofdstuk.kn-plop .kn-hs-ster { animation: kn-ster 650ms cubic-bezier(.2, .9, .3, 1.6) both; }
.kd-uitlegfilm.kdufi-knipsel .kl-hoofdstuk.kn-plop .kn-hs-ster0 { animation-delay: 350ms; }
.kd-uitlegfilm.kdufi-knipsel .kl-hoofdstuk.kn-plop .kn-hs-ster1 { animation-delay: 500ms; }
.kd-uitlegfilm.kdufi-knipsel .kl-hoofdstuk.kn-plop .kn-hs-ster2 { animation-delay: 650ms; }
.kd-uitlegfilm.kdufi-knipsel .kl-hoofdstuk.kn-plop .kn-hs-ster3 { animation-delay: 800ms; }
.kd-uitlegfilm.kdufi-knipsel .kl-hoofdstuk.kn-plop .kl-hs-tekst { animation: kn-tekst 500ms ease-out 200ms both; }
.kd-uitlegfilm:not(.kdufi-knipsel) .kn-hs-ster { display: none; }

/* ===== Ondertitel en startscherm ===== */
.kd-uitlegfilm.kdufi-knipsel .kdufi-subbalk {
  background: #fffdf7;
  border-radius: 7px 14px 9px 13px;
  box-shadow: 1px 3px 5px rgba(30, 58, 74, 0.14);
}
.kd-uitlegfilm.kdufi-knipsel .kdufi-w.kdufi-actief {
  background: #ffd23f;
  border-radius: 4px;
  box-shadow: 1px 2px 0 rgba(107, 77, 0, 0.20);
}
.kd-uitlegfilm.kdufi-knipsel.kdufi-smal .kdufi-subband { background: #4aab68; }  /* zelfde groen als de voorste heuvel */
.kd-uitlegfilm.kdufi-knipsel.kdufi-smal .kn-tape { opacity: 0.75; }

.kd-uitlegfilm.kdufi-knipsel .kdufi-poster { background: rgba(207, 233, 251, 0.55); }
.kd-uitlegfilm.kdufi-knipsel .kdufi-titel {
  background: #fffdf7;
  padding: 6px 22px 10px;
  border-radius: 8px 16px 10px 14px;
  box-shadow: 1px 4px 6px rgba(30, 58, 74, 0.16);
  transform: rotate(-1.5deg);
  font-weight: 600;
}
.kd-uitlegfilm.kdufi-knipsel .kdufi-play {
  background: #ff7a59;
  border-radius: 18px 22px 16px 24px;
  box-shadow: 0 6px 0 #d9472a;
  font-weight: 600;
  animation: kn-hup 2.4s ease-in-out infinite;
}
.kd-uitlegfilm.kdufi-knipsel .kdufi-play:active { animation: none; transform: rotate(1.5deg) translateY(3px); box-shadow: 0 3px 0 #d9472a; }
@keyframes kn-hup {
  0%, 70%, 100% { transform: rotate(1.5deg) translateY(0); }
  80% { transform: rotate(-1deg) translateY(-6px); }
  90% { transform: rotate(2deg) translateY(0); }
}

/* ===== Eindscherm: ook de onderkant vervaagt (Robert, 15 okt 2026) ===== */
/* De speler vervaagt alleen het beeld (eindlaag binnen .kdufi-beeld). De
   ondertitel (telefoon: eronder, breed: eroverheen) en de voortgangsbalk
   bleven scherp; die krijgen nu dezelfde vervaging en hetzelfde waas. */
/* De bedieningsbalk (v5, 17 okt 2026) blijft op het eindscherm scherp en
   bruikbaar: 10 s terug brengt je terug in de samenvatting. */
.kd-uitlegfilm.kdufi-knipsel .kdufi-subband { transition: filter 400ms ease; }
.kd-uitlegfilm.kdufi-knipsel.kdufi-af .kdufi-subband { filter: blur(5px); pointer-events: none; }
.kd-uitlegfilm.kdufi-knipsel.kdufi-af.kdufi-smal .kdufi-subband { position: relative; }
.kd-uitlegfilm.kdufi-knipsel.kdufi-af .kdufi-subband::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(238, 248, 255, 0.45);
}

/* ===== Bedieningsbalk (v5): papier, koraal zoals "Speel af" ===== */
.kd-uitlegfilm.kdufi-knipsel .kdufi-bediening { background: #fffdf7; border-top-color: #e8dfcc; }
.kd-uitlegfilm.kdufi-knipsel .kdufi-voortgang-spoor { background: #efe6d3; }
.kd-uitlegfilm.kdufi-knipsel .kdufi-voortgang-vul { background: #ff7a59; }
.kd-uitlegfilm.kdufi-knipsel .kdufi-voortgang-knop { border-color: #ff7a59; }
.kd-uitlegfilm.kdufi-knipsel .kdufi-bd-knop { color: #3a4f63; }
@media (hover: hover) {
  .kd-uitlegfilm.kdufi-knipsel .kdufi-bd-knop:not(.kdufi-bd-speel):not(:disabled):hover { background: #f6efe0; }
  .kd-uitlegfilm.kdufi-knipsel .kdufi-bd-keuze:not(.kdufi-bd-gekozen):hover { background: #fbf4e6; }
}
.kd-uitlegfilm.kdufi-knipsel .kdufi-bd-speel::before {
  background: #ff7a59; box-shadow: 0 2px 0 #d9472a;
  border-radius: 50% 46% 52% 48%;
}
.kd-uitlegfilm.kdufi-knipsel .kdufi-bd-snel {
  background: #fff0ea; border-color: #ffc9b8; color: #d9472a;
  border-radius: 12px 15px 11px 14px;
}
.kd-uitlegfilm.kdufi-knipsel .kdufi-bd-menu { background: #fffdf7; border-color: #e8dfcc; border-radius: 10px 14px 9px 13px; }
.kd-uitlegfilm.kdufi-knipsel .kdufi-bd-keuze.kdufi-bd-gekozen { background: #ffe6dc; color: #c2412a; }

/* ===== Terug naar de gewone stijl: het toegevoegde decor verdwijnt weer ===== */
.kd-uitlegfilm:not(.kdufi-knipsel) :is(.kn-decor, .kn-tape, .kn-klokrand, .kn-vonk, .kn-wat-lucht, .kn-wat-breed, .kn-wat-smal) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .kd-uitlegfilm.kdufi-knipsel :is(.kn-zon, .kn-boom, .kdufi-play) { animation: none; }
  .kd-uitlegfilm.kdufi-knipsel .kn-plop > .kn-binnen,
  .kd-uitlegfilm.kdufi-knipsel .kn-plop > .kn-vonk,
  .kd-uitlegfilm.kdufi-knipsel .kn-wat.kn-plop :is(.kn-binnen, .kn-wat-ster, .kn-wat-tekst) { animation: none; }
  .kd-uitlegfilm.kdufi-knipsel .kl-hoofdstuk.kn-plop :is(.kn-binnen, .kn-hs-ster, .kl-hs-tekst) { animation: none; }
}