/* =========================================================
   core-bg.css — bubble shared global background
   ========================================================= */

body{
  background-color: var(--bg);
}

body:not(.no-global-bg){
  position: relative;
  background:
    linear-gradient(to bottom, rgba(13,17,24,0.04), rgba(13,17,24,0.84)),
    #0f141d;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, cover;
  background-position: center center, center center;
}

/* =========================================================
   LIGHT LAYERS (4 total — no flicker crossfade system)
   ========================================================= */

body:not(.no-global-bg)::before,
body:not(.no-global-bg)::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  will-change: opacity, transform;
}

/* LEFT SIDE — container */
body:not(.no-global-bg)::before{
  animation: bubbleLeftMove 42s ease-in-out infinite alternate;
}

/* RIGHT SIDE — container */
body:not(.no-global-bg)::after{
  animation: bubbleRightMove 48s ease-in-out infinite alternate;
}

/* ===== LEFT LIGHTS (mint + peri crossfade) ===== */

body:not(.no-global-bg)::before{
  background:
    radial-gradient(circle at 15% 10%,
      rgba(166,255,181,0.12) 0%,
      rgba(166,255,181,0.065) 20%,
      rgba(166,255,181,0.025) 38%,
      rgba(166,255,181,0.00) 60% 
    );
  filter: blur(10px);
}

body:not(.no-global-bg)::before::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 10%,
      rgba(142,153,251,0.07) 0%,
      rgba(142,153,251,0.035) 20%,
      rgba(142,153,251,0.012) 38%,
      rgba(142,153,251,0.00) 60%
    );
  filter: blur(10px);
  animation: bubbleLeftSwap 32s ease-in-out infinite alternate;
}

/* ===== RIGHT LIGHTS (peri + mint crossfade) ===== */

body:not(.no-global-bg)::after{
  background:
    radial-gradient(circle at 85% 12%,
      rgba(142,153,251,0.13) 0%,
      rgba(142,153,251,0.007) 22%,
      rgba(142,153,251,0.028) 40%,
      rgba(142,153,251,0.10) 62%
    );
  filter: blur(12px);
}

body:not(.no-global-bg)::after::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 85% 12%,
      rgba(166,255,181,0.07) 0%,
      rgba(166,255,181,0.035) 22%,
      rgba(166,255,181,0.014) 40%,
      rgba(166,255,181,0.00) 62%
    );
  filter: blur(12px);
  animation: bubbleRightSwap 32s ease-in-out infinite alternate;
}

/* =========================================================
   MOTION (ultra subtle drift)
   ========================================================= */

@keyframes bubbleLeftMove{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(1%,0.6%,0) scale(1.02); }
  100% { transform: translate3d(2%,1.2%,0) scale(1.04); }
}

@keyframes bubbleRightMove{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-1%,0.5%,0) scale(1.02); }
  100% { transform: translate3d(-2%,1.1%,0) scale(1.04); }
}

/* =========================================================
   COLOR SWAP (opacity crossfade — no flicker)
   ========================================================= */

@keyframes bubbleLeftSwap{
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes bubbleRightSwap{
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  body:not(.no-global-bg)::before,
  body:not(.no-global-bg)::after{
    animation: none;
    transform: none;
  }
}