/* ==========================================================================
   RP Growth Systems — background orbs (decorative, background-only layer)
   v3 2026-10-08 — premium "glass sphere" look, always on screen.
   Self-contained: remove the <link>, the #rp-orbs <div> and the <script>
   tag in index.html to roll back. Styles nothing outside #rp-orbs
   (plus hiding the superseded .parallax layer).
   ========================================================================== */

#rp-orbs.rp-orbs {
  position: fixed !important;   /* beats the generic `body > *` rule in styles.css */
  inset: 0;
  z-index: 0 !important;        /* all content sits above at z-index:1 */
  pointer-events: none;
  overflow: hidden;
  contain: strict;

  /* Brand colours only — exactly the ones already used in styles.css:
     var(--purple) #9B2EFF (l.12), var(--gold) #D1AE64 (l.14),
     #A63AFF (l.178) and #7A1FD4 (l.121/178). White is used only for the
     glass rim and specular highlight. Orbs vary in opacity, never in hue. */
  --rp-orb-purple: var(--purple);
  --rp-orb-gold: var(--gold);
  --rp-orb-lilac: #A63AFF;
  --rp-orb-violet: #7A1FD4;
}

/* The older ambient layer is superseded by #rp-orbs (its markup is kept untouched). */
body > .parallax { display: none !important; }

/* Outer node: placed by CSS, moved with scroll by bg-orbs.js (transform only). */
.rp-orbs__orb {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Inner node: the sphere itself + its own continuous float (drift, breathing, glow). */
.rp-orbs__body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--g);
  opacity: var(--o, 1);
  translate: 0 0;
  scale: 1;
  animation:
    rp-orb-drift var(--dur, 9s) ease-in-out var(--delay, 0s) infinite alternate,
    rp-orb-pulse var(--pdur, 7s) ease-in-out var(--pdelay, 0s) infinite alternate,
    rp-orb-glow var(--gdur, 8s) ease-in-out var(--pdelay, 0s) infinite alternate;
  will-change: translate, scale, opacity;
}

/* ---- Large, deep, diffuse spheres (soft 3D shading, no hard edge) ---- */
.rp-orbs__orb--soft .rp-orbs__body {
  --g:
    radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--hi) 42%, transparent) 0%, transparent 34%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c1) 34%, transparent) 0%, color-mix(in srgb, var(--c2) 20%, transparent) 38%, color-mix(in srgb, var(--c2) 7%, transparent) 56%, transparent 70%);
}

/* ---- Glass spheres: rim-lit body, 1px translucent rim, specular highlight, coloured halo ---- */
.rp-orbs__orb--glass .rp-orbs__body {
  --g:
    radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--c1) 6%, transparent) 0%, color-mix(in srgb, var(--c1) 14%, transparent) 48%, color-mix(in srgb, var(--c2) 30%, transparent) 78%, color-mix(in srgb, var(--c2) 46%, transparent) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 -10px 30px color-mix(in srgb, var(--c2) 22%, transparent),
    inset 0 2px 1px rgba(255, 255, 255, 0.10),
    0 18px 50px color-mix(in srgb, var(--c1) 22%, transparent);
}
.rp-orbs__orb--glass .rp-orbs__body::before {   /* specular highlight, top-left */
  content: "";
  position: absolute;
  left: 14%;
  top: 9%;
  width: 46%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 45% 40%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0) 72%);
  transform: rotate(-24deg);
}
.rp-orbs__orb--glass .rp-orbs__body::after {    /* faint brand-coloured reflection, bottom-right */
  content: "";
  position: absolute;
  right: 16%;
  bottom: 12%;
  width: 30%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--c3, var(--c1)) 40%, transparent) 0%, transparent 70%);
  transform: rotate(-24deg);
}

/* ---- Individual orbs: position (vh/vw %), size, colours, timing (6–12 s, offset) ---- */
.rp-orbs__orb--a { --x: 88%; --y: 20%; --s: min(760px, 118vw);
  --hi: var(--rp-orb-lilac); --c1: var(--rp-orb-lilac); --c2: var(--rp-orb-purple);
  --dur: 11s; --pdur: 8s; --gdur: 9.5s; --pdelay: -2s; --dx: 46px; --dy: -38px; }
