.background-effects-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.background-effect-instance,
.background-effect-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.background-effect {
  --bg-effect-opacity: 0.55;
  opacity: var(--bg-effect-opacity);
}

.design-preview-effects {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.design-preview-content {
  z-index: 3;
}

.background-effect--old-tv {
  mix-blend-mode: screen;
  isolation: isolate;
}

.background-effect-old-tv__scanlines,
.background-effect-old-tv__noise,
.background-effect-old-tv__tear,
.background-effect-old-tv__vignette {
  position: absolute;
  inset: 0;
}

.background-effect-old-tv__scanlines {
  opacity: var(--old-tv-scanline-opacity, 0.2);
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.18) 0,
      rgba(255, 255, 255, 0.18) 1px,
      rgba(0, 0, 0, 0.05) 1px,
      rgba(0, 0, 0, 0.05) 3px
    );
  animation: background-effect-old-tv-scan calc(var(--old-tv-animation-speed, 1.2) * 6s) linear infinite;
}

.background-effect-old-tv__noise {
  opacity: var(--old-tv-noise-opacity, 0.08);
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,0.08) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.06) 0 1px, transparent 1px 4px);
  background-size: 120px 120px, 150px 150px, 180px 180px;
  animation: background-effect-old-tv-noise calc(var(--old-tv-animation-speed, 1.2) * 9s) steps(8, end) infinite;
}

.background-effect-old-tv__tear {
  opacity: 0;
  top: var(--old-tv-tear-top, 42%);
  bottom: auto;
  height: var(--old-tv-tear-height, 8%);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  transform: translateX(var(--old-tv-tear-skew, 0px));
  filter: blur(0.6px);
}

.background-effect--old-tv.is-distorting .background-effect-old-tv__tear {
  opacity: 0.6;
}

.background-effect--old-tv.is-distorting .background-effect-old-tv__scanlines {
  transform: translateX(calc(var(--old-tv-tear-skew, 0px) * -0.08));
}

.background-effect-old-tv__vignette {
  opacity: var(--old-tv-vignette-opacity, 0.24);
  background:
    radial-gradient(circle at center, transparent 42%, rgba(0, 0, 0, 0.18) 72%, rgba(0, 0, 0, 0.42) 100%);
  mix-blend-mode: multiply;
}

@keyframes background-effect-old-tv-scan {
  from { transform: translateY(0); filter: brightness(1); }
  48% { filter: brightness(calc(var(--old-tv-flicker-strength, 1))); }
  50% { transform: translateY(-2px); filter: brightness(calc(var(--old-tv-flicker-strength, 1) + 0.02)); }
  52% { filter: brightness(1); }
  to { transform: translateY(0); filter: brightness(1); }
}

@keyframes background-effect-old-tv-noise {
  from { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-1px, 1px, 0); }
  50% { transform: translate3d(2px, -1px, 0); }
  75% { transform: translate3d(-2px, 1px, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.background-effect--aurora {
  --aurora-speed: 16;
  --aurora-blur: 96px;
  --aurora-strength: 1;
  --aurora-core-opacity: 0.34;
  --aurora-horizon-opacity: 0.24;
  mix-blend-mode: screen;
  isolation: isolate;
}

.background-effect-aurora__horizon,
.background-effect-aurora__core-glow,
.background-effect-aurora__veil,
.background-effect-aurora__band {
  position: absolute;
  inset: 0;
}

.background-effect-aurora__veil {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03) 18%, transparent 44%),
    radial-gradient(circle at 50% 8%, rgba(255,255,255,0.12), transparent 42%);
  opacity: calc(var(--aurora-strength) * 0.22);
}

.background-effect-aurora__horizon {
  inset: auto -10% -6% -10%;
  height: 54%;
  border-radius: 50% 50% 0 0;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(255,255,255,0.02) 18%,
      rgba(255,255,255,0.05) 34%,
      rgba(255,255,255,0.08) 48%,
      rgba(255,255,255,0.03) 58%,
      transparent 74%
    );
  opacity: var(--aurora-horizon-opacity);
  filter: blur(calc(var(--aurora-blur) * 0.55));
}

.background-effect-aurora__core-glow {
  inset: auto 22% -22% 22%;
  height: 62%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 174, 93, 0.42) 0%, rgba(255, 119, 80, 0.2) 28%, rgba(168, 85, 247, 0.12) 48%, transparent 74%);
  opacity: var(--aurora-core-opacity);
  filter: blur(calc(var(--aurora-blur) * 0.7));
}

.background-effect-aurora__band {
  top: auto;
  bottom: -10%;
  height: 62%;
  border-radius: 45% 45% 0 0;
  filter: blur(var(--aurora-blur));
  transform-origin: 50% 100%;
  background-size: 100% 18px, 100% 100%;
  background-repeat: no-repeat;
}

.background-effect-aurora__band--a {
  left: -8%;
  right: 36%;
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.18) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, var(--aurora-band-a, rgba(168,85,247,0.35)), transparent 78%);
  opacity: calc(var(--aurora-strength) * 0.82);
  animation: background-effect-aurora-band-a calc(var(--aurora-speed) * 1s) ease-in-out infinite alternate;
}

.background-effect-aurora__band--b {
  left: 10%;
  right: 12%;
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.14) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, var(--aurora-band-b, rgba(99,102,241,0.28)), transparent 76%);
  opacity: calc(var(--aurora-strength) * 0.68);
  animation: background-effect-aurora-band-b calc(var(--aurora-speed) * 1.15s) ease-in-out infinite alternate;
}

.background-effect-aurora__band--c {
  left: 48%;
  right: -8%;
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.14) 0 2px, transparent 2px 15px),
    linear-gradient(180deg, var(--aurora-band-c, rgba(52,211,153,0.22)), transparent 78%);
  opacity: calc(var(--aurora-strength) * 0.58);
  animation: background-effect-aurora-band-c calc(var(--aurora-speed) * 0.95s) ease-in-out infinite alternate;
}

.background-effect-aurora__band--d {
  left: 22%;
  right: 24%;
  bottom: -16%;
  height: 48%;
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, var(--aurora-band-d, rgba(168,85,247,0.28)), transparent 82%);
  opacity: calc(var(--aurora-strength) * 0.44);
  filter: blur(calc(var(--aurora-blur) * 1.1));
  animation: background-effect-aurora-band-d calc(var(--aurora-speed) * 1.25s) ease-in-out infinite alternate;
}

.background-effect--aurora.is-paused .background-effect-aurora__band {
  animation-play-state: paused;
}

@keyframes background-effect-aurora-band-a {
  from { transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); }
  to { transform: translate3d(4%, -1%, 0) rotate(-11deg) scale(1.12); }
}

@keyframes background-effect-aurora-band-b {
  from { transform: translate3d(0, 0, 0) rotate(4deg) scale(1.04); }
  to { transform: translate3d(-2%, -2%, 0) rotate(9deg) scale(1.15); }
}

@keyframes background-effect-aurora-band-c {
  from { transform: translate3d(0, 0, 0) rotate(-8deg) scale(1); }
  to { transform: translate3d(-4%, -1%, 0) rotate(-2deg) scale(1.13); }
}

@keyframes background-effect-aurora-band-d {
  from { transform: translate3d(0, 0, 0) rotate(1deg) scale(0.98); }
  to { transform: translate3d(2%, -2%, 0) rotate(-4deg) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .background-effect-old-tv__scanlines,
  .background-effect-old-tv__noise,
  .background-effect-aurora__band {
    animation-duration: 0ms !important;
  }
}