/* ============================================================
   BUBBLE ANIMATION STYLES — Bubble Shop
   ------------------------------------------------------------
   Ciclo de vida de cada burbuja:
   1. Nace fuera del borde inferior del hero (0%)
   2. Se eleva con vaivén horizontal (6% - 70%)
   3. Revienta en un punto ALEATORIO de la mitad superior (55%-95%)
   4. Estalla: anillo expansivo + 7 gotas que rebotan y caen
   Solo se animan transform/opacity (GPU) + gradientes en el
   cuerpo de la burbuja (se congela en el pop, sin repaint final).
   ============================================================ */

/* ---------- Contenedor ---------- */
.hero-burbujas-fondo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Pausa global (fuera de viewport / pestaña oculta) */
.hero-burbujas-fondo.is-paused .bubble-flotante-premium,
.hero-burbujas-fondo.is-paused .bubble-flotante-premium * {
    animation-play-state: paused;
}

/* ---------- Burbuja (contenedor de transformación) ----------
   La subida se anima con Web Animations API desde el JS (valores en px),
   no con var() dentro de @keyframes. */
.bubble-flotante-premium {
    --size: 80px;
    --left: 50%;
    --dur: 6s;
    --delay: 0s;
    --color: rgba(6, 182, 212, 0.5);
    --pop-delay: 4.2s;

    position: absolute;
    left: var(--left);
    bottom: 0;
    width: var(--size);
    height: var(--size);
    margin-left: calc(var(--size) / -2);

    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

/* ---------- Cuerpo de vidrio (la esfera) ---------- */
.bubble-body {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background:
        radial-gradient(28% 14% at 50% 6%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(34% 26% at 28% 30%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(circle at 50% 55%, var(--color) 0%, rgba(255, 255, 255, 0.06) 100%);
    box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, 0.65),
        inset 0 -3px 8px rgba(2, 32, 60, 0.18),
        inset 0 0 18px rgba(255, 255, 255, 0.22),
        0 6px 18px rgba(2, 32, 60, 0.12);
    will-change: transform, opacity;
    animation: bubbleBodyLife var(--dur) linear var(--delay) forwards;
}

/* Brillo especular superior-izquierdo */
.bubble-body::after {
    content: "";
    position: absolute;
    top: 16%;
    left: 21%;
    width: 26%;
    height: 20%;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 72%);
    filter: blur(1px);
    transform: rotate(-24deg);
}

/* ---------- Anillo del estallido ---------- */
.bubble-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    opacity: 0;
    transform: scale(0.6);
    animation: bubbleRingPop 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) var(--pop-delay) forwards;
}

/* ---------- Gotas del estallido ---------- */
.bubble-drop {
    --dx: 0px;
    --dy: 0px;

    position: absolute;
    top: 50%;
    left: 50%;
    width: max(5px, calc(var(--size) * 0.11));
    height: max(5px, calc(var(--size) * 0.11));
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.95), var(--color));
    opacity: 0;
    will-change: transform, opacity;
    animation: bubbleDropBurst 1.05s cubic-bezier(0.25, 0.6, 0.4, 1) var(--drop-delay, var(--pop-delay)) forwards;
}

/* 7 direcciones de estallido (dx/dy en px) */
.bubble-drop:nth-child(1) { --dx: -36px; --dy: -30px; --drop-delay: calc(var(--pop-delay) + 0s); }
.bubble-drop:nth-child(2) { --dx: 36px;  --dy: -30px; --drop-delay: calc(var(--pop-delay) + 0.04s); }
.bubble-drop:nth-child(3) { --dx: -46px; --dy: 2px;   --drop-delay: calc(var(--pop-delay) + 0.08s); }
.bubble-drop:nth-child(4) { --dx: 46px;  --dy: 2px;   --drop-delay: calc(var(--pop-delay) + 0.12s); }
.bubble-drop:nth-child(5) { --dx: -26px; --dy: 34px;  --drop-delay: calc(var(--pop-delay) + 0.16s); }
.bubble-drop:nth-child(6) { --dx: 26px;  --dy: 34px;  --drop-delay: calc(var(--pop-delay) + 0.2s); }
.bubble-drop:nth-child(7) { --dx: 0px;   --dy: -44px; --drop-delay: calc(var(--pop-delay) + 0.24s); }

