/**
 * 株洲市图书馆在线图书推荐系统
 * 自定义动画样式
 */

/* 淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate__fadeIn {
    animation: fadeIn 0.5s ease-in;
}

/* 淡入向下 */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate__fadeInDown {
    animation: fadeInDown 0.5s ease-out;
}

/* 淡入向上 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate__fadeInUp {
    animation: fadeInUp 0.5s ease-out;
}

/* 淡入向左 */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate__fadeInLeft {
    animation: fadeInLeft 0.5s ease-out;
}

/* 淡入向右 */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate__fadeInRight {
    animation: fadeInRight 0.5s ease-out;
}

/* 淡出向下 */
@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

.animate__fadeOutDown {
    animation: fadeOutDown 0.5s ease-in;
}

/* 心跳动画 */
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.2);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.1);
    }

    70% {
        transform: scale(1);
    }
}

.animate__heartBeat {
    animation: heartBeat 1s;
}

/* 脉搏动画 */
@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.animate__pulse {
    animation: pulse 1s infinite;
}

/* 摇晃动画 */
@keyframes shakeX {

    from,
    to {
        transform: translateX(0);
    }

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

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

.animate__shakeX {
    animation: shakeX 0.8s;
}

/* 弹跳动画 */
@keyframes bounce {

    from,
    20%,
    53%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        transform: translate3d(0, -4px, 0);
    }
}

.animate__bounce {
    animation: bounce 1s;
}

/* 渐入动画类 */
.fade-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 导航栏滚动效果 */
.navbar-scrolled {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    background-color: rgba(13, 110, 253, 0.97) !important;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

/* 按钮点击波纹效果 */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
}

.btn:focus:not(:active)::after {
    animation: ripple 0.5s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

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