/* DropX Theme: Light — effects */
body.theme-light { --theme-transition: 180ms cubic-bezier(.2,.7,.2,1); }

/* --------------------------------------------------------------------------
   LIGHT BACKGROUND — soft champagne silk / topographic haze
   This background belongs exclusively to the Light theme.
   No dark-theme wave graphics are shared here.
   -------------------------------------------------------------------------- */
body.theme-light::before,
body.light-mode::before {
    content: "";
    position: fixed;
    inset: -8vh -8vw;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 42% 28% at 14% 18%, rgba(255,248,235,.34), transparent 72%),
        radial-gradient(ellipse 38% 30% at 86% 72%, rgba(149,102,28,.075), transparent 73%),
        radial-gradient(ellipse 52% 34% at 52% 106%, rgba(255,249,238,.20), transparent 74%);
    opacity: .92;
}

body.theme-light::after,
body.light-mode::after {
    content: "";
    position: fixed;
    inset: -18vh -14vw;
    z-index: 0;
    pointer-events: none;
    transform: translate3d(0,0,0) scale(1.02);
    will-change: transform, background-position;
    background:
        radial-gradient(ellipse 84% 28% at 8% 14%, transparent 0 73.2%, rgba(255,249,238,.30) 73.45%, rgba(149,102,28,.035) 73.8%, transparent 74.4%),
        radial-gradient(ellipse 70% 25% at 94% 36%, transparent 0 72%, rgba(255,246,229,.24) 72.3%, rgba(149,102,28,.035) 72.7%, transparent 73.3%),
        radial-gradient(ellipse 92% 31% at 22% 79%, transparent 0 74%, rgba(125,101,76,.095) 74.25%, rgba(255,248,235,.15) 74.65%, transparent 75.25%),
        radial-gradient(ellipse 56% 21% at 78% 91%, transparent 0 71%, rgba(149,102,28,.055) 71.3%, transparent 72.1%),
        radial-gradient(circle at 18% 66%, rgba(255,255,255,.13), transparent 28%),
        radial-gradient(circle at 82% 20%, rgba(255,255,255,.10), transparent 25%);
    animation: dxLightSilkDrift 44s ease-in-out infinite alternate;
    opacity: .82;
}

@keyframes dxLightSilkDrift {
    0% {
        transform: translate3d(-1.2%,-.55%,0) scale(1.025) rotate(-.08deg);
    }
    50% {
        transform: translate3d(.65%,.35%,0) scale(1.04) rotate(.05deg);
    }
    100% {
        transform: translate3d(1.25%,-.25%,0) scale(1.025) rotate(.08deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.theme-light::after,
    body.light-mode::after {
        animation: none;
        transform: none;
    }
}