/* ============================================================
   KEYFRAMES
   ============================================================ */

/* 1) Subida → animada por JS con Web Animations API (ver
      bubble-animation-system.js: attachRiseAnimation) */

/* 2) Cuerpo: nace, brilla, se infla y REVIENTA a las 70% del ciclo */
@keyframes bubbleBodyLife {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    5% {
        opacity: 1;
        transform: scale(1);
        animation-timing-function: ease-in-out;
    }
    25% {
        transform: scale(1.03);
    }
    45% {
        transform: scale(0.98);
    }
    64% {
        transform: scale(1.04);
    }
    70% {
        /* inicio del estallido: se infla */
        opacity: 1;
        transform: scale(1.18);
        animation-timing-function: ease-out;
    }
    74% {
        opacity: 0.55;
        transform: scale(1.5);
    }
    77% {
        /* desapareció: el contenedor queda transparente para las gotas */
        opacity: 0;
        transform: scale(1.65);
    }
    100% {
        opacity: 0;
        transform: scale(1.65);
    }
}

/* 3) Anillo expansivo en el punto de pop */
@keyframes bubbleRingPop {
    0% {
        opacity: 0.9;
        transform: scale(0.55);
    }
    100% {
        opacity: 0;
        transform: scale(2.1);
    }
}

/* 4) Gotas: salen en zigzag y caen por gravedad */
@keyframes bubbleDropBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }
    14% {
        opacity: 1;
        transform: translate(calc(-50% + var(--dx) * 0.55), calc(-50% + var(--dy) * 0.55)) scale(1);
    }
    55% {
        opacity: 0.95;
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 18px)) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx) * 1.1), calc(-50% + var(--dy) + 64px)) scale(0.35);
    }
}

/* ============================================================
   RESPONSIVE — 375 / 768 / 1024 / 1440
   ============================================================ */

@media (max-width: 1440px) {
    .bubble-drop {
        width: max(5px, calc(var(--size) * 0.12));
        height: max(5px, calc(var(--size) * 0.12));
    }
}

@media (max-width: 1024px) {
    .bubble-flotante-premium {
        --dur: 7s;
    }
}

@media (max-width: 768px) {
    .bubble-body {
        border-width: 1px;
        box-shadow:
            inset 0 2px 4px rgba(255, 255, 255, 0.6),
            inset 0 -2px 6px rgba(2, 32, 60, 0.16),
            0 4px 12px rgba(2, 32, 60, 0.1);
        filter: blur(0);
    }

    .bubble-drop:nth-child(1) { --dx: -24px; --dy: -20px; }
    .bubble-drop:nth-child(2) { --dx: 24px;  --dy: -20px; }
    .bubble-drop:nth-child(3) { --dx: -32px; --dy: 2px; }
    .bubble-drop:nth-child(4) { --dx: 32px;  --dy: 2px; }
    .bubble-drop:nth-child(5) { --dx: -18px; --dy: 24px; }
    .bubble-drop:nth-child(6) { --dx: 18px;  --dy: 24px; }
    .bubble-drop:nth-child(7) { --dx: 0px;   --dy: -30px; }
}

@media (max-width: 375px) {
    .bubble-flotante-premium {
        --dur: 8s;
    }

    .bubble-ring {
        border-width: 1.5px;
    }
}

/* ============================================================
   ACCESIBILIDAD — sin animación si el usuario lo pide
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hero-burbujas-fondo {
        display: none;
    }

    .bubble-flotante-premium,
    .bubble-body,
    .bubble-ring,
    .bubble-drop {
        animation: none !important;
    }
}