/* DJ DocBot — shuffle + VHS/glitch FX (page-local) */

.dj-btn.is-on,
.dj-btn[aria-pressed="true"] {
  border-color: var(--gold, #c9a36a);
  color: #0b0b0c;
  background: linear-gradient(180deg, #f0d9a8 0%, #c9a36a 100%);
  box-shadow: 0 0 18px rgba(201, 163, 106, 0.35);
}

.dj-docbot-stage {
  position: relative;
}

.dj-fx-root {
  position: absolute;
  inset: -12% -8%;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  border-radius: 4px;
  contain: layout style paint;
}

.dj-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform, filter;
}

/* Persistent subtle CRT when playing — very light so video stays clear */
.dj-fx-root.is-live .dj-fx-scan {
  opacity: 0.18;
}
.dj-fx-scan {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(0, 0, 0, 0.22) 2px,
      rgba(0, 0, 0, 0.22) 3px
    );
  mix-blend-mode: multiply;
  transition: opacity 0.4s ease;
}

.dj-fx-vignette {
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.dj-fx-root.is-live .dj-fx-vignette {
  opacity: 0.35;
}

.dj-fx-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* --- burst effect classes (auto-cleared) --- */

.dj-fx-rgb {
  inset: -2%;
  background:
    linear-gradient(90deg, rgba(255, 0, 80, 0.18), transparent 40%, transparent 60%, rgba(0, 220, 255, 0.18));
  mix-blend-mode: screen;
  animation: dj-fx-rgb-split 0.28s steps(2, end) forwards;
  opacity: 1;
  filter: contrast(1.15);
}
@keyframes dj-fx-rgb-split {
  0% { transform: translate(0, 0); opacity: 0.95; }
  35% { transform: translate(-6px, 1px); }
  70% { transform: translate(7px, -2px); }
  100% { transform: translate(0, 0); opacity: 0; }
}

.dj-fx-tear {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent var(--dj-tear-y, 42%),
    rgba(232, 211, 164, 0.12) var(--dj-tear-y, 42%),
    rgba(232, 211, 164, 0.12) calc(var(--dj-tear-y, 42%) + 8%),
    transparent calc(var(--dj-tear-y, 42%) + 8%),
    transparent 100%
  );
  animation: dj-fx-tear-slide 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 1;
  mix-blend-mode: screen;
}
@keyframes dj-fx-tear-slide {
  0% { transform: translateX(-12%); opacity: 0.9; filter: hue-rotate(20deg); }
  50% { transform: translateX(8%); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

.dj-fx-block {
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(0, 255, 170, 0.2) 18% 34%, transparent 34% 55%, rgba(255, 40, 120, 0.18) 55% 68%, transparent 68%),
    linear-gradient(0deg, transparent 0 30%, rgba(255, 255, 255, 0.08) 30% 38%, transparent 38% 70%, rgba(0, 180, 255, 0.12) 70% 78%, transparent 78%);
  clip-path: inset(var(--dj-clip-t, 12%) var(--dj-clip-r, 8%) var(--dj-clip-b, 40%) var(--dj-clip-l, 5%));
  animation: dj-fx-block-jitter 0.32s steps(3, end) forwards;
  mix-blend-mode: hard-light;
  opacity: 1;
}
@keyframes dj-fx-block-jitter {
  0% { transform: translate(0, 0) skewX(0deg); opacity: 1; }
  33% { transform: translate(-10px, 2px) skewX(-2deg); }
  66% { transform: translate(12px, -3px) skewX(1.5deg); }
  100% { transform: translate(0, 0); opacity: 0; }
}

.dj-fx-leak {
  background:
    radial-gradient(ellipse at var(--dj-leak-x, 18%) var(--dj-leak-y, 22%), rgba(255, 180, 60, 0.55) 0%, rgba(255, 60, 40, 0.2) 28%, transparent 55%),
    radial-gradient(ellipse at calc(100% - var(--dj-leak-x, 18%)) 80%, rgba(120, 40, 255, 0.28) 0%, transparent 45%);
  mix-blend-mode: screen;
  animation: dj-fx-leak-pulse 0.7s ease-out forwards;
  opacity: 1;
}
@keyframes dj-fx-leak-pulse {
  0% { opacity: 0; filter: brightness(1.4); }
  30% { opacity: 0.95; }
  100% { opacity: 0; filter: brightness(1); }
}

.dj-fx-bloom {
  box-shadow: inset 0 0 60px rgba(232, 211, 164, 0.35), inset 0 0 120px rgba(255, 255, 255, 0.12);
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.22), transparent 60%);
  animation: dj-fx-bloom-out 0.4s ease-out forwards;
  mix-blend-mode: screen;
  opacity: 1;
}
@keyframes dj-fx-bloom-out {
  0% { opacity: 0.9; filter: blur(0px); }
  100% { opacity: 0; filter: blur(2px); }
}

