/* ==========================================================================
   Background FX — mesh gradient, aurora, noise, grid, particles canvas
   ========================================================================== */
.bg-fx{
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-0);
}

.bg-fx__blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
  will-change: transform;
  mix-blend-mode: screen;
}

.bg-fx__blob--1{
  width: 55vw; height: 55vw; max-width: 780px; max-height: 780px;
  top: -18%; left: -12%;
  background: radial-gradient(circle at 30% 30%, rgba(255,59,78,.55), transparent 70%);
  animation: driftA 28s var(--ease-in-out) infinite alternate;
}
.bg-fx__blob--2{
  width: 45vw; height: 45vw; max-width: 620px; max-height: 620px;
  top: 20%; right: -14%;
  background: radial-gradient(circle at 60% 40%, rgba(255,145,66,.4), transparent 70%);
  animation: driftB 34s var(--ease-in-out) infinite alternate;
}
.bg-fx__blob--3{
  width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
  bottom: -16%; left: 18%;
  background: radial-gradient(circle at 50% 50%, rgba(178,18,48,.5), transparent 70%);
  animation: driftC 40s var(--ease-in-out) infinite alternate;
}

@keyframes driftA{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(6vw, 8vh, 0) scale(1.15); }
}
@keyframes driftB{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-8vw, 6vh, 0) scale(1.1); }
}
@keyframes driftC{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(5vw, -6vh, 0) scale(1.2); }
}

.bg-fx__aurora{
  position: absolute;
  inset: -20% -20%;
  background: conic-gradient(from 90deg at 50% 30%,
    rgba(255,59,78,.16), rgba(255,145,66,.12), rgba(178,18,48,.1), rgba(255,59,78,.16));
  filter: blur(70px);
  opacity: .5;
  animation: auroraSpin 60s linear infinite;
  mix-blend-mode: screen;
}

@keyframes auroraSpin{
  to{ transform: rotate(360deg); }
}

.bg-fx__noise{
  position: absolute;
  inset: 0;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bg-fx__grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black, transparent 75%);
}

#particles{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}