/* =========================================================
   Decorative theme effects
   All elements are non-interactive and remain behind content.
   ========================================================= */

.theme-effects {
    opacity: var(--effect-intensity);
    contain: strict;
    overflow: hidden;
    overflow: clip;
    pointer-events: none;
}
html[data-effects="off"] .theme-effects { display: none; }

.theme-effect,
.ocean-seabed,
.ocean-seabed::before,
.ocean-seabed::after {
    position: absolute;
    display: block;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
}

/* Classic: soft geometry and slow light */
.classic-particle {
    inset-inline-start: var(--x);
    inset-block-start: var(--y);
    width: var(--size);
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--secondary) 8%, transparent);
    animation: classicFloat var(--duration) ease-in-out var(--delay) infinite alternate;
}
@keyframes classicFloat {
    from { transform: translate3d(0, 0, 0) rotate(0); opacity: .25; }
    to { transform: translate3d(var(--drift), -44px, 0) rotate(var(--rotate)); opacity: .8; }
}

/* Luxury: gold sparks and art-deco sheen */
.gold-spark {
    inset-inline-start: var(--x);
    inset-block-start: var(--y);
    width: clamp(3px, calc(var(--size) / 5), 8px);
    aspect-ratio: 1;
    transform: rotate(45deg);
    background: radial-gradient(circle, #fff4bb 0 14%, #d8aa46 38%, transparent 72%);
    filter: drop-shadow(0 0 5px rgba(216, 170, 70, .58));
    animation: goldTwinkle var(--duration) ease-in-out var(--delay) infinite;
}
@keyframes goldTwinkle {
    0%, 100% { transform: translateY(12px) rotate(45deg) scale(.55); opacity: .12; }
    45% { transform: translateY(-24px) rotate(135deg) scale(1.1); opacity: .92; }
}

/* Minimal: almost still, very subtle orbs */
.minimal-orb {
    inset-inline-start: var(--x);
    inset-block-start: var(--y);
    width: clamp(22px, var(--size), 70px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    filter: blur(4px);
    animation: minimalBreathe var(--duration) ease-in-out var(--delay) infinite alternate;
}
@keyframes minimalBreathe { from { opacity: .08; transform: scale(.82); } to { opacity: .28; transform: scale(1.15); } }

/* High-tech: data nodes and scan lines */
html[data-theme="hightech"] .theme-effects::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 0 49%, color-mix(in srgb, var(--accent) 18%, transparent) 50%, transparent 51% 100%);
    background-size: 100% 7px;
    opacity: .18;
    animation: dataScan 8s linear infinite;
}
.data-node {
    inset-inline-start: var(--x);
    inset-block-start: var(--y);
    width: clamp(5px, calc(var(--size) / 3), 12px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent), 0 0 18px color-mix(in srgb, var(--secondary) 70%, transparent);
    animation: nodePulse var(--duration) ease-in-out var(--delay) infinite;
}
.data-node::after {
    content: '';
    position: absolute;
    width: clamp(28px, 7vw, 96px);
    height: 1px;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 52%, transparent), transparent);
    transform: rotate(var(--rotate));
    transform-origin: left center;
}
@keyframes dataScan { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
@keyframes nodePulse { 0%, 100% { opacity: .22; transform: scale(.6); } 50% { opacity: .95; transform: scale(1.12); } }

/* Nature: leaves fall from top and rotate gently */
.falling-leaf {
    inset-inline-start: var(--x);
    inset-block-start: -12%;
    width: var(--size);
    aspect-ratio: 1.6;
    border-radius: 100% 0 100% 0;
    background: linear-gradient(135deg, #b7c96d, #4f8a53 58%, #2f653c);
    box-shadow: inset -2px -2px 4px rgba(37, 75, 40, .22);
    transform-origin: center;
    animation: leafFall var(--duration) linear var(--delay) infinite;
}
.falling-leaf::after {
    content: '';
    position: absolute;
    inset-inline-start: 48%;
    inset-block-start: 7%;
    width: 1px;
    height: 86%;
    background: rgba(44, 83, 47, .48);
    transform: rotate(-42deg);
}
@keyframes leafFall {
    0% { transform: translate3d(0, -12vh, 0) rotate(0); opacity: 0; }
    10% { opacity: .9; }
    100% { transform: translate3d(var(--drift), 118vh, 0) rotate(var(--rotate)); opacity: .18; }
}

/* Floral: soft petals */
.falling-petal {
    inset-inline-start: var(--x);
    inset-block-start: -12%;
    width: var(--size);
    aspect-ratio: 1.4;
    border-radius: 70% 30% 70% 30%;
    background: linear-gradient(135deg, #ffd7e4, #ec91b2 60%, #c35c84);
    box-shadow: inset 2px 2px 5px rgba(255, 255, 255, .42);
    animation: petalFall var(--duration) ease-in var(--delay) infinite;
}
@keyframes petalFall {
    0% { transform: translate3d(0, -12vh, 0) rotate(0) scale(.72); opacity: 0; }
    12% { opacity: .88; }
    100% { transform: translate3d(var(--drift), 116vh, 0) rotate(var(--rotate)) scale(1.05); opacity: .12; }
}

/* Custom: gradient glows derived from admin colors */
.custom-glow {
    inset-inline-start: var(--x);
    inset-block-start: var(--y);
    width: clamp(44px, 10vw, 148px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 35%, transparent), color-mix(in srgb, var(--secondary) 8%, transparent) 55%, transparent 72%);
    filter: blur(8px);
    animation: customGlow var(--duration) ease-in-out var(--delay) infinite alternate;
}
@keyframes customGlow { from { transform: translate3d(-18px, 12px, 0) scale(.8); opacity: .18; } to { transform: translate3d(var(--drift), -28px, 0) scale(1.18); opacity: .72; } }

/* Ocean bubbles */
.ocean-bubble {
    inset-inline-start: var(--x);
    inset-block-start: 108%;
    width: clamp(5px, var(--size), 26px);
    aspect-ratio: 1;
    border: 1px solid rgba(224, 252, 255, .66);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .72), rgba(255, 255, 255, .08) 42%, transparent 70%);
    box-shadow: inset 0 0 4px rgba(255, 255, 255, .34);
    animation: bubbleRise var(--duration) linear var(--delay) infinite;
}
@keyframes bubbleRise {
    0% { transform: translate3d(0, 8vh, 0) scale(.66); opacity: 0; }
    12% { opacity: .85; }
    100% { transform: translate3d(var(--drift), -125vh, 0) scale(1.05); opacity: .08; }
}

