/* 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); }
}