/* Podcast Website · hero-motion
   Motionlaag in figure[data-motion-stage="podcast-website-hero"] > [data-motion-layer].
   Laden na de paginastijlen. Alleen bestaande --sc-*-tokens, met de waarde uit tokens.css a321806 als terugval.
   Plaats, maat, rand, radius en schaduw van de twee vensters neemt het script over van de statische frames. */

/* De statische frames wijken zolang de laag actief is. Ze blijven in de DOM, dus de alt-tekst blijft beschikbaar. */
[data-motion-stage][data-motion-state="playing"] > [data-motion-static],
[data-motion-stage][data-motion-state="paused"] > [data-motion-static] { opacity: 0; }

[data-motion-layer] { position: absolute; inset: 0; pointer-events: none; }
[data-motion-layer][hidden] { display: none; }

.pwm-window { position: absolute; box-sizing: border-box; overflow: hidden; }

/* Editor: vaste maat van de capture (1600 × 1000), geschaald naar het venster. De camera beweegt daarbinnen. */
.pwm-scaler { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; transform-origin: 0 0; transform: scale(var(--pwm-s, 1)); }
.pwm-camera { position: absolute; inset: 0; transform-origin: 0 0; }
.pwm-editor,
.pwm-focus { background-image: var(--pwm-url-editor); background-repeat: no-repeat; background-size: 1600px 1000px; }
.pwm-editor { position: absolute; inset: 0; }

/* Uitlichting: een lichte waas over de rest en een kopie van de eigen pixels van het element, op zijn eigen plek. */
.pwm-veil { position: absolute; inset: 0; background: var(--sc-bg-canvas, #FBF9F5); opacity: 0; }
.pwm-focus { position: absolute; opacity: 0; box-shadow: var(--sc-shadow-elevated, 0 12px 32px rgba(21, 18, 13, 0.08)); }

/* Sitepreview desktop (bovenste 1440 × 900) en mobiel. */
.pwm-site { position: absolute; inset: 0; background: var(--pwm-url-site) left top / 100% auto no-repeat; opacity: 0; }
.pwm-phone { position: absolute; inset: 0; background: var(--pwm-url-phone) left top / 100% auto no-repeat; }

[data-motion-state="playing"] .pwm-camera { will-change: transform; }
[data-motion-state="playing"] .pwm-veil,
[data-motion-state="playing"] .pwm-focus,
[data-motion-state="playing"] .pwm-site,
[data-motion-state="playing"] .pwm-window[data-pwm="phone"] { will-change: opacity; }

/* Vangnet zonder script: bij reduced motion en bij afdrukken staat altijd de statische compositie. */
@media (prefers-reduced-motion: reduce) {
  [data-motion-layer] { display: none !important; }
  [data-motion-stage] > [data-motion-static] { opacity: 1 !important; }
}
@media print {
  [data-motion-layer] { display: none !important; }
  [data-motion-stage] > [data-motion-static] { opacity: 1 !important; }
}