/* Ocean fish: tail and eye are swapped by direction so fish always faces travel direction. */
.sea-fish {
    width: clamp(24px, var(--size), 66px);
    aspect-ratio: 2 / 1;
    font-size: var(--size);
    border-radius: 52% 48% 48% 52%;
    background: linear-gradient(135deg, #ffcb6b, #f57c68 55%, #b74b72);
    box-shadow: inset 0 -4px 8px rgba(72, 35, 85, .24), 0 0 8px rgba(222, 250, 255, .16);
}
.sea-fish::before {
    content: '';
    position: absolute;
    inset-block-start: 18%;
    width: 0;
    height: 0;
    border-block-start: .34em solid transparent;
    border-block-end: .34em solid transparent;
}
.sea-fish::after {
    content: '';
    position: absolute;
    inset-block-start: 25%;
    width: clamp(2px, .14em, 5px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #18202b;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
}
.sea-fish.swim-right {
    inset-inline-start: -14%;
    inset-block-start: var(--y);
    animation: fishSwimRight var(--duration) linear var(--delay) infinite;
}
.sea-fish.swim-right::before {
    inset-inline-start: -.48em;
    border-inline-end: .56em solid #d75c76;
}
.sea-fish.swim-right::after { inset-inline-end: 17%; }
.sea-fish.swim-left {
    inset-inline-end: -14%;
    inset-block-start: var(--y);
    animation: fishSwimLeft var(--duration) linear var(--delay) infinite;
}
.sea-fish.swim-left::before {
    inset-inline-end: -.48em;
    border-inline-start: .56em solid #d75c76;
}
.sea-fish.swim-left::after { inset-inline-start: 17%; }
@keyframes fishSwimRight {
    0% { transform: translate3d(-8vw, 0, 0) rotate(-2deg); opacity: 0; }
    8% { opacity: .86; }
    50% { transform: translate3d(58vw, -18px, 0) rotate(2deg); }
    100% { transform: translate3d(126vw, 8px, 0) rotate(-2deg); opacity: .12; }
}
@keyframes fishSwimLeft {
    0% { transform: translate3d(8vw, 0, 0) rotate(2deg); opacity: 0; }
    8% { opacity: .86; }
    50% { transform: translate3d(-58vw, 16px, 0) rotate(-2deg); }
    100% { transform: translate3d(-126vw, -8px, 0) rotate(2deg); opacity: .12; }
}

/* Ocean seabed: sand, coral and swaying seaweed */
.ocean-seabed {
    inset-inline: 0;
    inset-block-end: 0;
    height: 90px;
    background:
        radial-gradient(ellipse at 10% 100%, #cf7b68 0 8px, transparent 9px),
        radial-gradient(ellipse at 86% 100%, #f2b579 0 9px, transparent 10px),
        linear-gradient(180deg, transparent 0 34%, rgba(218, 185, 126, .72) 35%, rgba(176, 137, 83, .86) 100%);
    opacity: .8;
}
.ocean-seabed::before,
.ocean-seabed::after {
    content: '';
    inset-block-end: 30px;
    width: 12px;
    height: 78px;
    border-radius: 100% 0 100% 0;
    background: linear-gradient(180deg, #35a98f, #116d68);
    transform-origin: bottom center;
    animation: seaweedSway 4.8s ease-in-out infinite alternate;
}
.ocean-seabed::before { inset-inline-start: 12%; }
.ocean-seabed::after { inset-inline-end: 13%; animation-delay: -2.1s; }
@keyframes seaweedSway { from { transform: rotate(-8deg) skewY(-6deg); } to { transform: rotate(10deg) skewY(5deg); } }

.ocean-light-ray {
    inset-block-start: -15%;
    inset-inline-start: var(--x);
    width: clamp(80px, 18vw, 240px);
    height: 120vh;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 70%);
    filter: blur(14px);
    transform: rotate(12deg);
    animation: raySway var(--duration) ease-in-out var(--delay) infinite alternate;
    opacity: .6;
}
@keyframes raySway {
    from { transform: translateX(-8vw) rotate(10deg); }
    to { transform: translateX(12vw) rotate(16deg); }
}

html[data-theme="ocean"] .master-header,
html[data-theme="ocean"] .master-footer {
    position: relative;
    overflow: hidden;
}
html[data-theme="ocean"] .master-header::before,
html[data-theme="ocean"] .master-header::after,
html[data-theme="ocean"] .master-footer::before,
html[data-theme="ocean"] .master-footer::after {
    pointer-events: none;
}
html[data-theme="ocean"] .master-header::before {
    content: "🐟  ◌  🐠  ◌";
    position: absolute;
    inset-inline-end: 4%;
    inset-block-start: 8px;
    font-size: 20px;
    letter-spacing: 12px;
    opacity: calc(var(--background-intensity) * .35);
    white-space: nowrap;
    z-index: 0;
}
html[data-theme="ocean"] .master-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 12px;
    background: radial-gradient(24px 8px at 50% 0, transparent 48%, var(--primary) 50% 54%, transparent 56%) 0 0 / 48px 10px repeat-x;
    opacity: calc(var(--background-intensity) * .65);
    z-index: 0;
}
html[data-theme="ocean"] .master-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 18px;
    background: linear-gradient(180deg, transparent, #d9bd82 70%);
    opacity: calc(var(--background-intensity) * .85);
    z-index: 0;
}
html[data-theme="ocean"] .master-footer::after {
    content: "🪸  🌿  🐚  ⭐  🪸";
    position: absolute;
    inset-inline-end: 4%;
    inset-block-end: 4px;
    font-size: 28px;
    letter-spacing: 8px;
    opacity: calc(var(--background-intensity) * .55);
    white-space: nowrap;
    z-index: 0;
}
html[data-theme="ocean"] .header-container,
html[data-theme="ocean"] .footer-content,
html[data-theme="ocean"] .footer-container {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .theme-effects { opacity: var(--effect-intensity); }
    .ocean-seabed { height: 66px; }
    .sea-fish { max-width: 46px; max-height: 24px; }
    .ocean-light-ray:nth-of-type(n+2) { display: none; }
    html[data-theme="ocean"] .master-header::before { font-size: 16px; letter-spacing: 8px; inset-inline-end: 2%; }
    html[data-theme="ocean"] .master-footer::after { font-size: 22px; letter-spacing: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }
    .theme-effects { display: none !important; }
    .theme-effect,
    .ocean-seabed::before,
    .ocean-seabed::after { animation: none !important; }
}

.classic-particle:nth-child(even) { border-radius: 50%; }

/* =========================================================
   Ocean theme imported from the user-supplied assets.zip
   Class names, motion, fish direction, bubbles and seaweed
   follow assets/css/theme-effects.css and assets/js/theme.js.
   ========================================================= */
html[data-theme="ocean"] .fx-bubble {
    width: var(--fx-size, 12px);
    height: var(--fx-size, 12px);
    border: 1.5px solid rgba(255,255,255,.8);
    border-radius: 50%;
    box-shadow: inset 2px 2px 3px rgba(255,255,255,.45), 0 0 6px rgba(65,203,225,.35);
    animation: oceanAssetBubbleRise var(--fx-duration,10s) linear infinite;
}
html[data-theme="ocean"] .fx-fish {
    font-size: var(--fx-size,28px);
    line-height: 1;
    filter: drop-shadow(0 3px 3px rgba(0,70,85,.2));
    animation: oceanAssetFishLTR var(--fx-duration,16s) linear infinite;
}
html[data-theme="ocean"] .fx-fish.is-reverse { animation-name: oceanAssetFishRTL; }
html[data-theme="ocean"] .fx-seaweed {
    bottom: -8px;
    font-size: var(--fx-size,54px);
    transform-origin: 50% 100%;
    animation: oceanAssetSeaweedSway var(--fx-duration,5s) ease-in-out infinite alternate;
}
html[data-theme="ocean"] .fx-light-ray {
    top: -15%;
    width: 18vw;
    height: 120vh;
    background: linear-gradient(180deg,rgba(255,255,255,.22),transparent 70%);
    filter: blur(14px);
    transform: rotate(12deg);
    animation: oceanAssetRaySway 10s ease-in-out infinite alternate;
}
@keyframes oceanAssetBubbleRise {
    0% { transform: translate3d(0,112vh,0) scale(.55); opacity: 0; }
    15% { opacity: .9; }
    100% { transform: translate3d(24px,-15vh,0) scale(1.25); opacity: 0; }
}
@keyframes oceanAssetFishLTR {
    from { transform: translate3d(-18vw,0,0) scaleX(-1); }
    to { transform: translate3d(118vw,0,0) scaleX(-1); }
}
@keyframes oceanAssetFishRTL {
    from { transform: translate3d(118vw,0,0) scaleX(1); }
    to { transform: translate3d(-18vw,0,0) scaleX(1); }
}
@keyframes oceanAssetSeaweedSway { from { transform: rotate(-6deg); } to { transform: rotate(7deg); } }
@keyframes oceanAssetRaySway { from { transform: translateX(-8vw) rotate(10deg); } to { transform: translateX(12vw) rotate(16deg); } }

html[data-theme="ocean"] .master-header::before {
    content: "🐟  ◌  🐠  ◌";
    position: absolute;
    right: 4%;
    top: 8px;
    font-size: 20px;
    letter-spacing: 12px;
    opacity: calc(var(--background-intensity, .35) * .42);
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
}
html[data-theme="ocean"] .master-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 12px;
    background: radial-gradient(24px 8px at 50% 0,transparent 48%,var(--primary) 50% 54%,transparent 56%) 0 0/48px 10px repeat-x;
    opacity: calc(var(--background-intensity, .35) * .75);
    pointer-events: none;
    z-index: 0;
}
html[data-theme="ocean"] .master-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 18px;
    background: linear-gradient(180deg,transparent,#d9bd82 70%);
    opacity: calc(var(--background-intensity, .35) * .75);
    pointer-events: none;
    z-index: 0;
}
html[data-theme="ocean"] .master-footer::after {
    content: "🪸  🌿  🐚  ⭐  🪸";
    position: absolute;
    right: 4%;
    bottom: 4px;
    font-size: 28px;
    letter-spacing: 8px;
    opacity: calc(var(--background-intensity, .35) * .7);
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
}
html[data-theme="ocean"] .header-container,
html[data-theme="ocean"] .footer-container,
html[data-theme="ocean"] .footer-content { position: relative; z-index: 1; }

@media (max-width: 700px) {
    html[data-theme="ocean"] .fx-light-ray:nth-of-type(n+2) { display: none; }
    html[data-theme="ocean"] .master-header::before { font-size: 16px; letter-spacing: 8px; right: 2%; }
    html[data-theme="ocean"] .master-footer::after { font-size: 22px; letter-spacing: 5px; }
}