/* Shared optional background media controls.
   Each section/card/container should set its own variables inline. */

.has-optional-bg,
.has-optional-card-bg{
  position:relative;
  isolation:isolate;
}

.optional-bg,
.optional-card-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-repeat:no-repeat;
}

.optional-bg{
  background-image:var(--bg-image, none);
  background-size:var(--bg-size, cover);
  background-position:var(--bg-position, center);
  background-repeat:var(--bg-repeat, no-repeat);
  background-attachment:var(--bg-attachment, scroll);
  opacity:var(--bg-opacity, 0);
  transform:translate3d(0, var(--bg-offset, 0), 0) scale(var(--bg-scale, 1));
  filter:
    brightness(var(--bg-brightness, 1))
    contrast(var(--bg-contrast, 1))
    saturate(var(--bg-saturation, 1))
    blur(var(--bg-blur, 0px));
}

.optional-card-bg{
  background-image:var(--card-bg-image, var(--bg-image, none));
  background-size:var(--card-bg-size, var(--bg-size, cover));
  background-position:var(--card-bg-position, var(--bg-position, center));
  background-repeat:var(--card-bg-repeat, var(--bg-repeat, no-repeat));
  background-attachment:var(--card-bg-attachment, var(--bg-attachment, scroll));
  opacity:var(--card-bg-opacity, var(--bg-opacity, 0));
  transform:translate3d(0, var(--card-bg-offset, var(--bg-offset, 0)), 0) scale(var(--card-bg-scale, var(--bg-scale, 1)));
  filter:
    brightness(var(--card-bg-brightness, var(--bg-brightness, 1)))
    contrast(var(--card-bg-contrast, var(--bg-contrast, 1)))
    saturate(var(--card-bg-saturation, var(--bg-saturation, 1)))
    blur(var(--card-bg-blur, var(--bg-blur, 0px)));
}

.has-optional-bg::after{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,var(--bg-dark-top, .50)),
      rgba(0,0,0,var(--bg-dark-bottom, .72))
    ),
    radial-gradient(
      circle at 50% 20%,
      rgba(255,100,0,var(--bg-glow, .08)),
      transparent 24%
    ) !important;
}

.has-optional-card-bg::after{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,var(--card-bg-dark-top, var(--bg-dark-top, .58))),
      rgba(0,0,0,var(--card-bg-dark-bottom, var(--bg-dark-bottom, .80)))
    ),
    radial-gradient(
      circle at 50% 18%,
      rgba(255,110,0,var(--card-bg-glow, var(--bg-glow, .07))),
      transparent 24%
    ) !important;
}

.optional-bg-video,
.optional-card-bg-video{
  display:none;
}

@media (max-width:900px){
  .optional-bg{
    background-attachment:scroll;
  }
}