:root{
  --mist-base: rgba(120, 12, 24, 0.34);
  --mist-secondary: rgba(163, 26, 44, 0.28);
  --mist-highlight: rgba(248, 66, 82, 0.22);
  --code-rain-color: rgba(211, 43, 43, 0.52);
  --code-rain-trail: rgba(5, 5, 5, 0.08);
}

html[data-theme="light"]{
  --mist-base: rgba(233, 140, 150, 0.28);
  --mist-secondary: rgba(209, 110, 120, 0.26);
  --mist-highlight: rgba(255, 188, 188, 0.24);
  --code-rain-color: rgba(214, 75, 98, 0.52);
  --code-rain-trail: rgba(255, 255, 255, 0.08);
}

.cyber-background{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:-2;
  background:radial-gradient(circle at 20% 15%, rgba(211, 43, 43, 0.18), transparent 55%),
             radial-gradient(circle at 80% 10%, rgba(124, 18, 32, 0.22), transparent 60%),
             linear-gradient(180deg, rgba(5, 5, 8, 0.92), rgba(9, 9, 12, 0.94));
  filter:saturate(110%);
}

.cyber-background::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 120%, rgba(211, 43, 43, 0.12), transparent 70%);
  mix-blend-mode:screen;
  opacity:.75;
}

.mist-layer{
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(circle at 20% 35%, var(--mist-base) 0%, transparent 60%),
    radial-gradient(circle at 70% 40%, var(--mist-secondary) 0%, transparent 62%),
    radial-gradient(circle at 40% 70%, var(--mist-highlight) 0%, transparent 68%);
  filter:blur(65px) saturate(120%);
  opacity:.48;
  transform:translate3d(0,0,0);
  animation:mist-drift-1 42s ease-in-out infinite;
  mix-blend-mode:screen;
}

.mist-layer--slow{
  animation:mist-drift-2 58s ease-in-out infinite;
  opacity:.34;
}

.mist-layer--pulse{
  animation:mist-pulse 36s ease-in-out infinite;
  opacity:.28;
}

.mist-layer::after{
  content:"";
  position:absolute;
  inset:10% 18% 22% 14%;
  background:radial-gradient(circle at 65% 45%, rgba(255, 145, 145, 0.18), transparent 70%);
  filter:blur(40px);
  opacity:.45;
}

.code-rain{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:.32;
  mix-blend-mode:screen;
}

@keyframes mist-drift-1{
  0%{transform:translate3d(-6%, -4%, 0) scale(1.05); opacity:.42;}
  33%{transform:translate3d(4%, -2%, 0) scale(1.08); opacity:.5;}
  66%{transform:translate3d(-2%, 4%, 0) scale(1.02); opacity:.46;}
  100%{transform:translate3d(-6%, -4%, 0) scale(1.05); opacity:.42;}
}

@keyframes mist-drift-2{
  0%{transform:translate3d(6%, 4%, 0) scale(1.08);}
  40%{transform:translate3d(-4%, 6%, 0) scale(1.03);}
  70%{transform:translate3d(5%, -6%, 0) scale(1.07);}
  100%{transform:translate3d(6%, 4%, 0) scale(1.08);}
}

@keyframes mist-pulse{
  0%{transform:translate3d(0,0,0) scale(1); opacity:.24;}
  50%{transform:translate3d(2%, -3%, 0) scale(1.12); opacity:.4;}
  100%{transform:translate3d(0,0,0) scale(1); opacity:.24;}
}

@media (prefers-reduced-motion: reduce){
  .mist-layer,
  .mist-layer--slow,
  .mist-layer--pulse{
    animation:none;
  }
}

@media print{
  .cyber-background{display:none;}
}