/* styles/hero-bacgkround-color-gradient-animation.css
   Premium “airwaves” animated background (dynamic palette)
   ✅ More idle motion (bigger drift + slightly faster)
   ✅ Dark: rich but subtle
   ✅ Light: visible but NOT overpowering
   ✅ JS updates: --sc-c1..--sc-c10 and --sc-accent
*/

:root{
  /* Default palette (fallback) as "r g b" */
  --sc-c1: 7 19 33;      /* #071321 */
  --sc-c2: 231 226 196;  /* #e7e2c4 */
  --sc-c3: 24 39 56;     /* #182738 */
  --sc-c4: 214 209 178;  /* #d6d1b2 */
  --sc-c5: 194 188 162;  /* #c2bca2 */
  --sc-c6: 7 19 33;      /* #071321 */
  --sc-c7: 231 226 196;  /* #e7e2c4 */
  --sc-c8: 24 39 56;     /* #182738 */

  /* Extra slots (keep stable so gradients don’t fallback to old colors) */
  --sc-c9: 214 209 178;  /* #d6d1b2 */
  --sc-c10: 194 188 162; /* #c2bca2 */

  /* Winner pulse */
  --sc-accent: 231 226 196; /* matches your palette */
  --sc-win-a: 0;


  /* Strength knobs */
  --sc-dark-op1: .36;
  --sc-dark-op2: .22;

  /* Light knobs (strong enough, still premium) */
  --sc-light-op1: .40;
  --sc-light-op2: .22;

  /* ✅ Idle motion knobs */
   --sc-airA-dur: 5s; /* +20% motion */
  --sc-airB-dur: 7s; /* +20% motion */

}

body{
  position: relative;
  isolation: isolate; /* blend-mode behaves predictably */
}
body > *{
  position: relative;
  z-index: 1;
}

/* Two animated layers */
body::before,
body::after{
  content:"";
  position: fixed;
  inset: -18%;
  z-index: 0;
  pointer-events: none;

  transform: translate3d(0,0,0);
  will-change: transform, filter, opacity;

  /* smoother “air” look */
  filter: blur(86px) saturate(1.25);
  opacity: var(--sc-dark-op1);
  mix-blend-mode: screen;

  transition: opacity 420ms ease, filter 420ms ease;
}

/* MAIN airwave layer */
body::before{
  background:
    radial-gradient(40% 36% at 18% 20%, rgb(var(--sc-c1) / .70), transparent 62%),
    radial-gradient(44% 40% at 80% 18%, rgb(var(--sc-c2) / .68), transparent 62%),
    radial-gradient(44% 44% at 20% 82%, rgb(var(--sc-c3) / .62), transparent 62%),
    radial-gradient(52% 48% at 82% 84%, rgb(var(--sc-c4) / .58), transparent 62%),
    radial-gradient(48% 46% at 50% 52%, rgb(var(--sc-c5) / .52), transparent 65%),
    radial-gradient(42% 38% at 32% 46%, rgb(var(--sc-c6) / .50), transparent 66%),
    radial-gradient(42% 38% at 68% 58%, rgb(var(--sc-c7) / .44), transparent 66%),
    radial-gradient(44% 40% at 50% 18%, rgb(var(--sc-c8) / .40), transparent 70%),
    radial-gradient(40% 36% at 10% 55%, rgb(var(--sc-c9) / .38), transparent 72%),
    radial-gradient(40% 36% at 92% 52%, rgb(var(--sc-c10)/ .36), transparent 72%),

    /* winner pulse */
    radial-gradient(34% 30% at 50% 56%, rgb(var(--sc-accent) / var(--sc-win-a)), transparent 70%);

  /* ✅ more idle motion */
  animation: scAirA var(--sc-airA-dur) ease-in-out infinite alternate;
}