.dj-fx-flash {
  background: var(--dj-flash, #f4efe6);
  animation: dj-fx-flash-out 0.12s ease-out forwards;
  mix-blend-mode: screen;
  opacity: 1;
}
@keyframes dj-fx-flash-out {
  0% { opacity: 0.55; }
  100% { opacity: 0; }
}

.dj-fx-wipe {
  background: linear-gradient(
    var(--dj-wipe-angle, 95deg),
    transparent 0%,
    transparent 40%,
    rgba(232, 211, 164, 0.35) 48%,
    rgba(0, 0, 0, 0.5) 52%,
    transparent 60%,
    transparent 100%
  );
  animation: dj-fx-wipe-run 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 1;
}
@keyframes dj-fx-wipe-run {
  0% { transform: translateX(-60%); opacity: 0.85; }
  100% { transform: translateX(60%); opacity: 0; }
}

.dj-fx-tracking {
  background: repeating-linear-gradient(
    0deg,
    transparent 0 6px,
    rgba(255, 255, 255, 0.04) 6px 7px,
    transparent 7px 14px,
    rgba(0, 255, 200, 0.06) 14px 15px
  );
  animation: dj-fx-track-roll 0.55s linear forwards;
  opacity: 1;
  mix-blend-mode: soft-light;
}
@keyframes dj-fx-track-roll {
  0% { transform: translateY(-20%); opacity: 0.8; }
  100% { transform: translateY(25%); opacity: 0; }
}

.dj-fx-code {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.35rem 0.7rem;
  padding: 8% 6%;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(0.55rem, 1.4vw, 0.78rem);
  letter-spacing: 0.06em;
  color: rgba(0, 255, 170, 0.72);
  text-shadow: 0 0 8px rgba(0, 255, 170, 0.35);
  mix-blend-mode: screen;
  animation: dj-fx-code-fade 0.85s ease-out forwards;
  opacity: 1;
  overflow: hidden;
}
.dj-fx-code span {
  white-space: nowrap;
  opacity: 0.85;
}
@keyframes dj-fx-code-fade {
  0% { opacity: 0; transform: translateY(-4%); }
  20% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(6%); }
}

.dj-fx-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Bungee", Impact, Haettenschweiler, sans-serif;
  font-size: clamp(1.1rem, 4.5vw, 2.4rem);
  letter-spacing: 0.12em;
  color: rgba(255, 40, 60, 0.82);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.65), -1px 0 0 rgba(0, 220, 255, 0.45);
  border: 3px solid rgba(255, 40, 60, 0.75);
  margin: auto;
  top: 18%;
  bottom: 18%;
  left: 12%;
  right: 12%;
  width: auto;
  height: auto;
  inset: 22% 14%;
  transform: rotate(var(--dj-stamp-rot, -8deg));
  animation: dj-fx-stamp-pop 0.55s cubic-bezier(0.2, 1.4, 0.3, 1) forwards;
  mix-blend-mode: screen;
  opacity: 1;
  background: rgba(10, 8, 8, 0.18);
}
@keyframes dj-fx-stamp-pop {
  0% { opacity: 0; transform: rotate(var(--dj-stamp-rot, -8deg)) scale(1.35); }
  25% { opacity: 1; transform: rotate(var(--dj-stamp-rot, -8deg)) scale(1); }
  100% { opacity: 0; transform: rotate(var(--dj-stamp-rot, -8deg)) scale(0.92); }
}

.dj-fx-slice {
  background: transparent;
  box-shadow:
    0 var(--dj-slice-y, 30%) 0 1px rgba(232, 211, 164, 0.55),
    0 calc(var(--dj-slice-y, 30%) + 14px) 0 1px rgba(0, 220, 255, 0.35);
  animation: dj-fx-slice-skew 0.35s steps(2, end) forwards;
  opacity: 1;
}
@keyframes dj-fx-slice-skew {
  0% { transform: translateX(0) skewY(0deg); opacity: 0.9; }
  40% { transform: translateX(-4%) skewY(0.6deg); }
  70% { transform: translateX(5%) skewY(-0.4deg); }
  100% { transform: translateX(0); opacity: 0; }
}

.dj-fx-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  animation: dj-fx-noise-out 0.25s ease-out forwards;
  opacity: 1;
}
@keyframes dj-fx-noise-out {
  0% { opacity: 0.45; }
  100% { opacity: 0; }
}


/* ============================================================
   EXPANDED FX LIBRARY (~11× vocabulary) — soft-pad artistic
   Intensity caps match originals (opacity / duration / scale).
   All .dj-fx-* remain pointer-events: none via .dj-fx-layer.
   ============================================================ */

/* --- datamosh / mosaic --- */
.dj-fx-datamosh,.dj-fx-datamosh2,.dj-fx-mosaic,.dj-fx-mosaicfine,.dj-fx-tilejitter,.dj-fx-jpegdrop,.dj-fx-blockshift,.dj-fx-macroblock {
  background:
    linear-gradient(90deg, transparent 0 20%, rgba(0,255,170,0.16) 20% 32%, transparent 32% 58%, rgba(255,40,120,0.14) 58% 70%, transparent 70%),
    linear-gradient(0deg, transparent 0 28%, rgba(255,255,255,0.07) 28% 36%, transparent 36%);
  clip-path: inset(var(--dj-mos-y, 18%) calc(100% - var(--dj-mos-x, 40%) - var(--dj-mos-s, 22%)) calc(100% - var(--dj-mos-y, 18%) - var(--dj-mos-s, 22%)) var(--dj-mos-x, 40%));
  animation: dj-fx-block-jitter 0.32s steps(3, end) forwards;
  mix-blend-mode: hard-light;
  opacity: 1;
}
.dj-fx-mosaicfine { background-size: 12px 12px; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 6px), repeating-linear-gradient(90deg, rgba(0,220,255,0.08) 0 1px, transparent 1px 6px); }
.dj-fx-datamosh2 { filter: hue-rotate(25deg); }
.dj-fx-jpegdrop { mix-blend-mode: soft-light; }
.dj-fx-tilejitter { animation-duration: 0.28s; }
.dj-fx-blocksoft {
  background: linear-gradient(90deg, transparent 0 22%, rgba(0,255,170,0.12) 22% 36%, transparent 36%);
  clip-path: inset(var(--dj-clip-t, 12%) var(--dj-clip-r, 8%) var(--dj-clip-b, 40%) var(--dj-clip-l, 5%));
  animation: dj-fx-block-jitter 0.32s steps(3, end) forwards;
  mix-blend-mode: soft-light;
  opacity: 1;
}

