/* ==========================================================================
   BOMMEL VISUALS — SPEELS (assets/js/speels.js + klapbord/cursorlabel uit effects.js)
   Alles hangt aan html.fx-js: zonder JS of bij prefers-reduced-motion gebeurt hier niets.
   ========================================================================== */

/* --- Klapbord (pagina-overgang en CUT!) --- */
.fx-klapbord { position: absolute; left: 50%; top: 50%; width: min(300px, 72vw); transform: translate(-50%, -50%); z-index: 2; color: var(--papier); }
.fx-klap-stok { display: block; height: 24px; margin-bottom: 3px; border: 2px solid var(--papier); background: repeating-linear-gradient(118deg, var(--papier) 0 16px, var(--film) 16px 32px); transform-origin: 0 100%; transform: rotate(-24deg); }
.fx-klap-bord { display: flex; flex-wrap: wrap; gap: 0 14px; background: var(--film); border: 2px solid var(--papier); position: relative; padding: 36px 16px 12px; }
.fx-klap-bord::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: repeating-linear-gradient(62deg, var(--papier) 0 16px, var(--film) 16px 32px); border-bottom: 2px solid var(--papier); }
.fx-klap-bord b { flex: 1 0 100%; font-family: var(--kop); font-weight: 400; font-size: 52px; line-height: .9; text-transform: uppercase; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--lijn-2); }
.fx-klap-bord small { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--stof-licht); white-space: nowrap; }

/* in de overgang: bord verschijnt terwijl de panelen dichtgaan, de stok klapt vlak voor de nieuwe pagina */
.fx-wipe .fx-klapbord { opacity: 0; transition: opacity .12s; }
.fx-wipe .fx-klap-stok { transition: transform .2s; }
.fx-wipe.sluit .fx-klapbord { opacity: 1; transition-delay: .18s; }
.fx-wipe.sluit .fx-klap-stok { transform: none; transition: transform .12s cubic-bezier(.7,0,1,1) .34s; }
.fx-wipe.dicht .fx-klapbord { opacity: 1; transition: none; }
.fx-wipe.dicht .fx-klap-stok, .fx-wipe.open .fx-klap-stok { transform: none; transition: none; }
.fx-wipe.open .fx-klapbord { opacity: 0; transform: translate(-50%, calc(-50% - 14px)); transition: opacity .2s, transform .3s; }

