/**
 * Site-wide oily bluish shine background + floating leaf décor
 */

:root {
    --gx-oil-deep: #0b3a52;
    --gx-oil-mid: #0e7490;
    --gx-oil-bright: #38bdf8;
    --gx-oil-glow: #7dd3fc;
    --gx-oil-foam: #e0f2fe;
    --gx-oil-ink: #0c3d4a;
}

html {
    background:
        radial-gradient(ellipse at 50% 0%, #7dd3fc 0%, #38bdf8 35%, #0ea5e9 70%, #0369a1 100%) !important;
}

/* Shared oily canvas */
body.gx-app,
body.rx-body,
body.rx-auth-body,
body.rx-auth-modern,
body.rx-landing {
    background-color: #bae6fd !important;
    background-image:
        /* gloss specular sweep */
        linear-gradient(
            118deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.08) 18%,
            transparent 32%,
            rgba(56, 189, 248, 0.18) 48%,
            transparent 58%,
            rgba(255, 255, 255, 0.35) 78%,
            rgba(255, 255, 255, 0.12) 100%
        ),
        /* oily sheen blobs */
        radial-gradient(ellipse 90% 55% at 8% -5%, rgba(186, 230, 253, 0.95) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 96% 8%, rgba(34, 211, 238, 0.55) 0%, transparent 50%),
        radial-gradient(ellipse 80% 45% at 70% 35%, rgba(14, 165, 233, 0.28) 0%, transparent 55%),
        radial-gradient(ellipse 100% 60% at 20% 95%, rgba(8, 145, 178, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 85% 85%, rgba(56, 189, 248, 0.4) 0%, transparent 50%),
        /* base oil slick */
        linear-gradient(
            165deg,
            #e0f2fe 0%,
            #bae6fd 18%,
            #7dd3fc 42%,
            #38bdf8 62%,
            #0ea5e9 82%,
            #0284c7 100%
        ) !important;
    background-attachment: fixed !important;
    color: var(--gx-oil-ink);
}

body.gx-app,
body.rx-body {
    position: relative;
}

/* Slow moving gloss */
body.gx-app::before,
body.rx-body::before,
body.rx-auth-modern::before {
    content: '';
    position: fixed;
    inset: 0;
    max-width: 430px;
    margin: 0 auto;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.28) 48%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.22) 52%,
        transparent 60%,
        transparent 100%
    );
    background-size: 220% 100%;
    animation: gxOilShine 9s ease-in-out infinite;
    opacity: 0.55;
    mix-blend-mode: soft-light;
}

@keyframes gxOilShine {
    0%, 100% { background-position: 120% 0; }
    50% { background-position: -20% 0; }
}

/* Auth / app shell surfaces sit on oil */
.rx-auth-screen,
.gx-shell {
    background:
        linear-gradient(180deg, rgba(224, 242, 254, 0.55) 0%, rgba(186, 230, 253, 0.35) 40%, rgba(125, 211, 252, 0.25) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(14, 116, 144, 0.12),
        0 28px 70px rgba(8, 80, 100, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* Waves removed — fantasy theme handles surfaces */

/* Floating leaf layer */
.gx-scene-leaves {
    position: fixed;
    inset: 0;
    max-width: 430px;
    margin: 0 auto;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.gx-scene-leaf {
    position: absolute;
    line-height: 0;
    opacity: 0.72;
    filter: drop-shadow(1px 3px 4px rgba(0, 40, 60, 0.28));
    animation: gxLeafDrift linear infinite;
    will-change: transform;
}

.gx-scene-leaf img,
.gx-scene-leaf svg {
    display: block;
    width: 100%;
    height: auto;
}

.gx-scene-leaf--a { top: 7%; left: 3%; width: 34px; animation-duration: 14s; }
.gx-scene-leaf--b { top: 16%; right: 4%; width: 30px; animation-duration: 11s; animation-delay: -2s; }
.gx-scene-leaf--c { top: 40%; left: 1%; width: 26px; animation-duration: 16s; animation-delay: -5s; opacity: 0.55; }
.gx-scene-leaf--d { top: 56%; right: 3%; width: 32px; animation-duration: 13s; animation-delay: -1s; }
.gx-scene-leaf--e { top: 72%; left: 8%; width: 24px; animation-duration: 18s; animation-delay: -7s; opacity: 0.5; }
.gx-scene-leaf--f { top: 86%; right: 10%; width: 28px; animation-duration: 15s; animation-delay: -3s; }
.gx-scene-leaf--g { top: 28%; left: 44%; width: 22px; animation-duration: 20s; animation-delay: -9s; opacity: 0.4; }
.gx-scene-leaf--h { top: 10%; left: 68%; width: 28px; animation-duration: 12s; animation-delay: -4s; }

@keyframes gxLeafDrift {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(8deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Keep UI above décor */
.rx-shell-header,
.rx-main-content,
.rx-bottom-nav,
.rx-sidebar,
.rx-overlay,
.gx-shell > *:not(.gx-waves):not(.gx-scene-leaves),
.rx-auth-screen > *:not(.rx-auth-waves):not(.gx-scene-leaves) {
    position: relative;
    z-index: 2;
}

.rx-shell-header { z-index: 10050; }
.rx-sidebar { z-index: 10060; }
.rx-overlay { z-index: 10055; }
.rx-bottom-nav { z-index: 10040; }

/* Soft glass cards over oily bg — fantasy theme owns card skins */
body.rx-body .ot-form-card,
body.rx-body .ot-bal-card,
body.rx-body .rx-dash-hero,
body.gx-app .gx-plan {
    backdrop-filter: none;
}

/* Soft moving gloss — keep UNDER content */
body.gx-app::before,
body.rx-body::before,
body.rx-auth-modern::before {
    z-index: 0 !important;
    opacity: 0.28 !important;
    pointer-events: none !important;
}

.rx-main-content,
.rx-shell-header,
.gx-shell,
.rx-auth-screen {
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    body.gx-app::before,
    body.rx-body::before,
    body.rx-auth-modern::before,
    .gx-scene-leaf {
        animation: none !important;
    }
}