/* ═══════════════════════════════════════════════════════════════
   Living Light — global ambient background effect
   Ported from public/pos/restaurant-v3.css. Stacked ABOVE content
   with mix-blend-mode: multiply + pointer-events: none so it
   reliably tints admin / front / auth / landing pages regardless
   of wrapper z-index or background color. Sits below Bootstrap
   modals (z-index 1050) so those stay unaffected.
   ═══════════════════════════════════════════════════════════════ */
.rv2-life {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    overflow: hidden;
    isolation: isolate;
    /* Parent-level opacity scales every blended layer down in lockstep.
       0.22 is enough to feel "alive" without obscuring content on
       marketing / admin / auth pages (which have dense text). */
    opacity: .22;
}

/* Dominant breath — rose-crimson swell that ALSO drifts across the viewport.
   Scale+opacity pulse on a 12 s (5 bpm) cycle; a slower 38 s drift cycle
   walks it clockwise around the screen so it never sits still. */
.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);
    mix-blend-mode: multiply;
    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;
}
/* Combined drift + scale + opacity so transforms don't fight each other.
   Path visits four corners of the viewport over 38s; scale 1→1.65 and
   opacity .55→1 cycle three times within that drift (≈12 s each). */
@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;
    mix-blend-mode: multiply;
    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;
    mix-blend-mode: multiply;
}
@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; }
}