/* ========================================================================
FILE : /assets/01-mstr-tmplet/02-jzn-topbar/css/jzn-bgthemeptrn.css
PURPOSE : THE 22 PATTERN MONSTER ENGINE - Slider & Palette Ready [jzn]
VERSION: v9.0 - DATE MODIFIED: 2026-03-14 - COMPLETE FULL STACK MASTER
========================================================================== */

:root {
  --jzn-ptrn-zoom: 0.925;
  --jzn-ptrn-rotate: 0deg;
  --jzn-ptrn-stroke: 1.7;
  --jzn-ptrn-opacity: 0.61;
  --jzn-ptrn-pos-x: 50%;
  --jzn-ptrn-pos-y: 50%;
  --jzn-ptrn-space-x: 1;
  --jzn-ptrn-space-y: 1;
  --jzn-ptrn-bg: transparent;
  --jzn-ptrn-svg-1: #d4af37;
  --jzn-ptrn-svg-2: #c0c2c9;
  --jzn-ptrn-svg-3: #52e016;
  --jzn-ptrn-svg-4: #2a15cb;
}

/* ========================================================================
   SECTION 1 : THE BACKGROUND LAYER (THE CANVAS)
   ======================================================================== */
.jzn-bg-layer {
  background-color: var(--jzn-ptrn-bg, transparent);
  transition: background-color 0.2s ease;
  overflow: hidden;
}

/* THE TITANIUM SQUARE */
.jzn-bg-layer::before,
.jzn-bg-layer::after {
  content: '';
  position: absolute;
  top: -100vmax;
  left: -100vmax;
  width: 300vmax;
  height: 300vmax;
  opacity: var(--jzn-ptrn-opacity, 0.5);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: var(--jzn-ptrn-pos-x, 50%) var(--jzn-ptrn-pos-y, 50%);
  mask-position: var(--jzn-ptrn-pos-x, 50%) var(--jzn-ptrn-pos-y, 50%);
  transform-origin: center center;
  transform: rotate(var(--jzn-ptrn-rotate, 0deg));
  transition: transform 0.1s ease-out;
}

/* ========================================================================
   SECTION 2: THE LIGHTWEIGHT MASK ENGINE (PATTERNS 01 - 12, 14)
   ======================================================================== */

.ptrn-01,
.ptrn-02,
.ptrn-03,
.ptrn-04,
.ptrn-05,
.ptrn-06,
.ptrn-07,
.ptrn-08,
.ptrn-09,
.ptrn-10,
.ptrn-11,
.ptrn-12,
.ptrn-14 {
  background-image: none !important;
}
.ptrn-01::after,
.ptrn-02::after,
.ptrn-03::after,
.ptrn-04::after,
.ptrn-05::after,
.ptrn-06::after,
.ptrn-07::after,
.ptrn-08::after,
.ptrn-09::after,
.ptrn-10::after {
  display: none !important;
}

.ptrn-01::before {
  background-color: var(--jzn-ptrn-svg-1, #d4af37);
  -webkit-mask-image: var(--jzn-ptrn-01-encode);
  mask-image: var(--jzn-ptrn-01-encode);
  -webkit-mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 80px);
  mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 80px);
}
.ptrn-02::before {
  background-color: var(--jzn-ptrn-svg-1, #d4af37);
  -webkit-mask-image: var(--jzn-ptrn-02-encode);
  mask-image: var(--jzn-ptrn-02-encode);
  -webkit-mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 87px)
    calc(var(--jzn-ptrn-zoom, 0.5) * 50.232px);
  mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 87px)
    calc(var(--jzn-ptrn-zoom, 0.5) * 50.232px);
}
.ptrn-03::before {
  background-color: var(--jzn-ptrn-svg-1, #d4af37);
  -webkit-mask-image: var(--jzn-ptrn-03-encode);
  mask-image: var(--jzn-ptrn-03-encode);
  -webkit-mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 60px);
  mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 60px);
}
.ptrn-04::before {
  background-color: var(--jzn-ptrn-svg-1, #d4af37);
  -webkit-mask-image: var(--jzn-ptrn-04-encode);
  mask-image: var(--jzn-ptrn-04-encode);
  -webkit-mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 69.28px)
    calc(var(--jzn-ptrn-zoom, 0.5) * 40px);
  mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 69.28px)
    calc(var(--jzn-ptrn-zoom, 0.5) * 40px);
}
.ptrn-05::before {
  background-color: var(--jzn-ptrn-svg-1, #d4af37);
  -webkit-mask-image: var(--jzn-ptrn-05-encode);
  mask-image: var(--jzn-ptrn-05-encode);
  -webkit-mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 40px);
  mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 40px);
}
.ptrn-06::before {
  background-color: var(--jzn-ptrn-svg-1, #d4af37);
  -webkit-mask-image: var(--jzn-ptrn-06-encode);
  mask-image: var(--jzn-ptrn-06-encode);
  -webkit-mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 40px);
  mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 40px);
}
.ptrn-07::before {
  background-color: var(--jzn-ptrn-svg-1, #d4af37);
  -webkit-mask-image: var(--jzn-ptrn-07-encode);
  mask-image: var(--jzn-ptrn-07-encode);
  -webkit-mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 80px)
    calc(var(--jzn-ptrn-zoom, 0.5) * 46.18px);
  mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 80px)
    calc(var(--jzn-ptrn-zoom, 0.5) * 46.18px);
}
.ptrn-08::before {
  background-color: var(--jzn-ptrn-svg-1, #d4af37);
  -webkit-mask-image: var(--jzn-ptrn-08-before-encode);
  mask-image: var(--jzn-ptrn-08-before-encode);
  -webkit-mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 80px)
    calc(var(--jzn-ptrn-zoom, 0.5) * 138.196px);
  mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 80px)
    calc(var(--jzn-ptrn-zoom, 0.5) * 138.196px);
}
.ptrn-09::before {
  background-color: var(--jzn-ptrn-svg-1, #d4af37);
  -webkit-mask-image: var(--jzn-ptrn-09-encode);
  mask-image: var(--jzn-ptrn-09-encode);
  -webkit-mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 47.35px)
    calc(var(--jzn-ptrn-zoom, 0.5) * 47.8px);
  mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 47.35px)
    calc(var(--jzn-ptrn-zoom, 0.5) * 47.8px);
}
.ptrn-10::before {
  background-color: var(--jzn-ptrn-svg-1, #d4af37);
  -webkit-mask-image: var(--jzn-ptrn-10-encode);
  mask-image: var(--jzn-ptrn-10-encode);
  -webkit-mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 60px);
  mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 60px);
}

