/* Inazda Glass · patterns.css v1.0.0
   14 original background patterns made to sit behind glass. Pure CSS, plus four small SVG files in svg/.
   No third-party images.

   Use:   <div class="iz-pattern" data-pattern="mesh"> … your glass UI … </div>
   Mode:  follows color-scheme (light-dark()). Force one with data-mode="light" or data-mode="dark".
   Drift: add data-drift to slowly move the pattern (off under prefers-reduced-motion and html[data-iz-motion="reduce"]).

   Every pattern is fenced with @pt:name and @pt:end comments, so you can copy only the ones you use.
   Colours live in --pt-* custom properties at the top of each block: change them there. */

/* @pt:base */
.iz-pattern {
  --pt-u: 1vmax; /* pattern unit: 1 % of the viewport's longer side */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  background-color: var(--pt-base, light-dark(#f4f4f6, #0c0c0e));
  color-scheme: inherit;
}
.iz-pattern[data-mode="light"] { color-scheme: light; }
/* data-scale="box": size the pattern to its own box instead of the viewport (for cards, stages, thumbnails).
   It makes the element an inline-size container, so give it a width (it is a block by default). */
.iz-pattern[data-scale="box"] { container-type: inline-size; --pt-u: 1cqi; }
.iz-pattern[data-mode="dark"] { color-scheme: dark; }
.iz-pattern::before,
.iz-pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.iz-pattern[data-fixed]::before,
.iz-pattern[data-fixed]::after { position: fixed; }
@keyframes iz-pt-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.08); }
  50%  { transform: translate3d(-3%, 2%, 0) rotate(2deg) scale(1.14); }
  to   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.08); }
}
@keyframes iz-pt-slide { from { background-position: 0 0; } to { background-position: var(--pt-slide, 240px 0); } }
@keyframes iz-pt-shift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--pt-shift, 240px), 0, 0); } }
.iz-pattern[data-drift]::before { inset: -8%; animation: iz-pt-drift 26s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-iz-motion="full"]) .iz-pattern[data-drift]::before,
  :root:not([data-iz-motion="full"]) .iz-pattern[data-drift]::after { animation: none; }
}
:root[data-iz-motion="reduce"] .iz-pattern[data-drift]::before,
:root[data-iz-motion="reduce"] .iz-pattern[data-drift]::after { animation: none; }
/* @pt:end */

