/* styles/background-gradient/background-gradient.css
   ChoiceSpin — ultra-light static wheel background gradient
   - DESKTOP: mirrored left/right gradients with stronger middle blend
   - MOBILE: keep approved pinned-corner version
*/

.hero{
  position: relative;
  isolation: isolate;
}

.hero > .container,
.hero .container.hero__grid{
  position: relative;
  z-index: 1;
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 0.92) 24%,
    rgba(0, 0, 0, 0.72) 44%,
    rgba(0, 0, 0, 0.42) 66%,
    rgba(0, 0, 0, 0.16) 84%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 0.92) 24%,
    rgba(0, 0, 0, 0.72) 44%,
    rgba(0, 0, 0, 0.42) 66%,
    rgba(0, 0, 0, 0.16) 84%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* =========================
   DESKTOP — same corner positions, bigger spread
========================= */
html.sc-wheel-gradient-ready .hero::before{
  background-image:
    /* softer lower-area darkening */
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.01) 22%,
      rgba(0, 0, 0, 0.035) 42%,
      rgba(0, 0, 0, 0.075) 64%,
      rgba(0, 0, 0, 0.13) 100%
    ),

    /* softer center darkening */
    radial-gradient(
      ellipse at 50% 12%,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.055) 12%,
      rgba(0, 0, 0, 0.025) 24%,
      rgba(0, 0, 0, 0) 40%
    ),

/* left color — same position, bigger reach */
radial-gradient(
  circle at 12% 0%,
  rgb(var(--scbg-left) / 0.24) 0%,
  rgb(var(--scbg-left) / 0.20) 12%,
  rgb(var(--scbg-left) / 0.14) 26%,
  rgb(var(--scbg-left) / 0.08) 40%,
  rgb(var(--scbg-left) / 0.035) 50%,
  rgb(var(--scbg-left) / 0.01) 60%,
  rgb(var(--scbg-left) / 0) 72%
),

/* right color — exact mirror with bigger reach */
radial-gradient(
  circle at 88% 0%,
  rgb(var(--scbg-right) / 0.24) 0%,
  rgb(var(--scbg-right) / 0.20) 12%,
  rgb(var(--scbg-right) / 0.14) 26%,
  rgb(var(--scbg-right) / 0.08) 40%,
  rgb(var(--scbg-right) / 0.035) 50%,
  rgb(var(--scbg-right) / 0.01) 60%,
  rgb(var(--scbg-right) / 0) 72%
);
}

/* =========================
   MOBILE / TABLET — keep approved pinned corners
========================= */
@media (max-width: 900px){
  html.sc-wheel-gradient-ready .hero::before{
    background-image:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.01) 22%,
        rgba(0, 0, 0, 0.035) 42%,
        rgba(0, 0, 0, 0.075) 64%,
        rgba(0, 0, 0, 0.13) 100%
      ),

      radial-gradient(
        ellipse at 50% 12%,
        rgba(0, 0, 0, 0.08) 0%,
        rgba(0, 0, 0, 0.055) 12%,
        rgba(0, 0, 0, 0.025) 24%,
        rgba(0, 0, 0, 0) 40%
      ),

      radial-gradient(
        circle at left top,
        rgb(var(--scbg-left) / 0.24) 0%,
        rgb(var(--scbg-left) / 0.20) 10%,
        rgb(var(--scbg-left) / 0.14) 22%,
        rgb(var(--scbg-left) / 0.08) 34%,
        rgb(var(--scbg-left) / 0.035) 44%,
        rgb(var(--scbg-left) / 0.01) 50%,
        rgb(var(--scbg-left) / 0) 58%
      ),

      radial-gradient(
        circle at right top,
        rgb(var(--scbg-right) / 0.24) 0%,
        rgb(var(--scbg-right) / 0.20) 10%,
        rgb(var(--scbg-right) / 0.14) 22%,
        rgb(var(--scbg-right) / 0.08) 34%,
        rgb(var(--scbg-right) / 0.035) 44%,
        rgb(var(--scbg-right) / 0.01) 50%,
        rgb(var(--scbg-right) / 0) 58%
      );
  }
}