/* Generated from styles.css by admin-ui/build.mjs. */

.bg-media__blocks {
  --blocks-step: 72px;
  background: var(--blocks-background, #0a0a0c);
  overflow: hidden;
  contain: paint;
}
.bg-media__blocks::before,
[data-preview-background="blocks"]::before {
  content: "";
  position: absolute;
  background-image: var(--blocks-texture);
  background-size: 100% var(--blocks-step);
  background-repeat: repeat-y;
}
.bg-media__blocks::before {
  inset: calc(-1 * var(--blocks-step)) 0 0;
  will-change: transform;
  animation: runtime-blocks-fall var(--blocks-duration, 40s) linear infinite;
}
@keyframes runtime-blocks-fall {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, var(--blocks-step), 0); }
}
[data-preview-background="blocks"] { position: relative; overflow: hidden; background: var(--blocks-background, #0a0a0c); }
[data-preview-background="blocks"]::before { --blocks-step: 22px; inset: 0; background-image: var(--blocks-preview-texture); }
:root[data-performance="low"] .bg-media__blocks::before { animation-duration: calc(var(--blocks-duration, 40s) * 1.5); }
:root[data-page-active="false"] .bg-media__blocks::before { animation-play-state: paused; }
:root[data-performance="reduced"] .bg-media__blocks::before { animation: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) { .bg-media__blocks::before { animation: none; will-change: auto; } }

.bg-media__grid {
  display: none;
  overflow: hidden;
  background: var(--grid-background);
  contain: strict;
  isolation: isolate;
}

:root[data-background="grid"] .bg-media__grid { display: block; }

.wave-color-filter {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-media__grid::before {
  content: "";
  position: absolute;
  inset: -30vh -42vw;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .26;
  transform: rotate(-11deg) scale(1.08) translate3d(0, 0, 0);
  transform-origin: center;
  animation: runtime-grid-fall var(--background-animation-duration) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.bg-media__grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 52% 60% at -12% 82%, var(--grid-glow-left), transparent 72%),
    radial-gradient(ellipse 52% 60% at 112% 18%, var(--grid-glow-right), transparent 72%),
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .24));
}

@keyframes runtime-grid-fall {
  from { transform: rotate(-11deg) scale(1.08) translate3d(0, -34px, 0); }
  to { transform: rotate(-11deg) scale(1.08) translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-media__grid::before { animation: none; }
}

:root[data-performance="low"] .bg-media__grid::before {
  animation-duration: calc(var(--background-animation-duration) + 2.2s);
  opacity: .22;
}

:root[data-performance="reduced"] .bg-media__grid::before {
  animation: none;
  transform: rotate(-11deg) scale(1.08) translate3d(0, 0, 0);
}

:root[data-page-active="false"] .bg-media__grid::before {
  animation-play-state: paused;
}

.bg-media__grid2 {
  display: none;
  overflow: hidden;
  background: var(--grid2-background);
  contain: strict;
  isolation: isolate;
}

:root[data-background="grid2"] .bg-media__grid2 {
  display: block;
}

.bg-media__grid2::before {
  content: "";
  position: absolute;
  inset: -80px 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--grid2-line) 48%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--grid2-line) 48%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .78;
  transform: translate3d(0, -40px, 0);
  animation: runtime-grid2-fall var(--background-animation-duration) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.bg-media__grid2::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 105% 48% at 50% 108%, color-mix(in srgb, var(--grid2-glow) 68%, transparent), transparent 72%),
    linear-gradient(to bottom, transparent 42%, color-mix(in srgb, var(--grid2-glow) 9%, transparent) 72%, color-mix(in srgb, var(--grid2-glow) 36%, transparent) 100%);
  pointer-events: none;
}

@keyframes runtime-grid2-fall {
  from { transform: translate3d(0, -40px, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-media__grid2::before {
    animation: none;
    transform: translate3d(0, 0, 0);
  }
}

:root[data-performance="low"] .bg-media__grid2::before {
  animation-duration: calc(var(--background-animation-duration) + 1.4s);
  opacity: .68;
}

:root[data-performance="reduced"] .bg-media__grid2::before {
  animation: none;
  transform: translate3d(0, 0, 0);
}

:root[data-page-active="false"] .bg-media__grid2::before {
  animation-play-state: paused;
}

.bg-media__morphic {
  overflow: hidden;
  contain: strict;
  isolation: isolate;
  background: var(--morphic-background);
}

:root[data-background="morphic"] .bg-media__morphic {
  display: block;
}

.bg-media__morphic-particles {
  position: absolute;
  inset: 0;
  filter: url("#morphic-goo");
  transform: translateZ(0);
}

.bg-media__morphic-particle {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 50%;
  background: var(--morphic-ball);
  will-change: transform;
  backface-visibility: hidden;
}

:root[data-performance="low"] .bg-media__morphic-particles {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .bg-media__morphic-particle {
    will-change: auto;
  }
}

.bg-media__twinkle {
  overflow: hidden;
  contain: strict;
  isolation: isolate;
  background: var(--twinkle-background);
}

:root[data-background="twinkle"] .bg-media__twinkle {
  display: block;
}

.bg-media__twinkle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: translateZ(0);
}