/* --- posterize / flicker --- */
.dj-fx-posterize,.dj-fx-posterflick,.dj-fx-posterwarm,.dj-fx-postercool,.dj-fx-bitcrush {
  background: linear-gradient(180deg, var(--dj-post, #1a1020) 0%, transparent 40%, transparent 60%, var(--dj-post, #1a1020) 100%);
  mix-blend-mode: soft-light;
  animation: dj-fx-poster-flick 0.35s steps(2, end) forwards;
  opacity: 1;
}
.dj-fx-posterwarm { filter: sepia(0.35) hue-rotate(-10deg); }
.dj-fx-postercool { filter: hue-rotate(40deg) saturate(0.7); }
.dj-fx-bitcrush { background: repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0 4px, transparent 4px 8px); mix-blend-mode: multiply; }
@keyframes dj-fx-poster-flick {
  0% { opacity: 0.45; }
  40% { opacity: 0.55; }
  100% { opacity: 0; }
}

/* --- hue / chroma --- */
.dj-fx-huerot,.dj-fx-huerot2,.dj-fx-huesweep,.dj-fx-chromashift,.dj-fx-chromaburst,.dj-fx-cyanmagenta,.dj-fx-duotone {
  inset: -2%;
  background: linear-gradient(90deg, rgba(255,0,80,0.14), transparent 40%, transparent 60%, rgba(0,220,255,0.14));
  mix-blend-mode: screen;
  filter: hue-rotate(var(--dj-hue, 20deg)) contrast(1.1);
  animation: dj-fx-rgb-split 0.28s steps(2, end) forwards;
  opacity: 1;
}
.dj-fx-huerot2 { filter: hue-rotate(calc(var(--dj-hue, 20deg) * -1)) contrast(1.08); }
.dj-fx-huesweep { animation: dj-fx-hue-sweep 0.5s ease-out forwards; }
.dj-fx-cyanmagenta { background: linear-gradient(90deg, rgba(0,255,220,0.16), transparent 50%, rgba(255,0,160,0.16)); }
.dj-fx-duotone { background: linear-gradient(180deg, rgba(201,163,106,0.18), transparent 50%, rgba(122,92,255,0.16)); }
.dj-fx-chromaburst { animation-duration: 0.22s; }
.dj-fx-rgbsoft {
  inset: -2%;
  background: linear-gradient(90deg, rgba(255,0,80,0.10), transparent 45%, transparent 55%, rgba(0,220,255,0.10));
  mix-blend-mode: screen;
  animation: dj-fx-rgb-split 0.28s steps(2, end) forwards;
  opacity: 1;
}
@keyframes dj-fx-hue-sweep {
  0% { filter: hue-rotate(-30deg); opacity: 0.7; }
  50% { filter: hue-rotate(30deg); opacity: 0.85; }
  100% { filter: hue-rotate(0deg); opacity: 0; }
}

/* --- grain / snow / static --- */
.dj-fx-filmgrain,.dj-fx-grainburst,.dj-fx-staticsnow,.dj-fx-staticsnow2,.dj-fx-whitenoise,.dj-fx-pinknoise,.dj-fx-tvsnow,.dj-fx-noisefine {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  animation: dj-fx-noise-out 0.25s ease-out forwards;
  opacity: 1;
}
.dj-fx-filmgrain { background-size: 120px 120px; opacity: 1; }
.dj-fx-grainburst { animation-duration: 0.2s; }
.dj-fx-staticsnow2 { mix-blend-mode: soft-light; background-size: 90px 90px; }
.dj-fx-whitenoise { filter: contrast(1.2) brightness(1.1); }
.dj-fx-pinknoise { filter: hue-rotate(-20deg) saturate(0.6); }
.dj-fx-tvsnow { animation: dj-fx-tvsnow 0.3s steps(3, end) forwards; }
.dj-fx-noisefine { background-size: 60px 60px; }
@keyframes dj-fx-tvsnow {
  0% { opacity: 0.4; transform: translate(0,0); }
  33% { opacity: 0.45; transform: translate(-2px,1px); }
  66% { opacity: 0.35; transform: translate(2px,-1px); }
  100% { opacity: 0; }
}

/* --- letterbox / bars --- */
.dj-fx-letterbox,.dj-fx-letterboxslim,.dj-fx-pillarbox,.dj-fx-cinescope,.dj-fx-safearea {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.72) 0, rgba(0,0,0,0.72) var(--dj-box, 10%), transparent var(--dj-box, 10%), transparent calc(100% - var(--dj-box, 10%)), rgba(0,0,0,0.72) calc(100% - var(--dj-box, 10%)), rgba(0,0,0,0.72) 100%);
  animation: dj-fx-box-fade 0.55s ease-out forwards;
  opacity: 1;
}
.dj-fx-letterboxslim { --dj-box: 6%; }
.dj-fx-pillarbox {
  background: linear-gradient(90deg, rgba(0,0,0,0.72) 0, rgba(0,0,0,0.72) var(--dj-box, 10%), transparent var(--dj-box, 10%), transparent calc(100% - var(--dj-box, 10%)), rgba(0,0,0,0.72) calc(100% - var(--dj-box, 10%)), rgba(0,0,0,0.72) 100%);
}
.dj-fx-cinescope { --dj-box: 12%; }
.dj-fx-safearea {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(232,211,164,0.35);
  animation: dj-fx-box-fade 0.55s ease-out forwards;
}
@keyframes dj-fx-box-fade {
  0% { opacity: 0; }
  25% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* --- timecode / HUD --- */
.dj-fx-timecode,.dj-fx-timecode2,.dj-fx-recdot,.dj-fx-hudcorner,.dj-fx-framenum,.dj-fx-cuepoint,.dj-fx-dropmarker {
  inset: auto;
  top: var(--dj-tc-y, 12%);
  left: var(--dj-tc-x, 8%);
  width: auto;
  height: auto;
  padding: 0.2em 0.55em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(0.55rem, 1.5vw, 0.85rem);
  letter-spacing: 0.08em;
  color: rgba(0,255,170,0.78);
  text-shadow: 0 0 6px rgba(0,255,170,0.3);
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(0,255,170,0.25);
  mix-blend-mode: screen;
  animation: dj-fx-code-fade 0.85s ease-out forwards;
  opacity: 1;
  white-space: nowrap;
}
.dj-fx-timecode2 { color: rgba(232,211,164,0.8); border-color: rgba(232,211,164,0.3); }
.dj-fx-recdot { color: rgba(255,40,60,0.85); border-color: rgba(255,40,60,0.4); }
.dj-fx-hudcorner { color: rgba(122,92,255,0.8); }
.dj-fx-framenum { color: rgba(0,220,255,0.75); }
.dj-fx-cuepoint,.dj-fx-dropmarker { color: rgba(201,163,106,0.85); }

/* --- channel swap --- */
.dj-fx-channelswap,.dj-fx-rgbflick,.dj-fx-bgrflash,.dj-fx-gbswap,.dj-fx-rybshift {
  inset: -2%;
  background: linear-gradient(90deg, rgba(0,80,255,0.16), transparent 40%, transparent 60%, rgba(255,80,0,0.16));
  mix-blend-mode: screen;
  animation: dj-fx-rgb-split 0.28s steps(2, end) forwards;
  opacity: 1;
  filter: hue-rotate(180deg) contrast(1.1);
}
.dj-fx-rgbflick { filter: none; animation-duration: 0.18s; }
.dj-fx-bgrflash { background: var(--dj-flash, #33ffcc); animation: dj-fx-flash-out 0.12s ease-out forwards; filter: none; mix-blend-mode: screen; }
.dj-fx-gbswap { filter: hue-rotate(90deg); }
.dj-fx-rybshift { filter: hue-rotate(-45deg); }

/* --- neon / edge --- */
.dj-fx-neonedge,.dj-fx-neonpink,.dj-fx-neocyan,.dj-fx-outlineglow,.dj-fx-edgeflash {
  background: transparent;
  box-shadow:
    inset 0 0 0 2px var(--dj-neon, #ff3366),
    inset 0 0 28px rgba(255,51,102,0.22);
  animation: dj-fx-neon-pulse 0.45s ease-out forwards;
  opacity: 1;
  mix-blend-mode: screen;
}
.dj-fx-neonpink { --dj-neon: #ff3366; }
.dj-fx-neocyan { --dj-neon: #33ffcc; box-shadow: inset 0 0 0 2px #33ffcc, inset 0 0 28px rgba(51,255,204,0.2); }
.dj-fx-outlineglow { box-shadow: inset 0 0 0 1px rgba(232,211,164,0.55), inset 0 0 40px rgba(232,211,164,0.18); }
.dj-fx-edgeflash { animation-duration: 0.14s; }
@keyframes dj-fx-neon-pulse {
  0% { opacity: 0; }
  30% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* --- stutter / freeze --- */
.dj-fx-stutter,.dj-fx-freeze,.dj-fx-framehold,.dj-fx-doublestrike {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent var(--dj-hold-y, 40%),
    rgba(244,239,230,0.12) var(--dj-hold-y, 40%),
    rgba(244,239,230,0.12) calc(var(--dj-hold-y, 40%) + 18%),
    transparent calc(var(--dj-hold-y, 40%) + 18%),
    transparent 100%
  );
  mix-blend-mode: screen;
  animation: dj-fx-stutter-hold 0.28s steps(2, end) forwards;
  opacity: 1;
}
.dj-fx-doublestrike {
  box-shadow: 0 calc(var(--dj-hold-y, 40%) + 22px) 0 1px rgba(0,220,255,0.3);
}
@keyframes dj-fx-stutter-hold {
  0% { opacity: 0.85; transform: translateX(0); }
  40% { opacity: 0.9; transform: translateX(-3%); }
  70% { opacity: 0.7; transform: translateX(2%); }
  100% { opacity: 0; transform: translateX(0); }
}

/* --- barcode / noise bars --- */
.dj-fx-barcode,.dj-fx-barcode2,.dj-fx-noisebar,.dj-fx-glitchbar,.dj-fx-scanburst {
  background: repeating-linear-gradient(
    90deg,
    transparent 0 2px,
    rgba(0,0,0,0.35) 2px 3px,
    transparent 3px 5px,
    rgba(255,255,255,0.08) 5px 6px,
    transparent 6px 9px
  );
  clip-path: inset(var(--dj-bar-y, 40%) 0 calc(100% - var(--dj-bar-y, 40%) - var(--dj-bar-h, 8%)) 0);
  animation: dj-fx-tear-slide 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  mix-blend-mode: soft-light;
  opacity: 1;
}
.dj-fx-barcode2 { filter: hue-rotate(160deg); }
.dj-fx-noisebar { mix-blend-mode: overlay; }
.dj-fx-glitchbar {
  background: linear-gradient(90deg, rgba(0,255,170,0.2), rgba(255,40,120,0.18), rgba(0,180,255,0.16));
  mix-blend-mode: hard-light;
}
.dj-fx-scanburst {
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.06) 3px 4px);
  clip-path: none;
  animation: dj-fx-track-roll 0.55s linear forwards;
}

/* --- vinyl / scratch --- */
.dj-fx-vinyl,.dj-fx-vinyl2,.dj-fx-scratch,.dj-fx-needlehop,.dj-fx-wowflutter {
  background: repeating-linear-gradient(
    var(--dj-vinyl-a, -4deg),
    transparent 0 18px,
    rgba(232,211,164,0.14) 18px 19px,
    transparent 19px 40px,
    rgba(255,255,255,0.06) 40px 41px
  );
  animation: dj-fx-vinyl-spin 0.5s ease-out forwards;
  mix-blend-mode: screen;
  opacity: 1;
}
.dj-fx-vinyl2 { filter: hue-rotate(40deg); }
.dj-fx-scratch {
  background: linear-gradient(var(--dj-vinyl-a, -6deg), transparent 46%, rgba(244,239,230,0.35) 49%, rgba(0,0,0,0.35) 51%, transparent 54%);
}
.dj-fx-needlehop { animation-duration: 0.28s; }
.dj-fx-wowflutter { animation: dj-fx-wow 0.55s ease-in-out forwards; }
@keyframes dj-fx-vinyl-spin {
  0% { opacity: 0.7; transform: rotate(0deg); }
  50% { opacity: 0.85; }
  100% { opacity: 0; transform: rotate(1.2deg); }
}
@keyframes dj-fx-wow {
  0% { opacity: 0.6; transform: scaleX(1); }
  40% { opacity: 0.8; transform: scaleX(1.02); }
  100% { opacity: 0; transform: scaleX(1); }
}

/* --- boom-bap / stamp variants --- */
.dj-fx-boomstamp,.dj-fx-stampgold,.dj-fx-stampcyan,.dj-fx-stampsoft,.dj-fx-stampmini,.dj-fx-tapeedge,.dj-fx-cornerstamp {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Bungee", Impact, Haettenschweiler, sans-serif;
  font-size: clamp(1.1rem, 4.5vw, 2.4rem);
  letter-spacing: 0.12em;
  color: rgba(255,40,60,0.82);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.65), -1px 0 0 rgba(0,220,255,0.45);
  border: 3px solid rgba(255,40,60,0.75);
  margin: auto;
  inset: 22% 14%;
  width: auto;
  height: auto;
  transform: rotate(var(--dj-stamp-rot, -8deg));
  animation: dj-fx-stamp-pop 0.55s cubic-bezier(0.2, 1.4, 0.3, 1) forwards;
  mix-blend-mode: screen;
  opacity: 1;
  background: rgba(10,8,8,0.18);
}
.dj-fx-boomstamp { color: rgba(201,163,106,0.85); border-color: rgba(201,163,106,0.7); }
.dj-fx-stampgold { color: rgba(240,217,168,0.88); border-color: rgba(201,163,106,0.75); }
.dj-fx-stampcyan { color: rgba(51,255,204,0.82); border-color: rgba(51,255,204,0.7); text-shadow: 2px 2px 0 rgba(0,0,0,0.65), -1px 0 0 rgba(255,40,60,0.4); }
.dj-fx-stampsoft { color: rgba(244,239,230,0.7); border-color: rgba(244,239,230,0.45); border-width: 2px; }
.dj-fx-stampmini { font-size: clamp(0.7rem, 2.5vw, 1.2rem); inset: 30% 28%; border-width: 2px; }
.dj-fx-tapeedge {
  background: linear-gradient(90deg, rgba(201,163,106,0.35), transparent 30%, transparent 70%, rgba(201,163,106,0.35));
  border: none;
  color: transparent;
  text-shadow: none;
  inset: 0;
}
.dj-fx-cornerstamp {
  inset: auto;
  top: var(--dj-stamp-y, 18%);
  left: var(--dj-stamp-x, 10%);
  right: auto;
  bottom: auto;
  padding: 0.25em 0.5em;
  font-size: clamp(0.65rem, 2vw, 1rem);
}

/* --- karaoke / lyrics --- */
.dj-fx-karaoke,.dj-fx-lyricwipe,.dj-fx-lyricglow,.dj-fx-scrollscrap {
  inset: auto;
  left: 8%;
  right: 8%;
  top: var(--dj-ly-y, 72%);
  width: auto;
  height: auto;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(0.85rem, 2.8vw, 1.4rem);
  letter-spacing: 0.06em;
  color: rgba(244,239,230,0.85);
  text-shadow: 0 0 10px rgba(201,163,106,0.35), 1px 1px 0 rgba(0,0,0,0.5);
  mix-blend-mode: screen;
  animation: dj-fx-lyric-fade 0.85s ease-out forwards;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
}
.dj-fx-lyricwipe { color: rgba(0,255,170,0.75); font-family: ui-monospace, Menlo, monospace; font-size: clamp(0.65rem, 1.8vw, 0.95rem); }
.dj-fx-lyricglow { color: rgba(122,92,255,0.8); text-shadow: 0 0 14px rgba(122,92,255,0.45); }
.dj-fx-scrollscrap { animation: dj-fx-lyric-scroll 0.85s ease-out forwards; }
@keyframes dj-fx-lyric-fade {
  0% { opacity: 0; transform: translateY(6px); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes dj-fx-lyric-scroll {
  0% { opacity: 0; transform: translateX(-8%); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(8%); }
}

/* --- interlace / CRT --- */
.dj-fx-interlace,.dj-fx-interlace2,.dj-fx-crtroll,.dj-fx-vsync,.dj-fx-fieldswap,.dj-fx-topscan,.dj-fx-botscan,.dj-fx-scanthick,.dj-fx-scanthin {
  background: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(0,0,0,0.18) 2px 3px,
    transparent 3px 5px,
    rgba(0,255,200,0.05) 5px 6px
  );
  animation: dj-fx-track-roll 0.55s linear forwards;
  mix-blend-mode: soft-light;
  opacity: 1;
}
.dj-fx-interlace2 { background: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px); }
.dj-fx-crtroll { animation-duration: 0.65s; }
.dj-fx-vsync {
  background: linear-gradient(180deg, transparent 0 40%, rgba(232,211,164,0.2) 48%, rgba(0,0,0,0.35) 52%, transparent 60%);
  animation: dj-fx-tear-slide 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.dj-fx-fieldswap { filter: hue-rotate(15deg); }
.dj-fx-topscan { clip-path: inset(0 0 70% 0); }
.dj-fx-botscan { clip-path: inset(70% 0 0 0); }
.dj-fx-scanthick { background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,0.2) 4px 6px); }
.dj-fx-scanthin { background: repeating-linear-gradient(0deg, transparent 0 1px, rgba(255,255,255,0.04) 1px 2px); }
.dj-fx-trackfine {
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,0.03) 4px 5px, transparent 5px 10px, rgba(0,255,200,0.04) 10px 11px);
  animation: dj-fx-track-roll 0.55s linear forwards;
  mix-blend-mode: soft-light;
  opacity: 1;
}

