/*
 * Effect key: ocean
 * Name: Flowing Ocean
 * Depends on: bookmark-background-effects/base.css
 * Scene: shimmer overlay plus three wave layers.
 */
.bookmark-bg-effect-swatch--ocean,
.bookmark-bg-preview--ocean,
body.bookmark-bg-effect--ocean {
    background: linear-gradient(180deg, #78c8ff 0%, #4ea8de 28%, #1976b8 58%, #0d4e80 100%);
}

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

.bookmark-bg-effect-scene--ocean::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.26), transparent 20%), linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%), linear-gradient(180deg, rgba(183, 226, 255, 0.18), rgba(183, 226, 255, 0) 22%);
}

.bookmark-bg-effect-scene--ocean::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12%;
    height: 18%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(214, 241, 255, 0.1) 56%, rgba(214, 241, 255, 0.16));
    filter: blur(20px);
    opacity: 0.72;
}

.bookmark-bg-ocean-shimmer {
    background: linear-gradient(115deg, transparent 22%, rgba(255, 255, 255, 0.16) 34%, transparent 46%), linear-gradient(130deg, transparent 52%, rgba(255, 255, 255, 0.12) 62%, transparent 72%);
    opacity: calc(0.66 * var(--bookmark-bg-scene-highlight, 1));
    animation: bookmarkOceanShimmer 16s linear infinite;
}

.bookmark-bg-wave {
    inset: auto -12% 0;
    height: 38%;
    border-radius: 50% 50% 0 0;
    transform: translateX(0);
    animation: bookmarkOceanWave 14s linear infinite, bookmarkOceanBob 7s ease-in-out infinite;
}

.bookmark-bg-wave::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 28px;
    background: radial-gradient(ellipse at 10% 100%, rgba(255, 255, 255, 0.18) 0 28%, transparent 29%), radial-gradient(ellipse at 32% 100%, rgba(255, 255, 255, 0.22) 0 30%, transparent 31%), radial-gradient(ellipse at 58% 100%, rgba(255, 255, 255, 0.18) 0 28%, transparent 29%), radial-gradient(ellipse at 82% 100%, rgba(255, 255, 255, 0.2) 0 30%, transparent 31%);
    filter: blur(1.5px);
    opacity: 0.9;
}

.bookmark-bg-wave--back {
    bottom: 17%;
    height: 24%;
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.12) 0 12%, transparent 13%), linear-gradient(180deg, rgba(69, 168, 222, 0.55), rgba(12, 85, 138, 0.72));
    background-size: 180px 56px, auto;
    opacity: calc(0.54 * var(--bookmark-bg-scene-highlight, 1));
    animation-duration: 20s, 9.5s;
}

.bookmark-bg-wave--mid {
    bottom: 8%;
    height: 27%;
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.18) 0 13%, transparent 14%), linear-gradient(180deg, rgba(45, 154, 219, 0.7), rgba(6, 77, 128, 0.86));
    background-size: 160px 64px, auto;
    opacity: calc(0.72 * var(--bookmark-bg-scene-highlight, 1));
    animation-duration: 13.5s, 7s;
}

.bookmark-bg-wave--front {
    left: -18%;
    right: -18%;
    bottom: -2%;
    height: 32%;
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.26) 0 14%, transparent 15%), linear-gradient(180deg, rgba(28, 136, 198, 0.86), rgba(6, 59, 101, 0.96));
    background-size: 140px 72px, auto;
    opacity: calc(0.84 * var(--bookmark-bg-scene-highlight, 1));
    animation-duration: 9.5s, 5.8s;
}