:root, #app-backdrop, .kyber-bg-root, .kyber-preview-backdrop {
  --bg-anim-mult: 1;
}

/*
 * Kyberdrop backdrop — pro airdrop / crypto vault vibe
 * Soft liquidity glows, quiet motion, no neon carnival.
 */
#app-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg, #07080f);
}

.kyber-bg-root {
  position: relative;
  isolation: isolate;
  background: var(--bg, #07080f);
  overflow: hidden;
}
.kyber-preview-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg, #07080f);
}
.kyber-bg-root > .pv-content {
  position: relative;
  z-index: 1;
}

.bg-base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 70% at 50% -20%, rgba(255, 255, 255, 0.035), transparent 55%),
    var(--bg, #07080f);
}

.bg-orb,
.bg-layer,
.bg-grain,
.bg-vignette {
  position: absolute;
  pointer-events: none;
}

/* ─── Orbs — soft token liquidity pools ─── */
.bg-orb {
  border-radius: 50%;
  filter: blur(96px) saturate(0.78);
  opacity: 0;
  will-change: transform, opacity;
  mix-blend-mode: plus-lighter;
}

.bg-orb-a {
  width: min(78vw, 380px);
  height: min(78vw, 380px);
  background: radial-gradient(
    circle at 40% 40%,
    color-mix(in srgb, var(--bg-orb-a, var(--accent)) 70%, white 8%),
    var(--bg-orb-a, var(--accent)) 45%,
    transparent 72%
  );
  top: -16%;
  right: -22%;
}

.bg-orb-b {
  width: min(64vw, 320px);
  height: min(64vw, 320px);
  background: radial-gradient(
    circle at 55% 45%,
    color-mix(in srgb, var(--bg-orb-b, var(--accent-2)) 65%, white 6%),
    var(--bg-orb-b, var(--accent-2)) 48%,
    transparent 74%
  );
  bottom: 4%;
  left: -24%;
}

.bg-orb-c {
  width: min(48vw, 220px);
  height: min(48vw, 220px);
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--bg-orb-a, var(--accent)) 55%, transparent),
    transparent 70%
  );
  top: 40%;
  left: 52%;
  filter: blur(110px) saturate(0.7);
  opacity: 0;
}

/* ─── Aurora — quiet claim ribbons ─── */
.bg-aurora {
  inset: -30%;
  opacity: 0;
  background:
    radial-gradient(ellipse 80% 55% at 28% 22%, var(--glow-a-18, rgba(139, 108, 255, 0.18)), transparent 68%),
    radial-gradient(ellipse 70% 50% at 78% 68%, var(--glow-b-16, rgba(0, 232, 200, 0.16)), transparent 70%),
    radial-gradient(ellipse 55% 40% at 55% 45%, var(--glow-a-10, rgba(139, 108, 255, 0.1)), transparent 72%);
  filter: blur(48px) saturate(0.85);
  transform-origin: 50% 45%;
}

.bg-aurora::after {
  content: "";
  position: absolute;
  inset: 12% 8%;
  background:
    linear-gradient(120deg, transparent 28%, var(--glow-a-10, rgba(139, 108, 255, 0.1)) 48%, transparent 62%),
    linear-gradient(245deg, transparent 35%, var(--glow-b-10, rgba(0, 232, 200, 0.1)) 52%, transparent 68%);
  filter: blur(28px);
  animation: aurora-shimmer calc(14s / var(--bg-anim-mult, 1)) ease-in-out infinite;
  opacity: 0;
  pointer-events: none;
}

/* ─── Mesh — soft vault fog ─── */
.bg-mesh {
  inset: -22%;
  opacity: 0;
  background:
    radial-gradient(ellipse 58% 48% at 16% 20%, var(--glow-a-22, rgba(139, 108, 255, 0.22)), transparent 72%),
    radial-gradient(ellipse 50% 44% at 84% 16%, var(--glow-b-18, rgba(0, 232, 200, 0.18)), transparent 70%),
    radial-gradient(ellipse 44% 40% at 70% 78%, var(--glow-a-14, rgba(139, 108, 255, 0.14)), transparent 68%),
    radial-gradient(ellipse 42% 38% at 26% 82%, var(--glow-b-12, rgba(0, 232, 200, 0.12)), transparent 66%);
  filter: blur(28px) saturate(0.8);
}

.bg-mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 42% 36%, rgba(255, 255, 255, 0.035), transparent 42%),
    radial-gradient(circle at 68% 62%, rgba(255, 255, 255, 0.025), transparent 38%);
  animation: mesh-sheen calc(18s / var(--bg-anim-mult, 1)) ease-in-out infinite;
  opacity: 0;
  pointer-events: none;
}

/* ─── Ledger grid — fine chain lattice ─── */
.bg-grid {
  inset: 0;
  opacity: 0;
  background-image:
    linear-gradient(var(--glow-a-10, rgba(139, 108, 255, 0.1)) 1px, transparent 1px),
    linear-gradient(90deg, var(--glow-a-10, rgba(139, 108, 255, 0.1)) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, black 18%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, black 18%, transparent 72%);
}

.bg-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, var(--glow-b-10, rgba(0, 232, 200, 0.1)), transparent 58%);
  opacity: 0.55;
}

.bg-grid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  top: -28%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--glow-b-18, rgba(0, 232, 200, 0.18)) 50%,
    transparent 100%
  );
  opacity: 0;
  filter: blur(10px);
}

/* ─── Starfield — sparse night drop ─── */
.bg-stars {
  inset: 0;
  opacity: 0;
  background-repeat: repeat;
}

.bg-stars-far {
  background-image:
    radial-gradient(1px 1px at 8% 12%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 18% 48%, rgba(255, 255, 255, 0.18), transparent),
    radial-gradient(1px 1px at 28% 22%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1.2px 1.2px at 36% 72%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 48% 38%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 58% 8%, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(1px 1px at 68% 58%, rgba(255, 255, 255, 0.16), transparent),
    radial-gradient(1.2px 1.2px at 78% 28%, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1px 1px at 88% 78%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 94% 16%, rgba(255, 255, 255, 0.18), transparent),
    radial-gradient(1.5px 1.5px at 42% 88%, rgba(180, 210, 255, 0.28), transparent),
    radial-gradient(1px 1px at 12% 84%, rgba(255, 255, 255, 0.16), transparent);
  background-size: 280px 280px;
}

.bg-stars-near {
  background-image:
    radial-gradient(1.2px 1.2px at 6% 28%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 16% 62%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 26% 14%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 38% 48%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(1.2px 1.2px at 48% 82%, rgba(200, 230, 255, 0.42), transparent),
    radial-gradient(1px 1px at 58% 22%, rgba(255, 255, 255, 0.38), transparent),
    radial-gradient(1.6px 1.6px at 68% 56%, rgba(255, 255, 255, 0.48), transparent),
    radial-gradient(1px 1px at 78% 36%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.2px 1.2px at 88% 72%, rgba(180, 220, 255, 0.4), transparent),
    radial-gradient(1px 1px at 94% 42%, rgba(255, 255, 255, 0.34), transparent);
  background-size: 200px 200px;
}

.bg-stars-near::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 40%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.2px 1.2px at 70% 25%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 55% 70%, rgba(160, 210, 255, 0.4), transparent);
  background-size: 360px 360px;
  animation: star-twinkle calc(5.5s / var(--bg-anim-mult, 1)) ease-in-out infinite;
  opacity: 0;
  pointer-events: none;
}

