/*
 * Effect key: rainfall
 * Name: Rainy Night
 * Depends on: bookmark-background-effects/base.css
 * Scene: dual rain layers with soft lightning.
 */
.bookmark-bg-effect-swatch--rainfall,
.bookmark-bg-preview--rainfall,
body.bookmark-bg-effect--rainfall {
    background: linear-gradient(180deg, #0b1120 0%, #111827 46%, #153c5a 100%);
}

body.bookmark-bg-effect--rainfall {
    background-attachment: fixed;
    --bookmark-bg-scene-opacity: 0.96;
    --bookmark-bg-scene-highlight: 0.98;
}

.bookmark-bg-effect-scene--rainfall::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 18%, rgba(99, 179, 237, 0.18), transparent 26%), radial-gradient(circle at 24% 82%, rgba(82, 162, 214, 0.14), transparent 22%), linear-gradient(180deg, rgba(6, 12, 28, 0), rgba(5, 10, 22, 0.38));
}

.bookmark-bg-effect-scene--rainfall::after {
    content: '';
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: -4%;
    height: 28%;
    background: linear-gradient(180deg, rgba(154, 203, 239, 0), rgba(154, 203, 239, 0.12) 58%, rgba(205, 227, 245, 0.22));
    filter: blur(22px);
    opacity: 0.8;
}

.bookmark-bg-rain {
    inset: -18%;
    background-repeat: repeat;
    background-size: 210px 210px;
    animation: bookmarkRainFall linear infinite;
    will-change: transform;
}

.bookmark-bg-rain--far {
    background-image: repeating-linear-gradient(120deg, rgba(174, 229, 255, 0.16) 0 2px, transparent 2px 19px), repeating-linear-gradient(120deg, rgba(143, 204, 235, 0.12) 0 1px, transparent 1px 23px);
    opacity: calc(0.32 * var(--bookmark-bg-scene-highlight, 1));
    filter: blur(0.5px);
    animation-duration: 1.48s;
}

.bookmark-bg-rain--near {
    background-image: repeating-linear-gradient(120deg, rgba(231, 247, 255, 0.54) 0 2px, transparent 2px 12px), repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.38) 0 1px, transparent 1px 15px);
    background-size: 150px 150px, 190px 190px;
    opacity: calc(0.72 * var(--bookmark-bg-scene-highlight, 1));
    animation-duration: 0.94s;
    filter: blur(0.18px);
}

.bookmark-bg-lightning {
    inset: -10%;
    background: radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.52), transparent 12%), linear-gradient(118deg, transparent 45%, rgba(207, 237, 255, 0.22) 49%, transparent 53%);
    mix-blend-mode: screen;
    animation: bookmarkLightningFlash 8.4s ease-in-out infinite;
    opacity: 0;
    filter: blur(1.6px);
}