/**
 * theme_effects.css — shared keyframes for the Theme Effects Engine
 * (js/theme_effects.js). One keyframe set per movement type; every visual
 * variation (size, speed, drift, rotation, opacity) comes from CSS custom
 * properties the engine sets per-element, not from extra keyframes.
 *
 * The effects layers never intercept input: pointer-events:none on the
 * containers AND every spawned object, regardless of visual stacking.
 */

.pl-fx-layer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.pl-fx-bg { z-index: 1; }
.pl-fx-fg { z-index: 9999; }

.pl-fx-obj {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.pl-fx-obj svg { display: block; width: 100%; height: 100%; }

/* Tab hidden — engine adds this to <body>; pauses without destroying state. */
body[data-effects-paused] .pl-fx-obj { animation-play-state: paused !important; }

@keyframes pl-fx-fall {
    0%   { transform: translate(var(--sx, 0), -10vh) rotate(var(--r0, 0deg)); opacity: var(--op, 1); }
    100% { transform: translate(var(--ex, 0), 110vh) rotate(var(--r1, 0deg)); opacity: var(--op, 1); }
}

@keyframes pl-fx-rise {
    0%   { transform: translate(var(--sx, 0), 110vh) rotate(var(--r0, 0deg)); opacity: 0; }
    12%  { opacity: var(--op, 1); }
    100% { transform: translate(var(--ex, 0), -10vh) rotate(var(--r1, 0deg)); opacity: var(--op, 1); }
}

@keyframes pl-fx-float {
    0%   { transform: translate(var(--sx, 0), var(--sy, 0)); }
    25%  { transform: translate(var(--x1, 12px), var(--y1, -16px)); }
    50%  { transform: translate(var(--x2, -10px), var(--y2, 10px)); }
    75%  { transform: translate(var(--x3, 8px), var(--y3, 14px)); }
    100% { transform: translate(var(--sx, 0), var(--sy, 0)); }
}

@keyframes pl-fx-bounce {
    0%   { transform: translate(var(--sx, 0), 0) scaleY(1); }
    15%  { transform: translate(var(--bx1, 0), -34px) scaleY(1.05); }
    30%  { transform: translate(var(--bx1, 0), 0) scaleY(0.88); }
    45%  { transform: translate(var(--bx2, 0), -20px) scaleY(1.02); }
    60%  { transform: translate(var(--bx2, 0), 0) scaleY(0.94); }
    75%  { transform: translate(var(--bx2, 0), -9px) scaleY(1); }
    100% { transform: translate(var(--bx2, 0), 0) scaleY(1); }
}

@keyframes pl-fx-roll {
    0%   { transform: translate(var(--sx, -10vw), 0) rotate(0deg); }
    100% { transform: translate(var(--ex, 110vw), 0) rotate(var(--spin, 720deg)); }
}

@keyframes pl-fx-fly-across {
    0%   { transform: translate(var(--sx, -10vw), var(--sy, 0)) rotate(var(--r0, 0deg)); opacity: 0; }
    10%  { opacity: var(--op, 1); }
    90%  { opacity: var(--op, 1); }
    100% { transform: translate(var(--ex, 110vw), var(--ey, 0)) rotate(var(--r1, 0deg)); opacity: 0; }
}

/* Drift reuses the float motion shape at a slower, longer-running pace (set via animation-duration). */
@keyframes pl-fx-drift {
    0%   { transform: translate(var(--sx, 0), var(--sy, 0)); }
    33%  { transform: translate(var(--x1, 18px), var(--y1, -10px)); }
    66%  { transform: translate(var(--x2, -14px), var(--y2, 16px)); }
    100% { transform: translate(var(--sx, 0), var(--sy, 0)); }
}

@keyframes pl-fx-twinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.7); }
    50%      { opacity: var(--op, 1); transform: scale(1); }
}

@keyframes pl-fx-confetti {
    0%   { transform: translate(0, -10vh) rotate(0deg); opacity: var(--op, 1); }
    100% { transform: translate(var(--ex, 0), 110vh) rotate(var(--rot, 720deg)); opacity: 0; }
}