/* MINE SUN · efectos de Halloween para la tienda Tebex
   Capa decorativa independiente: no cambia contenido, fondo, botones ni navegación. */
#ms-halloween-fx {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
}
#ms-halloween-fx .ms-fog {
  position: absolute;
  left: -12vw;
  right: -12vw;
  bottom: -15vh;
  height: 42vh;
  opacity: .21;
  filter: blur(24px);
  background:
    radial-gradient(ellipse at 18% 82%, rgba(121, 77, 117, .5), transparent 48%),
    radial-gradient(ellipse at 77% 76%, rgba(179, 88, 47, .24), transparent 44%),
    radial-gradient(ellipse at 48% 92%, rgba(235, 115, 48, .37), transparent 55%);
  animation: ms-fog-drift 32s ease-in-out infinite alternate;
}
#ms-halloween-fx .ms-ember {
  position: absolute;
  top: -8vh;
  left: var(--x);
  width: var(--size);
  height: calc(var(--size) * 1.5);
  border-radius: 60% 10% 60% 10%;
  background: var(--color);
  opacity: 0;
  box-shadow: 0 0 9px rgba(244, 126, 51, .38);
  transform: rotate(var(--turn));
  animation: ms-fall var(--duration) linear var(--delay) infinite;
}
@keyframes ms-fall {
  0% { opacity: 0; transform: translate3d(0, -5vh, 0) rotate(var(--turn)); }
  12% { opacity: var(--alpha); }
  82% { opacity: var(--alpha); }
  100% { opacity: 0; transform: translate3d(var(--drift), 112vh, 0) rotate(calc(var(--turn) + 520deg)); }
}
@keyframes ms-fog-drift {
  from { transform: translate3d(-4vw, 0, 0) scale(1); }
  to { transform: translate3d(5vw, -3vh, 0) scale(1.09); }
}
@media (max-width: 700px) {
  #ms-halloween-fx .ms-fog { height: 31vh; opacity: .16; }
}
@media (prefers-reduced-motion: reduce) {
  #ms-halloween-fx .ms-fog,
  #ms-halloween-fx .ms-ember { animation: none !important; }
  #ms-halloween-fx .ms-ember { opacity: .35; }
}