/* --- Animated background --- */
/* Scrolling multi-color gradient background with reduced red tones */
.bg-anim {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    #1c1f27 0%,
    #283048 12%,
    #414d6b 25%,
    #4a4d6a 37%,
    #5a4a60 50%,
    #4a4d6a 63%,
    #414d6b 75%,
    #283048 88%,
    #1c1f27 100%);
  background-size: 300% 300%;
  animation: scrollGradient 200s linear infinite;
  filter: brightness(0.95) contrast(1.05) saturate(110%);
}
.bg-anim::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.06), transparent 60%),
              radial-gradient(circle at 75% 70%, rgba(255,255,255,0.04), transparent 65%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.bg-anim::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 2px);
  opacity: 0.25;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
@keyframes scrollGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-anim { animation: none; background-position: 50% 50%; }
}

.bg-veil {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 20%, rgba(0,0,0,0.45) 80%, rgba(0,0,0,0.65) 100%);
}