/* bg.presets.css — 4 animated background presets
   Picked in Settings > Colors.
   Classes: html.bg-1 | html.bg-2 | html.bg-3 | html.bg-4

   NOTE: Animation is on BODY background (see anim.effects.css).
*/

/* Default (if a preset class is missing) */
html.bg-1, html.bg-2, html.bg-3, html.bg-4{ background: none !important; }

html{ --bgAnim: bgShift4; --bgDur: 14s; }

/* Preset 1 — Ocean Aurora (cool, clean) */
html.bg-1{
  --bg1:#061A3A;  /* deep navy */
  --bg2:#0B4B59;  /* teal */
  --bg3:#2B1A5B;  /* violet */
  --bg4:#0F203A;  /* blue-black */
  --bgAnim: bgShift4;
  --bgDur: 12s;
}

/* Preset 2 — Sunset Glow (warm) */
html.bg-2{
  --bg1:#2A0C12;  /* deep maroon */
  --bg2:#4A1B10;  /* warm brown */
  --bg3:#6A2A08;  /* amber */
  --bg4:#2B0B2B;  /* plum */
  --bgAnim: bgShiftDiag;
  --bgDur: 14s;
}

/* Preset 3 — Forest Mint (calm green) */
html.bg-3{
  --bg1:#051B13;  /* deep green */
  --bg2:#0A3B2D;  /* emerald */
  --bg3:#0B2E3D;  /* teal-blue */
  --bg4:#062018;  /* dark mint */
  --bgAnim: bgShiftOrbit;
  --bgDur: 16s;
}

/* Preset 4 — Royal Violet (premium) */
html.bg-4{
  --bg1:#0E0B2E;  /* indigo */
  --bg2:#251052;  /* purple */
  --bg3:#0B2B5A;  /* deep blue */
  --bg4:#2A0D1B;  /* rose */
  --bgAnim: bgShiftPulse;
  --bgDur: 13s;
}

/* Extra keyframes for distinct motion (body background-position) */
@keyframes bgShiftDiag{
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

@keyframes bgShiftOrbit{
  0%   { background-position: 20% 0%; }
  25%  { background-position: 100% 30%; }
  50%  { background-position: 80% 100%; }
  75%  { background-position: 0% 70%; }
  100% { background-position: 20% 0%; }
}

@keyframes bgShiftPulse{
  0%   { background-position: 10% 30%; filter: brightness(1); }
  50%  { background-position: 90% 70%; filter: brightness(1.06); }
  100% { background-position: 10% 30%; filter: brightness(1); }
}


/* ---- Background presets & animations (mobile + desktop) ---- */
body.bg-dark{
  background:
    radial-gradient(900px 600px at 20% 15%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(900px 500px at 80% 0%, rgba(255,0,79,.14), transparent 55%),
    radial-gradient(900px 500px at 30% 90%, rgba(111,200,255,.12), transparent 55%),
    #0b1020;
}
body.bg-light{
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(56,189,248,.14), transparent 55%),
    radial-gradient(900px 500px at 80% 0%, rgba(255,0,79,.08), transparent 55%),
    radial-gradient(900px 500px at 30% 90%, rgba(99,102,241,.10), transparent 55%),
    #f6f7fb;
}

/* Animated overlay layer */
body.bg-anim1::before,
body.bg-anim2::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .55;
  mix-blend-mode: soft-light;
  filter: blur(0px);
}

/* Slow parallax gradient drift */
body.bg-anim1::before{
  background:
    radial-gradient(1200px 700px at 10% 20%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(900px 600px at 85% 10%, rgba(255,0,79,.16), transparent 55%),
    radial-gradient(900px 700px at 60% 90%, rgba(167,139,250,.18), transparent 60%);
  transform: translate3d(0,0,0);
  animation: bgFloat1 18s ease-in-out infinite alternate;
}

@keyframes bgFloat1{
  from { transform: translate3d(-12px, -10px, 0) scale(1.02); }
  to   { transform: translate3d(12px, 10px, 0) scale(1.06); }
}

/* More subtle, slower */
body.bg-anim2::before{
  background:
    radial-gradient(1000px 700px at 25% 25%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(900px 600px at 80% 35%, rgba(34,197,94,.10), transparent 55%),
    radial-gradient(900px 700px at 55% 85%, rgba(255,0,79,.10), transparent 60%);
  transform: translate3d(0,0,0);
  animation: bgFloat2 26s ease-in-out infinite alternate;
  opacity: .45;
}

@keyframes bgFloat2{
  from { transform: translate3d(-8px, 6px, 0) scale(1.01); }
  to   { transform: translate3d(10px, -8px, 0) scale(1.05); }
}