/* --- pixel sort --- */
.dj-fx-pixelsort,.dj-fx-pixelsort2,.dj-fx-sortstrip,.dj-fx-rainstrip,.dj-fx-columnshift {
  background: linear-gradient(
    180deg,
    rgba(255,0,80,0.14) 0%,
    rgba(0,220,255,0.12) 35%,
    rgba(232,211,164,0.1) 65%,
    rgba(122,92,255,0.12) 100%
  );
  clip-path: inset(5% calc(100% - var(--dj-sort-x, 40%) - var(--dj-sort-w, 6%)) 5% var(--dj-sort-x, 40%));
  animation: dj-fx-sort-fall 0.45s steps(4, end) forwards;
  mix-blend-mode: screen;
  opacity: 1;
}
.dj-fx-pixelsort2 { filter: hue-rotate(60deg); }
.dj-fx-sortstrip { mix-blend-mode: hard-light; }
.dj-fx-rainstrip { animation-duration: 0.55s; }
.dj-fx-columnshift { animation: dj-fx-block-jitter 0.32s steps(3, end) forwards; }
@keyframes dj-fx-sort-fall {
  0% { opacity: 0.85; transform: translateY(-8%); }
  50% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(10%); }
}

/* --- UV / blacklight --- */
.dj-fx-uvwash,.dj-fx-blacklight,.dj-fx-uvpulse,.dj-fx-violetfog {
  background:
    radial-gradient(ellipse at var(--dj-uv-x, 40%) var(--dj-uv-y, 40%), rgba(122,40,255,0.4) 0%, rgba(40,0,80,0.15) 40%, transparent 65%);
  mix-blend-mode: screen;
  animation: dj-fx-leak-pulse 0.7s ease-out forwards;
  opacity: 1;
}
.dj-fx-blacklight { background: radial-gradient(ellipse at var(--dj-uv-x, 50%) var(--dj-uv-y, 50%), rgba(80,0,180,0.35) 0%, transparent 55%); }
.dj-fx-uvpulse { animation-duration: 0.45s; }
.dj-fx-violetfog { mix-blend-mode: soft-light; }
.dj-fx-leakcool {
  background:
    radial-gradient(ellipse at var(--dj-leak-x, 18%) var(--dj-leak-y, 22%), rgba(60,180,255,0.45) 0%, rgba(40,60,255,0.18) 28%, transparent 55%),
    radial-gradient(ellipse at calc(100% - var(--dj-leak-x, 18%)) 80%, rgba(120,40,255,0.22) 0%, transparent 45%);
  mix-blend-mode: screen;
  animation: dj-fx-leak-pulse 0.7s ease-out forwards;
  opacity: 1;
}
.dj-fx-cornerleak {
  background: radial-gradient(ellipse at var(--dj-leak-x, 8%) var(--dj-leak-y, 10%), rgba(255,180,60,0.5) 0%, transparent 50%);
  mix-blend-mode: screen;
  animation: dj-fx-leak-pulse 0.7s ease-out forwards;
  opacity: 1;
}

