/* ============================================================
   bubbles.css — Floating bubble dekoratif (hero area)
   Edit di sini untuk ubah ukuran, warna, posisi, atau timing.
   ============================================================ */

/* ── Keyframes: Float ── */
@keyframes vhBubbleFloatA {
  0%,100% { transform: translateY(0) translateX(0); }
  50%     { transform: translateY(-16px) translateX(6px); }
}
@keyframes vhBubbleFloatB {
  0%,100% { transform: translateY(0) translateX(0); }
  50%     { transform: translateY(12px) translateX(-8px); }
}
@keyframes vhBubbleFloatC {
  0%,100% { transform: translateY(0) translateX(0); }
  50%     { transform: translateY(-10px) translateX(-6px); }
}

/* ── Keyframes: Entrance ── */
@keyframes vhBubbleEnterFromTop    { from { opacity:0; transform:translateY(-120px); } to { opacity:1; transform:translateY(0); } }
@keyframes vhBubbleEnterFromLeft   { from { opacity:0; transform:translateX(-120px); } to { opacity:1; transform:translateX(0); } }
@keyframes vhBubbleEnterFromBottom { from { opacity:0; transform:translateY(120px);  } to { opacity:1; transform:translateY(0); } }

/* ── Keyframes: Exit ── */
@keyframes vhBubbleExitUp   { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-120px); } }
@keyframes vhBubbleExitLeft { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(-120px); } }
@keyframes vhBubbleExitDown { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(120px);  } }

/* ── Container ── */
.vh-bubbles {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

/* ── Base bubble ── */
.vh-bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* ── Bubble 1: ungu besar (kanan atas) ── */
.vh-bubble-1 {
  width: 110px; height: 110px;
  top: 20px; right: 20px;
  background: radial-gradient(circle at 35% 35%,
    rgba(180,130,255,.85),
    rgba(99,60,200,.55) 55%,
    rgba(60,20,140,.2) 80%,
    transparent);
  box-shadow:
    inset -8px -8px 20px rgba(0,0,0,.2),
    inset 6px 6px 14px rgba(255,255,255,.15),
    0 0 25px rgba(160,100,255,.35),
    0 0 60px rgba(120,60,220,.15);
}

/* ── Bubble 2: biru sedang ── */
.vh-bubble-2 {
  width: 72px; height: 72px;
  top: 72px; right: 100px;
  background: radial-gradient(circle at 38% 32%,
    rgba(130,210,255,.9),
    rgba(50,140,220,.6) 50%,
    rgba(20,80,180,.25) 80%,
    transparent);
  box-shadow:
    inset -5px -5px 12px rgba(0,0,0,.15),
    inset 4px 4px 10px rgba(255,255,255,.2),
    0 0 20px rgba(80,180,255,.35),
    0 0 50px rgba(40,120,220,.12);
}

/* ── Bubble 3: pink kecil ── */
.vh-bubble-3 {
  width: 48px; height: 48px;
  top: 110px; right: 40px;
  background: radial-gradient(circle at 35% 30%,
    rgba(255,160,180,.9),
    rgba(220,80,120,.65) 50%,
    rgba(160,30,80,.25) 80%,
    transparent);
  box-shadow:
    inset -4px -4px 10px rgba(0,0,0,.15),
    inset 3px 3px 8px rgba(255,255,255,.2),
    0 0 16px rgba(255,100,140,.4),
    0 0 40px rgba(220,60,100,.12);
}

/* ── Exit states ── */
.vh-bubble-1.vh-exit { animation: vhBubbleExitUp   0.4s cubic-bezier(.22,1,.36,1) forwards !important; }
.vh-bubble-2.vh-exit { animation: vhBubbleExitLeft 0.4s cubic-bezier(.22,1,.36,1) forwards !important; animation-delay: .05s !important; }
.vh-bubble-3.vh-exit { animation: vhBubbleExitDown 0.4s cubic-bezier(.22,1,.36,1) forwards !important; animation-delay: .1s  !important; }