/* Shared XENITY background effects (main site parity for satellite pages). */
:root {
  --chrome: #03010d;
}

.viewport-underlay {
  position: fixed;
  inset: 0;
  background: var(--chrome);
  z-index: -2;
  pointer-events: none;
}

.site-bg-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--chrome);
  transform: translateZ(0);
}

.bg-fixed {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.bg-mesh {
  background:
    radial-gradient(ellipse 70% 55% at 50% -5%, rgba(var(--purple-rgb), .5) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 5% 95%, rgba(53, 96, 255, .3) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 95% 85%, rgba(204, 26, 26, .2) 0%, transparent 50%);
  animation: siteMeshPulse 14s ease-in-out infinite;
}

@keyframes siteMeshPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .9; }
}

.bg-grid {
  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: 56px 56px;
  animation: siteGridDrift 20s linear infinite;
  mask-image: radial-gradient(ellipse 90% 80% at center, black 20%, transparent 80%);
}

@keyframes siteGridDrift {
  to { background-position: 56px 56px; }
}

.bg-noise {
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
}

.hero-orb-1 {
  width: clamp(300px, 50vw, 600px);
  height: clamp(300px, 50vw, 600px);
  background: radial-gradient(circle, rgba(var(--purple-rgb), .35) 0%, transparent 70%);
  top: -15%;
  left: -10%;
  filter: blur(70px);
  animation: siteOrbA 12s ease-in-out infinite alternate;
}

.hero-orb-2 {
  width: clamp(200px, 35vw, 420px);
  height: clamp(200px, 35vw, 420px);
  background: radial-gradient(circle, rgba(204, 26, 26, .25) 0%, transparent 70%);
  bottom: 10%;
  right: -8%;
  filter: blur(60px);
  animation: siteOrbB 9s ease-in-out infinite alternate;
}

@keyframes siteOrbA {
  to { transform: translate(30px, -40px) scale(1.08); }
}

@keyframes siteOrbB {
  to { transform: translate(-25px, 35px) scale(1.1); }
}

.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: siteRise linear infinite;
  opacity: 0;
  will-change: transform, opacity;
  contain: strict;
}

@keyframes siteRise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: .5; }
  100% { transform: translate3d(var(--dx), -100vh, 0); opacity: 0; }
}

.hero-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.hero-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--purple2);
  box-shadow: 0 0 10px var(--purple2);
  opacity: 0;
  animation: siteSparkFloat 7s ease-in-out infinite;
}

.hero-spark.s1 { left: 18%; top: 22%; animation-delay: 0s; }
.hero-spark.s2 { left: 78%; top: 30%; animation-delay: 1.8s; width: 3px; height: 3px; }
.hero-spark.s3 { left: 62%; top: 68%; animation-delay: 3.2s; background: #f87171; box-shadow: 0 0 10px #f87171; }
.hero-spark.s4 { left: 28%; top: 72%; animation-delay: 4.6s; width: 5px; height: 5px; }

@keyframes siteSparkFloat {
  0%, 100% { opacity: 0; transform: translateY(0) scale(.6); }
  15% { opacity: .9; }
  50% { opacity: .5; transform: translateY(-28px) scale(1); }
  85% { opacity: 0; transform: translateY(-52px) scale(.7); }
}

html.anim-paused .bg-fixed,
html.anim-paused .hero-orb,
html.anim-paused .particle,
html.anim-paused .hero-spark {
  animation-play-state: paused !important;
}

@media (max-width: 768px) {
  .hero-orb-1 { filter: blur(48px); }
  .hero-orb-2 { filter: blur(40px); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-mesh,
  .bg-grid,
  .hero-orb,
  .particle,
  .hero-spark {
    animation: none !important;
  }
}