/* background orb styles extracted from landing.css */
/* includes: .landing-bg, .landing-bg-orb variants, orb keyframe animations */

/* animated background orbs */
.landing-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.landing-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  will-change: transform;
}

.landing-bg-orb--1 {
  width: 600px;
  height: 600px;
  background: rgba(52, 211, 153, 0.25);
  top: -10%;
  left: -5%;
  animation: orbFloat1 18s ease-in-out infinite alternate;
}

.landing-bg-orb--2 {
  width: 500px;
  height: 500px;
  background: rgba(99, 102, 241, 0.2);
  top: 30%;
  right: -10%;
  animation: orbFloat2 22s ease-in-out infinite alternate;
}

.landing-bg-orb--3 {
  width: 400px;
  height: 400px;
  background: rgba(168, 85, 247, 0.15);
  bottom: -5%;
  left: 30%;
  animation: orbFloat3 20s ease-in-out infinite alternate;
}

@keyframes orbFloat1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(80px, 60px) scale(1.15); }
}

@keyframes orbFloat2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-60px, 40px) scale(1.1); }
}

@keyframes orbFloat3 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -50px) scale(1.2); }
}

/* ===== responsive: orb-only rules from mixed @media (max-width: 768px) ===== */

/* note: the main 768px media query in landing.css mixes orb styles with nav, hero,
   footer, and other selectors. the orb-specific rules are duplicated here for reference.
   the original mixed media query in landing.css is NOT modified. */

/* light mode: soften orbs against light backgrounds */
[data-theme="light"] .landing-bg-orb {
  opacity: 0.15;
}

@media (max-width: 768px) {
  /* performance: reduce orb blur and size on mobile */
  .landing-bg-orb {
    filter: blur(60px);
    will-change: auto;
  }
  .landing-bg-orb--1 { width: 300px; height: 300px; }
  .landing-bg-orb--2 { width: 250px; height: 250px; }
  .landing-bg-orb--3 { width: 200px; height: 200px; }
  .landing-bg-orb--1,
  .landing-bg-orb--2,
  .landing-bg-orb--3 {
    animation-play-state: paused;
  }
}