/* =========================
   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;
  background-size: cover;
  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");
  }

  // Fixed to viewport
  &.is-fixed {
    position: fixed;
    inset: 0;
    z-index: -1;
  }

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