/*
 * Effect key: animeSky
 * CSS class suffix: anime-sky
 * Name: Anime Sky
 * Depends on: bookmark-background-effects/base.css
 * Scene: cartoon sun, clouds, and hills.
 */
.bookmark-bg-effect-swatch--anime-sky,
.bookmark-bg-preview--anime-sky,
body.bookmark-bg-effect--anime-sky {
    background: linear-gradient(180deg, #7ed7ff 0%, #8ed0ff 40%, #ffdba8 100%);
}

body.bookmark-bg-effect--anime-sky {
    background-attachment: fixed;
    --bookmark-bg-scene-opacity: 1;
    --bookmark-bg-scene-highlight: 1.06;
}

.bookmark-bg-effect-scene--anime-sky::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 34%), radial-gradient(circle at 82% 16%, rgba(255, 240, 170, 0.16), transparent 18%), linear-gradient(180deg, rgba(255, 229, 183, 0) 62%, rgba(255, 208, 147, 0.18) 100%);
}

.bookmark-bg-effect-scene--anime-sky::after {
    content: '';
    position: absolute;
    inset: auto 0 14%;
    height: 14%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 244, 214, 0.18) 55%, rgba(255, 225, 176, 0.24));
    filter: blur(24px);
    opacity: 0.78;
}

.bookmark-bg-anime-sun {
    inset: auto;
    width: 18vmin;
    height: 18vmin;
    top: 12%;
    right: 14%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 247, 177, 0.98) 0 34%, rgba(255, 210, 122, 0.88) 56%, rgba(255, 210, 122, 0) 72%);
    box-shadow: 0 0 50px rgba(255, 225, 132, calc(0.34 * var(--bookmark-bg-scene-highlight, 1)));
    animation: bookmarkAnimeSunFloat 7s ease-in-out infinite;
    filter: saturate(1.04);
}

.bookmark-bg-anime-sun::after {
    content: '';
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 243, 185, 0.36), transparent 68%);
    filter: blur(8px);
}

.bookmark-bg-anime-clouds {
    background-repeat: repeat-x;
    animation: bookmarkAnimeClouds 32s linear infinite;
    opacity: calc(0.9 * var(--bookmark-bg-scene-highlight, 1));
    filter: drop-shadow(0 10px 20px rgba(73, 122, 162, 0.08));
}

.bookmark-bg-anime-clouds--back {
    top: 8%;
    height: 36%;
    background-image: radial-gradient(circle at 14% 72%, rgba(255, 255, 255, 0.82) 0 8%, transparent 8.5%), radial-gradient(circle at 19% 68%, rgba(255, 255, 255, 0.92) 0 10%, transparent 10.5%), radial-gradient(circle at 27% 72%, rgba(255, 255, 255, 0.86) 0 8.5%, transparent 9%), radial-gradient(circle at 58% 46%, rgba(255, 255, 255, 0.7) 0 6%, transparent 6.5%), radial-gradient(circle at 64% 42%, rgba(255, 255, 255, 0.84) 0 8%, transparent 8.5%), radial-gradient(circle at 71% 46%, rgba(255, 255, 255, 0.74) 0 6.5%, transparent 7%);
    background-size: 820px 100%, 820px 100%, 820px 100%, 980px 100%, 980px 100%, 980px 100%;
    background-position: 0 0, 0 0, 0 0, 240px 0, 240px 0, 240px 0;
    filter: blur(2px);
    animation-duration: 42s;
    transform: scale(1.04);
}

.bookmark-bg-anime-clouds--front {
    top: 18%;
    height: 42%;
    background-image: radial-gradient(circle at 18% 62%, rgba(255, 255, 255, 0.98) 0 9%, transparent 9.5%), radial-gradient(circle at 25% 58%, rgba(255, 255, 255, 0.98) 0 11%, transparent 11.5%), radial-gradient(circle at 34% 62%, rgba(255, 255, 255, 0.98) 0 9%, transparent 9.5%), radial-gradient(circle at 72% 38%, rgba(255, 255, 255, 0.96) 0 8%, transparent 8.5%), radial-gradient(circle at 80% 34%, rgba(255, 255, 255, 0.98) 0 10%, transparent 10.5%), radial-gradient(circle at 88% 38%, rgba(255, 255, 255, 0.96) 0 8%, transparent 8.5%);
    background-size: 920px 100%, 920px 100%, 920px 100%, 1040px 100%, 1040px 100%, 1040px 100%;
    background-position: 0 0, 0 0, 0 0, 260px 0, 260px 0, 260px 0;
    animation-duration: 30s;
    transform: scale(1.02);
}

.bookmark-bg-anime-hills {
    inset: auto -10% -3%;
    height: 38%;
    background: radial-gradient(ellipse at 18% 100%, #78c96d 0 26%, transparent 27%), radial-gradient(ellipse at 46% 100%, #5fb864 0 30%, transparent 31%), radial-gradient(ellipse at 78% 100%, #6fc06a 0 24%, transparent 25%), linear-gradient(180deg, rgba(87, 172, 93, 0), rgba(70, 151, 83, 0.92));
    filter: saturate(calc(1.02 * var(--bookmark-bg-scene-highlight, 1)));
    box-shadow: inset 0 28px 34px rgba(255, 255, 255, 0.06);
}