/* @pt:mesh */
.iz-pattern[data-pattern="mesh"] {
  --pt-base: light-dark(#eef0ff, #0b0a1a);
  --pt-1: light-dark(#8b8cf6, #4f46e5);
  --pt-2: light-dark(#ff9ec7, #c026d3);
  --pt-3: light-dark(#ffd27a, #f97316);
  --pt-4: light-dark(#6ee7d0, #0d9488);
  --pt-5: light-dark(#7cc4ff, #2563eb);
}
.iz-pattern[data-pattern="mesh"]::before {
  background:
    radial-gradient(60% 70% at 12% 18%, var(--pt-1) 0%, transparent 62%),
    radial-gradient(55% 60% at 88% 12%, var(--pt-2) 0%, transparent 60%),
    radial-gradient(60% 65% at 78% 88%, var(--pt-3) 0%, transparent 62%),
    radial-gradient(50% 55% at 18% 90%, var(--pt-4) 0%, transparent 60%),
    radial-gradient(45% 50% at 50% 50%, var(--pt-5) 0%, transparent 70%);
}
/* @pt:end */

/* @pt:blobs */
.iz-pattern[data-pattern="blobs"] {
  --pt-base: light-dark(#f6f1ea, #120d0a);
  --pt-1: light-dark(#ff7a59, #ff5a36);
  --pt-2: light-dark(#ffc94d, #e8a317);
  --pt-3: light-dark(#5aa9ff, #2b6fe0);
  --pt-4: light-dark(#9b7bff, #7a4dff);
}
.iz-pattern[data-pattern="blobs"]::before {
  filter: blur(min(calc(3 * var(--pt-u)), 48px));
  background:
    radial-gradient(circle at 22% 30%, var(--pt-1) 0 calc(16 * var(--pt-u)), transparent calc(16.2 * var(--pt-u))),
    radial-gradient(circle at 74% 22%, var(--pt-2) 0 calc(12 * var(--pt-u)), transparent calc(12.2 * var(--pt-u))),
    radial-gradient(circle at 68% 78%, var(--pt-3) 0 calc(18 * var(--pt-u)), transparent calc(18.2 * var(--pt-u))),
    radial-gradient(circle at 12% 86%, var(--pt-4) 0 calc(10 * var(--pt-u)), transparent calc(10.2 * var(--pt-u))),
    radial-gradient(circle at 46% 56%, var(--pt-2) 0 calc(5 * var(--pt-u)), transparent calc(5.2 * var(--pt-u)));
}
/* @pt:end */

/* @pt:aurora */
.iz-pattern[data-pattern="aurora"] {
  --pt-base: light-dark(#dff0ff, #050816);
  --pt-1: light-dark(#2dd4bf, #10b981);
  --pt-2: light-dark(#8b5cf6, #7c3aed);
  --pt-3: light-dark(#3b82f6, #0ea5e9);
  --pt-4: light-dark(#f472b6, #db2777);
}
.iz-pattern[data-pattern="aurora"]::before {
  filter: blur(min(calc(2.4 * var(--pt-u)), 40px)) saturate(1.2);
  background:
    linear-gradient(172deg, transparent 18%, var(--pt-1) 28%, transparent 40%),
    linear-gradient(164deg, transparent 34%, var(--pt-2) 46%, transparent 58%),
    linear-gradient(176deg, transparent 52%, var(--pt-3) 62%, transparent 74%),
    linear-gradient(158deg, transparent 68%, var(--pt-4) 78%, transparent 90%);
  transform-origin: 30% 50%;
  transform: skewY(-6deg) scale(1.2);
}
.iz-pattern[data-pattern="aurora"]::after {
  background: radial-gradient(120% 60% at 50% 115%, light-dark(#ffffff, #000000) 0%, transparent 60%);
  opacity: .5;
}
/* @pt:end */

/* @pt:grain */
.iz-pattern[data-pattern="grain"] {
  --pt-base: light-dark(#ffe7d6, #1a0b12);
  --pt-1: light-dark(#ff8a5b, #e2483d);
  --pt-2: light-dark(#ffcf70, #f59e0b);
  --pt-3: light-dark(#e86aa6, #9d174d);
  --pt-4: light-dark(#7a6cff, #4338ca);
}
.iz-pattern[data-pattern="grain"]::before {
  background:
    radial-gradient(80% 90% at 0% 0%, var(--pt-2) 0%, transparent 60%),
    radial-gradient(70% 80% at 100% 10%, var(--pt-3) 0%, transparent 62%),
    radial-gradient(90% 80% at 80% 100%, var(--pt-4) 0%, transparent 65%),
    linear-gradient(150deg, var(--pt-1), var(--pt-3));
}
.iz-pattern[data-pattern="grain"]::after {
  background: url("svg/noise.svg") 0 0 / 240px 240px;
  mix-blend-mode: overlay;
  opacity: .55;
}
/* @pt:end */

/* @pt:tiles */
.iz-pattern[data-pattern="tiles"] { --pt-base: light-dark(#f3efe6, #111216); --pt-t: clamp(160px, calc(26 * var(--pt-u)), 420px); }
.iz-pattern[data-pattern="tiles"]::before { background: url("svg/tiles-light.svg") 0 0 / var(--pt-t) var(--pt-t); --pt-slide: var(--pt-t) var(--pt-t); }
:root[data-theme="dark"] .iz-pattern[data-pattern="tiles"]:not([data-mode="light"])::before,
.iz-pattern[data-pattern="tiles"][data-mode="dark"]::before { background-image: url("svg/tiles-dark.svg"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .iz-pattern[data-pattern="tiles"]:not([data-mode="light"])::before { background-image: url("svg/tiles-dark.svg"); }
}
.iz-pattern[data-pattern="tiles"][data-drift]::before { inset: 0; animation: iz-pt-slide 30s linear infinite; }
/* @pt:end */

/* @pt:dunes */
.iz-pattern[data-pattern="dunes"] { --pt-base: light-dark(#fff6ec, #07061a); }
.iz-pattern[data-pattern="dunes"]::before { background: url("svg/dunes-light.svg") center / cover no-repeat; }
:root[data-theme="dark"] .iz-pattern[data-pattern="dunes"]:not([data-mode="light"])::before,
.iz-pattern[data-pattern="dunes"][data-mode="dark"]::before { background-image: url("svg/dunes-dark.svg"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .iz-pattern[data-pattern="dunes"]:not([data-mode="light"])::before { background-image: url("svg/dunes-dark.svg"); }
}
/* @pt:end */

/* @pt:rings */
.iz-pattern[data-pattern="rings"] {
  --pt-base: light-dark(#f2f0ff, #08071a);
  --pt-1: light-dark(#6d5dfc, #7c6cff);
  --pt-2: light-dark(#ff8fb1, #ff4f8b);
  --pt-3: light-dark(#ffd9a0, #ffb35c);
  --pt-r: clamp(18px, calc(2.4 * var(--pt-u)), 44px);
}
.iz-pattern[data-pattern="rings"]::before {
  background:
    repeating-radial-gradient(circle at 70% 40%, transparent 0 calc(var(--pt-r) * .55), color-mix(in oklab, var(--pt-1) 70%, transparent) calc(var(--pt-r) * .55) var(--pt-r)),
    radial-gradient(70% 70% at 70% 40%, var(--pt-2) 0%, var(--pt-3) 45%, transparent 75%);
  -webkit-mask-image: radial-gradient(85% 85% at 70% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(85% 85% at 70% 40%, #000 30%, transparent 85%);
}
.iz-pattern[data-pattern="rings"]::after {
  background: radial-gradient(60% 60% at 15% 85%, color-mix(in oklab, var(--pt-1) 55%, transparent) 0%, transparent 70%);
}
/* @pt:end */

/* @pt:halftone */
.iz-pattern[data-pattern="halftone"] {
  --pt-base: light-dark(#fbf8f3, #0d0d12);
  --pt-1: light-dark(#ff4f6d, #ff5c7a);
  --pt-2: light-dark(#ffb23f, #ffbf55);
  --pt-3: light-dark(#3f7bff, #5a8cff);
  --pt-d: clamp(14px, calc(1.8 * var(--pt-u)), 30px);
}
.iz-pattern[data-pattern="halftone"]::before {
  background: linear-gradient(125deg, var(--pt-1), var(--pt-2) 45%, var(--pt-3));
  -webkit-mask: radial-gradient(circle, #000 0 34%, transparent 36%) 0 0 / var(--pt-d) var(--pt-d), linear-gradient(#000 0 0);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle, #000 0 34%, transparent 36%) 0 0 / var(--pt-d) var(--pt-d),
    radial-gradient(90% 90% at 30% 30%, #000 0%, rgb(0 0 0 / .35) 70%, rgb(0 0 0 / .15) 100%);
  mask-composite: intersect;
}
.iz-pattern[data-pattern="halftone"]::after {
  background: radial-gradient(circle calc(34 * var(--pt-u)) at 72% 62%, var(--pt-3) 0%, transparent 70%), radial-gradient(circle calc(26 * var(--pt-u)) at 20% 25%, color-mix(in oklab, var(--pt-1) 70%, transparent) 0%, transparent 70%);
  opacity: .85;
}
/* @pt:end */

/* @pt:folds */
.iz-pattern[data-pattern="folds"] {
  --pt-base: light-dark(#e9e4dc, #14131a);
  --pt-1: light-dark(#d9cfc2, #23212b);
  --pt-2: light-dark(#f7f2ea, #34303f);
  --pt-3: light-dark(#c8b8a6, #1b1922);
  --pt-4: light-dark(#ff7d5c, #ff6f4f);
  --pt-hi: light-dark(rgb(255 255 255 / .7), rgb(255 255 255 / .1));
  --pt-lo: light-dark(rgb(60 40 20 / .18), rgb(0 0 0 / .45));
}
.iz-pattern[data-pattern="folds"]::before {
  background:
    linear-gradient(118deg, transparent 0 31%, var(--pt-hi) 31.2%, transparent 44%),
    linear-gradient(118deg, transparent 0 58%, var(--pt-lo) 58.2%, transparent 76%),
    linear-gradient(62deg, transparent 0 46%, var(--pt-lo) 46.2%, transparent 60%),
    linear-gradient(62deg, transparent 0 72%, var(--pt-hi) 72.2%, transparent 86%),
    linear-gradient(160deg, var(--pt-2) 0%, var(--pt-1) 38%, var(--pt-3) 70%, var(--pt-2) 100%);
}
.iz-pattern[data-pattern="folds"]::after {
  background:
    linear-gradient(118deg, transparent 0 66%, var(--pt-4) 66.2%, color-mix(in oklab, var(--pt-4) 60%, transparent) 72%, transparent 72.2%);
  opacity: .9;
}
/* @pt:end */

/* @pt:silk */
.iz-pattern[data-pattern="silk"] { --pt-base: light-dark(#f2ecff, #0b0820); }
.iz-pattern[data-pattern="silk"]::before { background: url("svg/silk-light.svg") center / cover no-repeat; }
:root[data-theme="dark"] .iz-pattern[data-pattern="silk"]:not([data-mode="light"])::before,
.iz-pattern[data-pattern="silk"][data-mode="dark"]::before { background-image: url("svg/silk-dark.svg"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .iz-pattern[data-pattern="silk"]:not([data-mode="light"])::before { background-image: url("svg/silk-dark.svg"); }
}
/* @pt:end */

/* @pt:grid */
.iz-pattern[data-pattern="grid"] {
  --pt-base: light-dark(#f5f7fb, #06070c);
  --pt-line: light-dark(rgb(30 40 80 / .12), rgb(160 180 255 / .12));
  --pt-1: light-dark(#7c83ff, #4f46e5);
  --pt-2: light-dark(#38d6c4, #0f9f8f);
  --pt-3: light-dark(#ff9b6a, #e0592a);
  --pt-g: clamp(28px, calc(3 * var(--pt-u)), 56px);
}
.iz-pattern[data-pattern="grid"]::before {
  background:
    radial-gradient(circle calc(30 * var(--pt-u)) at 25% 35%, var(--pt-1) 0%, transparent 70%),
    radial-gradient(circle calc(26 * var(--pt-u)) at 78% 30%, var(--pt-2) 0%, transparent 70%),
    radial-gradient(circle calc(28 * var(--pt-u)) at 60% 85%, var(--pt-3) 0%, transparent 70%);
  opacity: .85;
}
.iz-pattern[data-pattern="grid"]::after {
  background:
    linear-gradient(var(--pt-line) 1px, transparent 1px) 0 0 / var(--pt-g) var(--pt-g),
    linear-gradient(90deg, var(--pt-line) 1px, transparent 1px) 0 0 / var(--pt-g) var(--pt-g);
  --pt-slide: 0 var(--pt-g);
}
.iz-pattern[data-pattern="grid"][data-drift]::after { animation: iz-pt-slide 6s linear infinite; }
/* @pt:end */

/* @pt:stripes */
.iz-pattern[data-pattern="stripes"] {
  --pt-base: light-dark(#fff7ef, #0e0b14);
  --pt-1: light-dark(#ff5d5d, #ff5a5f);
  --pt-2: light-dark(#ffb340, #ffb340);
  --pt-3: light-dark(#3ccf91, #2fd18c);
  --pt-4: light-dark(#4b7bff, #4b7bff);
  --pt-5: light-dark(#b36bff, #b36bff);
  --pt-s: clamp(28px, calc(3.2 * var(--pt-u)), 60px);
}
.iz-pattern[data-pattern="stripes"]::before {
  background: repeating-linear-gradient(-55deg,
    var(--pt-1) 0 var(--pt-s), var(--pt-base) 0 calc(var(--pt-s) * 1.4),
    var(--pt-2) 0 calc(var(--pt-s) * 2.4), var(--pt-base) 0 calc(var(--pt-s) * 2.8),
    var(--pt-3) 0 calc(var(--pt-s) * 3.8), var(--pt-base) 0 calc(var(--pt-s) * 4.2),
    var(--pt-4) 0 calc(var(--pt-s) * 5.2), var(--pt-base) 0 calc(var(--pt-s) * 5.6),
    var(--pt-5) 0 calc(var(--pt-s) * 6.6), var(--pt-base) 0 calc(var(--pt-s) * 7));
  --pt-shift: calc(var(--pt-s) * 7 / 0.81915);
}
.iz-pattern[data-pattern="stripes"][data-drift]::before { inset: 0 0 0 calc(var(--pt-s) * -9); animation: iz-pt-shift 9s linear infinite; }
/* @pt:end */

/* @pt:horizon */
.iz-pattern[data-pattern="horizon"] {
  --pt-base: light-dark(#ffe9dc, #0a0618);
  --pt-sky1: light-dark(#ffd2c2, #1b0f3f);
  --pt-sky2: light-dark(#ffb8c8, #4a1a5e);
  --pt-sun1: light-dark(#fff3b0, #ffd166);
  --pt-sun2: light-dark(#ff8a5b, #ff4d6d);
  --pt-sea1: light-dark(#7d8cff, #2a1f6b);
  --pt-sea2: light-dark(#3d47b8, #0b0a2a);
}
.iz-pattern[data-pattern="horizon"]::before {
  background:
    radial-gradient(circle at 50% 58%, var(--pt-sun1) 0 calc(9 * var(--pt-u)), var(--pt-sun2) calc(15 * var(--pt-u)), transparent calc(15.2 * var(--pt-u))),
    radial-gradient(70% 45% at 50% 58%, color-mix(in oklab, var(--pt-sun2) 70%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--pt-sky1) 0%, var(--pt-sky2) 58%, var(--pt-sky2) 58%);
}
.iz-pattern[data-pattern="horizon"]::after {
  top: 58%;
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(1.1 * var(--pt-u)), color-mix(in oklab, var(--pt-sun1) 55%, transparent) calc(1.1 * var(--pt-u)) calc(1.35 * var(--pt-u))),
    linear-gradient(180deg, var(--pt-sea1), var(--pt-sea2));
  -webkit-mask-image: linear-gradient(90deg, #000 0 100%);
  background-blend-mode: soft-light, normal;
}
/* @pt:end */

/* @pt:bokeh */
.iz-pattern[data-pattern="bokeh"] {
  --pt-base: light-dark(#eef3ff, #070712);
  --pt-1: light-dark(#ff9f7a, #ff7a45);
  --pt-2: light-dark(#ffd36b, #ffcc4d);
  --pt-3: light-dark(#8ec5ff, #3b82f6);
  --pt-4: light-dark(#c4a3ff, #a855f7);
  --pt-5: light-dark(#7ee8c9, #14b8a6);
}
.iz-pattern[data-pattern="bokeh"]::before {
  background:
    radial-gradient(circle at 12% 22%, var(--pt-1) 0 calc(4.5 * var(--pt-u)), transparent calc(4.8 * var(--pt-u))),
    radial-gradient(circle at 30% 70%, var(--pt-3) 0 calc(7 * var(--pt-u)), transparent calc(7.3 * var(--pt-u))),
    radial-gradient(circle at 52% 28%, var(--pt-2) 0 calc(3 * var(--pt-u)), transparent calc(3.3 * var(--pt-u))),
    radial-gradient(circle at 70% 64%, var(--pt-4) 0 calc(8 * var(--pt-u)), transparent calc(8.3 * var(--pt-u))),
    radial-gradient(circle at 88% 20%, var(--pt-5) 0 calc(5 * var(--pt-u)), transparent calc(5.3 * var(--pt-u))),
    radial-gradient(circle at 92% 88%, var(--pt-1) 0 calc(3.5 * var(--pt-u)), transparent calc(3.8 * var(--pt-u))),
    radial-gradient(circle at 8% 92%, var(--pt-2) 0 calc(5.5 * var(--pt-u)), transparent calc(5.8 * var(--pt-u))),
    radial-gradient(circle at 46% 96%, var(--pt-5) 0 calc(2.5 * var(--pt-u)), transparent calc(2.8 * var(--pt-u)));
  opacity: .9;
}
.iz-pattern[data-pattern="bokeh"]::after {
  filter: blur(min(calc(1.6 * var(--pt-u)), 26px));
  background:
    radial-gradient(circle at 22% 44%, var(--pt-4) 0 calc(6 * var(--pt-u)), transparent calc(6.3 * var(--pt-u))),
    radial-gradient(circle at 62% 12%, var(--pt-3) 0 calc(5 * var(--pt-u)), transparent calc(5.3 * var(--pt-u))),
    radial-gradient(circle at 80% 42%, var(--pt-2) 0 calc(4 * var(--pt-u)), transparent calc(4.3 * var(--pt-u))),
    radial-gradient(circle at 40% 52%, var(--pt-1) 0 calc(3 * var(--pt-u)), transparent calc(3.3 * var(--pt-u)));
  opacity: .8;
}
/* @pt:end */