/* ═══════════════════════════════════════════════════════════════
   Living Light — global ambient background effect
   Ported from public/pos/restaurant-v3.css (v2 restaurant page).
   Same z-index (0) and same alphas as the restaurant page so it
   behaves identically: effect sits BEHIND opaque content wrappers
   and cards, visible only through transparent page gutters.

   Pages that embed this effect get body:transparent + html:cream
   so the fixed layer can show through. Scoped with :has() so we
   don't touch pages that never render the effect.
   ═══════════════════════════════════════════════════════════════ */
.rv2-life {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Ensure the effect has a stable canvas to show on.
   html gets the cream body-color everyone expects; body goes
   transparent so the fixed z-index:0 layer is visible through it. */
html:has(body .rv2-life) {
    background-color: #fbf9f6;
}
body:has(.rv2-life) {
    background: transparent !important;
}
/* Common admin / front wrappers that ship with an opaque bg also need
   to become transparent so the effect reaches the viewport edges. Card
   and navbar backgrounds (argon's .card, .navbar-main) stay opaque and
   correctly hide the effect where they sit — exactly like p-tile cards
   on the restaurant page. */
body:has(.rv2-life) .main-content,
body:has(.rv2-life) > .wrapper {
    background: transparent !important;
}

/* Dominant breath — rose-crimson swell that ALSO drifts across the viewport */
.rv2-breath {
    position: absolute;
    left: 50%; top: 28%;
    width: clamp(380px, 65vw, 920px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            hsla(350, 100%, 72%, .95) 0%,
            hsla(355, 95%, 60%, .7)  20%,
            hsla(0,   90%, 54%, .45) 38%,
            hsla(8,   85%, 48%, .22) 58%,
            transparent 78%);
    filter: blur(48px);
    /* no blend-mode: render as a soft colored glow on any backdrop */
    opacity: .7;
    animation:
        ll-breathDrift 38s cubic-bezier(.42, 0, .58, 1) infinite,
        ll-breathHue 24s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
@keyframes ll-breathDrift {
    0%   { transform: translate(-50%, -50%) translate(-18vw, -10vh) scale(1);    opacity: .55; }
    17%  { transform: translate(-50%, -50%) translate(  6vw, -12vh) scale(1.65); opacity: 1;   }
    33%  { transform: translate(-50%, -50%) translate( 22vw,  -4vh) scale(1);    opacity: .55; }
    50%  { transform: translate(-50%, -50%) translate( 14vw,  14vh) scale(1.65); opacity: 1;   }
    67%  { transform: translate(-50%, -50%) translate( -8vw,  18vh) scale(1);    opacity: .55; }
    83%  { transform: translate(-50%, -50%) translate(-22vw,   6vh) scale(1.65); opacity: 1;   }
    100% { transform: translate(-50%, -50%) translate(-18vw, -10vh) scale(1);    opacity: .55; }
}
@keyframes ll-breathHue {
    0%   { filter: blur(48px) hue-rotate(-14deg) saturate(1); }
    100% { filter: blur(48px) hue-rotate(16deg)  saturate(1.2); }
}

/* Aurora ribbons — 12 s coherent period with phase offsets */
.rv2-aurora {
    position: absolute;
    top: -10vh; left: -15%;
    width: 130%; height: 55vh;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .7;
    /* no blend-mode: render as a soft colored glow on any backdrop */
    will-change: transform, opacity;
    animation: ll-auroraBreathe 12s cubic-bezier(.42, 0, .58, 1) infinite;
}
.rv2-aurora-1 {
    background: radial-gradient(ellipse 70% 60% at 50% 50%,
        rgba(255, 70, 100, .45) 0%, rgba(220, 40, 80, .25) 45%, transparent 70%);
    animation-delay: 0s;
}
.rv2-aurora-2 {
    top: -5vh; left: 10%; width: 100%;
    background: radial-gradient(ellipse 55% 70% at 50% 50%,
        rgba(255, 80, 140, .4) 0%, rgba(230, 50, 100, .2) 50%, transparent 72%);
    animation-delay: -2s;
}
.rv2-aurora-3 {
    top: 5vh; left: -25%; width: 120%;
    background: radial-gradient(ellipse 80% 50% at 50% 50%,
        rgba(255, 130, 90, .32) 0%, rgba(255, 90, 70, .16) 45%, transparent 70%);
    animation-delay: -4s;
}
@keyframes ll-auroraBreathe {
    0%, 100% { transform: scale(.92) translateX(-4%); opacity: .4; }
    50%      { transform: scale(1.18) translateX(4%); opacity: 1;  }
}

/* Small drifting orbs — 20–24 s rise, rose/magenta/amber */
.rv2-orb {
    position: absolute;
    left: var(--x, 50%);
    bottom: -180px;
    width: var(--size, 120px); height: var(--size, 120px);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        hsla(var(--hue, 30), 100%, 82%, .75) 0%,
        hsla(var(--hue, 30), 95%, 65%, .4) 28%,
        hsla(var(--hue, 30), 90%, 55%, .15) 55%,
        transparent 75%);
    filter: blur(10px);
    opacity: 0;
    animation: ll-orbFloat var(--dur, 22s) cubic-bezier(.45, 0, .55, 1) infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform, opacity;
    /* no blend-mode: render as a soft colored glow on any backdrop */
}
@keyframes ll-orbFloat {
    0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
    12%  { opacity: .75; }
    50%  { transform: translate(-18px, -55vh) scale(1.15); opacity: 1; }
    88%  { opacity: .5; }
    100% { transform: translate(-8px, -115vh) scale(.7); opacity: 0; }
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
    .rv2-breath, .rv2-aurora, .rv2-orb { animation: none; }
    .rv2-orb { opacity: 0; }
    .rv2-breath { opacity: .35; }
    .rv2-aurora { opacity: .25; }
}

/* Small screens — kill extra aurora layers for perf */
@media (max-width: 560px) {
    .rv2-aurora-2, .rv2-aurora-3 { display: none; }
}