.mysterious-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #050308;
  pointer-events: none;
  z-index: 0;
}

.mysterious-bg .tint {
  position: absolute;
  inset: 0;
  background: rgba(12, 3, 8, 0.18);
}

.mysterious-bg .particles-layer {
  position: absolute;
  inset: 0;
  transition: transform 0.12s ease-out;
}

.mysterious-bg .particle {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  animation: particle-float 12s ease-in-out infinite;
}
.mysterious-bg .particle.fog { background: rgba(255,255,255,0.06); }
.mysterious-bg .particle.accent { background: #e0112b; }

@keyframes particle-float {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.06; }
  33% { transform: translate(8px, -6px) scale(1.08); opacity: 0.1; }
  66% { transform: translate(-5px, 4px) scale(0.97); opacity: 0.05; }
}

.mysterious-bg .pentagram {
  position: absolute;
  opacity: 0.15;
  animation: pentagram-pulse 7s ease-in-out infinite;
}

@keyframes pentagram-pulse {
  0%, 100% { opacity: 0.08; transform: scale(1); }
  35% { opacity: 0.28; transform: scale(1.06); }
  70% { opacity: 0.12; transform: scale(0.96); }
}

.mysterious-bg .flash-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 30, 60, 0.12);
  opacity: 0;
  pointer-events: none;
}

.mysterious-bg .glitch-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 52, 93, 0.14);
  opacity: 0;
  pointer-events: none;
}

.mysterious-bg .vignette {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0.52;
  animation: vignette-breathe 2.3s ease-in-out infinite;
}

@keyframes vignette-breathe {
  0%, 100% { opacity: 0.48; }
  50% { opacity: 0.58; }
}

/* Particle positions - % of viewport */
.mysterious-bg .p0 { left: 12%; top: 18%; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px; animation-delay: 0s; }
.mysterious-bg .p1 { left: 85%; top: 22%; width: 120px; height: 120px; margin-left: -60px; margin-top: -60px; animation-delay: 0.8s; }
.mysterious-bg .p2 { left: 35%; top: 45%; width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; animation-delay: 0.2s; }
.mysterious-bg .p3 { left: 72%; top: 38%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; animation-delay: 0.4s; }
.mysterious-bg .p4 { left: 8%; top: 65%; width: 90px; height: 90px; margin-left: -45px; margin-top: -45px; animation-delay: 0.6s; }
.mysterious-bg .p5 { left: 92%; top: 58%; width: 70px; height: 70px; margin-left: -35px; margin-top: -35px; animation-delay: 1.2s; }
.mysterious-bg .p6 { left: 50%; top: 12%; width: 140px; height: 140px; margin-left: -70px; margin-top: -70px; animation-delay: 0.3s; }
.mysterious-bg .p7 { left: 22%; top: 82%; width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; animation-delay: 0.9s; }
.mysterious-bg .p8 { left: 78%; top: 88%; width: 95px; height: 95px; margin-left: -47px; margin-top: -47px; animation-delay: 0.5s; }
.mysterious-bg .p9 { left: 45%; top: 72%; width: 65px; height: 65px; margin-left: -32px; margin-top: -32px; animation-delay: 0.7s; }
.mysterious-bg .p10 { left: 62%; top: 5%; width: 85px; height: 85px; margin-left: -42px; margin-top: -42px; animation-delay: 0.1s; }
.mysterious-bg .p11 { left: 15%; top: 52%; width: 110px; height: 110px; margin-left: -55px; margin-top: -55px; animation-delay: 1.1s; }
.mysterious-bg .p12 { left: 88%; top: 75%; width: 55px; height: 55px; margin-left: -27px; margin-top: -27px; animation-delay: 0.2s; }
.mysterious-bg .p13 { left: 28%; top: 28%; width: 75px; height: 75px; margin-left: -37px; margin-top: -37px; animation-delay: 0.6s; }
.mysterious-bg .p14 { left: 55%; top: 92%; width: 130px; height: 130px; margin-left: -65px; margin-top: -65px; animation-delay: 0.4s; }

/* Pentagram positions */
.mysterious-bg .pent0 { left: 20%; top: 30%; width: 55px; height: 55px; margin-left: -27px; margin-top: -27px; animation-delay: 0.8s; }
.mysterious-bg .pent1 { left: 78%; top: 18%; width: 95px; height: 95px; margin-left: -47px; margin-top: -47px; animation-delay: 1.4s; }
.mysterious-bg .pent2 { left: 64%; top: 70%; width: 165px; height: 165px; margin-left: -82px; margin-top: -82px; animation-delay: 1.9s; }
.mysterious-bg .pent3 { left: 32%; top: 82%; width: 75px; height: 75px; margin-left: -37px; margin-top: -37px; animation-delay: 2.4s; }
.mysterious-bg .pent4 { left: 50%; top: 50%; width: 130px; height: 130px; margin-left: -65px; margin-top: -65px; animation-delay: 0.6s; }
.mysterious-bg .pent5 { left: 88%; top: 42%; width: 65px; height: 65px; margin-left: -32px; margin-top: -32px; animation-delay: 1.2s; }
.mysterious-bg .pent6 { left: 12%; top: 72%; width: 110px; height: 110px; margin-left: -55px; margin-top: -55px; animation-delay: 0.3s; }