/* Soft optional public-menu atmosphere (orbs / rings / food icons) */

.menu-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: layout paint style;
    --atm-speed: 1;
}

/* Hidden on language page when a background video is playing; revealed after language pick */
.menu-atmosphere.is-deferred-for-video:not(.is-visible) {
    opacity: 0;
    visibility: hidden;
}

.menu-atmosphere.is-deferred-for-video.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease;
}

.menu-atmosphere[data-motion="slow"] {
    --atm-speed: 1.75;
}

.menu-atmosphere[data-motion="normal"] {
    --atm-speed: 1;
}

.menu-atmosphere[data-motion="fast"] {
    --atm-speed: 0.55;
}

.menu-atmosphere-orb {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
    filter: blur(0);
}

.menu-atmosphere-orb--brand {
    background: radial-gradient(
        circle at 35% 35%,
        color-mix(in srgb, var(--brand, #556337) 42%, transparent),
        color-mix(in srgb, var(--brand, #556337) 8%, transparent) 55%,
        transparent 72%
    );
}

.menu-atmosphere-orb--accent {
    background: radial-gradient(
        circle at 40% 40%,
        color-mix(in srgb, var(--accent, #9E4242) 38%, transparent),
        color-mix(in srgb, var(--accent, #9E4242) 6%, transparent) 55%,
        transparent 72%
    );
}

.menu-atmosphere-orb--highlight {
    background: radial-gradient(
        circle at 40% 40%,
        color-mix(in srgb, var(--highlight, #A6843D) 36%, transparent),
        color-mix(in srgb, var(--highlight, #A6843D) 6%, transparent) 55%,
        transparent 72%
    );
}

.menu-atmosphere-orb--soft {
    opacity: 0.55;
}

.menu-atmosphere-orb--a {
    width: min(58vw, 420px);
    height: min(58vw, 420px);
    top: -8%;
    left: -12%;
    animation: menu-atm-drift-a calc(12s * var(--atm-speed, 1)) ease-in-out infinite alternate;
}

.menu-atmosphere-orb--b {
    width: min(48vw, 340px);
    height: min(48vw, 340px);
    top: 12%;
    right: -10%;
    animation: menu-atm-drift-b calc(14s * var(--atm-speed, 1)) ease-in-out infinite alternate;
}

.menu-atmosphere-orb--c {
    width: min(52vw, 380px);
    height: min(52vw, 380px);
    bottom: -12%;
    left: 18%;
    animation: menu-atm-drift-c calc(11s * var(--atm-speed, 1)) ease-in-out infinite alternate;
}

.menu-atmosphere-orb--d {
    width: min(36vw, 260px);
    height: min(36vw, 260px);
    top: 42%;
    left: 55%;
    opacity: 0.7;
    animation: menu-atm-drift-b calc(13s * var(--atm-speed, 1)) ease-in-out infinite alternate-reverse;
}

.menu-atmosphere-orb--e {
    width: min(30vw, 220px);
    height: min(30vw, 220px);
    bottom: 18%;
    right: 8%;
    opacity: 0.65;
    animation: menu-atm-drift-a calc(10s * var(--atm-speed, 1)) ease-in-out infinite alternate-reverse;
}

.menu-atmosphere-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--brand, #556337) 22%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--accent, #9E4242) 8%, transparent);
    will-change: transform;
}

.menu-atmosphere-ring--a {
    width: min(42vw, 300px);
    height: min(42vw, 300px);
    top: 8%;
    right: 6%;
    animation: menu-atm-drift-b calc(13s * var(--atm-speed, 1)) ease-in-out infinite alternate;
}

.menu-atmosphere-ring--b {
    width: min(28vw, 200px);
    height: min(28vw, 200px);
    bottom: 22%;
    left: 8%;
    border-color: color-mix(in srgb, var(--accent, #9E4242) 20%, transparent);
    animation: menu-atm-drift-c calc(11s * var(--atm-speed, 1)) ease-in-out infinite alternate;
}

.menu-atmosphere-ring--c {
    width: min(55vw, 380px);
    height: min(55vw, 380px);
    top: 38%;
    left: 42%;
    border-color: color-mix(in srgb, var(--highlight, #A6843D) 18%, transparent);
    opacity: 0.7;
    animation: menu-atm-drift-a calc(14s * var(--atm-speed, 1)) ease-in-out infinite alternate-reverse;
}

.menu-atmosphere-wave {
    position: absolute;
    width: min(40vw, 280px);
    height: 48px;
    top: 58%;
    right: 12%;
    color: color-mix(in srgb, var(--accent, #9E4242) 28%, transparent);
    opacity: 0.55;
    animation: menu-atm-drift-c calc(10s * var(--atm-speed, 1)) ease-in-out infinite alternate;
}

.menu-atmosphere-icons {
    position: absolute;
    inset: 0;
}

.menu-atmosphere-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand, #556337);
    opacity: 0.13;
    transform: rotate(var(--icon-rot, 0deg));
    animation: menu-atm-icon-float calc(var(--icon-pace, 9s) * var(--atm-speed, 1)) ease-in-out infinite alternate;
    will-change: transform;
}

.menu-atmosphere-icon:nth-child(3n) {
    animation-name: menu-atm-icon-float-b;
}

.menu-atmosphere-icon:nth-child(3n+1) {
    animation-name: menu-atm-icon-float-c;
}

.menu-atmosphere-icon svg {
    width: 100%;
    height: 100%;
}

@keyframes menu-atm-drift-a {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(22px, 16px, 0); }
}

@keyframes menu-atm-drift-b {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-20px, 14px, 0); }
}

@keyframes menu-atm-drift-c {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(14px, -20px, 0); }
}

@keyframes menu-atm-icon-float {
    from { transform: rotate(var(--icon-rot, 0deg)) translate3d(0, 0, 0); }
    to { transform: rotate(calc(var(--icon-rot, 0deg) + 8deg)) translate3d(10px, -14px, 0); }
}

@keyframes menu-atm-icon-float-b {
    from { transform: rotate(var(--icon-rot, 0deg)) translate3d(0, 0, 0); }
    to { transform: rotate(calc(var(--icon-rot, 0deg) - 10deg)) translate3d(-12px, -10px, 0); }
}

@keyframes menu-atm-icon-float-c {
    from { transform: rotate(var(--icon-rot, 0deg)) translate3d(0, 0, 0); }
    to { transform: rotate(calc(var(--icon-rot, 0deg) + 6deg)) translate3d(8px, 12px, 0); }
}

/* Pointer parallax offset (desktop JS sets --atm-x / --atm-y) */
.menu-atmosphere.is-parallax .menu-atmosphere-orb,
.menu-atmosphere.is-parallax .menu-atmosphere-ring,
.menu-atmosphere.is-parallax .menu-atmosphere-wave {
    translate: calc(var(--atm-x, 0) * 1px) calc(var(--atm-y, 0) * 1px);
}

.menu-atmosphere.is-parallax .menu-atmosphere-orb--b,
.menu-atmosphere.is-parallax .menu-atmosphere-ring--a {
    translate: calc(var(--atm-x, 0) * -0.6px) calc(var(--atm-y, 0) * -0.6px);
}

.menu-atmosphere.is-parallax .menu-atmosphere-orb--c,
.menu-atmosphere.is-parallax .menu-atmosphere-ring--b {
    translate: calc(var(--atm-x, 0) * 0.4px) calc(var(--atm-y, 0) * 0.4px);
}

.menu-atmosphere[data-motion="still"] .menu-atmosphere-orb,
.menu-atmosphere[data-motion="still"] .menu-atmosphere-ring,
.menu-atmosphere[data-motion="still"] .menu-atmosphere-wave,
.menu-atmosphere[data-motion="still"] .menu-atmosphere-icon {
    animation: none !important;
}

.menu-atmosphere[data-motion="still"].is-parallax .menu-atmosphere-orb,
.menu-atmosphere[data-motion="still"].is-parallax .menu-atmosphere-ring,
.menu-atmosphere[data-motion="still"].is-parallax .menu-atmosphere-wave {
    translate: none;
}

@media (max-width: 768px) {
    .menu-atmosphere-orb--d,
    .menu-atmosphere-orb--e {
        display: none;
    }

    .menu-atmosphere[data-icon-amount="few"] .menu-atmosphere-icon:nth-child(n+6),
    .menu-atmosphere[data-icon-amount="normal"] .menu-atmosphere-icon:nth-child(n+11),
    .menu-atmosphere[data-icon-amount="many"] .menu-atmosphere-icon:nth-child(n+15),
    .menu-atmosphere:not([data-icon-amount]) .menu-atmosphere-icon:nth-child(n+11) {
        display: none;
    }

    .menu-atmosphere-icon {
        opacity: 0.11;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-atmosphere-orb,
    .menu-atmosphere-ring,
    .menu-atmosphere-wave,
    .menu-atmosphere-icon {
        animation: none !important;
    }

    .menu-atmosphere.is-parallax .menu-atmosphere-orb,
    .menu-atmosphere.is-parallax .menu-atmosphere-ring,
    .menu-atmosphere.is-parallax .menu-atmosphere-wave {
        translate: none;
    }
}