/* SECOND layer for depth */
body::after{
  inset: -22%;
  opacity: var(--sc-dark-op2);
  filter: blur(108px) saturate(1.30);

  background:
    radial-gradient(48% 44% at 28% 34%, rgb(var(--sc-c6) / .40), transparent 66%),
    radial-gradient(52% 48% at 70% 36%, rgb(var(--sc-c7) / .34), transparent 66%),
    radial-gradient(54% 50% at 52% 78%, rgb(var(--sc-c8) / .38), transparent 68%);

  /* ✅ more idle motion */
  animation: scAirB var(--sc-airB-dur) ease-in-out infinite alternate;
}

/* ✅ Bigger drift = feels more “alive” even when idle */
@keyframes scAirA{
  0%   { transform: translate3d(-7.2%, -4.8%, 0) scale(1.06) rotate(-4.8deg); }
  25%  { transform: translate3d( 2.4%, -1.2%, 0) scale(1.11) rotate( 2.4deg); }
  50%  { transform: translate3d( 8.4%,  4.8%, 0) scale(1.15) rotate( 4.8deg); }
  75%  { transform: translate3d( 3.6%,  1.2%, 0) scale(1.12) rotate( 1.2deg); }
  100% { transform: translate3d(10.8%, -6.0%, 0) scale(1.08) rotate(-3.6deg); }
}

@keyframes scAirB{
  0%   { transform: translate3d( 8.4%,  6.0%, 0) scale(1.09) rotate( 4.8deg); }
  25%  { transform: translate3d( 1.2%,  2.4%, 0) scale(1.13) rotate( 2.4deg); }
  50%  { transform: translate3d(-8.4%, -6.0%, 0) scale(1.19) rotate(-4.8deg); }
  75%  { transform: translate3d(-3.6%, -2.4%, 0) scale(1.15) rotate(-2.4deg); }
  100% { transform: translate3d(-10.8%,  4.8%, 0) scale(1.11) rotate( 3.6deg); }
}


/* =========================
   LIGHT MODE (visible, premium)
========================= */
html[data-theme="light"] body::before,
body.theme-light::before,
body.is-light::before{
  opacity: var(--sc-light-op1);
  filter: blur(80px) saturate(1.65) contrast(1.10);
  mix-blend-mode: multiply;
}
html[data-theme="light"] body::after,
body.theme-light::after,
body.is-light::after{
  opacity: var(--sc-light-op2);
  filter: blur(104px) saturate(1.70) contrast(1.08);
  mix-blend-mode: multiply;
}

/* =========================
   “Alive” reactions
========================= */
html.bg-spinning body::before{
  opacity: calc(var(--sc-dark-op1) + .12);
  filter: blur(72px) saturate(1.75);
  animation-duration: 10s; /* faster during spin */
}
html.bg-spinning body::after{
  opacity: calc(var(--sc-dark-op2) + .10);
  filter: blur(92px) saturate(1.85);
  animation-duration: 14s;
}

/* Light mode reacts too */
html[data-theme="light"].bg-spinning body::before{
  opacity: calc(var(--sc-light-op1) + .06);
  filter: blur(76px) saturate(1.85) contrast(1.12);
}
html[data-theme="light"].bg-spinning body::after{
  opacity: calc(var(--sc-light-op2) + .05);
  filter: blur(98px) saturate(1.95) contrast(1.10);
}

/* =========================================================
   NO “POP” WHEN EDITING OPTIONS
   (bg-palette-bump becomes visually identical to base)
   ========================================================= */

/* Dark: same as base */
html.bg-palette-bump body::before{
  opacity: var(--sc-dark-op1) !important;
  filter: blur(86px) saturate(1.25) !important;
}
html.bg-palette-bump body::after{
  opacity: var(--sc-dark-op2) !important;
  filter: blur(108px) saturate(1.30) !important;
}

/* Light: same as base */
html[data-theme="light"].bg-palette-bump body::before{
  opacity: var(--sc-light-op1) !important;
  filter: blur(80px) saturate(1.65) contrast(1.10) !important;
  mix-blend-mode: multiply !important;
}
html[data-theme="light"].bg-palette-bump body::after{
  opacity: var(--sc-light-op2) !important;
  filter: blur(104px) saturate(1.70) contrast(1.08) !important;
  mix-blend-mode: multiply !important;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  body::before, body::after{
    animation: none !important;
    transition: none !important;
  }
}