/*
 * Effect key: snowfall
 * Name: Snowfall Sky
 * Depends on: bookmark-background-effects/base.css
 * Scene: layered snow particles.
 */
.bookmark-bg-effect-swatch--snowfall,
.bookmark-bg-preview--snowfall,
body.bookmark-bg-effect--snowfall {
    background: linear-gradient(180deg, #10203f 0%, #16325e 52%, #274b78 100%);
}

body.bookmark-bg-effect--snowfall {
    background-attachment: fixed;
    --bookmark-bg-scene-opacity: 1;
    --bookmark-bg-scene-highlight: 1.04;
}

.bookmark-bg-effect-scene--snowfall::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.18), transparent 30%);
    opacity: calc(0.8 * var(--bookmark-bg-scene-highlight, 1));
}

.bookmark-bg-effect-scene--snowfall::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 34%;
    background: linear-gradient(180deg, rgba(214, 231, 255, 0), rgba(205, 226, 255, 0.08) 40%, rgba(198, 221, 255, 0.16));
    filter: blur(18px);
    opacity: 0.85;
}

.bookmark-bg-snow {
    inset: -18%;
    background-repeat: repeat;
    animation-name: bookmarkSnowFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.bookmark-bg-snow::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    background-repeat: repeat;
    opacity: 0.34;
    filter: blur(0.8px);
    animation: bookmarkSnowDrift 8.5s ease-in-out infinite alternate;
}

.bookmark-bg-snow--far {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(255, 255, 255, 0.4) 0 1.2px, transparent 1.8px);
    background-size: 170px 170px, 220px 220px;
    background-position: 12px 18px, 86px 112px;
    animation-duration: 34s;
    opacity: calc(0.44 * var(--bookmark-bg-scene-highlight, 1));
    filter: blur(0.2px);
}

.bookmark-bg-snow--mid {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 1.5px, transparent 2px), radial-gradient(circle, rgba(255, 255, 255, 0.68) 0 1.8px, transparent 2.3px);
    background-size: 132px 132px, 172px 172px;
    background-position: 18px 24px, 94px 108px;
    animation-duration: 23s;
    opacity: calc(0.7 * var(--bookmark-bg-scene-highlight, 1));
}

.bookmark-bg-snow--near {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 2.1px, transparent 2.9px), radial-gradient(circle, rgba(255, 255, 255, 0.82) 0 2.8px, transparent 3.6px);
    background-size: 88px 88px, 138px 138px;
    background-position: 20px 10px, 74px 84px;
    animation-duration: 16s;
    opacity: calc(0.82 * var(--bookmark-bg-scene-highlight, 1));
    filter: blur(0.3px);
}