/* ─── Photo background ─── */
.bg-photo {
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1);
  will-change: transform;
}

.bg-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 38%, rgba(0, 0, 0, 0.62) 100%),
    radial-gradient(ellipse at center, transparent 32%, rgba(0, 0, 0, 0.55) 100%);
}

/* ─── Film grain + vignette — vault depth ─── */
.bg-grain {
  inset: 0;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: soft-light;
}

.bg-vignette {
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 85% 75% at 50% 42%, transparent 35%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, transparent 22%, transparent 70%, rgba(0, 0, 0, 0.35) 100%);
}

/* ─── Logo particles canvas ─── */
.logo-particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.logo-particles-canvas.hidden {
  display: none;
}

/* ═══ Default airdrop glow ═══ */
:is(body, .kyber-bg-root).kyber-bg-gradient {
  background:
    radial-gradient(ellipse 110% 55% at 50% -12%, var(--glow-a-22, rgba(139, 108, 255, 0.22)), transparent 58%),
    radial-gradient(ellipse 50% 38% at 100% 88%, var(--glow-b-12, rgba(0, 232, 200, 0.12)), transparent 62%),
    radial-gradient(ellipse 42% 28% at 0% 72%, var(--glow-a-10, rgba(139, 108, 255, 0.1)), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, transparent 30%),
    var(--bg) !important;
}
:is(body, .kyber-bg-root).kyber-bg-gradient .bg-orb-a {
  opacity: 0.22;
  animation: orb-float-a calc(22s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}
:is(body, .kyber-bg-root).kyber-bg-gradient .bg-orb-b {
  opacity: 0.16;
  animation: orb-float-b calc(26s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}
:is(body, .kyber-bg-root).kyber-bg-gradient .bg-mesh { opacity: 0.22; }
:is(body, .kyber-bg-root).kyber-bg-gradient .bg-mesh::after { opacity: 0.35; }
:is(body, .kyber-bg-root).kyber-bg-gradient .bg-grain { opacity: 0.08; }
:is(body, .kyber-bg-root).kyber-bg-gradient .bg-vignette { opacity: 0.42; }

:is(body, .kyber-bg-root).kyber-bg-solid {
  background:
    radial-gradient(ellipse 95% 50% at 50% -8%, var(--glow-a-10, rgba(139, 108, 255, 0.1)), transparent 58%),
    radial-gradient(ellipse 55% 36% at 100% 100%, var(--glow-b-10, rgba(0, 232, 200, 0.08)), transparent 55%),
    var(--bg) !important;
}
:is(body, .kyber-bg-root).kyber-bg-solid .bg-vignette { opacity: 0.36; }
:is(body, .kyber-bg-root).kyber-bg-solid .bg-grain { opacity: 0.05; }

/* ═══ Token orbs — quiet liquidity ═══ */
:is(body, .kyber-bg-root).kyber-bg-orbs .bg-orb-a { opacity: 0.34; animation: orb-float-a calc(20s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-orbs .bg-orb-b { opacity: 0.28; animation: orb-float-b calc(24s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-orbs .bg-orb-c { opacity: 0.18; animation: orb-float-c calc(18s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-orbs .bg-aurora { opacity: 0.22; animation: aurora-drift calc(28s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-orbs .bg-aurora::after { opacity: 0.3; }
:is(body, .kyber-bg-root).kyber-bg-orbs .bg-mesh { opacity: 0.16; }
:is(body, .kyber-bg-root).kyber-bg-orbs .bg-stars-far { opacity: 0.22; }
:is(body, .kyber-bg-root).kyber-bg-orbs .bg-stars-near { opacity: 0.26; }
:is(body, .kyber-bg-root).kyber-bg-orbs .bg-stars-near::after { opacity: 0.22; }
:is(body, .kyber-bg-root).kyber-bg-orbs .bg-grain { opacity: 0.1; }
:is(body, .kyber-bg-root).kyber-bg-orbs .bg-vignette { opacity: 0.5; }

/* ═══ Aurora claim ═══ */
:is(body, .kyber-bg-root).kyber-bg-aurora .bg-aurora {
  opacity: 0.55;
  animation: aurora-drift calc(22s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}
:is(body, .kyber-bg-root).kyber-bg-aurora .bg-aurora::after { opacity: 0.4; }
:is(body, .kyber-bg-root).kyber-bg-aurora .bg-orb-a { opacity: 0.24; animation: orb-float-a calc(22s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-aurora .bg-orb-b { opacity: 0.22; animation: orb-float-b calc(26s / var(--bg-anim-mult, 1)) ease-in-out infinite reverse; }
:is(body, .kyber-bg-root).kyber-bg-aurora .bg-orb-c { opacity: 0.14; animation: orb-float-c calc(18s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-aurora .bg-mesh { opacity: 0.2; animation: mesh-flow calc(30s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-aurora .bg-stars-far { opacity: 0.28; }
:is(body, .kyber-bg-root).kyber-bg-aurora .bg-stars-near { opacity: 0.32; animation: stars-drift-fast calc(60s / var(--bg-anim-mult, 1)) linear infinite; }
:is(body, .kyber-bg-root).kyber-bg-aurora .bg-stars-near::after { opacity: 0.28; }
:is(body, .kyber-bg-root).kyber-bg-aurora .bg-grain { opacity: 0.1; }
:is(body, .kyber-bg-root).kyber-bg-aurora .bg-vignette { opacity: 0.52; }

/* ═══ Liquidity mesh ═══ */
:is(body, .kyber-bg-root).kyber-bg-mesh .bg-mesh,
:is(body, .kyber-bg-root).kyber-bg-mesh_flow .bg-mesh {
  opacity: 0.72;
  filter: blur(32px) saturate(0.82);
}
:is(body, .kyber-bg-root).kyber-bg-mesh_flow .bg-mesh {
  animation: mesh-flow calc(22s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}
:is(body, .kyber-bg-root).kyber-bg-mesh .bg-mesh::after,
:is(body, .kyber-bg-root).kyber-bg-mesh_flow .bg-mesh::after { opacity: 0.45; }
:is(body, .kyber-bg-root).kyber-bg-mesh .bg-orb-a,
:is(body, .kyber-bg-root).kyber-bg-mesh_flow .bg-orb-a { opacity: 0.18; animation: orb-float-a calc(22s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-mesh .bg-orb-b,
:is(body, .kyber-bg-root).kyber-bg-mesh_flow .bg-orb-b { opacity: 0.16; animation: orb-float-b calc(24s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-mesh .bg-aurora,
:is(body, .kyber-bg-root).kyber-bg-mesh_flow .bg-aurora { opacity: 0.18; }
:is(body, .kyber-bg-root).kyber-bg-mesh_flow .bg-aurora { animation: aurora-drift calc(24s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-mesh .bg-grain,
:is(body, .kyber-bg-root).kyber-bg-mesh_flow .bg-grain { opacity: 0.1; }
:is(body, .kyber-bg-root).kyber-bg-mesh .bg-vignette,
:is(body, .kyber-bg-root).kyber-bg-mesh_flow .bg-vignette { opacity: 0.48; }

/* ═══ Ledger grid ═══ */
:is(body, .kyber-bg-root).kyber-bg-grid .bg-grid,
:is(body, .kyber-bg-root).kyber-bg-grid_scan .bg-grid {
  opacity: 0.32;
  background-size: 40px 40px;
}
:is(body, .kyber-bg-root).kyber-bg-grid_scan .bg-grid::after {
  opacity: 0.55;
  animation: grid-scan calc(9s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}
:is(body, .kyber-bg-root).kyber-bg-grid .bg-orb-a,
:is(body, .kyber-bg-root).kyber-bg-grid_scan .bg-orb-a { opacity: 0.18; }
:is(body, .kyber-bg-root).kyber-bg-grid .bg-orb-b,
:is(body, .kyber-bg-root).kyber-bg-grid_scan .bg-orb-b {
  opacity: 0.2;
  animation: orb-float-b calc(22s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}
:is(body, .kyber-bg-root).kyber-bg-grid .bg-aurora,
:is(body, .kyber-bg-root).kyber-bg-grid_scan .bg-aurora { opacity: 0.16; }
:is(body, .kyber-bg-root).kyber-bg-grid_scan .bg-aurora { animation: aurora-drift calc(22s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-grid .bg-stars-far,
:is(body, .kyber-bg-root).kyber-bg-grid_scan .bg-stars-far { opacity: 0.18; }
:is(body, .kyber-bg-root).kyber-bg-grid .bg-grain,
:is(body, .kyber-bg-root).kyber-bg-grid_scan .bg-grain { opacity: 0.08; }
:is(body, .kyber-bg-root).kyber-bg-grid .bg-vignette,
:is(body, .kyber-bg-root).kyber-bg-grid_scan .bg-vignette { opacity: 0.52; }

/* ═══ Night drop ═══ */
:is(body, .kyber-bg-root).kyber-bg-stars .bg-stars-far,
:is(body, .kyber-bg-root).kyber-bg-stars_drift .bg-stars-far { opacity: 0.55; }
:is(body, .kyber-bg-root).kyber-bg-stars .bg-stars-near,
:is(body, .kyber-bg-root).kyber-bg-stars_drift .bg-stars-near { opacity: 0.65; }
:is(body, .kyber-bg-root).kyber-bg-stars .bg-stars-near::after,
:is(body, .kyber-bg-root).kyber-bg-stars_drift .bg-stars-near::after { opacity: 0.4; }
:is(body, .kyber-bg-root).kyber-bg-stars_drift .bg-stars-far {
  animation: stars-drift-slow calc(48s / var(--bg-anim-mult, 1)) linear infinite;
}
:is(body, .kyber-bg-root).kyber-bg-stars_drift .bg-stars-near {
  animation: stars-drift-fast calc(32s / var(--bg-anim-mult, 1)) linear infinite;
}
:is(body, .kyber-bg-root).kyber-bg-stars .bg-aurora,
:is(body, .kyber-bg-root).kyber-bg-stars_drift .bg-aurora { opacity: 0.22; filter: blur(56px); }
:is(body, .kyber-bg-root).kyber-bg-stars_drift .bg-aurora { animation: aurora-drift calc(30s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-stars .bg-orb-a,
:is(body, .kyber-bg-root).kyber-bg-stars_drift .bg-orb-a { opacity: 0.14; }
:is(body, .kyber-bg-root).kyber-bg-stars .bg-orb-b,
:is(body, .kyber-bg-root).kyber-bg-stars_drift .bg-orb-b { opacity: 0.12; }
:is(body, .kyber-bg-root).kyber-bg-stars .bg-mesh,
:is(body, .kyber-bg-root).kyber-bg-stars_drift .bg-mesh { opacity: 0.12; }
:is(body, .kyber-bg-root).kyber-bg-stars .bg-vignette,
:is(body, .kyber-bg-root).kyber-bg-stars_drift .bg-vignette { opacity: 0.58; }
:is(body, .kyber-bg-root).kyber-bg-stars .bg-grain,
:is(body, .kyber-bg-root).kyber-bg-stars_drift .bg-grain { opacity: 0.12; }

/* ═══ Custom photo ═══ */
:is(body, .kyber-bg-root).kyber-bg-custom_image .bg-photo,
:is(body, .kyber-bg-root).kyber-bg-custom_image_motion .bg-photo {
  opacity: 1;
}

:is(body, .kyber-bg-root).kyber-bg-custom_image_motion .bg-photo {
  animation: kenburns calc(24s / var(--bg-anim-mult, 1)) ease-in-out infinite alternate;
}

:is(body, .kyber-bg-root).kyber-bg-custom_image .bg-grain,
:is(body, .kyber-bg-root).kyber-bg-custom_image_motion .bg-grain {
  opacity: 0.2;
}

/* ═══ Waves — liquid bands + deep glow ═══ */
.bg-waves {
  inset: -30% -20%;
  opacity: 0;
  filter: blur(24px);
  will-change: transform;
}

.bg-waves::before,
.bg-waves::after {
  content: "";
  position: absolute;
  left: -15%;
  right: -15%;
  border-radius: 50%;
  pointer-events: none;
}

.bg-waves::before {
  bottom: 8%;
  height: 38%;
  background:
    radial-gradient(ellipse 95% 100% at 50% 100%, var(--glow-b-38, rgba(0, 232, 200, 0.38)), transparent 72%),
    radial-gradient(ellipse 55% 80% at 22% 100%, var(--glow-a-28, rgba(139, 108, 255, 0.28)), transparent 68%);
  animation: wave-band-a calc(7s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

.bg-waves::after {
  bottom: 2%;
  height: 28%;
  background:
    radial-gradient(ellipse 90% 100% at 50% 100%, var(--glow-a-32, rgba(139, 108, 255, 0.32)), transparent 70%),
    radial-gradient(ellipse 50% 75% at 78% 100%, var(--glow-b-28, rgba(0, 232, 200, 0.28)), transparent 65%);
  animation: wave-band-b calc(9s / var(--bg-anim-mult, 1)) ease-in-out infinite calc(0.8s / var(--bg-anim-mult, 1));
  opacity: 0.85;
}

:is(body, .kyber-bg-root).kyber-bg-waves .bg-waves {
  opacity: 0.85;
  background:
    radial-gradient(ellipse 80% 50% at 50% 112%, var(--glow-b-18, rgba(0, 232, 200, 0.18)), transparent 66%),
    radial-gradient(ellipse 60% 42% at 15% 108%, var(--glow-a-14, rgba(139, 108, 255, 0.14)), transparent 60%);
  animation: waves-swell calc(14s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-waves .bg-aurora {
  opacity: 0.32;
  animation: waves-aurora calc(18s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-waves .bg-mesh {
  opacity: 0.24;
  filter: blur(28px);
  animation: waves-drift calc(16s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-waves .bg-orb-a {
  opacity: 0.24;
  top: -6%;
  width: min(80vw, 360px);
  height: min(80vw, 360px);
  animation: orb-float-a calc(18s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-waves .bg-orb-b {
  opacity: 0.2;
  bottom: 0;
  left: -10%;
  width: min(70vw, 320px);
  height: min(70vw, 320px);
  animation: orb-float-b calc(20s / var(--bg-anim-mult, 1)) ease-in-out infinite reverse;
}

:is(body, .kyber-bg-root).kyber-bg-waves .bg-grain { opacity: 0.1; }
:is(body, .kyber-bg-root).kyber-bg-waves .bg-vignette { opacity: 0.48; }

/* ═══ Pulse — soft claim heartbeat ═══ */
:is(body, .kyber-bg-root).kyber-bg-pulse .bg-orb-a {
  width: min(92vw, 400px);
  height: min(92vw, 400px);
  top: 44%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  opacity: 0.32;
  filter: blur(88px) saturate(0.75);
  animation: pulse-core calc(6.5s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-pulse .bg-orb-b {
  width: min(115vw, 500px);
  height: min(115vw, 500px);
  top: 44%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: blur(96px) saturate(0.7);
  background: var(--bg-orb-b, var(--accent-2));
  animation: pulse-ring calc(6.5s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-pulse .bg-orb-c {
  width: min(62vw, 280px);
  height: min(62vw, 280px);
  top: 36%;
  left: 68%;
  opacity: 0.16;
  filter: blur(72px) saturate(0.7);
  animation: pulse-accent calc(8s / var(--bg-anim-mult, 1)) ease-in-out infinite calc(1s / var(--bg-anim-mult, 1));
}

:is(body, .kyber-bg-root).kyber-bg-pulse .bg-aurora {
  opacity: 0.28;
  inset: -10%;
  animation: pulse-aurora calc(10s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-pulse .bg-mesh {
  opacity: 0.2;
  filter: blur(28px);
  animation: pulse-mesh calc(12s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-pulse .bg-vignette {
  opacity: 0.55;
  background: radial-gradient(ellipse at center, transparent 32%, rgba(0, 0, 0, 0.55) 100%);
}

:is(body, .kyber-bg-root).kyber-bg-pulse .bg-grain {
  opacity: 0.1;
}

/* ═══ Neon — soft synth horizon (airdrop night) ═══ */
:is(body, .kyber-bg-root).kyber-bg-neon .bg-grid {
  opacity: 0.32;
  inset: 38% -40% -8%;
  background-image:
    linear-gradient(rgba(139, 108, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 232, 200, 0.1) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(560px) rotateX(68deg);
  transform-origin: 50% 0%;
  mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 78%, transparent 100%);
}

:is(body, .kyber-bg-root).kyber-bg-neon .bg-grid::before {
  content: "";
  position: absolute;
  inset: auto;
  left: 8%;
  right: 8%;
  top: 0;
  bottom: auto;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--glow-b-28, rgba(0, 232, 200, 0.28)) 25%,
    var(--glow-a-32, rgba(139, 108, 255, 0.32)) 50%,
    var(--glow-b-28, rgba(0, 232, 200, 0.28)) 75%,
    transparent 100%
  );
  box-shadow: 0 0 24px var(--glow-b-22, rgba(0, 232, 200, 0.22));
  opacity: 0.85;
}

:is(body, .kyber-bg-root).kyber-bg-neon .bg-grid::after {
  animation: neon-scan calc(6.5s / var(--bg-anim-mult, 1)) ease-in-out infinite;
  height: 22%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--glow-b-22, rgba(0, 232, 200, 0.22)) 45%,
    var(--glow-a-18, rgba(139, 108, 255, 0.18)) 60%,
    transparent 100%
  );
  filter: blur(10px);
  opacity: 0.7;
}

:is(body, .kyber-bg-root).kyber-bg-neon .bg-orb-b {
  width: min(110vw, 480px);
  height: min(42vh, 220px);
  top: auto;
  bottom: 18%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  opacity: 0.55;
  filter: blur(64px);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 80%, var(--glow-b-32, rgba(0, 232, 200, 0.32)), transparent 70%),
    radial-gradient(ellipse at 50% 55%, var(--glow-a-22, rgba(139, 108, 255, 0.22)), transparent 58%);
  animation: neon-sun calc(9s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-neon .bg-orb-a {
  opacity: 0.28;
  top: -14%;
  width: min(90vw, 400px);
  filter: blur(96px);
  animation: orb-float-a calc(22s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-neon .bg-stars-far { opacity: 0.5; }
:is(body, .kyber-bg-root).kyber-bg-neon .bg-stars-near { opacity: 0.4; }
:is(body, .kyber-bg-root).kyber-bg-neon .bg-vignette {
  opacity: 0.58;
  background: radial-gradient(ellipse at 50% 70%, transparent 18%, rgba(0, 0, 0, 0.72) 100%);
}
:is(body, .kyber-bg-root).kyber-bg-neon .bg-grain { opacity: 0.2; }

/* ═══ Hex — soft token lattice ═══ */
.bg-hex {
  inset: -12%;
  opacity: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath fill='none' stroke='%238b6cff' stroke-opacity='0.18' stroke-width='1' d='M28 2 L54 17 L54 47 L28 62 L2 47 L2 17 Z'/%3E%3Cpath fill='none' stroke='%2300e8c8' stroke-opacity='0.1' stroke-width='1' d='M28 49 L54 64 L54 94 L28 109 L2 94 L2 64 Z' transform='translate(0 -11)'/%3E%3C/svg%3E");
  background-size: 56px 98px;
  mask-image: radial-gradient(ellipse 88% 78% at 50% 42%, black 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 88% 78% at 50% 42%, black 20%, transparent 78%);
}

.bg-hex::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 28%, var(--glow-a-28, rgba(139, 108, 255, 0.28)), transparent 42%),
    radial-gradient(circle at 72% 62%, var(--glow-b-22, rgba(0, 232, 200, 0.22)), transparent 38%),
    radial-gradient(circle at 48% 78%, var(--glow-a-16, rgba(139, 108, 255, 0.16)), transparent 34%);
  mix-blend-mode: screen;
  opacity: 0.85;
}

:is(body, .kyber-bg-root).kyber-bg-hex .bg-hex {
  opacity: 0.9;
  animation: hex-drift calc(36s / var(--bg-anim-mult, 1)) linear infinite;
}

:is(body, .kyber-bg-root).kyber-bg-hex .bg-hex::before {
  animation: hex-glow calc(8s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-hex .bg-orb-a {
  opacity: 0.32;
  filter: blur(92px);
  animation: orb-float-a calc(20s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-hex .bg-orb-b {
  opacity: 0.22;
  filter: blur(96px);
  animation: orb-float-b calc(24s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-hex .bg-mesh {
  opacity: 0.28;
  filter: blur(14px);
  animation: hex-mesh calc(18s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-hex .bg-vignette { opacity: 0.55; }
:is(body, .kyber-bg-root).kyber-bg-hex .bg-grain { opacity: 0.18; }

/* ═══ Bokeh — soft premium lights ═══ */
.bg-bokeh {
  inset: -18%;
  opacity: 0;
  filter: blur(18px);
  will-change: transform, opacity;
}

.bg-bokeh::before,
.bg-bokeh::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bg-bokeh::before {
  background:
    radial-gradient(circle at 12% 20%, var(--glow-a-32, rgba(139, 108, 255, 0.32)) 0, transparent 16%),
    radial-gradient(circle at 84% 14%, var(--glow-b-28, rgba(0, 232, 200, 0.28)) 0, transparent 13%),
    radial-gradient(circle at 88% 58%, var(--glow-a-22, rgba(139, 108, 255, 0.22)) 0, transparent 18%),
    radial-gradient(circle at 16% 74%, var(--glow-b-22, rgba(0, 232, 200, 0.22)) 0, transparent 15%);
  animation: bokeh-layer-a calc(22s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

.bg-bokeh::after {
  background:
    radial-gradient(circle at 52% 36%, var(--glow-a-18, rgba(139, 108, 255, 0.18)) 0, transparent 12%),
    radial-gradient(circle at 66% 82%, var(--glow-b-22, rgba(0, 232, 200, 0.22)) 0, transparent 16%),
    radial-gradient(circle at 38% 48%, rgba(255, 214, 120, 0.12) 0, transparent 9%),
    radial-gradient(circle at 44% 62%, var(--glow-b-16, rgba(0, 232, 200, 0.16)) 0, transparent 10%);
  animation: bokeh-layer-b calc(26s / var(--bg-anim-mult, 1)) ease-in-out infinite calc(2s / var(--bg-anim-mult, 1));
  opacity: 0.9;
}

:is(body, .kyber-bg-root).kyber-bg-bokeh .bg-bokeh {
  opacity: 1;
  background:
    radial-gradient(circle at 26% 30%, var(--glow-a-28, rgba(139, 108, 255, 0.28)) 0, transparent 14%),
    radial-gradient(circle at 70% 66%, var(--glow-b-22, rgba(0, 232, 200, 0.22)) 0, transparent 13%);
  animation: bokeh-drift calc(20s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-bokeh .bg-orb-a,
:is(body, .kyber-bg-root).kyber-bg-bokeh .bg-orb-b,
:is(body, .kyber-bg-root).kyber-bg-bokeh .bg-orb-c { opacity: 0; }

:is(body, .kyber-bg-root).kyber-bg-bokeh .bg-vignette { opacity: 0.52; }
:is(body, .kyber-bg-root).kyber-bg-bokeh .bg-grain { opacity: 0.16; }

/* ═══ Rain — soft token rain ═══ */
.bg-rain {
  inset: 0;
  opacity: 0;
  overflow: hidden;
}

.bg-rain::before,
.bg-rain::after {
  content: "";
  position: absolute;
  inset: -60% -20%;
  pointer-events: none;
}

.bg-rain::before {
  background-image:
    radial-gradient(1.5px 10px at 12% 20%, var(--glow-a-28, rgba(139, 108, 255, 0.28)), transparent),
    radial-gradient(1.5px 14px at 28% 55%, var(--glow-b-22, rgba(0, 232, 200, 0.22)), transparent),
    radial-gradient(1px 8px at 44% 30%, rgba(255, 255, 255, 0.18), transparent),
    radial-gradient(1.5px 12px at 58% 70%, var(--glow-a-22, rgba(139, 108, 255, 0.22)), transparent),
    radial-gradient(1px 9px at 72% 40%, var(--glow-b-18, rgba(0, 232, 200, 0.18)), transparent),
    radial-gradient(1.5px 11px at 86% 62%, rgba(255, 220, 140, 0.16), transparent),
    radial-gradient(1px 7px at 18% 80%, var(--glow-a-18, rgba(139, 108, 255, 0.18)), transparent),
    radial-gradient(1.5px 13px at 64% 15%, var(--glow-b-22, rgba(0, 232, 200, 0.22)), transparent);
  background-size: 140px 180px;
  animation: rain-streak-a calc(4.2s / var(--bg-anim-mult, 1)) linear infinite;
  opacity: 0.75;
  filter: blur(0.3px);
}

.bg-rain::after {
  background-image:
    radial-gradient(1px 8px at 20% 25%, var(--glow-b-16, rgba(0, 232, 200, 0.16)), transparent),
    radial-gradient(1.5px 11px at 48% 48%, var(--glow-a-18, rgba(139, 108, 255, 0.18)), transparent),
    radial-gradient(1px 6px at 76% 35%, rgba(255, 255, 255, 0.12), transparent),
    radial-gradient(1.5px 10px at 34% 75%, var(--glow-b-18, rgba(0, 232, 200, 0.18)), transparent),
    radial-gradient(1px 9px at 90% 58%, var(--glow-a-14, rgba(139, 108, 255, 0.14)), transparent);
  background-size: 180px 220px;
  animation: rain-streak-b calc(5.8s / var(--bg-anim-mult, 1)) linear infinite;
  opacity: 0.55;
}

:is(body, .kyber-bg-root).kyber-bg-rain .bg-rain { opacity: 1; }

:is(body, .kyber-bg-root).kyber-bg-rain .bg-mesh {
  opacity: 0.32;
  filter: blur(20px);
  animation: rain-mist calc(14s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-rain .bg-orb-a {
  opacity: 0.22;
  top: -16%;
  filter: blur(100px);
}

:is(body, .kyber-bg-root).kyber-bg-rain .bg-orb-b {
  opacity: 0.26;
  bottom: 6%;
  filter: blur(92px);
  animation: orb-float-b calc(22s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}

:is(body, .kyber-bg-root).kyber-bg-rain .bg-stars-far { opacity: 0.35; }
:is(body, .kyber-bg-root).kyber-bg-rain .bg-vignette { opacity: 0.62; }
:is(body, .kyber-bg-root).kyber-bg-rain .bg-grain { opacity: 0.18; }

/* ═══ Logo particles ═══ */
:is(body, .kyber-bg-root).kyber-bg-logo_particles .bg-orb,
:is(body, .kyber-bg-root).kyber-bg-logo_particles .bg-layer:not(.bg-photo) {
  opacity: 0 !important;
  animation: none !important;
}

:is(body, .kyber-bg-root).kyber-bg-logo_particles .bg-vignette {
  opacity: 0.45 !important;
}

/* ─── Keyframes — slow, premium, low amplitude ─── */
@keyframes orb-float-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-14px, 10px) scale(1.04); }
  66% { transform: translate(8px, -8px) scale(0.98); }
}

@keyframes orb-float-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(12px, -12px) scale(1.05); }
  70% { transform: translate(-10px, 6px) scale(0.97); }
}

@keyframes orb-float-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10px, -8px) scale(1.06); }
}

@keyframes aurora-drift {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.85; }
  50% { transform: rotate(3deg) scale(1.03); opacity: 1; }
}

@keyframes mesh-flow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(-1.5%, 1%, 0) scale(1.02); }
  66% { transform: translate3d(1%, -1%, 0) scale(1.01); }
}

@keyframes grid-scan {
  0% { opacity: 0; transform: translateY(-100%); }
  15% { opacity: 0.45; }
  85% { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(320%); }
}

@keyframes stars-drift-slow {
  0% { transform: translateY(0); }
  100% { transform: translateY(180px); }
}

@keyframes stars-drift-fast {
  0% { transform: translateY(0); }
  100% { transform: translateY(120px); }
}

@keyframes kenburns {
  0% { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}

@keyframes pulse-core {
  0%, 100% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.88);
  }
  50% {
    opacity: 0.38;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes pulse-ring {
  0%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.78);
  }
  40% {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 0.08;
    transform: translate(-50%, -50%) scale(1.14);
  }
  85% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes pulse-accent {
  0%, 100% { opacity: 0.12; transform: translate(0, 0) scale(0.94); }
  50% { opacity: 0.22; transform: translate(-8px, 6px) scale(1.05); }
}

@keyframes pulse-aurora {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.22; }
  50% { transform: rotate(4deg) scale(1.04); opacity: 0.34; }
}

@keyframes pulse-mesh {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.18; }
  50% { transform: translate3d(1%, -1%, 0) scale(1.03); opacity: 0.28; }
}

@keyframes wave-band-a {
  0%, 100% { transform: translate3d(0, 0, 0) scaleX(1); }
  50% { transform: translate3d(-3%, -6%, 0) scaleX(1.06); }
}

@keyframes wave-band-b {
  0%, 100% { transform: translate3d(0, 0, 0) scaleX(1); }
  50% { transform: translate3d(4%, -4%, 0) scaleX(1.04); }
}

@keyframes waves-swell {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -3%, 0) scale(1.04); }
}

@keyframes waves-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33% { transform: translate3d(2%, -2%, 0); }
  66% { transform: translate3d(-2%, 1%, 0); }
}

@keyframes waves-aurora {
  0%, 100% { transform: rotate(-5deg) scale(1); opacity: 0.42; }
  50% { transform: rotate(7deg) scale(1.1); opacity: 0.58; }
}

@keyframes neon-sun {
  0%, 100% { opacity: 0.62; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.88; transform: translateX(-50%) scale(1.08); }
}

@keyframes neon-scan {
  0% { opacity: 0; transform: translateY(-120%); }
  10% { opacity: 0.95; }
  90% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(440%); }
}

@keyframes hex-drift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-46px, 78px, 0); }
}

@keyframes hex-glow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes hex-mesh {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.28; }
  50% { transform: translate3d(-2%, 2%, 0); opacity: 0.38; }
}

@keyframes bokeh-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(1.5%, -1%, 0) scale(1.02); }
}

@keyframes bokeh-layer-a {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 1; }
  33% { transform: translate3d(3%, -2%, 0); opacity: 0.92; }
  66% { transform: translate3d(-2%, 2%, 0); opacity: 1; }
}

@keyframes bokeh-layer-b {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.88; }
  40% { transform: translate3d(-3%, 1.5%, 0); opacity: 1; }
  70% { transform: translate3d(2%, -2%, 0); opacity: 0.82; }
}

@keyframes rain-streak-a {
  0% { transform: translate3d(0, -12%, 0); }
  100% { transform: translate3d(0, 12%, 0); }
}

@keyframes rain-streak-b {
  0% { transform: translate3d(0, -18%, 0); }
  100% { transform: translate3d(0, 18%, 0); }
}

@keyframes rain-mist {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.26; }
  50% { transform: translate3d(1%, -1%, 0); opacity: 0.38; }
}

/* ═══ Ripple — soft drop rings ═══ */
:is(body, .kyber-bg-root).kyber-bg-ripple .bg-orb-a,
:is(body, .kyber-bg-root).kyber-bg-ripple .bg-orb-b,
:is(body, .kyber-bg-root).kyber-bg-ripple .bg-orb-c {
  top: 46%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: min(52vw, 240px); height: min(52vw, 240px);
  background: radial-gradient(circle, var(--glow-a-18, rgba(139,108,255,.18)) 0%, transparent 62%);
  box-shadow:
    0 0 0 1.5px var(--glow-a-22, rgba(139, 108, 255, 0.22)),
    0 0 36px var(--glow-a-18, rgba(139,108,255,.18));
  filter: blur(0.5px);
  opacity: 0;
  mix-blend-mode: screen;
}
:is(body, .kyber-bg-root).kyber-bg-ripple .bg-orb-a { animation: ripple-ring calc(5.2s / var(--bg-anim-mult, 1)) ease-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-ripple .bg-orb-b {
  box-shadow:
    0 0 0 1.5px var(--glow-b-22, rgba(0, 232, 200, 0.22)),
    0 0 36px var(--glow-b-16, rgba(0,232,200,.16));
  background: radial-gradient(circle, var(--glow-b-14, rgba(0,232,200,.14)) 0%, transparent 62%);
  animation: ripple-ring calc(5.2s / var(--bg-anim-mult, 1)) ease-out infinite calc(1.7s / var(--bg-anim-mult, 1));
}
:is(body, .kyber-bg-root).kyber-bg-ripple .bg-orb-c {
  animation: ripple-ring calc(5.2s / var(--bg-anim-mult, 1)) ease-out infinite calc(3.4s / var(--bg-anim-mult, 1));
}
:is(body, .kyber-bg-root).kyber-bg-ripple .bg-aurora { opacity: 0.48; animation: aurora-drift calc(18s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-ripple .bg-aurora::after { opacity: 0.7; }
:is(body, .kyber-bg-root).kyber-bg-ripple .bg-mesh { opacity: 0.3; }
:is(body, .kyber-bg-root).kyber-bg-ripple .bg-stars-far { opacity: 0.32; }
:is(body, .kyber-bg-root).kyber-bg-ripple .bg-grain { opacity: 0.18; }
:is(body, .kyber-bg-root).kyber-bg-ripple .bg-vignette { opacity: 0.55; }

/* ═══ Comet — soft meteor claims ═══ */
:is(body, .kyber-bg-root).kyber-bg-comet .bg-stars-far { opacity: 0.85; animation: stars-drift-slow calc(36s / var(--bg-anim-mult, 1)) linear infinite; }
:is(body, .kyber-bg-root).kyber-bg-comet .bg-stars-near { opacity: 0.9; animation: stars-drift-fast calc(22s / var(--bg-anim-mult, 1)) linear infinite; }
:is(body, .kyber-bg-root).kyber-bg-comet .bg-stars-near::after { opacity: 0.75; }
:is(body, .kyber-bg-root).kyber-bg-comet .bg-rain { opacity: 1; }
:is(body, .kyber-bg-root).kyber-bg-comet .bg-rain::before {
  background-image:
    radial-gradient(2px 18px at 18% 20%, var(--glow-a-32, rgba(139,108,255,.32)), transparent),
    radial-gradient(1.5px 22px at 42% 55%, rgba(220, 200, 255, 0.35), transparent),
    radial-gradient(2px 16px at 68% 35%, var(--glow-b-22, rgba(0,232,200,.22)), transparent),
    radial-gradient(1.5px 20px at 84% 70%, var(--glow-a-22, rgba(139,108,255,.22)), transparent);
  background-size: 200px 260px;
  animation: rain-streak-a calc(3.8s / var(--bg-anim-mult, 1)) linear infinite;
  opacity: 0.7;
  filter: blur(0.4px);
  transform: rotate(18deg);
}
:is(body, .kyber-bg-root).kyber-bg-comet .bg-rain::after {
  background-image:
    radial-gradient(1.5px 14px at 30% 40%, var(--glow-b-22, rgba(0,232,200,.22)), transparent),
    radial-gradient(2px 20px at 55% 25%, rgba(180, 255, 230, 0.28), transparent),
    radial-gradient(1px 12px at 78% 60%, var(--glow-a-18, rgba(139,108,255,.18)), transparent);
  background-size: 240px 300px;
  animation: rain-streak-b calc(5.2s / var(--bg-anim-mult, 1)) linear infinite;
  opacity: 0.55;
  transform: rotate(22deg);
}
:is(body, .kyber-bg-root).kyber-bg-comet .bg-orb-a { opacity: 0.32; animation: orb-float-a calc(16s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-comet .bg-orb-b { opacity: 0.24; animation: orb-float-b calc(20s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-comet .bg-aurora { opacity: 0.38; animation: aurora-drift calc(22s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-comet .bg-grain { opacity: 0.16; }
:is(body, .kyber-bg-root).kyber-bg-comet .bg-vignette { opacity: 0.58; }

/* ═══ Prism — soft chromatic vault ═══ */
:is(body, .kyber-bg-root).kyber-bg-prism .bg-aurora {
  opacity: 0.85;
  animation: prism-spin calc(28s / var(--bg-anim-mult, 1)) linear infinite;
  filter: blur(36px) saturate(1.15);
}
:is(body, .kyber-bg-root).kyber-bg-prism .bg-aurora::after {
  opacity: 0.75;
  animation: prism-spin calc(40s / var(--bg-anim-mult, 1)) linear infinite reverse;
}
:is(body, .kyber-bg-root).kyber-bg-prism .bg-mesh {
  opacity: 0.55;
  animation: mesh-flow calc(18s / var(--bg-anim-mult, 1)) ease-in-out infinite reverse;
  filter: blur(12px) saturate(1.1);
}
:is(body, .kyber-bg-root).kyber-bg-prism .bg-mesh::after { opacity: 0.7; }
:is(body, .kyber-bg-root).kyber-bg-prism .bg-orb-a { opacity: 0.38; animation: orb-float-a calc(16s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-prism .bg-orb-b { opacity: 0.32; animation: orb-float-b calc(18s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-prism .bg-orb-c { opacity: 0.22; animation: orb-float-c calc(14s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-prism .bg-stars-near { opacity: 0.3; }
:is(body, .kyber-bg-root).kyber-bg-prism .bg-grain { opacity: 0.2; }
:is(body, .kyber-bg-root).kyber-bg-prism .bg-vignette { opacity: 0.52; }

/* ═══ Embers — gold reward sparks ═══ */
:is(body, .kyber-bg-root).kyber-bg-embers .bg-bokeh {
  opacity: 1;
  filter: blur(12px);
}
:is(body, .kyber-bg-root).kyber-bg-embers .bg-bokeh::before {
  background:
    radial-gradient(circle at 18% 78%, rgba(251, 191, 36, 0.45) 0, transparent 12%),
    radial-gradient(circle at 42% 88%, rgba(245, 158, 11, 0.32) 0, transparent 10%),
    radial-gradient(circle at 68% 72%, rgba(253, 224, 71, 0.28) 0, transparent 11%),
    radial-gradient(circle at 82% 85%, rgba(251, 191, 36, 0.22) 0, transparent 9%),
    radial-gradient(circle at 28% 60%, var(--glow-a-18, rgba(139, 108, 255, 0.18)) 0, transparent 14%);
  animation: embers-rise calc(14s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}
:is(body, .kyber-bg-root).kyber-bg-embers .bg-bokeh::after {
  background:
    radial-gradient(circle at 55% 82%, rgba(252, 211, 77, 0.35) 0, transparent 10%),
    radial-gradient(circle at 12% 70%, rgba(245, 158, 11, 0.2) 0, transparent 9%),
    radial-gradient(circle at 75% 55%, var(--glow-b-16, rgba(0, 232, 200, 0.16)) 0, transparent 12%),
    radial-gradient(circle at 48% 48%, rgba(255, 236, 160, 0.14) 0, transparent 8%);
  animation: embers-rise calc(18s / var(--bg-anim-mult, 1)) ease-in-out infinite reverse;
  opacity: 0.85;
}
:is(body, .kyber-bg-root).kyber-bg-embers .bg-orb-a {
  opacity: 0.42;
  bottom: -10%;
  top: auto;
  filter: blur(68px);
  background: #fbbf24;
  animation: orb-float-b calc(14s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}
:is(body, .kyber-bg-root).kyber-bg-embers .bg-orb-b {
  opacity: 0.28;
  bottom: 4%;
  top: auto;
  filter: blur(78px);
  background: #f59e0b;
}
:is(body, .kyber-bg-root).kyber-bg-embers .bg-orb-c {
  opacity: 0.2;
  bottom: 18%;
  top: auto;
  filter: blur(86px);
  background: var(--bg-orb-a, var(--accent));
}
:is(body, .kyber-bg-root).kyber-bg-embers .bg-aurora {
  opacity: 0.32;
  filter: blur(42px);
}
:is(body, .kyber-bg-root).kyber-bg-embers .bg-mesh {
  opacity: 0.22;
  filter: blur(14px);
}
:is(body, .kyber-bg-root).kyber-bg-embers .bg-grain { opacity: 0.22; }
:is(body, .kyber-bg-root).kyber-bg-embers .bg-vignette {
  opacity: 0.62;
  background: radial-gradient(ellipse at 50% 82%, transparent 18%, rgba(0, 0, 0, 0.74) 100%);
}

/* ═══ Orbit — soft token satellites ═══ */
:is(body, .kyber-bg-root).kyber-bg-orbit .bg-orb-a,
:is(body, .kyber-bg-root).kyber-bg-orbit .bg-orb-b,
:is(body, .kyber-bg-root).kyber-bg-orbit .bg-orb-c {
  top: 46%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform-origin: center center;
  opacity: 0.55;
  filter: blur(36px);
  box-shadow: 0 0 48px var(--glow-a-22, rgba(139, 108, 255, 0.22));
}
:is(body, .kyber-bg-root).kyber-bg-orbit .bg-orb-a {
  width: min(36vw, 150px);
  height: min(36vw, 150px);
  transform: translate(-50%, -50%) rotate(0deg) translateX(100px) rotate(0deg);
  animation: orbit-a calc(18s / var(--bg-anim-mult, 1)) linear infinite;
}
:is(body, .kyber-bg-root).kyber-bg-orbit .bg-orb-b {
  width: min(28vw, 118px);
  height: min(28vw, 118px);
  animation: orbit-b calc(26s / var(--bg-anim-mult, 1)) linear infinite reverse;
  box-shadow: 0 0 44px var(--glow-b-22, rgba(0, 232, 200, 0.22));
}
:is(body, .kyber-bg-root).kyber-bg-orbit .bg-orb-c {
  width: min(22vw, 90px);
  height: min(22vw, 90px);
  opacity: 0.38;
  animation: orbit-c calc(12s / var(--bg-anim-mult, 1)) linear infinite;
}
:is(body, .kyber-bg-root).kyber-bg-orbit .bg-mesh {
  opacity: 0.38;
  animation: mesh-flow calc(22s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}
:is(body, .kyber-bg-root).kyber-bg-orbit .bg-mesh::after { opacity: 0.55; }
:is(body, .kyber-bg-root).kyber-bg-orbit .bg-aurora {
  opacity: 0.36;
  animation: aurora-drift calc(24s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}
:is(body, .kyber-bg-root).kyber-bg-orbit .bg-stars-far { opacity: 0.4; }
:is(body, .kyber-bg-root).kyber-bg-orbit .bg-grain { opacity: 0.16; }
:is(body, .kyber-bg-root).kyber-bg-orbit .bg-vignette { opacity: 0.52; }

/* ═══ Vortex — soft vault swirl ═══ */
:is(body, .kyber-bg-root).kyber-bg-vortex .bg-aurora {
  opacity: 0.7;
  animation: prism-spin calc(32s / var(--bg-anim-mult, 1)) linear infinite reverse;
  filter: blur(38px) saturate(1.12);
}
:is(body, .kyber-bg-root).kyber-bg-vortex .bg-aurora::after { opacity: 0.65; }
:is(body, .kyber-bg-root).kyber-bg-vortex .bg-mesh {
  opacity: 0.62;
  animation: vortex-spin calc(24s / var(--bg-anim-mult, 1)) linear infinite;
  filter: blur(14px) saturate(1.12);
}
:is(body, .kyber-bg-root).kyber-bg-vortex .bg-mesh::after { opacity: 0.7; }
:is(body, .kyber-bg-root).kyber-bg-vortex .bg-orb-a {
  opacity: 0.42;
  animation: pulse-core calc(7s / var(--bg-anim-mult, 1)) ease-in-out infinite;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(58px);
}
:is(body, .kyber-bg-root).kyber-bg-vortex .bg-orb-b {
  opacity: 0.26;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(78px);
}
:is(body, .kyber-bg-root).kyber-bg-vortex .bg-stars-near { opacity: 0.28; }
:is(body, .kyber-bg-root).kyber-bg-vortex .bg-grain { opacity: 0.2; }
:is(body, .kyber-bg-root).kyber-bg-vortex .bg-vignette { opacity: 0.6; }

/* ═══ Glitch — discreet chain flicker ═══ */
:is(body, .kyber-bg-root).kyber-bg-glitch .bg-grid {
  opacity: 0.55;
  animation: glitch-jitter calc(4.5s / var(--bg-anim-mult, 1)) ease-in-out infinite;
  background-size: 28px 28px;
  background-image:
    linear-gradient(var(--glow-a-14, rgba(139, 108, 255, 0.14)) 1px, transparent 1px),
    linear-gradient(90deg, var(--glow-a-14, rgba(139, 108, 255, 0.14)) 1px, transparent 1px);
}
:is(body, .kyber-bg-root).kyber-bg-glitch .bg-grid::after {
  opacity: 0.85;
  animation: grid-scan calc(5.5s / var(--bg-anim-mult, 1)) ease-in-out infinite;
  background: linear-gradient(
    180deg,
    transparent,
    var(--glow-b-28, rgba(0, 232, 200, 0.28)),
    var(--glow-a-22, rgba(139, 108, 255, 0.22)),
    transparent
  );
  filter: blur(8px);
}
:is(body, .kyber-bg-root).kyber-bg-glitch .bg-aurora {
  opacity: 0.42;
  animation: glitch-flash calc(6s / var(--bg-anim-mult, 1)) ease-in-out infinite;
  filter: blur(34px) saturate(1.1);
}
:is(body, .kyber-bg-root).kyber-bg-glitch .bg-orb-a { opacity: 0.3; filter: blur(78px); }
:is(body, .kyber-bg-root).kyber-bg-glitch .bg-orb-b {
  opacity: 0.32;
  animation: orb-float-b calc(14s / var(--bg-anim-mult, 1)) ease-in-out infinite;
}
:is(body, .kyber-bg-root).kyber-bg-glitch .bg-mesh { opacity: 0.28; }
:is(body, .kyber-bg-root).kyber-bg-glitch .bg-stars-far { opacity: 0.28; }
:is(body, .kyber-bg-root).kyber-bg-glitch .bg-grain { opacity: 0.28; }
:is(body, .kyber-bg-root).kyber-bg-glitch .bg-vignette { opacity: 0.55; }

@keyframes ripple-ring {
  0% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.4); }
  65% { opacity: 0.18; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}
@keyframes prism-spin {
  0% { transform: rotate(0deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(1.04); }
}
@keyframes embers-rise {
  0%, 100% { transform: translate3d(0, 6%, 0) scale(1); opacity: 0.65; }
  50% { transform: translate3d(1.5%, -12%, 0) scale(1.06); opacity: 1; }
}
@keyframes orbit-a {
  0% { transform: translate(-50%, -50%) rotate(0deg) translateX(100px) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateX(100px) rotate(-360deg); }
}
@keyframes orbit-b {
  0% { transform: translate(-50%, -50%) rotate(0deg) translateX(130px) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateX(130px) rotate(-360deg); }
}
@keyframes orbit-c {
  0% { transform: translate(-50%, -50%) rotate(0deg) translateX(62px) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateX(62px) rotate(-360deg); }
}
@keyframes vortex-spin {
  0% { transform: rotate(0deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1.08); }
}
@keyframes glitch-jitter {
  0%, 100% { transform: translate(0, 0); opacity: 0.52; }
  48% { transform: translate(0, 0); opacity: 0.55; }
  50% { transform: translate(-1px, 0); opacity: 0.62; }
  52% { transform: translate(1px, 0); opacity: 0.48; }
  54% { transform: translate(0, 0); opacity: 0.55; }
}
@keyframes glitch-flash {
  0%, 88%, 100% { opacity: 0.32; filter: blur(34px) saturate(1.05); }
  92% { opacity: 0.55; filter: blur(30px) saturate(1.2); }
  95% { opacity: 0.28; filter: blur(36px) saturate(1); }
}
@keyframes aurora-shimmer {
  0%, 100% { opacity: 0.45; transform: translate3d(-2%, 0, 0) skewX(-2deg); }
  50% { opacity: 0.9; transform: translate3d(3%, -1%, 0) skewX(2deg); }
}
@keyframes mesh-sheen {
  0%, 100% { opacity: 0.35; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: 0.85; transform: translate3d(2%, -2%, 0) scale(1.04); }
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.25; }
  40% { opacity: 0.9; }
  60% { opacity: 0.4; }
  80% { opacity: 1; }
}

/* Pulse / waves / neon / hex richness boosts */
:is(body, .kyber-bg-root).kyber-bg-pulse .bg-stars-far { opacity: 0.25; }
:is(body, .kyber-bg-root).kyber-bg-pulse .bg-stars-near { opacity: 0.35; }
:is(body, .kyber-bg-root).kyber-bg-pulse .bg-stars-near::after { opacity: 0.5; }
:is(body, .kyber-bg-root).kyber-bg-pulse .bg-aurora::after { opacity: 0.75; }
:is(body, .kyber-bg-root).kyber-bg-pulse .bg-mesh::after { opacity: 0.6; }
:is(body, .kyber-bg-root).kyber-bg-waves .bg-stars-far { opacity: 0.2; }
:is(body, .kyber-bg-root).kyber-bg-waves .bg-aurora::after { opacity: 0.7; }
:is(body, .kyber-bg-root).kyber-bg-waves .bg-mesh::after { opacity: 0.55; }
:is(body, .kyber-bg-root).kyber-bg-neon .bg-stars-near::after { opacity: 0.55; }
:is(body, .kyber-bg-root).kyber-bg-neon .bg-aurora { opacity: 0.3; }
:is(body, .kyber-bg-root).kyber-bg-hex .bg-aurora { opacity: 0.3; animation: aurora-drift calc(20s / var(--bg-anim-mult, 1)) ease-in-out infinite; }
:is(body, .kyber-bg-root).kyber-bg-hex .bg-stars-far { opacity: 0.22; }
:is(body, .kyber-bg-root).kyber-bg-bokeh .bg-aurora { opacity: 0.35; }
:is(body, .kyber-bg-root).kyber-bg-bokeh .bg-mesh { opacity: 0.25; }
:is(body, .kyber-bg-root).kyber-bg-rain .bg-stars-near::after { opacity: 0.4; }
:is(body, .kyber-bg-root).kyber-bg-custom_image .bg-aurora,
:is(body, .kyber-bg-root).kyber-bg-custom_image_motion .bg-aurora { opacity: 0.2; }
:is(body, .kyber-bg-root).kyber-bg-custom_image .bg-orb-a,
:is(body, .kyber-bg-root).kyber-bg-custom_image_motion .bg-orb-a { opacity: 0.18; }
:is(body, .kyber-bg-root).kyber-bg-custom_image_motion .bg-vignette { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  /* Keep .kyber-preview-live animating — client branding preview must match Mini App */
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-orb,
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-layer,
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-layer::before,
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-layer::after,
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-aurora::after,
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-mesh::after,
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-stars-near::after,
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-grid::after,
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-photo,
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-rain::before,
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-rain::after,
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-hex::before,
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-waves::before,
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-waves::after,
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-bokeh::before,
  :is(body, .kyber-bg-root):not(.kyber-preview-live)[class*="kyber-bg-"] .bg-bokeh::after {
    animation: none !important;
  }
}