﻿
@keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Enhanced Modern Fade-in Animation */
@keyframes modernFadeIn {
    0% { 
        opacity: 0; 
        transform: translateY(20px);
    }
    100% { 
        opacity: 1; 
        transform: translateY(0);
    }
}

@-webkit-keyframes modernFadeIn {
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(20px);
    }
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0);
    }
}

/* Smooth slide animation from left */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes slideInFromLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

/* Pulse animation for attention */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.05);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

/* Bounce animation for elements */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0,-4px,0);
    }
}

@-webkit-keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
    }
    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0,-4px,0);
    }
}

/* Shimmer animation for loading states */
@keyframes shimmer {
    0% {
        background-position: -468px 0;
    }
    100% {
        background-position: 468px 0;
    }
}

@-webkit-keyframes shimmer {
    0% {
        background-position: -468px 0;
    }
    100% {
        background-position: 468px 0;
    }
}

/* Float animation for subtle movement */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

@-webkit-keyframes float {
    0% {
        -webkit-transform: translateY(0px);
    }
    50% {
        -webkit-transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(0px);
    }
}