/* =========================
   Background
   Figma: Backgrounds / Gradient + Shape × Desktop / Tablet / Mobile.
========================= */

@use "../kit-deps" as *;

.vmk-bg {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: $neutral-50;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;

  // Variant + device combinations
  &[data-variant="gradient"][data-device="desktop"] {
    background-image: url("/assets/backgrounds/gradient-desktop.svg");
  }

  &[data-variant="gradient"][data-device="tablet"] {
    background-image: url("/assets/backgrounds/gradient-tablet.svg");
  }

  &[data-variant="gradient"][data-device="mobile"] {
    background-image: url("/assets/backgrounds/gradient-mobile.svg");
  }

  &[data-variant="shape"][data-device="desktop"] {
    background-image: url("/assets/backgrounds/shape-desktop.svg");
  }

  &[data-variant="shape"][data-device="tablet"] {
    background-image: url("/assets/backgrounds/shape-tablet.svg");
  }

  &[data-variant="shape"][data-device="mobile"] {
    background-image: url("/assets/backgrounds/shape-mobile.svg");
  }

  // Inline preview sizing helper used by the Figma comparison page
  &.is-preview {
    min-height: auto;
    height: 100%;
    background-attachment: scroll;
  }
}

// Fixed background layer used by the demo page so the gradient stays pinned
// while the content scrolls over it.
.vmk-bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: $neutral-50;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;

  &[data-variant="gradient"][data-device="desktop"] {
    background-image: url("/assets/backgrounds/gradient-desktop.svg");
  }

  &[data-variant="gradient"][data-device="tablet"] {
    background-image: url("/assets/backgrounds/gradient-tablet.svg");
  }

  &[data-variant="gradient"][data-device="mobile"] {
    background-image: url("/assets/backgrounds/gradient-mobile.svg");
  }

  &[data-variant="shape"][data-device="desktop"] {
    background-image: url("/assets/backgrounds/shape-desktop.svg");
  }

  &[data-variant="shape"][data-device="tablet"] {
    background-image: url("/assets/backgrounds/shape-tablet.svg");
  }

  &[data-variant="shape"][data-device="mobile"] {
    background-image: url("/assets/backgrounds/shape-mobile.svg");
  }
}

// Very subtle parallax drift of the background during scroll.
// It runs in JS by updating --vmk-bg-y on the background layer.
.vmk-bg-layer.is-parallax {
  will-change: transform;
  transform: translateY(calc(var(--vmk-bg-y, 0px) * -0.05));
  transition: transform 0.1s linear;
}