/* --- lens dirt --- */
.dj-fx-lensdirt,.dj-fx-lensdirt2,.dj-fx-dustspeck,.dj-fx-hairline,.dj-fx-fingerprint {
  background:
    radial-gradient(circle at var(--dj-dirt-x, 30%) var(--dj-dirt-y, 25%), rgba(255,255,255,0.18) 0 1px, transparent 3px),
    radial-gradient(circle at calc(var(--dj-dirt-x, 30%) + 12%) calc(var(--dj-dirt-y, 25%) + 8%), rgba(200,180,140,0.14) 0 2px, transparent 5px),
    radial-gradient(circle at calc(var(--dj-dirt-x, 30%) + 28%) calc(var(--dj-dirt-y, 25%) - 5%), rgba(255,255,255,0.1) 0 1px, transparent 4px);
  mix-blend-mode: screen;
  animation: dj-fx-dirt-fade 0.65s ease-out forwards;
  opacity: 1;
}
.dj-fx-lensdirt2 { filter: blur(0.4px); }
.dj-fx-dustspeck { background: radial-gradient(circle at var(--dj-dirt-x, 50%) var(--dj-dirt-y, 40%), rgba(255,255,255,0.22) 0 1.5px, transparent 4px); }
.dj-fx-hairline {
  background: linear-gradient(var(--dj-dirt-x, 30deg), transparent 48%, rgba(255,255,255,0.2) 49.5%, rgba(255,255,255,0.2) 50.5%, transparent 52%);
}
.dj-fx-fingerprint {
  background: radial-gradient(ellipse at var(--dj-dirt-x, 60%) var(--dj-dirt-y, 55%), transparent 20%, rgba(200,190,170,0.12) 35%, transparent 55%);
}
@keyframes dj-fx-dirt-fade {
  0% { opacity: 0; }
  30% { opacity: 0.85; }
  100% { opacity: 0; }
}

