/**
 * Animations for Floating Action Buttons
 */

/* Bounce Animation */
@keyframes fab-bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-20px);
    }

    60% {
        transform: translateY(-10px);
    }
}

.fab-animate-bounce {
    animation: fab-bounce 2s ease-in-out;
}

.fab-animate-bounce.fab-animate-loop {
    animation-iteration-count: infinite;
}

/* Pulse Animation */
@keyframes fab-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}

.fab-animate-pulse {
    animation: fab-pulse 2s ease-in-out;
}

.fab-animate-pulse.fab-animate-loop {
    animation-iteration-count: infinite;
}

/* Shake Animation */
@keyframes fab-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-8px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(8px);
    }
}

.fab-animate-shake {
    animation: fab-shake 1s ease-in-out;
}

.fab-animate-shake.fab-animate-loop {
    animation-iteration-count: infinite;
}

/* Fade In Animation */
@keyframes fab-fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fab-animate-fadeIn {
    animation: fab-fadeIn 0.8s ease-out;
}

/* Slide In Animation */
@keyframes fab-slideIn-bottom-right {
    from {
        transform: translate(100px, 100px);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fab-slideIn-bottom-left {
    from {
        transform: translate(-100px, 100px);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fab-slideIn-top-right {
    from {
        transform: translate(100px, -100px);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fab-slideIn-top-left {
    from {
        transform: translate(-100px, -100px);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

.fab-animate-slideIn.fab-position-bottom-right {
    animation: fab-slideIn-bottom-right 0.6s ease-out;
}

.fab-animate-slideIn.fab-position-bottom-left {
    animation: fab-slideIn-bottom-left 0.6s ease-out;
}

.fab-animate-slideIn.fab-position-top-right {
    animation: fab-slideIn-top-right 0.6s ease-out;
}

.fab-animate-slideIn.fab-position-top-left {
    animation: fab-slideIn-top-left 0.6s ease-out;
}

/* Hover Animations Enhancement */
.fab-hover-grow {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fab-hover-shrink {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fab-hover-rotate {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ripple Effect on Click */
.fab-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.fab-button:active::before {
    width: 100%;
    height: 100%;
}

/* Accessibility - Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    .fab-animate-bounce,
    .fab-animate-pulse,
    .fab-animate-shake,
    .fab-animate-fadeIn,
    .fab-animate-slideIn {
        animation: none !important;
    }

    .fab-button::before {
        transition: none;
    }
}