/**
 * Global ambient background - slow visible drift (still calm / premium).
 * html: vertical gradient slowly scrolls; ::before: soft light orbits via transform.
 */

html.aligali-ambient {
    min-height: 100%;
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    background-color: #faf7f5;
    background-image: linear-gradient(
        185deg,
        #faf7f5 0%,
        #f6eee8 28%,
        #faf9f6 55%,
        #f4ede6 78%,
        #faf7f5 100%
    );
    background-size: 100% 340%;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    animation: aligali-ambient-sheen 72s ease-in-out infinite alternate;
}

@keyframes aligali-ambient-sheen {
    0% {
        background-position: 50% 0%;
    }
    100% {
        background-position: 50% 88%;
    }
}

/* Moving soft light - GPU transform */
html.aligali-ambient::before {
    content: "";
    position: fixed;
    /* inset שלילי גדול + תזוזה אופקית ב־keyframes דוחפים מעבר ל־viewport וגורמים לגלילה אופקית */
    inset: -8%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 56% 46% at 35% 30%, rgba(184, 90, 58, 0.09), transparent 64%),
        radial-gradient(ellipse 50% 42% at 78% 72%, rgba(255, 255, 255, 0.58), transparent 62%),
        radial-gradient(ellipse 74% 58% at 48% 108%, rgba(250, 247, 243, 0.4), transparent 74%);
    transform: translate3d(0, 0, 0) scale(1.02);
    animation: aligali-ambient-drift 56s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes aligali-ambient-drift {
    0% {
        transform: translate3d(-1.2%, -2.5%, 0) scale(1.03) rotate(0.01deg);
    }
    50% {
        transform: translate3d(0.6%, 1.4%, 0) scale(1.04) rotate(0deg);
    }
    100% {
        transform: translate3d(1.2%, 2.8%, 0) scale(1.05) rotate(-0.01deg);
    }
}

html.aligali-ambient body {
    position: relative;
    z-index: 1;
    background-color: transparent !important;
    background-image: none !important;
}

/* Dark */
html[data-theme="dark"].aligali-ambient,
html.aligali-ambient:has(body.dark-mode) {
    background-color: #161616;
    background-image: linear-gradient(
        185deg,
        #161616 0%,
        #1a1816 30%,
        #1c1c1c 55%,
        #171514 80%,
        #161616 100%
    );
    background-size: 100% 340%;
    background-position: 50% 0%;
    animation: aligali-ambient-sheen-dark 76s ease-in-out infinite alternate;
}

@keyframes aligali-ambient-sheen-dark {
    0% {
        background-position: 50% 0%;
    }
    100% {
        background-position: 50% 90%;
    }
}

html[data-theme="dark"].aligali-ambient::before,
html.aligali-ambient:has(body.dark-mode)::before {
    background:
        radial-gradient(ellipse 56% 46% at 34% 28%, rgba(227, 154, 121, 0.1), transparent 64%),
        radial-gradient(ellipse 50% 42% at 76% 74%, rgba(255, 255, 255, 0.045), transparent 60%),
        radial-gradient(ellipse 74% 54% at 50% 108%, rgba(0, 0, 0, 0.22), transparent 72%);
}

@media (prefers-reduced-motion: reduce) {
    html.aligali-ambient {
        animation: none !important;
        background-size: 100% 100% !important;
        background-position: 50% 50% !important;
    }

    html.aligali-ambient::before {
        animation: none !important;
        transform: none !important;
        will-change: auto;
    }
}

/**
 * Phones + tablets: ambient CSS animations off (static gradient + fixed glow only).
 * Wide desktop keeps slow drift unchanged.
 */
@media (max-width: 1024px) {
    html.aligali-ambient,
    html[data-theme="dark"].aligali-ambient,
    html.aligali-ambient:has(body.dark-mode) {
        animation: none !important;
        animation-name: none !important;
        background-size: 100% 100% !important;
        background-position: 50% 50% !important;
    }

    /* Full-viewport fixed pseudo still forces expensive repaints while scrolling on mobile GPUs */
    html.aligali-ambient::before,
    html[data-theme="dark"].aligali-ambient::before,
    html.aligali-ambient:has(body.dark-mode)::before {
        display: none !important;
        content: none !important;
        animation: none !important;
    }
}