/* --- prism / shards --- */
.dj-fx-prism,.dj-fx-prism2,.dj-fx-shard,.dj-fx-rainbowedge,.dj-fx-spectra {
  background: conic-gradient(from var(--dj-prism-a, 0deg) at 50% 50%,
    rgba(255,0,80,0.12), rgba(255,200,0,0.1), rgba(0,255,170,0.12), rgba(0,180,255,0.1), rgba(122,92,255,0.12), rgba(255,0,80,0.12));
  mix-blend-mode: screen;
  animation: dj-fx-prism-spin 0.55s ease-out forwards;
  opacity: 1;
  clip-path: polygon(50% 10%, 80% 40%, 65% 80%, 35% 80%, 20% 40%);
}
.dj-fx-prism2 { clip-path: polygon(20% 20%, 80% 15%, 90% 70%, 40% 85%, 10% 50%); }
.dj-fx-shard { clip-path: polygon(45% 5%, 70% 45%, 55% 95%, 25% 60%); animation-duration: 0.4s; }
.dj-fx-rainbowedge {
  clip-path: none;
  background: linear-gradient(var(--dj-prism-a, 45deg), transparent 30%, rgba(255,0,80,0.14) 40%, rgba(0,255,170,0.14) 50%, rgba(0,180,255,0.14) 60%, transparent 70%);
}
.dj-fx-spectra { clip-path: inset(30% 10% 30% 10%); }
@keyframes dj-fx-prism-spin {
  0% { opacity: 0.7; transform: rotate(0deg) scale(1.05); }
  40% { opacity: 0.85; }
  100% { opacity: 0; transform: rotate(4deg) scale(1); }
}