/* --- CUT! na versturen --- */
.fx-cut { position: fixed; inset: 0; z-index: 9600; pointer-events: none; background: rgba(17,17,16,.84); animation: fx-cut-in .18s ease both; }
.fx-cut.weg { opacity: 0; transition: opacity .3s; }
.fx-klapbord.groot { width: min(440px, 84vw); animation: fx-bord-in .3s cubic-bezier(.2,.8,.2,1) both, fx-schud .22s .56s; }
.fx-klapbord.groot .fx-klap-stok { height: 34px; animation: fx-klap .14s cubic-bezier(.7,0,1,1) .42s both; }
.fx-klapbord.groot .fx-klap-bord { padding-top: 46px; }
.fx-klapbord.groot .fx-klap-bord::before { height: 30px; }
.fx-klapbord.groot b { font-size: clamp(76px, 18vw, 128px); animation: fx-cut-tekst .3s cubic-bezier(.2,.8,.2,1) .56s both; }
.fx-klapbord.groot b { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.fx-klapbord.groot em { flex: 1 0 100%; font-family: var(--kop); font-style: normal; font-size: clamp(30px, 6vw, 44px); line-height: 1; text-transform: uppercase; margin: -2px 0 10px; padding-bottom: 12px; border-bottom: 1px solid var(--lijn-2); animation: fx-cut-tekst .3s cubic-bezier(.2,.8,.2,1) .66s both; }
.fx-cut-lijn { position: absolute; left: 0; right: 0; top: calc(50% - 4px); height: 8px; background: var(--opname); z-index: 1; transform: scaleX(0); transform-origin: left; animation: fx-snede .5s cubic-bezier(.7,0,.2,1) .54s both; }
@keyframes fx-cut-in { from { opacity: 0; } }
@keyframes fx-bord-in { from { opacity: 0; transform: translate(-50%, calc(-50% - 40px)) rotate(-3deg); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes fx-schud { 0%, 100% { transform: translate(-50%, -50%); } 30% { transform: translate(-50%, calc(-50% + 6px)); } 60% { transform: translate(calc(-50% - 2px), calc(-50% - 2px)); } }
@keyframes fx-klap { from { transform: rotate(-28deg); } to { transform: none; } }
@keyframes fx-cut-tekst { from { opacity: 0; transform: scale(1.25); transform-origin: 0 100%; } to { opacity: 1; transform: none; } }
@keyframes fx-snede { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* --- Cursorlabel naast de stip, boven links en knoppen --- */
.fx-zoeker.link .fx-zoeker-label { opacity: 1; top: 16px; left: 22px; transform: none; font-size: 10px; padding: 3px 6px; letter-spacing: .14em; }
.fx-zoeker-label:empty { display: none; }

/* --- S1 Frame-scrub --- */
.fx-scrub { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.take img.fx-scrub { transition: transform .6s ease; }
.fx-scrub.aan { opacity: 1; }
.fx-scrub-balk { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3; opacity: 0; transition: opacity .2s; pointer-events: none;
  background: repeating-linear-gradient(to right, rgba(245,242,234,.35) 0 calc(100% / var(--n) - 2px), transparent calc(100% / var(--n) - 2px) calc(100% / var(--n))); }
.fx-scrub-balk i { position: absolute; left: -1px; bottom: 0; width: 2px; height: 14px; background: var(--opname); }
.fx-scrub-balk i::after { content: ''; position: absolute; left: -3px; top: -6px; width: 8px; height: 8px; border-radius: 50%; background: var(--opname); }
.take.fx-scrubt .fx-scrub-balk { opacity: 1; }

/* --- S2 Decoder-koppen --- */
.fx-dek { position: relative; }
.fx-dek.rolt, .fx-dek.wacht { visibility: hidden; }
.fx-dek.rolt::after { content: attr(data-r); visibility: visible; position: absolute; left: 0; right: 0; top: 0; text-align: center; line-height: normal; color: var(--stof); }

/* --- S3 Kantelkaarten --- */
.fx-kantel { transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .7s ease, background .15s, border-color .15s, color .15s; }
.fx-kantel:hover { transition: transform .1s linear, opacity .7s ease, background .15s, border-color .15s, color .15s; }

/* --- S5 Sluiter-filter --- */
.take.fx-sluiter { animation: fx-sluiter .42s cubic-bezier(.7,0,.2,1) both; }
@keyframes fx-sluiter { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* --- S7 Director's cut --- */
.fx-dc i { position: fixed; left: 0; right: 0; height: min(11vh, 92px); z-index: 8500; background: #000; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); font-family: var(--mono); font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--stof-licht); pointer-events: none; transition: transform .55s cubic-bezier(.7,0,.2,1); font-variant-numeric: tabular-nums; }
.fx-dc span { display: inline-flex; align-items: center; gap: 10px; }
.fx-dc .stip { width: 9px; height: 9px; }
.fx-dc-boven { top: 0; transform: translateY(-100%); }
.fx-dc-onder { bottom: 0; transform: translateY(100%); }
.fx-dc::before { content: ''; position: fixed; inset: 0; z-index: 8400; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%); opacity: 0; transition: opacity .6s; }
html.fx-dc-aan .fx-dc i { transform: none; }
html.fx-dc-aan .fx-dc::before { opacity: 1; }
html.fx-dc-aan .fx-korrel { opacity: .15; }
html.fx-dc-aan body { padding-top: min(11vh, 92px); padding-bottom: min(11vh, 92px); }
html.fx-dc-aan { scroll-padding-top: calc(min(11vh, 92px) + 16px); scroll-padding-bottom: calc(min(11vh, 92px) + 16px); }
html.fx-dc-aan .fx-hud, html.fx-dc-aan .fx-toast { bottom: calc(min(11vh, 92px) + 12px); }
html.fx-dc-aan .fx-balk { top: min(11vh, 92px); }

/* toast (ongedaan maken) */
.fx-toast { position: fixed; left: 18px; bottom: 16px; z-index: 9700; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 36px); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; background: var(--papier); color: var(--film); padding: 8px 8px 8px 14px; border-radius: 2px; box-shadow: 0 10px 30px rgba(0,0,0,.4); transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s, visibility 0s .35s, bottom .5s; }
.fx-toast.zicht { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.fx-toast-knop { font: inherit; letter-spacing: .12em; text-transform: uppercase; background: var(--film); color: var(--papier); border: 0; border-radius: 2px; padding: 9px 12px; white-space: nowrap; }
.fx-toast-knop:hover { background: var(--opname); color: var(--film); }
.fx-toast-knop:focus-visible { outline: 2px solid var(--opname); outline-offset: 2px; }
@media (max-width: 700px) { .fx-toast { left: 10px; right: 10px; bottom: 10px; max-width: none; justify-content: space-between; font-size: 11px; } }