/* ============================================
   HERO EFFECTS — 3D Rising Bubbles + Ambient FX
   ============================================ */

/* ── 3D Bubble Canvas (full hero overlay) ── */
.bubble-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ── CSS Particle Dots (supplementary layer) ── */
.hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Solid circle bubble */
.particle-dot {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation: rise-dot linear infinite;
}

@keyframes rise-dot {
  0% {
    transform: translateY(0) translateX(0) scale(0);
    opacity: 0;
  }
  6% {
    transform: translateY(-6vh) translateX(0) scale(1);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-25vh) translateX(15px);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-50vh) translateX(-10px);
    opacity: 0.5;
  }
  75% {
    transform: translateY(-75vh) translateX(12px);
    opacity: 0.3;
  }
  100% {
    transform: translateY(-110vh) translateX(-5px) scale(0.6);
    opacity: 0;
  }
}

/* ── Orbs ── */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero-orb-1 {
  width: 350px; height: 350px; top: 5%; right: 5%;
  background: radial-gradient(circle, rgba(79, 110, 247, 0.2) 0%, transparent 70%);
  animation: orb-float 12s ease-in-out infinite;
}
.hero-orb-2 {
  width: 250px; height: 250px; bottom: 10%; left: 8%;
  background: radial-gradient(circle, rgba(0, 212, 170, 0.18) 0%, transparent 70%);
  animation: orb-float 16s ease-in-out infinite reverse;
}
.hero-orb-3 {
  width: 200px; height: 200px; top: 35%; right: 20%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
  animation: orb-float 10s ease-in-out infinite 2s;
}
@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  25% { transform: translate(30px, -40px) scale(1.2); opacity: 1; }
  50% { transform: translate(-20px, -20px) scale(0.9); opacity: 0.7; }
  75% { transform: translate(15px, 30px) scale(1.15); opacity: 0.9; }
}

/* ── Pulse Rings ── */
.hero-pulse-ring {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
}
.hero-pulse-ring-1 {
  width: 500px; height: 500px; top: 15%; right: -10%;
  border: 1px solid rgba(79, 110, 247, 0.12);
  animation: pulse-ring 6s ease-in-out infinite;
}
.hero-pulse-ring-2 {
  width: 300px; height: 300px; bottom: 15%; left: 3%;
  border: 1px solid rgba(0, 212, 170, 0.1);
  animation: pulse-ring 8s ease-in-out infinite 2s;
}
@keyframes pulse-ring {
  0%, 100% { transform: scale(0.7); opacity: 0; }
  50% { transform: scale(1.3); opacity: 1; }
}

@media (max-width: 768px) {
  .hero-orb-1 { width: 200px; height: 200px; }
  .hero-orb-2 { width: 150px; height: 150px; }
  .hero-orb-3 { display: none; }
  .hero-pulse-ring-2 { display: none; }
}