/* ============================================================================
   Hero backgrounds: aurora / mesh / particles
   All three are CSS/SVG/Canvas, very subtle, slow.
   ============================================================================ */

/* shared */
.hero-bg{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-bg::after{
  /* vignette + bottom fade into next section */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 30%, transparent 0%, rgba(13,15,20,.45) 70%, var(--ink) 100%),
    linear-gradient(180deg, transparent 60%, var(--ink) 100%);
  pointer-events: none;
}
.hero-bg__noise{
  position: absolute; inset: -20%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .035;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ─── Aurora ─────────────────────────────────────────────────────── */
.hero-bg--aurora .aurora{
  position: absolute;
  inset: -10%;
  filter: blur(60px) saturate(120%);
  opacity: .55;
}
.hero-bg--aurora .aurora__layer{
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.hero-bg--aurora .aurora__layer--a{
  width: 70%; height: 70%;
  left: -10%; top: -10%;
  background: radial-gradient(closest-side, rgba(254,44,85,.85), transparent 70%);
  animation: aurora-a 22s var(--ease-in-out) infinite alternate;
}
.hero-bg--aurora .aurora__layer--b{
  width: 80%; height: 80%;
  right: -20%; top: 10%;
  background: radial-gradient(closest-side, rgba(124,58,237,.7), transparent 70%);
  animation: aurora-b 28s var(--ease-in-out) infinite alternate;
}
.hero-bg--aurora .aurora__layer--c{
  width: 90%; height: 90%;
  left: 10%; bottom: -30%;
  background: radial-gradient(closest-side, rgba(37,99,235,.55), transparent 70%);
  animation: aurora-c 34s var(--ease-in-out) infinite alternate;
}
.hero-bg--aurora .aurora__beam{
  position: absolute;
  inset: -10% -20%;
  background: conic-gradient(from 200deg at 50% 50%,
    transparent 0deg,
    rgba(254,44,85,.18) 40deg,
    transparent 90deg,
    rgba(124,58,237,.16) 180deg,
    transparent 230deg,
    rgba(37,99,235,.12) 320deg,
    transparent 360deg);
  filter: blur(40px);
  animation: aurora-spin 60s linear infinite;
  opacity: .55;
}

@keyframes aurora-a{
  0%   { transform: translate3d(0,0,0)   scale(1); }
  100% { transform: translate3d(8%,6%,0) scale(1.1); }
}
@keyframes aurora-b{
  0%   { transform: translate3d(0,0,0)    scale(1); }
  100% { transform: translate3d(-6%,4%,0) scale(1.08); }
}
@keyframes aurora-c{
  0%   { transform: translate3d(0,0,0)    scale(1); }
  100% { transform: translate3d(4%,-6%,0) scale(1.12); }
}
@keyframes aurora-spin{
  to { transform: rotate(360deg); }
}

/* ─── Mesh gradient ──────────────────────────────────────────────── */
.hero-bg--mesh .mesh{
  position: absolute;
  inset: -10%;
  filter: blur(80px) saturate(140%);
}
.hero-bg--mesh .mesh__blob{
  position: absolute;
  width: 50%; height: 60%;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: .85;
  will-change: transform;
}
.hero-bg--mesh .mesh__blob--1{
  background: radial-gradient(closest-side, #FE2C55, transparent 70%);
  top: -10%; left: -5%;
  animation: mesh-1 18s var(--ease-in-out) infinite alternate;
}
.hero-bg--mesh .mesh__blob--2{
  background: radial-gradient(closest-side, #5b8bff, transparent 70%);
  top: 20%; right: -10%;
  animation: mesh-2 24s var(--ease-in-out) infinite alternate;
}
.hero-bg--mesh .mesh__blob--3{
  background: radial-gradient(closest-side, #c08aff, transparent 70%);
  bottom: -10%; left: 20%;
  animation: mesh-3 30s var(--ease-in-out) infinite alternate;
}
.hero-bg--mesh .mesh__blob--4{
  background: radial-gradient(closest-side, #ff6e8a, transparent 70%);
  bottom: 0%; right: 10%;
  animation: mesh-4 26s var(--ease-in-out) infinite alternate;
  opacity: .55;
}
.hero-bg--mesh .mesh__grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(60% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000 30%, transparent 80%);
}
@keyframes mesh-1{
  0%   { transform: translate3d(0,0,0)    scale(1); }
  100% { transform: translate3d(20%,12%,0) scale(1.15); }
}
@keyframes mesh-2{
  0%   { transform: translate3d(0,0,0)     scale(1); }
  100% { transform: translate3d(-18%,8%,0) scale(1.12); }
}
@keyframes mesh-3{
  0%   { transform: translate3d(0,0,0)      scale(1); }
  100% { transform: translate3d(12%,-14%,0) scale(1.18); }
}
@keyframes mesh-4{
  0%   { transform: translate3d(0,0,0)       scale(1); }
  100% { transform: translate3d(-14%,-10%,0) scale(1.1); }
}

/* ─── Particles (Canvas-rendered, but fall back to CSS dots) ────── */
.hero-bg--particles .particles-glow{
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 35% at 30% 35%, rgba(254,44,85,.22), transparent 70%),
    radial-gradient(40% 35% at 70% 60%, rgba(91,139,255,.18), transparent 70%),
    radial-gradient(60% 60% at 50% 100%, rgba(124,58,237,.15), transparent 70%);
  filter: blur(20px);
}
.hero-bg--particles canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}