/* THE REAL MAG. fx.css
   Belevingslaag voor de landingspagina's: 3D-tilt, beeld-collage met muisdiepte,
   filmstrip-marquee, 360-turntable, scroll-parallax, clip-reveals, canvas-net.
   Sober gehouden: koper alleen als accent, geen glows, reduced-motion = alles uit. */

/* Vangnet tegen horizontale overflow door de belevingslaag (zelfde patroon als de
   configurator-LP): transforms/marquees mogen nooit een witte band naast de pagina geven. */
html { overflow-x: hidden; }
.strip, .strip * { min-width: 0; }

/* ---------- 3D tilt op kaarten ---------- */
[data-tilt] { transform-style: preserve-3d; will-change: transform; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.tilt-wrap { perspective: 900px; }

/* ---------- Hero-collage (ai-content): gelaagde echte beelden met muisdiepte ----------
   Beelden houden hun EIGEN ratio (height:auto): nooit stretchen of onverwacht croppen. */
.collage { position: relative; aspect-ratio: 10 / 9; perspective: 1100px; transform-style: preserve-3d; }
.collage-item {
  position: absolute; overflow: hidden; border: 1px solid var(--border-grey, #D4D4D0);
  border-radius: 2px; background: #fff; will-change: transform;
}
.collage-item img { width: 100%; height: auto; display: block; }
.collage-item .tag-mini {
  position: absolute; left: 0; bottom: 0; padding: 4px 10px; font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(18,16,17,.72);
}
.collage-item.is-front { border-top: 3px solid var(--accent, #A07050); }
.collage-caption { margin-top: var(--ruimte-4, 16px); font-size: 13px; color: var(--ink-faint, #8a8784); }
/* rustige idle-drift zolang er geen muis is (touch); JS zet .has-pointer op de collage */
@keyframes collageDrift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-8px,0); } }
.collage:not(.has-pointer) .collage-item { animation: collageDrift 7s ease-in-out infinite; }
.collage:not(.has-pointer) .collage-item:nth-child(2) { animation-delay: .8s; }
.collage:not(.has-pointer) .collage-item:nth-child(3) { animation-delay: 1.6s; }
.collage:not(.has-pointer) .collage-item:nth-child(4) { animation-delay: 2.4s; }
.collage:not(.has-pointer) .collage-item:nth-child(5) { animation-delay: 3.2s; }

/* ---------- Regie-switcher (ai-content hero): één product, jij kiest de scène ---------- */
.director { position: relative; }
.director-stage {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid var(--border-grey, #D4D4D0); border-radius: 2px; background: var(--antraciet, #232021);
}
.director-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.director-stage img.is-active { opacity: 1; }
/* viewfinder-hoeken + regielabel: de filmset-esthetiek */
.dir-corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--accent, #A07050); z-index: 2; }
.dir-corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.dir-corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.dir-corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.dir-corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.dir-label {
  position: absolute; top: 14px; left: 44px; z-index: 2;
  font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .22em;
  color: #fff; background: rgba(18,16,17,.55); padding: 4px 10px; border-radius: 2px;
}
.dir-panel { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.dir-btn {
  flex: 1 1 auto; min-width: 0; appearance: none; cursor: pointer;
  border: 1px solid var(--border-grey, #D4D4D0); border-radius: 2px; background: #fff;
  padding: 10px 8px; text-align: left; transition: border-color .3s ease, background .3s ease;
}
.dir-btn .n { display: block; font-family: ui-monospace, monospace; font-size: 10px; color: var(--accent, #A07050); margin-bottom: 2px; }
.dir-btn .t { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--antraciet, #232021); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-btn.is-active { border-color: var(--accent, #A07050); background: #FBF7F4; box-shadow: inset 0 3px 0 var(--accent, #A07050); }
.dir-btn:focus-visible { outline: 2px solid var(--accent, #A07050); outline-offset: 2px; }

/* ---------- Methode-stage (scrolly ai-content): echte beelden + wipe ---------- */
.mstage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: #1B1819; border: 1px solid rgba(255,255,255,0.14); }
.mstage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mstage .m-bron { transition: opacity .6s ease; }
.mstage .m-render { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s cubic-bezier(.55,0,.2,1); }
.is-step-3 .mstage .m-render, .is-step-4 .mstage .m-render { clip-path: inset(0 0 0 0); }
.m-wipeline { position: absolute; top: 0; bottom: 0; left: 0; width: 2.5px; background: var(--accent, #A07050); opacity: 0; z-index: 2; }
.is-step-3 .m-wipeline { opacity: 1; left: 100%; transition: left 1.3s cubic-bezier(.55,0,.2,1), opacity .2s ease; }
.is-step-4 .m-wipeline { opacity: 0; left: 100%; }
.m-tag {
  position: absolute; z-index: 3; left: 12px; top: 12px;
  font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .2em;
  color: #fff; background: rgba(18,16,17,.6); padding: 4px 10px; border-radius: 2px;
  transition: opacity .4s ease;
}
.m-tag.t-render { opacity: 0; }
.is-step-3 .m-tag.t-bron, .is-step-4 .m-tag.t-bron { opacity: 0; }
.is-step-3 .m-tag.t-render, .is-step-4 .m-tag.t-render { opacity: 1; }
.m-regie-svg { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.is-step-2 .m-regie-svg { opacity: 1; }
/* De regie-overlay hoort bij stap 2 (het kaderen). Vanaf stap 3 gaat het om het
   eindresultaat; hij bleef daar op 25% hangen en las dan als een vaag vlak over
   de render waarvan niet duidelijk is wat het doet. Nu volledig weg. */
.is-step-3 .m-regie-svg, .is-step-4 .m-regie-svg { opacity: 0; }
.m-out { display: flex; gap: 10px; margin-top: 12px; }
.m-out figure { margin: 0; flex: 1; position: relative; overflow: hidden; border-radius: 2px; border: 1px solid rgba(255,255,255,0.16); opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.is-step-4 ~ * .m-out figure { opacity: 1; }
.scrolly-stage.is-step-4 .m-out figure { opacity: 1; transform: translateY(0); }
.scrolly-stage.is-step-4 .m-out figure:nth-child(2) { transition-delay: .15s; }
.scrolly-stage.is-step-4 .m-out figure:nth-child(3) { transition-delay: .3s; }
.m-out img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.m-out figcaption { position: absolute; left: 0; bottom: 0; padding: 3px 8px; font-size: 9px; font-weight: 700; letter-spacing: .16em; color: #fff; background: rgba(18,16,17,.66); }

/* ---------- Filmstrip-marquee van case-beelden ---------- */
.strip { position: relative; overflow: hidden; padding: 0; border-top: 1px solid var(--border-grey, #D4D4D0); border-bottom: 1px solid var(--border-grey, #D4D4D0); background: #fff; }
.strip-label {
  position: absolute; z-index: 2; top: 0; left: 0; padding: 8px 14px;
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--antraciet, #232021); background: #fff; border-right: 1px solid var(--border-grey, #D4D4D0); border-bottom: 1px solid var(--border-grey, #D4D4D0);
}
.strip-label .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #A07050); margin-right: 8px; vertical-align: 1px; }
.strip-track { display: flex; gap: 10px; width: max-content; padding: 10px 0; animation: stripScroll 55s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip.is-paused .strip-track { animation-play-state: paused; }
.strip-track figure { margin: 0; flex: 0 0 auto; height: 200px; overflow: hidden; border: 1px solid var(--border-grey, #D4D4D0); border-radius: 2px; position: relative; }
.strip-track img { height: 100%; width: auto; display: block; }
.strip-track figcaption {
  position: absolute; left: 0; bottom: 0; padding: 3px 9px; font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(18,16,17,.66);
}
@keyframes stripScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .strip-track figure { height: 128px; } .strip-track { animation-duration: 40s; } }

/* ---------- 360-turntable ---------- */
.tt-section { background:
  repeating-linear-gradient(0deg, rgba(35,32,33,.045) 0 1px, transparent 1px 56px),
  repeating-linear-gradient(90deg, rgba(35,32,33,.045) 0 1px, transparent 1px 56px);
}
.tt-stage {
  position: relative; aspect-ratio: 1 / 1; max-width: 560px; margin-inline: auto;
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.tt-stage.is-dragging { cursor: grabbing; }
.tt-stage img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.tt-hint {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--antraciet, #232021); background: #fff; border: 1px solid var(--border-grey, #D4D4D0); border-radius: 2px;
  transition: opacity .4s ease; white-space: nowrap;
}
.tt-hint svg { width: 15px; height: 15px; color: var(--accent, #A07050); }
.tt-stage.has-interacted .tt-hint { opacity: 0; }
.tt-progress { position: absolute; left: 0; right: 0; bottom: -14px; height: 2px; background: var(--border-grey, #D4D4D0); }
.tt-progress i { position: absolute; top: 0; bottom: 0; width: 14%; background: var(--accent, #A07050); transition: left .08s linear; }

/* ---------- Scroll-parallax op grote media ---------- */
.plx { overflow: hidden; }
.plx > img, .plx > video { width: 100%; height: 112%; object-fit: cover; will-change: transform; display: block; }

/* ---------- Clip-reveal voor beelden ---------- */
.reveal-clip { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.6,0,.2,1); }
.reveal-clip.is-in { clip-path: inset(0 0 0 0); }

/* ---------- Proces-voortgang (scroll-gevulde koperen lijn) ---------- */
.proc-progress { position: relative; }
.proc-progress::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--border-grey, #D4D4D0);
}
.proc-progress::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent, #A07050); transform-origin: left center;
  transform: scaleX(var(--proc, 0));
}
@media (max-width: 880px) { .proc-progress::before, .proc-progress::after { display: none; } }

/* De vier punten lichten mee op met de lijn. Bereikt = koperen bolletje, en de
   stap waar je nu bent krijgt bovendien een koperen kop en donkerder tekst, zodat
   je in een oogopslag ziet waar je zit. Geen dimming van de rest: dat leest slechter. */
.proc-progress .process-step .dot { transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.proc-progress .process-step.is-op .dot { border-color: var(--accent); background: var(--accent); color: var(--wit); }
.proc-progress .process-step.is-nu .dot { transform: scale(1.08); }
.proc-progress .process-step h5,
.proc-progress .process-step p { transition: color var(--dur-2) var(--ease); }
.proc-progress .process-step.is-nu h5 { color: var(--accent); }
.proc-progress .process-step.is-nu p { color: var(--ink); }

/* ---------- Live-status op bewijskaarten ---------- */
.live-note { display: flex; align-items: center; gap: 8px; margin: var(--ruimte-4, 16px) 0 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint, #8a8784); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #A07050); position: relative; flex: 0 0 auto; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent, #A07050); opacity: 0; animation: livePulse 2.4s ease-out infinite; }
@keyframes livePulse { 0% { transform: scale(.5); opacity: .7; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Canvas-net (tid hero) ---------- */
.fx-canvas-host { position: relative; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fx-canvas-host > .container { position: relative; z-index: 1; }

/* ---------- Scrollytelling (tid): sticky SVG-scene die per stap transformeert ---------- */
.scrolly { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--ruimte-9); align-items: start; }
/* Stage = sticky vlak van één viewport hoog dat zijn inhoud VERTICAAL CENTREERT,
   zodat de visual altijd in het midden van het scherm hangt tijdens het verhaal. */
.scrolly-stage {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--nav-hoogte, 72px) * .6);
}
.scrolly-stage svg { width: 100%; height: auto; display: block; max-height: 66vh; }
.scrolly-steps { display: flex; flex-direction: column; }
.scrolly-step {
  min-height: 62vh; display: flex; flex-direction: column; justify-content: center;
  opacity: .28; transition: opacity .5s ease, transform .5s ease, border-color .5s ease;
  padding-left: 18px; border-left: 2px solid rgba(255,255,255,0.12); transform: translateX(-4px);
}
.scrolly-step.is-active { opacity: 1; border-left-color: var(--accent, #A07050); transform: translateX(0); }
.scrolly-step .stepnum { font-family: ui-monospace, monospace; color: var(--koper-licht, #C89B7B); font-size: 13px; letter-spacing: .18em; margin-bottom: var(--ruimte-3); }
.scrolly-step h3 { color: var(--wit, #fff); margin-bottom: var(--ruimte-3); }
.scrolly-step p { color: rgba(255,255,255,0.78); max-width: 46ch; margin: 0; }
/* voortgangsrail onder de visual: mono-nummers met vullende koperen lijnen */
.scrolly-rail { display: flex; align-items: center; gap: 12px; margin-top: var(--ruimte-5); }
.rail-step { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; color: rgba(255,255,255,0.42); transition: color .4s ease; }
.rail-step.is-active { color: var(--koper-licht, #C89B7B); }
.rail-line { flex: 1; height: 1px; background: rgba(255,255,255,0.16); position: relative; overflow: hidden; }
.rail-line::after { content: ""; position: absolute; inset: 0; background: var(--accent, #A07050); transform: scaleX(0); transform-origin: left center; transition: transform .6s cubic-bezier(.5,0,.2,1); }
.rail-line.is-done::after { transform: scaleX(1); }
@media (max-width: 880px) {
  .scrolly { grid-template-columns: 1fr; gap: var(--ruimte-5); }
  .scrolly-stage {
    top: calc(var(--nav-hoogte, 64px) + 8px); height: auto; display: block;
    padding-top: 0; z-index: 1; background: var(--antraciet, #232021); padding-bottom: var(--ruimte-3);
  }
  .scrolly-stage svg { max-height: none; }
  .scrolly-rail { margin-top: var(--ruimte-3); }
  .scrolly-step { min-height: 58vh; }
}

/* SVG-scene states. Eindposities staan in de markup; chaos = transform per stap-klasse. */
.sc-el { transition: transform .9s cubic-bezier(.5,0,.2,1), opacity .6s ease; }
.sc-card { transform-box: fill-box; transform-origin: center; }
.is-step-1 .sc-card.c1 { transform: translate(-24px, 22px) rotate(-6deg); }
.is-step-1 .sc-card.c2 { transform: translate(-32px, -6px) rotate(4deg); }
.is-step-1 .sc-card.c3 { transform: translate(-22px, -26px) rotate(-4deg); }
.is-step-1 .sc-card.c4 { transform: translate(26px, 26px) rotate(5deg); }
.is-step-1 .sc-card.c5 { transform: translate(32px, -8px) rotate(-5deg); }
.is-step-1 .sc-card.c6 { transform: translate(22px, -28px) rotate(4deg); }
.is-step-2 .sc-card.c1 { transform: translate(-11px, 10px) rotate(-2.5deg); }
.is-step-2 .sc-card.c2 { transform: translate(-14px, -3px) rotate(2deg); }
.is-step-2 .sc-card.c3 { transform: translate(-10px, -12px) rotate(-2deg); }
.is-step-2 .sc-card.c4 { transform: translate(12px, 12px) rotate(2.5deg); }
.is-step-2 .sc-card.c5 { transform: translate(14px, -4px) rotate(-2deg); }
.is-step-2 .sc-card.c6 { transform: translate(10px, -13px) rotate(2deg); }
.sc-core { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.85); }
.is-step-2 .sc-core, .is-step-3 .sc-core, .is-step-4 .sc-core { opacity: 1; transform: scale(1); }
.sc-spark { transform-box: fill-box; transform-origin: center; }
.is-step-2 .sc-spark, .is-step-3 .sc-spark, .is-step-4 .sc-spark { animation: tidSpinFx 8s linear infinite; }
@keyframes tidSpinFx { to { transform: rotate(360deg); } }
.sc-link { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.1s cubic-bezier(.5,0,.2,1) .15s; }
.is-step-2 .sc-link, .is-step-3 .sc-link, .is-step-4 .sc-link { stroke-dashoffset: 0; }
.sc-check, .sc-bar { opacity: 0; transition: opacity .5s ease .3s; }
.is-step-3 .sc-check, .is-step-4 .sc-check, .is-step-3 .sc-bar, .is-step-4 .sc-bar { opacity: 1; }
.sc-pulse { opacity: 0; }
.is-step-3 .sc-pulse, .is-step-4 .sc-pulse { opacity: 1; animation: scPulseRun 2.6s cubic-bezier(.6,0,.4,1) infinite; }
.sc-pulse.p2 { animation-delay: .9s; } .sc-pulse.p3 { animation-delay: 1.7s; }
@keyframes scPulseRun { 0% { transform: translate(0,0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: var(--pt, translate(0,0)); opacity: 0; } }
.sc-frame { stroke-dasharray: 1800; stroke-dashoffset: 1800; transition: stroke-dashoffset 1.4s cubic-bezier(.5,0,.2,1); }
.is-step-4 .sc-frame { stroke-dashoffset: 0; }
.sc-owner { opacity: 0; transform: translateY(6px); transition: opacity .6s ease .8s, transform .6s ease .8s; }
.is-step-4 .sc-owner { opacity: 1; transform: translateY(0); }

/* ---------- Methode-scene (ai-content scrolly): model -> regie -> render -> overal ---------- */
.mc-wire { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.3s cubic-bezier(.5,0,.2,1); }
.is-step-1 .mc-wire, .is-step-2 .mc-wire, .is-step-3 .mc-wire, .is-step-4 .mc-wire { stroke-dashoffset: 0; }
.mc-regie { opacity: 0; transition: opacity .6s ease .2s; }
.is-step-2 .mc-regie { opacity: 1; }
.is-step-3 .mc-regie, .is-step-4 .mc-regie { opacity: .3; }
.mc-fill { opacity: 0; transition: opacity .9s ease .25s; }
.is-step-3 .mc-fill, .is-step-4 .mc-fill { opacity: 1; }
.mc-sweepline { opacity: 0; }
.is-step-3 .mc-sweepline { opacity: 1; transform: translateX(152px); transition: transform 1.1s cubic-bezier(.5,0,.3,1) .2s, opacity .2s ease .15s; }
.is-step-4 .mc-sweepline { opacity: 0; transform: translateX(152px); }
.mc-thumb { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.is-step-4 .mc-thumb { opacity: 1; transform: translateY(0); }
.is-step-4 .mc-thumb.t2 { transition-delay: .18s; }
.is-step-4 .mc-thumb.t3 { transition-delay: .36s; }

/* ---------- 3D-intro voor kaartenrijen ----------
   De rij is de scène (perspectief), de kaarten komen uit de diepte omhoog.
   De :not(.is-in)-vorm is bewust: zodra de rij in beeld komt vervalt deze regel
   en neemt de kaart zijn eigen eindstand over, ook die van de bestaande reveal-laag.
   Zonder die truc zou .reveal.is-in{transform:none} deze animatie meteen platslaan.
   De .fx-on-eis is een vangnet: alleen als fx.js draait mogen kaarten verborgen
   starten, anders zou een scriptstoring de inhoud onzichtbaar maken. */
[data-r3d] { perspective: 1100px; perspective-origin: 50% 30%; }
[data-r3d] > * { transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .7s ease; }
.fx-on [data-r3d]:not(.is-in) > * { transform: translate3d(0, 30px, -80px) rotateX(7deg); opacity: 0; }
[data-r3d].is-in > *:nth-child(2) { transition-delay: .08s; }
[data-r3d].is-in > *:nth-child(3) { transition-delay: .16s; }
[data-r3d].is-in > *:nth-child(4) { transition-delay: .24s; }
[data-r3d].is-in > *:nth-child(5) { transition-delay: .32s; }
[data-r3d].is-in > *:nth-child(6) { transition-delay: .4s; }
[data-r3d].is-in > *:nth-child(n+7) { transition-delay: .48s; }
/* in een mobiele veeg-carrousel staan de kaarten naast elkaar buiten beeld:
   daar zou de 3D-intro ze onzichtbaar houden, dus die zetten we uit */
@media (max-width: 640px) {
  .fx-on .m-swipe[data-r3d]:not(.is-in) > * { transform: none; opacity: 1; }
}

/* ---------- Diepte-lagen: één scène, meerdere afstanden ---------- */
[data-depth] { perspective: 1000px; transform-style: preserve-3d; }
[data-depth] [data-d] { will-change: transform; }

/* ---------- Reduced motion: beleving uit, inhoud intact ---------- */
@media (prefers-reduced-motion: reduce) {
  .sc-el, .sc-link, .sc-frame, .sc-owner, .sc-core { transition: none; }
  .sc-spark, .sc-pulse { animation: none !important; }
  .mc-wire, .mc-regie, .mc-fill, .mc-thumb { transition: none; }
  .mc-sweepline { display: none; }
  .scrolly-step { opacity: 1; transition: none; }
  [data-tilt] { transition: none; }
  .collage:not(.has-pointer) .collage-item { animation: none; }
  /* Zonder animatie is een marquee zinloos. Geen acht rijen van rand tot rand,
     maar een enkele rij die de bezoeker zelf kan verschuiven. De dubbele set
     (aria-hidden) bestaat alleen voor de naadloze lus en kan hier weg. */
  .strip { overflow-x: auto; scrollbar-width: thin; }
  .strip-track { animation: none; flex-wrap: nowrap; width: max-content; }
  .strip-track > [aria-hidden="true"] { display: none; }
  .reveal-clip { clip-path: inset(0 0 0 0); transition: none; }
  .plx > img, .plx > video { height: 100%; transform: none !important; }
  .live-dot::after { animation: none; }
  .fx-canvas { display: none; }
  .fx-on [data-r3d]:not(.is-in) > * { transform: none; opacity: 1; }
  [data-r3d] > * { transition: none; }
  [data-depth] [data-d] { transform: none !important; }
}

/* ---------- Voortgangslijn ----------
   Dunne koperen lijn bovenaan die meeloopt met de scrollpositie. */
.fx-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent, #A07050);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 200;
  pointer-events: none;
}

/* ---------- Beelddiepte ----------
   Het kader knipt af, het beeld erin is bewust hoger en mag bewegen. */
.fx-par-kader { position: relative; overflow: hidden; border-radius: var(--radius-3); line-height: 0; }
/* het beeld staat iets groter dan zijn kader; die marge is precies wat het
   schuiven opvult, zodat er nooit een lege rand ontstaat */
img.fx-par { display: block; width: 100%; will-change: transform; transform: scale(1.06); }

/* ---------- Koperen sweep die het beeld onthult ----------
   Eén keer, bij binnenkomst. Daarna staat het beeld gewoon stil. */
.fx-sweep { clip-path: inset(0 100% 0 0); transition: clip-path 1.05s cubic-bezier(.2,.7,.2,1); }
.fx-sweep.fx-sweep-in { clip-path: inset(0 0 0 0); }
.fx-par-kader::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--accent, #A07050);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
.fx-par-kader:has(.fx-sweep-in)::after { animation: fxSweepLijn 1.05s cubic-bezier(.2,.7,.2,1) 1 both; }
@keyframes fxSweepLijn {
  0%   { left: 0; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-progress { display: none; }
  .fx-sweep { clip-path: none; transition: none; }
  img.fx-par { transform: none; }
  .fx-par-kader::after { display: none; }
}