.ptrn-11::before,
.ptrn-11::after {
  -webkit-mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 36px);
  mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 36px);
}
.ptrn-11::before {
  background-color: var(--jzn-ptrn-svg-1, #d4af37);
  -webkit-mask-image: var(--jzn-ptrn-11-before-encode);
  mask-image: var(--jzn-ptrn-11-before-encode);
}
.ptrn-11::after {
  background-color: var(--jzn-ptrn-svg-2, #c0c2c9);
  -webkit-mask-image: var(--jzn-ptrn-11-after-encode);
  mask-image: var(--jzn-ptrn-11-after-encode);
}

.ptrn-12::before,
.ptrn-12::after {
  -webkit-mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 98.25px);
  mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 98.25px);
}
.ptrn-12::before {
  background-color: var(--jzn-ptrn-svg-1, #d4af37);
  -webkit-mask-image: var(--jzn-ptrn-12-before-encode);
  mask-image: var(--jzn-ptrn-12-before-encode);
}
.ptrn-12::after {
  background-color: var(--jzn-ptrn-svg-2, #c0c2c9);
  -webkit-mask-image: var(--jzn-ptrn-12-after-encode);
  mask-image: var(--jzn-ptrn-12-after-encode);
}

.ptrn-14::before,
.ptrn-14::after {
  -webkit-mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 60px);
  mask-size: calc(var(--jzn-ptrn-zoom, 0.5) * 60px);
}
.ptrn-14::before {
  background-color: var(--jzn-ptrn-svg-1, #ffffff);
  -webkit-mask-image: var(--jzn-ptrn-14-before-encode);
  mask-image: var(--jzn-ptrn-14-before-encode);
}
.ptrn-14::after {
  background-color: var(--jzn-ptrn-svg-2, #88ccff);
  -webkit-mask-image: var(--jzn-ptrn-14-after-encode);
  mask-image: var(--jzn-ptrn-14-after-encode);
}

/* ========================================================================
   SECTION 3: THE HEAVYWEIGHT INJECTION ENGINE (13, 15 - 22)
   ======================================================================== */
.ptrn-13::before,
.ptrn-15::before,
.ptrn-16::before,
.ptrn-17::before,
.ptrn-18::before,
.ptrn-19::before,
.ptrn-20::before,
.ptrn-21::before,
.ptrn-22::before {
  background-image: var(--jzn-heavyweight-encode) !important;
  background-repeat: repeat;
  background-color: transparent !important;
  background-position: var(--jzn-ptrn-pos-x, 50%) var(--jzn-ptrn-pos-y, 50%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transform-origin: center center !important;
  transform: rotate(var(--jzn-ptrn-rotate, 0deg)) !important;
}

/* Base scale multipliers */
.ptrn-13::before {
  background-size: calc(var(--jzn-ptrn-zoom, 0.5) * 60px) !important;
}
.ptrn-15::before {
  background-size: calc(var(--jzn-ptrn-zoom, 0.5) * 80px) !important;
}
.ptrn-16::before {
  background-size: calc(var(--jzn-ptrn-zoom, 0.5) * 72.69px)
    calc(var(--jzn-ptrn-zoom, 0.5) * 42px) !important;
}
.ptrn-17::before {
  background-size: calc(var(--jzn-ptrn-zoom, 0.5) * 75px)
    calc(var(--jzn-ptrn-zoom, 0.5) * 66.3px) !important;
}
.ptrn-18::before {
  background-size: calc(var(--jzn-ptrn-zoom, 0.5) * 150px)
    calc(var(--jzn-ptrn-zoom, 0.5) * 130px) !important;
}
.ptrn-19::before {
  background-size: calc(var(--jzn-ptrn-zoom, 0.5) * 130px) !important;
}
.ptrn-20::before {
  background-size: calc(var(--jzn-ptrn-zoom, 0.5) * 130px) !important;
}
.ptrn-21::before {
  background-size: calc(
      var(--jzn-ptrn-zoom, 0.5) * 36.92px * var(--jzn-ptrn-space-x, 1)
    )
    calc(var(--jzn-ptrn-zoom, 0.5) * 45px * var(--jzn-ptrn-space-y, 1)) !important;
}
.ptrn-22::before {
  background-size: calc(var(--jzn-ptrn-zoom, 0.5) * 240px)
    calc(var(--jzn-ptrn-zoom, 0.5) * 210px) !important;
}

/* Disable the secondary layer, as JS handles all heavy colors natively */
.ptrn-13::after,
.ptrn-15::after,
.ptrn-16::after,
.ptrn-17::after,
.ptrn-18::after,
.ptrn-19::after,
.ptrn-20::after,
.ptrn-21::after,
.ptrn-22::after {
  display: none !important;
}