/* --- misc soft pad --- */
.dj-fx-ghostdbl {
  background: linear-gradient(90deg, rgba(255,255,255,0.08), transparent 50%);
  animation: dj-fx-rgb-split 0.28s steps(2, end) forwards;
  mix-blend-mode: screen;
  opacity: 1;
}
.dj-fx-softinvert {
  background: rgba(244,239,230,0.12);
  mix-blend-mode: difference;
  animation: dj-fx-flash-out 0.12s ease-out forwards;
  opacity: 1;
}
.dj-fx-filmburn {
  background: radial-gradient(ellipse at 90% 10%, rgba(255,120,40,0.4) 0%, transparent 40%),
              radial-gradient(ellipse at 10% 90%, rgba(255,60,20,0.25) 0%, transparent 35%);
  mix-blend-mode: screen;
  animation: dj-fx-leak-pulse 0.7s ease-out forwards;
  opacity: 1;
}
.dj-fx-polaroid {
  background: transparent;
  box-shadow: inset 0 0 0 12px rgba(244,239,230,0.35), inset 0 -28px 0 rgba(244,239,230,0.28);
  animation: dj-fx-box-fade 0.55s ease-out forwards;
  opacity: 1;
}
.dj-fx-sparkledust {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.35) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 40%, rgba(232,211,164,0.3) 0 1px, transparent 2px),
    radial-gradient(circle at 45% 70%, rgba(255,255,255,0.25) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 20%, rgba(0,220,255,0.25) 0 1px, transparent 2px);
  animation: dj-fx-dirt-fade 0.65s ease-out forwards;
  mix-blend-mode: screen;
  opacity: 1;
}
.dj-fx-wavehint {
  background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(255,255,255,0.04) 10px 12px);
  animation: dj-fx-wow 0.55s ease-in-out forwards;
  mix-blend-mode: soft-light;
  opacity: 1;
}
.dj-fx-cassettetape {
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0 8%, transparent 8% 92%, rgba(0,0,0,0.35) 92% 100%);
  animation: dj-fx-box-fade 0.55s ease-out forwards;
  opacity: 1;
}
.dj-fx-matrixrain,.dj-fx-hexrain,.dj-fx-binaryrain,.dj-fx-verticalcode,.dj-fx-codeamber {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.35rem 0.7rem;
  padding: 8% 6%;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(0.55rem, 1.4vw, 0.78rem);
  letter-spacing: 0.06em;
  color: rgba(0,255,170,0.72);
  text-shadow: 0 0 8px rgba(0,255,170,0.35);
  mix-blend-mode: screen;
  animation: dj-fx-code-fade 0.85s ease-out forwards;
  opacity: 1;
  overflow: hidden;
}
.dj-fx-codeamber { color: rgba(255,180,60,0.72); text-shadow: 0 0 8px rgba(255,180,60,0.3); }
.dj-fx-hexrain { color: rgba(0,220,255,0.7); }
.dj-fx-binaryrain { color: rgba(232,211,164,0.7); }
.dj-fx-verticalcode { writing-mode: vertical-rl; flex-direction: column; }
.dj-fx-vhsdrop {
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 48%, rgba(232,211,164,0.15) 50%, transparent 55%);
  animation: dj-fx-tear-slide 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  mix-blend-mode: multiply;
  opacity: 1;
}
.dj-fx-bloomsoft {
  box-shadow: inset 0 0 50px rgba(232,211,164,0.25), inset 0 0 100px rgba(255,255,255,0.08);
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.14), transparent 60%);
  animation: dj-fx-bloom-out 0.4s ease-out forwards;
  mix-blend-mode: screen;
  opacity: 1;
}
.dj-fx-tearsoft {
  background: linear-gradient(180deg, transparent 0%, transparent var(--dj-tear-y, 42%), rgba(232,211,164,0.08) var(--dj-tear-y, 42%), rgba(232,211,164,0.08) calc(var(--dj-tear-y, 42%) + 8%), transparent calc(var(--dj-tear-y, 42%) + 8%), transparent 100%);
  animation: dj-fx-tear-slide 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  mix-blend-mode: soft-light;
  opacity: 1;
}
.dj-fx-midtear,.dj-fx-sidetear {
  background: linear-gradient(180deg, transparent 0%, transparent var(--dj-tear-y, 42%), rgba(232,211,164,0.12) var(--dj-tear-y, 42%), rgba(232,211,164,0.12) calc(var(--dj-tear-y, 42%) + 8%), transparent calc(var(--dj-tear-y, 42%) + 8%), transparent 100%);
  animation: dj-fx-tear-slide 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  mix-blend-mode: screen;
  opacity: 1;
}
.dj-fx-sidetear { background: linear-gradient(90deg, transparent 0%, transparent var(--dj-tear-y, 42%), rgba(0,220,255,0.12) var(--dj-tear-y, 42%), rgba(0,220,255,0.12) calc(var(--dj-tear-y, 42%) + 6%), transparent calc(var(--dj-tear-y, 42%) + 6%), transparent 100%); }
.dj-fx-wipevert,.dj-fx-diagwipe,.dj-fx-crosswipe {
  background: linear-gradient(var(--dj-wipe-angle, 95deg), transparent 0%, transparent 40%, rgba(232,211,164,0.35) 48%, rgba(0,0,0,0.5) 52%, transparent 60%, transparent 100%);
  animation: dj-fx-wipe-run 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 1;
}
.dj-fx-crosswipe {
  background:
    linear-gradient(var(--dj-wipe-angle, 95deg), transparent 40%, rgba(232,211,164,0.25) 48%, transparent 56%),
    linear-gradient(calc(var(--dj-wipe-angle, 95deg) + 90deg), transparent 40%, rgba(0,220,255,0.18) 48%, transparent 56%);
}
.dj-fx-slicemulti {
  background: transparent;
  box-shadow:
    0 var(--dj-slice-y, 30%) 0 1px rgba(232,211,164,0.55),
    0 calc(var(--dj-slice-y, 30%) + 14px) 0 1px rgba(0,220,255,0.35),
    0 calc(var(--dj-slice-y, 30%) + 28px) 0 1px rgba(255,40,120,0.25);
  animation: dj-fx-slice-skew 0.35s steps(2, end) forwards;
  opacity: 1;
}
.dj-fx-flashwarm,.dj-fx-flashcool,.dj-fx-flashgold {
  background: var(--dj-flash, #f4efe6);
  animation: dj-fx-flash-out 0.12s ease-out forwards;
  mix-blend-mode: screen;
  opacity: 1;
}

/* --- extra axis / texture variants --- */
.dj-fx-dotmatrix,.dj-fx-halftone {
  background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1.5px);
  background-size: 8px 8px;
  mix-blend-mode: soft-light;
  animation: dj-fx-noise-out 0.25s ease-out forwards;
  opacity: 1;
}
.dj-fx-halftone { background-size: 12px 12px; }
.dj-fx-checker {
  background-image: repeating-conic-gradient(rgba(255,255,255,0.06) 0% 25%, transparent 0% 50%);
  background-size: 16px 16px;
  mix-blend-mode: soft-light;
  animation: dj-fx-noise-out 0.25s ease-out forwards;
  opacity: 1;
}
.dj-fx-zebra {
  background: repeating-linear-gradient(-18deg, transparent 0 10px, rgba(255,255,255,0.06) 10px 14px);
  animation: dj-fx-vinyl-spin 0.5s ease-out forwards;
  mix-blend-mode: soft-light;
  opacity: 1;
}
.dj-fx-radar,.dj-fx-orbitglow,.dj-fx-ringflash,.dj-fx-softspotlight {
  background: radial-gradient(circle at var(--dj-spot-x, 50%) var(--dj-spot-y, 50%), rgba(232,211,164,0.28) 0%, transparent 40%);
  mix-blend-mode: screen;
  animation: dj-fx-bloom-out 0.4s ease-out forwards;
  opacity: 1;
}
.dj-fx-ringflash {
  background: radial-gradient(circle at var(--dj-spot-x, 50%) var(--dj-spot-y, 50%), transparent 28%, rgba(244,239,230,0.3) 32%, transparent 38%);
  animation: dj-fx-flash-out 0.12s ease-out forwards;
}
.dj-fx-orbitglow { background: radial-gradient(circle at var(--dj-spot-x, 50%) var(--dj-spot-y, 50%), rgba(122,92,255,0.25) 0%, transparent 45%); }
.dj-fx-gridflash {
  background-image:
    linear-gradient(rgba(0,255,170,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,170,0.1) 1px, transparent 1px);
  background-size: 24px 24px;
  animation: dj-fx-flash-out 0.12s ease-out forwards;
  mix-blend-mode: screen;
  opacity: 1;
}
.dj-fx-sidechain,.dj-fx-compressor,.dj-fx-limiterflash {
  background: linear-gradient(180deg, transparent 0 35%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.25) 55%, transparent 65%);
  animation: dj-fx-flash-out 0.12s ease-out forwards;
  mix-blend-mode: multiply;
  opacity: 1;
}
.dj-fx-compressor { background: linear-gradient(180deg, rgba(0,0,0,0.15), transparent 40%, transparent 60%, rgba(0,0,0,0.15)); animation: dj-fx-box-fade 0.55s ease-out forwards; }


@media (prefers-reduced-motion: reduce) {
  .dj-fx-root,
  .dj-fx-root * {
    animation: none !important;
    transition: none !important;
  }
  .dj-fx-root.is-live .dj-fx-scan,
  .dj-fx-root.is-live .dj-fx-vignette {
    opacity: 0.12;
  }
}