/* --- SITE-WIDE BACKGROUNDS --- */

body {
  background:
    linear-gradient(rgba(var(--primary-color-rgb, 0, 0, 0), 0.3), rgba(var(--primary-color-rgb, 0, 0, 0), 0.3)),
    url('sky-back-b2 (3).png');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Background image overrides driven by settings */
:root[data-bg-image="back1"] body {
  background:
    linear-gradient(rgba(var(--primary-color-rgb, 0, 0, 0), 0.3), rgba(var(--primary-color-rgb, 0, 0, 0), 0.3)),
    url('back1.jpg');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

:root[data-bg-image="back2"] body {
  background:
    linear-gradient(rgba(var(--primary-color-rgb, 0, 0, 0), 0.3), rgba(var(--primary-color-rgb, 0, 0, 0), 0.3)),
    url('back2.jpg');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

:root[data-bg-image="back3"] body {
  background:
    linear-gradient(rgba(var(--primary-color-rgb, 0, 0, 0), 0.3), rgba(var(--primary-color-rgb, 0, 0, 0), 0.3)),
    url('back3.jpg');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

/* Video background option (phonevid.mp4) */
#bgVideo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  display: none;
}

/* Animated canvas backgrounds */
#starBg, #hollywoodBg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  display: none;
}

:root[data-bg-image="stars"] body {
  background: radial-gradient(circle at top, #101322 0%, #02030a 45%, #000000 100%);
  background-attachment: fixed;
}
:root[data-bg-image="stars"] #starBg { display: block; }

:root[data-bg-image="hollywood"] body {
  background: radial-gradient(circle at top, #1b0c18 0%, #060208 50%, #000000 100%);
  background-attachment: fixed;
}
:root[data-bg-image="hollywood"] #hollywoodBg { display: block; }

:root[data-bg-image="phonevid"] body {
  background: var(--background-color);
  background-attachment: scroll;
}
:root[data-bg-image="phonevid"] #bgVideo { display: block; }

/* Desktop/Mobile visibility toggles for backgrounds */
@media (min-width: 769px) {
    :root[data-bg-desktop-hidden="true"] body {
        background: var(--background-color) !important;
        background-attachment: scroll;
    }
}

@media (max-width: 768px) {
    :root[data-bg-mobile-hidden="true"] body {
        background: var(--background-color) !important;
        background-attachment: scroll;
    }
}