/* Bubble Explosion Animation Effects */

/* Base transition for smooth initial movement */
.bubble img {
    position: absolute;
    transition: all 0.3s ease-out;
    transform-origin: center center;
}

/* Explosion keyframes for bubbles bursting outward */
@keyframes bubbleExplode1 {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }
    25% {
        transform: translate(-150px, -150px) scale(1.2) rotate(-45deg);
        opacity: 0.8;
        filter: blur(1px);
    }
    50% {
        transform: translate(-400px, -400px) scale(1.5) rotate(-90deg);
        opacity: 0.5;
        filter: blur(2px);
    }
    75% {
        transform: translate(-600px, -600px) scale(2) rotate(-135deg);
        opacity: 0.2;
        filter: blur(4px);
    }
    100% {
        transform: translate(-800px, -800px) scale(3) rotate(-180deg);
        opacity: 0;
        filter: blur(6px);
    }
}

@keyframes bubbleExplode2 {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }
    25% {
        transform: translate(150px, -150px) scale(1.2) rotate(45deg);
        opacity: 0.8;
        filter: blur(1px);
    }
    50% {
        transform: translate(400px, -400px) scale(1.5) rotate(90deg);
        opacity: 0.5;
        filter: blur(2px);
    }
    75% {
        transform: translate(600px, -600px) scale(2) rotate(135deg);
        opacity: 0.2;
        filter: blur(4px);
    }
    100% {
        transform: translate(800px, -800px) scale(3) rotate(180deg);
        opacity: 0;
        filter: blur(6px);
    }
}

@keyframes bubbleExplode3 {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }
    25% {
        transform: translate(-150px, 150px) scale(1.2) rotate(-135deg);
        opacity: 0.8;
        filter: blur(1px);
    }
    50% {
        transform: translate(-400px, 400px) scale(1.5) rotate(-270deg);
        opacity: 0.5;
        filter: blur(2px);
    }
    75% {
        transform: translate(-600px, 600px) scale(2) rotate(-405deg);
        opacity: 0.2;
        filter: blur(4px);
    }
    100% {
        transform: translate(-800px, 800px) scale(3) rotate(-540deg);
        opacity: 0;
        filter: blur(6px);
    }
}

@keyframes bubbleExplode4 {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }
    25% {
        transform: translate(150px, 150px) scale(1.2) rotate(135deg);
        opacity: 0.8;
        filter: blur(1px);
    }
    50% {
        transform: translate(400px, 400px) scale(1.5) rotate(270deg);
        opacity: 0.5;
        filter: blur(2px);
    }
    75% {
        transform: translate(600px, 600px) scale(2) rotate(405deg);
        opacity: 0.2;
        filter: blur(4px);
    }
    100% {
        transform: translate(800px, 800px) scale(3) rotate(540deg);
        opacity: 0;
        filter: blur(6px);
    }
}

/* Explosion classes to trigger animations */
.bubble1.explode {
    animation: bubbleExplode1 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.bubble2.explode {
    animation: bubbleExplode2 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.bubble3.explode {
    animation: bubbleExplode3 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.bubble4.explode {
    animation: bubbleExplode4 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Reset animation for return effect */
@keyframes bubbleReturn {
    0% {
        transform: translate(0, 0) scale(0.2) rotate(720deg);
        opacity: 0;
        filter: blur(4px);
    }
    50% {
        transform: translate(0, 0) scale(0.8) rotate(360deg);
        opacity: 0.5;
        filter: blur(2px);
    }
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }
}

.bubble1.return,
.bubble2.return,
.bubble3.return,
.bubble4.return {
    animation: bubbleReturn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Click button pulse effect */
@keyframes clickPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.about__click.active {
    animation: clickPulse 0.3s ease-in-out;
}

/* Particle effects for extra boom */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #5868FC 0%, #ffffff 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
}

@keyframes particleExplode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) scale(0);
        opacity: 0;
    }
}

.particle.explode {
    animation: particleExplode 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}