/* Boditrax website - Utilities: backgrounds
 * Background colour, gradient, mask and object-fit utilities
 * Generated from the original compiled stylesheet; rule order is significant. */
@layer utilities {
  .bg-background {
    background-color: var(--background);
  }
  .bg-background\/90 {
    background-color: var(--background);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--background) 90%, transparent);
    }
  }
  .bg-border {
    background-color: var(--border);
  }
  .bg-brandblue {
    background-color: var(--brand-blue);
  }
  .bg-brandred {
    background-color: var(--brand-red);
  }
  .bg-card {
    background-color: var(--card);
  }
  .bg-foreground\/5 {
    background-color: var(--foreground);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
    }
  }
  .bg-green {
    background-color: var(--brand-green);
  }
  .bg-ink {
    background-color: var(--ink);
  }
  .bg-plum {
    background-color: var(--brand-plum);
  }
  .bg-plum\/15 {
    background-color: var(--brand-plum);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-plum) 15%, transparent);
    }
  }
  .bg-plum\/20 {
    background-color: var(--brand-plum);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-plum) 20%, transparent);
    }
  }
  .bg-plum\/40 {
    background-color: var(--brand-plum);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-plum) 40%, transparent);
    }
  }
  .bg-plum\/\[0\.03\] {
    background-color: var(--brand-plum);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-plum) 3%, transparent);
    }
  }
  .bg-plum\/\[0\.08\] {
    background-color: var(--brand-plum);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-plum) 8%, transparent);
    }
  }
  .bg-primary {
    background-color: var(--primary);
  }
  .bg-secondary {
    background-color: var(--secondary);
  }
  .bg-surface {
    background-color: var(--surface);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/30 {
    background-color: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }
  .bg-yellow {
    background-color: var(--brand-yellow);
  }
  .bg-yellow\/\[0\.07\] {
    background-color: var(--brand-yellow);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-yellow) 7.000000000000001%, transparent);
    }
  }
  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .grid-field {
    background-image: linear-gradient(to right, oklch(0.2 0.006 264 / 5%) 1px, transparent 1px), linear-gradient(to bottom, oklch(0.2 0.006 264 / 5%) 1px, transparent 1px);
    background-size: 72px 72px;
  }
  .bg-\[linear-gradient\(160deg\,\#545556_0\%\,\#3a3b3c_55\%\,\#141416_100\%\)\] {
    background-image: linear-gradient(160deg,#545556 0%,#3a3b3c 55%,#141416 100%);
  }
  .bg-\[radial-gradient\(ellipse_at_center\,var\(--background\)_0\%\,color-mix\(in_srgb\,var\(--background\)_82\%\,transparent\)_45\%\,transparent_78\%\)\] {
    background-image: radial-gradient(ellipse at center,var(--background) 0%,var(--background) 45%,transparent 78%);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: radial-gradient(ellipse at center,var(--background) 0%,color-mix(in srgb,var(--background) 82%,transparent) 45%,transparent 78%);
    }
  }
  .wave-field {
    background-image: radial-gradient(140% 90% at 5% -10%, var(--brand-navblue) 0%, transparent 60%), radial-gradient(120% 80% at 100% 0%, var(--brand-plum) 0%, transparent 62%), radial-gradient(160% 70% at 50% 118%, var(--brand-plum) 0%, transparent 62%), radial-gradient(120% 40% at 70% 96%, var(--brand-navblue) 0%, transparent 60%);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: radial-gradient(140% 90% at 5% -10%, color-mix(in oklab, var(--brand-navblue) 18%, transparent) 0%, transparent 60%), radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, var(--brand-plum) 7%, transparent) 0%, transparent 62%), radial-gradient(160% 70% at 50% 118%, color-mix(in oklab, var(--brand-plum) 10%, transparent) 0%, transparent 62%), radial-gradient(120% 40% at 70% 96%, color-mix(in oklab, var(--brand-navblue) 14%, transparent) 0%, transparent 60%);
    }
  }
  .wave-field-plum {
    background-image: radial-gradient(90% 70% at 10% -10%, color-mix(in oklab, white 10%, transparent) 0%, transparent 62%), radial-gradient(110% 80% at 100% 110%, var(--brand-navblue) 0%, transparent 65%);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: radial-gradient(90% 70% at 10% -10%, color-mix(in oklab, white 10%, transparent) 0%, transparent 62%), radial-gradient(110% 80% at 100% 110%, color-mix(in oklab, var(--brand-navblue) 14%, transparent) 0%, transparent 65%);
    }
  }
  .wave-field-warm {
    background-image: radial-gradient(120% 80% at -5% 0%, var(--brand-navblue) 0%, transparent 58%), radial-gradient(120% 80% at 105% 105%, var(--foreground) 0%, transparent 62%);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: radial-gradient(120% 80% at -5% 0%, color-mix(in oklab, var(--brand-navblue) 10%, transparent) 0%, transparent 58%), radial-gradient(120% 80% at 105% 105%, color-mix(in oklab, var(--foreground) 5%, transparent) 0%, transparent 62%);
    }
  }
  .from-black\/60 {
    --tw-gradient-from: color-mix(in srgb, #000 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-black\/70 {
    --tw-gradient-from: color-mix(in srgb, #000 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-ink {
    --tw-gradient-from: var(--ink);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-plum {
    --tw-gradient-from: var(--brand-plum);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-plum\/35 {
    --tw-gradient-from: var(--brand-plum);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--brand-plum) 35%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-plum\/45 {
    --tw-gradient-from: var(--brand-plum);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--brand-plum) 45%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-white {
    --tw-gradient-from: var(--color-white);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-white\/55 {
    --tw-gradient-from: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .via-black\/15 {
    --tw-gradient-via: color-mix(in srgb, #000 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-black) 15%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-black\/25 {
    --tw-gradient-via: color-mix(in srgb, #000 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-black) 25%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-ink\/75 {
    --tw-gradient-via: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--ink) 75%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-plum\/70 {
    --tw-gradient-via: var(--brand-plum);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--brand-plum) 70%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-transparent {
    --tw-gradient-via: transparent;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-white\/10 {
    --tw-gradient-via: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-white\/70 {
    --tw-gradient-via: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-35\% {
    --tw-gradient-via-position: 35%;
  }
  .via-40\% {
    --tw-gradient-via-position: 40%;
  }
  .to-ink\/25 {
    --tw-gradient-to: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--ink) 25%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-plum {
    --tw-gradient-to: var(--brand-plum);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-plum\/40 {
    --tw-gradient-to: var(--brand-plum);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--brand-plum) 40%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-70\% {
    --tw-gradient-to-position: 70%;
  }
  .\[mask-image\:linear-gradient\(90deg\,transparent\,black_8\%\,black_92\%\,transparent\)\] {
    mask-image: linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .object-\[52\%_center\] {
    object-position: 52% center;
  }
  .object-\[center_28\%\] {
    object-position: center 28%;
  }
  .object-center {
    object-position: center;
  }
}