.rp-orbs__orb--b { --x: 6%; --y: 68%; --s: min(580px, 96vw);
  --hi: var(--rp-orb-gold); --c1: var(--rp-orb-gold); --c2: var(--rp-orb-gold); --o: 0.8;
  --dur: 9s; --delay: -4s; --pdur: 10s; --gdur: 7s; --pdelay: -6s; --dx: -40px; --dy: 34px; }
.rp-orbs__orb--d { --x: 34%; --y: 96%; --s: min(680px, 110vw);
  --hi: var(--rp-orb-purple); --c1: var(--rp-orb-violet); --c2: var(--rp-orb-purple);
  --dur: 12s; --delay: -7s; --pdur: 9s; --gdur: 6.5s; --pdelay: -1s; --dx: -52px; --dy: -30px; }
.rp-orbs__orb--f { --x: 80%; --y: 62%; --s: min(300px, 52vw);
  --c1: var(--rp-orb-purple); --c2: var(--rp-orb-lilac); --c3: var(--rp-orb-gold);
  --dur: 10s; --delay: -5s; --pdur: 11s; --gdur: 8.5s; --pdelay: -4s; --dx: -36px; --dy: 40px; }
.rp-orbs__orb--c { --x: 16%; --y: 32%; --s: min(180px, 34vw);
  --c1: var(--rp-orb-lilac); --c2: var(--rp-orb-violet); --c3: var(--rp-orb-gold);
  --dur: 7s; --delay: -1s; --pdur: 6s; --gdur: 11s; --pdelay: -3s; --dx: 30px; --dy: 42px; }
.rp-orbs__orb--e { --x: 64%; --y: 14%; --s: min(120px, 24vw);
  --c1: var(--rp-orb-gold); --c2: var(--rp-orb-gold); --c3: var(--rp-orb-purple);
  --dur: 6s; --delay: -2.5s; --pdur: 7.5s; --gdur: 10s; --pdelay: -5s; --dx: 26px; --dy: -28px; }
.rp-orbs__orb--g { --x: 46%; --y: 82%; --s: min(92px, 20vw);
  --c1: var(--rp-orb-purple); --c2: var(--rp-orb-lilac); --c3: var(--rp-orb-gold);
  --dur: 8s; --delay: -3.5s; --pdur: 6.5s; --gdur: 9s; --pdelay: -2s; --dx: -24px; --dy: 30px; }

@keyframes rp-orb-drift {
  0%   { translate: 0 0; }
  33%  { translate: var(--dx, 40px) calc(var(--dy, -30px) * 0.6); }
  66%  { translate: calc(var(--dx, 40px) * -0.5) var(--dy, -30px); }
  100% { translate: calc(var(--dx, 40px) * 0.35) calc(var(--dy, -30px) * -0.7); }
}
@keyframes rp-orb-pulse {
  0%   { scale: 0.92; }
  100% { scale: 1.08; }
}
@keyframes rp-orb-glow {
  0%   { opacity: calc(var(--o, 1) * 0.78); }
  100% { opacity: var(--o, 1); }
}

/* Phones: lighter halos (cheaper raster), slightly calmer */
@media (max-width: 720px) {
  .rp-orbs__orb--glass .rp-orbs__body {
    box-shadow:
      inset 0 -8px 20px color-mix(in srgb, var(--c2) 22%, transparent),
      0 10px 28px color-mix(in srgb, var(--c1) 18%, transparent);
  }
  .rp-orbs__orb--soft .rp-orbs__body { --o: 0.85; }
  .rp-orbs__orb--b .rp-orbs__body { --o: 0.7; }
}

/* The large soft spheres are added after the page's first paint (bg-orbs.js sets
   .is-ready on load) and fade in, so they never delay the initial render. */
#rp-orbs:not(.is-ready) .rp-orbs__orb--soft { display: none; }
#rp-orbs.is-ready .rp-orbs__orb--soft { animation: rp-orb-in 1.2s ease-out both; }
@keyframes rp-orb-in { from { opacity: 0; } to { opacity: 1; } }

/* Reduced motion: static spheres, no float (JS also skips scroll movement) */
@media (prefers-reduced-motion: reduce) {
  .rp-orbs__body { animation: none !important; translate: none; scale: none; }
  #rp-orbs.is-ready .rp-orbs__orb--soft { animation: none; }
}