:root {
    --anim-duration: 1s;
    --anim-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes bounce-zoom-smooth {
    0% { transform: scale(1); }
    25% { transform: scale(1.08); }
    50% { transform: scale(0.96); }
    75% { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.bounce {
    transform: scale(1);
    will-change: opacity, transform;
}
.bounce.showanimate {
    animation-name: bounce-zoom-smooth;
    animation-duration: 0.75s;
    animation-timing-function: var(--anim-ease);
    animation-fill-mode: both;
}

@keyframes fade-up-smooth {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    will-change: opacity, transform;
}
.fade-up.showanimate {
    animation-name: fade-up-smooth;
    animation-duration: 0.8s;
    animation-timing-function: var(--anim-ease);
    animation-fill-mode: both;
}

@keyframes zoom-in {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}
.zoom {
    opacity: 0;
    transform: scale(0.8);
    will-change: opacity, transform;
}
.zoom.showanimate {
    animation-name: zoom-in;
    animation-duration: 0.7s;
    animation-timing-function: var(--anim-ease);
    animation-fill-mode: both;
}

.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }
.anim-delay-5 { animation-delay: 0.5s; }
.anim-delay-6 { animation-delay: 0.6s; }
.anim-delay-7 { animation-delay: 0.7s; }
.anim-delay-8 { animation-delay: 0.8s; }
.anim-delay-9 { animation-delay: 0.9s; }
.anim-delay-10 { animation-delay: 1s; }
.anim-delay-11 { animation-delay: 1.1s; }
.anim-delay-12 { animation-delay: 1.2s; }
.anim-delay-13 { animation-delay: 1.3s; }
.anim-delay-14 { animation-delay: 1.4s; }
.anim-delay-15 { animation-delay: 1.5s; }
.anim-delay-16 { animation-delay: 1.6s; }
.anim-delay-17 { animation-delay: 1.7s; }
.anim-delay-18 { animation-delay: 1.8s; }
.anim-delay-19 { animation-delay: 1.9s; }
.anim-delay-20 { animation-delay: 2s; }
.anim-delay-21 { animation-delay: 2.1s; }
.anim-delay-22 { animation-delay: 2.2s; }
.anim-delay-23 { animation-delay: 2.3s; }
.anim-delay-24 { animation-delay: 2.4s; }
.anim-delay-25 { animation-delay: 2.5s; }
.anim-delay-26 { animation-delay: 2.6s; }
.anim-delay-27 { animation-delay: 2.7s; }
.anim-delay-28 { animation-delay: 2.8s; }
.anim-delay-29 { animation-delay: 2.9s; }
.anim-delay-30 { animation-delay: 3s; }
.anim-delay-31 { animation-delay: 3.1s; }
.anim-delay-32 { animation-delay: 3.2s; }
.anim-delay-33 { animation-delay: 3.3s; }
.anim-delay-34 { animation-delay: 3.4s; }
.anim-delay-35 { animation-delay: 3.5s; }
.anim-delay-36 { animation-delay: 3.6s; }
.anim-delay-37 { animation-delay: 3.7s; }
.anim-delay-38 { animation-delay: 3.8s; }
.anim-delay-39 { animation-delay: 3.9s; }
.anim-delay-40 { animation-delay: 4s; }
.anim-delay-41 { animation-delay: 4.1s; }
.anim-delay-42 { animation-delay: 4.2s; }
.anim-delay-43 { animation-delay: 4.3s; }
.anim-delay-44 { animation-delay: 4.4s; }
.anim-delay-45 { animation-delay: 4.5s; }
.anim-delay-46 { animation-delay: 4.6s; }
.anim-delay-47 { animation-delay: 4.7s; }
.anim-delay-48 { animation-delay: 4.8s; }
.anim-delay-49 { animation-delay: 4.9s; }
.anim-delay-50 { animation-delay: 5s; }

.anim-slow { animation-duration: 1.5s!important; }
.anim-fast { animation-duration: 0.4s!important; }

.animate-none {
    animation: none;
    transition: none;
}
@media (max-width: 991.98px) {
    .animate-md-none {
        animation: none;
        transition: none;
    }
}
@media (max-width: 767.98px) {
    .animate-sm-none {
        animation: none;
        transition: none;
    }
}
.bounce,
.bounce-hover,
.fade-up,
.fade-up-hover,
.zoom,
.zoom-hover {
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.hover-light {
    position: relative;
    overflow: hidden;
    display: inline-block;
    transition: transform 0.3s ease;
}
.hover-light::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -150%;
    width: 200%;
    height: 300%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.9) 45%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.9) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(0deg);
    transition: all 0.6s ease;
    opacity: 0;
    pointer-events: none;
}
.hover-light:hover::before {
    top: 100%;
    left: 100%;
    opacity: 1;
}