/* backgrounds.body.css — Full page backgrounds without wrappers
   - Apply classes directly to <body>
   - No pseudo elements or overflow hacks
   - Dark and Bright variants
   - Gentle motion; respects prefers-reduced-motion
*/
.container-StyleScore:before {
    content: "";
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    background: #EDEDED;
    top: 0;
    left: 0;
    backdrop-filter: blur(5px);
    z-index: -1;
}

:root{
  --lime: #39FF14;
  --blue: #4B7BFF;
  --violet: #AD26FF;
  --bg-mid: #1d2740;
  --bg-speed: 28s;
}

/* Base for any body background */
body[class*="body-bg-"]{
  background-color: var(--bg-mid);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/* =======================
   Dark variants
======================== */

/* 1) Aurora (soft drifting blobs) */
body.body-bg-aurora{
  --a1x: 18%; --a1y: 16%;
  --a2x: 82%; --a2y: 20%;
  --a3x: 52%; --a3y: 86%;
  background-image:
    radial-gradient(40% 32% at var(--a1x) var(--a1y), rgba(57,255,20,.16), transparent 60%),
    radial-gradient(38% 34% at var(--a2x) var(--a2y), rgba(75,123,255,.14), transparent 60%),
    radial-gradient(50% 46% at var(--a3x) var(--a3y), rgba(173,38,255,.15), transparent 60%);
  background-size: 100% 100%;
  animation: bodyAurora var(--bg-speed) ease-in-out infinite alternate;
}
@keyframes bodyAurora {
  to{
    --a1x: 20%; --a1y: 15%;
    --a2x: 80%; --a2y: 22%;
    --a3x: 54%; --a3y: 84%;
  }
}

/* 2) Brand gradient sheen */
body.body-bg-gradient{
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.04)),
    var(--grad, linear-gradient(135deg, var(--lime), var(--blue) 45%, var(--violet)));
  background-size: 120% 120%, 120% 120%;
  animation: bodySheen var(--bg-speed) linear infinite alternate;
}
@keyframes bodySheen {
  from { background-position: 0% 0%, 0% 0%; }
  to   { background-position: 2% 0%, 2% 0%; }
}

/* 3) Mesh (very calm blobs) */
body.body-bg-mesh{
  --m1x: 20%; --m1y: 30%;
  --m2x: 80%; --m2y: 25%;
  --m3x: 60%; --m3y: 80%;
  background-image:
    radial-gradient(30% 28% at var(--m1x) var(--m1y), rgba(57,255,20,.12), transparent 65%),
    radial-gradient(36% 30% at var(--m2x) var(--m2y), rgba(75,123,255,.12), transparent 65%),
    radial-gradient(42% 38% at var(--m3x) var(--m3y), rgba(173,38,255,.12), transparent 65%);
  background-size: 100% 100%;
  animation: bodyMesh calc(var(--bg-speed) * 1.2) ease-in-out infinite alternate;
}
@keyframes bodyMesh {
  to{
    --m1y: 32%;
    --m2x: 78%;
    --m3y: 78%;
  }
}

/* 4) Stripes */
body.body-bg-stripes{
  background-image:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 8px,
      transparent 8px, transparent 22px);
  background-size: 140% 140%;
  animation: bodyStripes calc(var(--bg-speed) * 0.7) linear infinite;
}
@keyframes bodyStripes { to { background-position: 2% 0%; } }

/* 5) Dots */
body.body-bg-dots{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 1.5px);
  background-size: 14px 14px;
  animation: bodyDots calc(var(--bg-speed) * 1.4) linear infinite alternate;
}
@keyframes bodyDots { to { background-position-y: 1.5%; } }

/* 6) Clean (vignette) */
body.body-bg-clean{
  background-image:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(1200px 600px at 80% 110%, rgba(0,0,0,.10), transparent 55%);
  background-size: 100% 100%, 100% 100%;
}

/* =======================
   Bright (light) variants
   Use: body-bg-*-bright
======================== */

body[class*="body-bg-"][class*="-bright"]{
  --bg-mid: #f3f6fc; /* light neutral */
  background-color: var(--bg-mid);
}

/* 1) Aurora — bright */
body.body-bg-aurora-bright{
  --a1x: 18%; --a1y: 16%;
  --a2x: 82%; --a2y: 20%;
  --a3x: 52%; --a3y: 86%;
  background-image:
    radial-gradient(40% 32% at var(--a1x) var(--a1y), rgba(57,255,20,.12), transparent 62%),
    radial-gradient(38% 34% at var(--a2x) var(--a2y), rgba(75,123,255,.11), transparent 64%),
    radial-gradient(50% 46% at var(--a3x) var(--a3y), rgba(173,38,255,.12), transparent 62%),
    radial-gradient(1200px 600px at 80% 110%, rgba(0,0,0,.06), transparent 55%);
  background-size: 100% 100%;
  animation: bodyAurora var(--bg-speed) ease-in-out infinite alternate;
}

/* 2) Gradient sheen — bright */
body.body-bg-gradient-bright{
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.55)),
    var(--grad, linear-gradient(135deg, var(--lime), var(--blue) 45%, var(--violet)));
  background-size: 120% 120%, 140% 140%;
  animation: bodySheen var(--bg-speed) linear infinite alternate;
}

/* 3) Mesh — bright */
body.body-bg-mesh-bright{
  --m1x: 20%; --m1y: 30%;
  --m2x: 80%; --m2y: 25%;
  --m3x: 60%; --m3y: 80%;
  background-image:
    radial-gradient(30% 28% at var(--m1x) var(--m1y), rgba(57,255,20,.10), transparent 66%),
    radial-gradient(36% 30% at var(--m2x) var(--m2y), rgba(75,123,255,.10), transparent 66%),
    radial-gradient(42% 38% at var(--m3x) var(--m3y), rgba(173,38,255,.11), transparent 66%);
  background-size: 100% 100%;
  animation: bodyMesh calc(var(--bg-speed) * 1.2) ease-in-out infinite alternate;
}

/* 4) Stripes — bright */
body.body-bg-stripes-bright{
  background-image:
    repeating-linear-gradient(135deg,
      rgba(0,0,0,.06) 0px, rgba(0,0,0,.06) 8px,
      transparent 8px, transparent 22px);
  background-size: 140% 140%;
  animation: bodyStripes calc(var(--bg-speed) * 0.7) linear infinite;
}

/* 5) Dots — bright */
body.body-bg-dots-bright{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.10) 1px, transparent 1.5px);
  background-size: 14px 14px;
  animation: bodyDots calc(var(--bg-speed) * 1.4) linear infinite alternate;
}

/* 6) Clean — bright */
body.body-bg-clean-bright{
  background-image:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1200px 600px at 80% 110%, rgba(0,0,0,.08), transparent 55%);
  background-size: 100% 100%, 100% 100%;
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  body.body-bg-aurora,
  body.body-bg-gradient,
  body.body-bg-mesh,
  body.body-bg-stripes,
  body.body-bg-dots,
  body.body-bg-aurora-bright,
  body.body-bg-gradient-bright,
  body.body-bg-mesh-bright,
  body.body-bg-stripes-bright,
  body.body-bg-dots-bright { animation: none !important; }
}

/* iOS Safari performance */
@supports (-webkit-touch-callout: none){
  body[class*="body-bg-"]{ background-attachment: scroll; }
}


