/* ============================================================
   BACKGROUND & VEIL
   ------------------------------------------------------------
   Every screen is a glacier photograph under a coloured veil.
   The veil is what makes light and dark themes read as the same
   product rather than two designs.

       <div class="ice-bgd" data-bg="3"></div>

   data-bg picks one of the six photo sets (1–6). The breakpoint
   picks mobile / tablet / desktop from the files already in img/.
   The theme picks the veil. Swapping data-theme re-tints the whole
   page without touching the image.

   Veil geometry is one decision: a large ellipse anchored at the
   bottom-right, exactly as drawn in Figma. Only the stop list
   changes between themes.
   ============================================================ */

:root[data-theme="light"] {
  --veil-opacity: .85;
  --veil: radial-gradient(ellipse 130% 110% at 90% 100%,
            #D3DEED 0%,
            #F6F5F5 53%,
            #F2EDE5 100%);
}

:root[data-theme="dark"] {
  --veil-opacity: .80;
  --veil: radial-gradient(ellipse 130% 110% at 90% 100%,
            #869FC6 0%,
            #6A85B1 12.5%,
            #4E6C9B 25%,
            #315286 37.5%,
            #153870 50%,
            #112B57 62.5%,
            #0C1E3E 75%,
            #081024 87.5%,
            #03030B 100%);
}

.ice-bgd {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--white);
}

/* The photograph */
.ice-bgd::before,
.ice-bgd::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ice-bgd::before {
  background-image: var(--bgd-src);
  background-size: cover;
  background-position: center;
}

/* The veil */
.ice-bgd::after {
  background-image: var(--veil);
  opacity: var(--veil-opacity);
}

/* --- Photo sets, per breakpoint -----------------------------
   Mobile first; tablet and desktop swap in higher-resolution
   crops of the same scene.                                     */
.ice-bgd[data-bg="1"] { --bgd-src: url("../../img/mobile__bgd-1.jpg"); }
.ice-bgd[data-bg="2"] { --bgd-src: url("../../img/mobile__bgd-2.jpg"); }
.ice-bgd[data-bg="3"] { --bgd-src: url("../../img/mobile__bgd-3.jpg"); }
.ice-bgd[data-bg="4"] { --bgd-src: url("../../img/mobile__bgd-4.jpg"); }
.ice-bgd[data-bg="5"] { --bgd-src: url("../../img/mobile__bgd-5.jpg"); }
.ice-bgd[data-bg="6"] { --bgd-src: url("../../img/mobile__bgd-6.jpg"); }

@media (min-width: 768px) {
  .ice-bgd[data-bg="1"] { --bgd-src: url("../../img/tablet__bgd-1.jpg"); }
  .ice-bgd[data-bg="2"] { --bgd-src: url("../../img/tablet__bgd-2.jpg"); }
  .ice-bgd[data-bg="3"] { --bgd-src: url("../../img/tablet__bgd-3.jpg"); }
  .ice-bgd[data-bg="4"] { --bgd-src: url("../../img/tablet__bgd-4.jpg"); }
  .ice-bgd[data-bg="5"] { --bgd-src: url("../../img/tablet__bgd-5.jpg"); }
  .ice-bgd[data-bg="6"] { --bgd-src: url("../../img/tablet__bgd-6.jpg"); }
}

@media (min-width: 1024px) {
  .ice-bgd[data-bg="1"] { --bgd-src: url("../../img/desktop__bgd-1.jpg"); }
  .ice-bgd[data-bg="2"] { --bgd-src: url("../../img/desktop__bgd-2.jpg"); }
  .ice-bgd[data-bg="3"] { --bgd-src: url("../../img/desktop__bgd-3.jpg"); }
  .ice-bgd[data-bg="4"] { --bgd-src: url("../../img/desktop__bgd-4.jpg"); }
  .ice-bgd[data-bg="5"] { --bgd-src: url("../../img/desktop__bgd-5.jpg"); }
  .ice-bgd[data-bg="6"] { --bgd-src: url("../../img/desktop__bgd-6.jpg"); }
}

/* A flat variant for the styleguide, where photography would fight
   with the swatches. */
.ice-bgd[data-bg="none"]::before { background-image: none; }