/*
 * Bookmark background effects base styles.
 * Shared by all bookmark background effect files.
 * Includes scene container rules, shared keyframes, and reduced-motion fallback.
 */
body {
    --bookmark-bg-scene-opacity: 1;
    --bookmark-bg-scene-highlight: 1;
}

body > .bookmark-bg-effect-scene {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    opacity: var(--bookmark-bg-scene-opacity, 1);
}

.bookmark-bg-effect-scene,
.bookmark-bg-effect-scene * {
    box-sizing: border-box;
}

.bookmark-bg-scene-layer,
.bookmark-bg-firework,
.bookmark-bg-wave,
.bookmark-bg-anime-sun,
.bookmark-bg-anime-clouds,
.bookmark-bg-anime-hills {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

@keyframes bookmarkSnowFall {
    from {
        transform: translate3d(2%, -18%, 0);
    }
    to {
        transform: translate3d(-6%, 104%, 0);
    }
}

@keyframes bookmarkSnowDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(2.5%, -1.5%, 0) scale(1.02);
    }
    100% {
        transform: translate3d(-2%, 2%, 0) scale(0.98);
    }
}

@keyframes bookmarkRainFall {
    from {
        transform: translate3d(10%, -24%, 0);
    }
    to {
        transform: translate3d(-14%, 108%, 0);
    }
}

@keyframes bookmarkLightningFlash {
    0%, 33%, 36%, 100% {
        opacity: 0;
    }
    34%, 35.2% {
        opacity: 0.7;
    }
    35.4% {
        opacity: 0.28;
    }
}

@keyframes bookmarkSparkleDrift {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-4%, 6%, 0);
    }
}

@keyframes bookmarkFireworkBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, -44%) scale(0.08);
    }
    10% {
        opacity: 1;
    }
    28% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    52% {
        opacity: 0.08;
        transform: translate(-50%, -50%) scale(1.22);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.34);
    }
}

@keyframes bookmarkFireworkGlow {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.6);
    }
    18% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1);
    }
    45% {
        opacity: 0.12;
        transform: translate(-50%, -50%) scale(1.35);
    }
}

@keyframes bookmarkOceanWave {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-10%, 0, 0);
    }
}

@keyframes bookmarkOceanBob {
    0%, 100% {
        margin-top: 0;
    }
    50% {
        margin-top: 8px;
    }
}

@keyframes bookmarkOceanShimmer {
    from {
        transform: translateX(-12%);
    }
    to {
        transform: translateX(12%);
    }
}

@keyframes bookmarkAnimeClouds {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-18%, 0, 0);
    }
}

@keyframes bookmarkAnimeSunFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(6px) scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    body {
        --bookmark-bg-scene-opacity: 0.72;
        --bookmark-bg-scene-highlight: 0.68;
    }

    .bookmark-bg-effect-scene,
    .bookmark-bg-effect-scene *,
    .bookmark-bg-scene-layer,
    .bookmark-bg-firework,
    .bookmark-bg-wave,
    .bookmark-bg-anime-sun,
    .bookmark-bg-anime-clouds,
    .bookmark-bg-anime-hills {
        animation: none !important;
        transition: none !important;
    }

    .bookmark-bg-lightning,
    .bookmark-bg-sparkle-dust,
    .bookmark-bg-ocean-shimmer {
        opacity: 0.16 !important;
    }

    .bookmark-bg-snow--far,
    .bookmark-bg-snow--mid,
    .bookmark-bg-snow--near,
    .bookmark-bg-rain--far,
    .bookmark-bg-rain--near,
    .bookmark-bg-wave--back,
    .bookmark-bg-wave--mid,
    .bookmark-bg-wave--front,
    .bookmark-bg-anime-clouds,
    .bookmark-bg-anime-sun {
        transform: none !important;
    }

    .bookmark-bg-firework {
        opacity: 0.18 !important;
        transform: translate(-50%, -50%) scale(0.72) !important;
    }
}