/*
 * Module      : Backgrounds (styles)
 * Description : Ambient backdrop layers: the base gradient, the vignette, the
 *               drifting particle field with its rise animation, and the tiled
 *               plaid texture behind the archive page.
 */

.bg-base { position: absolute; inset: 0; z-index: 0; background: var(--bg-atmosphere); }

.vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
}

.particle-field { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.particle {
  position: absolute;
  bottom: -20px;
  background: rgba(245, 215, 205, 0.4);
  border-radius: 50%;
  animation: rise linear infinite;
  filter: blur(0.5px);
}
@keyframes rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  15% { opacity: 0.8; }
  85% { opacity: 0.4; }
  100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
}

.main-interface[data-page="shop"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('/imgs/plaid.png');
  background-repeat: repeat;
  opacity: 0.10;
}