/*
 * Effect key: fireworks
 * Name: Fireworks Show
 * Depends on: bookmark-background-effects/base.css
 * Scene: sparkle dust plus rotating fireworks bursts.
 */
.bookmark-bg-effect-swatch--fireworks,
.bookmark-bg-preview--fireworks,
body.bookmark-bg-effect--fireworks {
    background: linear-gradient(180deg, #090b1a 0%, #120f2d 52%, #1c1238 100%);
}

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

.bookmark-bg-effect-scene--fireworks::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 11, 28, 0) 0%, rgba(10, 11, 28, 0.18) 65%, rgba(10, 11, 28, 0.4) 100%), radial-gradient(circle at 50% 100%, rgba(255, 180, 76, 0.12), transparent 32%), radial-gradient(circle at 34% 18%, rgba(122, 173, 255, 0.08), transparent 16%);
}

.bookmark-bg-effect-scene--fireworks::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 24%;
    background: linear-gradient(180deg, rgba(255, 213, 150, 0), rgba(255, 213, 150, 0.08) 48%, rgba(255, 186, 113, 0.14));
    filter: blur(26px);
    opacity: 0.78;
}

.bookmark-bg-sparkle-dust {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(255, 236, 179, 0.76) 0 1px, transparent 1.7px);
    background-size: 140px 140px, 190px 190px;
    background-position: 20px 22px, 88px 126px;
    animation: bookmarkSparkleDrift 24s linear infinite;
    opacity: calc(0.24 * var(--bookmark-bg-scene-highlight, 1));
    filter: blur(0.3px);
}

.bookmark-bg-firework {
    width: 24vmin;
    height: 24vmin;
    inset: auto;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 4%, transparent 5%), repeating-conic-gradient(from 0deg, rgba(255, 209, 102, 0.98) 0 8deg, transparent 8deg 22deg, rgba(255, 107, 107, 0.98) 22deg 30deg, transparent 30deg 44deg, rgba(78, 205, 196, 0.98) 44deg 52deg, transparent 52deg 66deg, rgba(125, 211, 252, 0.98) 66deg 74deg, transparent 74deg 88deg);
    mask: radial-gradient(circle, transparent 0 11%, #000 19% 34%, transparent 36% 100%);
    -webkit-mask: radial-gradient(circle, transparent 0 11%, #000 19% 34%, transparent 36% 100%);
    mix-blend-mode: screen;
    animation: bookmarkFireworkBurst 6.2s ease-out infinite;
    filter: saturate(1.16) brightness(calc(1.02 * var(--bookmark-bg-scene-highlight, 1)));
}

.bookmark-bg-firework::before,
.bookmark-bg-firework::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.bookmark-bg-firework::before {
    width: 36%;
    height: 36%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 226, 148, 0.18) 58%, transparent 74%);
    mix-blend-mode: screen;
    animation: bookmarkFireworkGlow 6.2s ease-out infinite;
    animation-delay: var(--bookmark-firework-delay, 0s);
}

.bookmark-bg-firework::after {
    width: 9%;
    height: 44%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 245, 215, 0), rgba(255, 245, 215, 0.6) 48%, rgba(255, 255, 255, 0.96));
    filter: blur(1px);
    transform: translate(-50%, -10%) rotate(180deg);
    opacity: 0;
    animation: bookmarkFireworkGlow 6.2s ease-out infinite;
    animation-delay: var(--bookmark-firework-delay, 0s);
}

.bookmark-bg-firework--one {
    top: 25%;
    left: 22%;
    --bookmark-firework-delay: 0s;
    animation-delay: 0s;
    width: 22vmin;
    height: 22vmin;
}

.bookmark-bg-firework--two {
    top: 20%;
    left: 74%;
    --bookmark-firework-delay: 1.3s;
    animation-delay: 1.3s;
    width: 26vmin;
    height: 26vmin;
}

.bookmark-bg-firework--three {
    top: 48%;
    left: 52%;
    --bookmark-firework-delay: 2.8s;
    animation-delay: 2.8s;
    width: 20vmin;
    height: 20vmin;
}

.bookmark-bg-firework--four {
    top: 32%;
    left: 44%;
    --bookmark-firework-delay: 4.1s;
    animation-delay: 4.1s;
    width: 28vmin;
    height: 28vmin;
}