/*
 * Warstwy ruchu spoza motywu (p92, kontrakt partii H R24; ADR „Ruch na stronie”): tło z efektem
 * (warstwa efektu, welon), ukrycie efektu w trybie uproszczonym i w druku oraz zapasowy przycisk
 * pauzy. Linkuje go dokument z efektem albo innym źródłem ruchu spoza motywu (znacznik `loop`,
 * `lib/design/document-motion.ts`) - arkusze motywów zostają bez zmian. Tylko tokeny motywu.
 */

/* Korzeń sekcji z efektem: warstwa `.sg-bg` (z-index: -1) zostaje pod treścią tej sekcji. */
[data-sg-bg='effect'] {
    position: relative;
    isolation: isolate;
}

/* Efekt nad obrazem `under` i jego nakładką (`.sg-bg::after`, z-index: 2), pod welonem. */
.sg-bg__fx {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: var(--sg-fx-opacity, 0.5);
    pointer-events: none;
    contain: strict;
}

.sg-bg__fx > canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.sg-bg__veil {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: color-mix(in oklab, var(--sec-panel) var(--sg-fx-veil, 0%), transparent);
}

/* Tryb uproszczony zdejmuje efekt jak ozdobniki (R19); tło pod spodem i welon zostają. */
:root.sg-a11y .sg-bg__fx {
    display: none;
}

@media print {
    .sg-bg__fx {
        display: none;
    }
}

/* Zapasowy przycisk pauzy (R8) - kopia reguł z `lib/design/modules/motion.ts` (MOTION_TOGGLE_CSS). */
.sg-motion-host {
    position: relative;
}
.sg-motion-toggle {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 5;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: var(--border-w) solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
}
.sg-motion-toggle svg {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
}
.sg-motion-toggle__play,
:root.sg-motion-paused .sg-motion-toggle__pause {
    display: none;
}
:root.sg-motion-paused .sg-motion-toggle__play {
    display: block;
}
.sg-motion-toggle:focus-visible {
    outline: var(--focus-ring-w) solid var(--accent-ui);
    outline-offset: var(--focus-ring-offset);
}

/* `display: inline-grid` wygrywa z atrybutem `hidden` - przycisk ukryty ma zniknąć. */
.sg-motion-toggle[hidden] {
    display: none;
}