/* ===================================
   ANIMATION STYLES - Cronorise
   =================================== */

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

/* Slide In From Left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-left {
    animation: slideInLeft 0.8s ease-out forwards;
}

/* Slide In From Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
}

/* Slide In From Top */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-in-up {
    animation: slideInUp 0.8s ease-out forwards;
}

/* Slide In From Bottom */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-in-down {
    animation: slideInDown 0.8s ease-out forwards;
}

/* Scale Up */
@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale-up {
    animation: scaleUp 0.6s ease-out forwards;
}

/* Pulse Slow */
@keyframes pulseSlow {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

.animate-pulse-slow {
    animation: pulseSlow 4s ease-in-out infinite;
}

/* Bounce */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

/* Float */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Glow Pulse */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(6, 182, 212, 0.3),
                    0 0 40px rgba(6, 182, 212, 0.1);
    }
    50% {
        box-shadow: 0 0 30px rgba(6, 182, 212, 0.5),
                    0 0 60px rgba(6, 182, 212, 0.2);
    }
}

.animate-glow-pulse {
    animation: glowPulse 3s ease-in-out infinite;
}

/* Shimmer */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.animate-shimmer {
    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* Rotate */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-rotate-slow {
    animation: rotate 20s linear infinite;
}

.animate-rotate-medium {
    animation: rotate 10s linear infinite;
}

.animate-rotate-fast {
    animation: rotate 5s linear infinite;
}

/* Gradient Shift */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient-shift {
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite;
}

/* Text Color Shift */
@keyframes colorShift {
    0% {
        color: #06b6d4;
    }
    25% {
        color: #2563eb;
    }
    50% {
        color: #a855f7;
    }
    75% {
        color: #06b6d4;
    }
    100% {
        color: #06b6d4;
    }
}

.animate-color-shift {
    animation: colorShift 4s ease-in-out infinite;
}

/* Flip X */
@keyframes flipX {
    from {
        transform: perspective(400px) rotateX(0deg);
    }
    to {
        transform: perspective(400px) rotateX(360deg);
    }
}

.animate-flip-x {
    animation: flipX 0.6s ease-out;
}

/* Flip Y */
@keyframes flipY {
    from {
        transform: perspective(400px) rotateY(0deg);
    }
    to {
        transform: perspective(400px) rotateY(360deg);
    }
}

.animate-flip-y {
    animation: flipY 0.6s ease-out;
}

/* Bounce In */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.animate-bounce-in {
    animation: bounceIn 0.6s ease-out;
}

/* Elastic */
@keyframes elastic {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.animate-elastic {
    animation: elastic 0.6s ease-out;
}

/* Blink */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.animate-blink {
    animation: blink 1s ease-in-out infinite;
}

/* Gradient Background Animation */
@keyframes gradientBg {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient-bg {
    background-size: 400% 400%;
    animation: gradientBg 15s ease infinite;
}

/* Wave */
@keyframes wave {
    0%, 100% {
        clip-path: polygon(
            0% 45%,
            16% 44%,
            33% 50%,
            54% 60%,
            70% 61%,
            84% 52%,
            100% 45%,
            100% 100%,
            0% 100%
        );
    }
    50% {
        clip-path: polygon(
            0% 60%,
            15% 65%,
            34% 66%,
            51% 62%,
            67% 50%,
            84% 45%,
            100% 50%,
            100% 100%,
            0% 100%
        );
    }
}

.animate-wave {
    animation: wave 4s ease-in-out infinite;
}

/* Pulse Glow */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(6, 182, 212, 0);
    }
}

.animate-pulse-glow {
    animation: pulseGlow 2s infinite;
}

/* Swipe */
@keyframes swipeRight {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes swipeLeft {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.animate-swipe-right {
    animation: swipeRight 0.5s ease-out;
}

.animate-swipe-left {
    animation: swipeLeft 0.5s ease-out;
}

/* Wobble */
@keyframes wobble {
    0% {
        transform: translateX(0%);
    }
    15% {
        transform: translateX(-5px) rotate(-5deg);
    }
    30% {
        transform: translateX(5px) rotate(3deg);
    }
    45% {
        transform: translateX(-5px) rotate(-3deg);
    }
    60% {
        transform: translateX(3px) rotate(2deg);
    }
    75% {
        transform: translateX(-2px) rotate(-1deg);
    }
    100% {
        transform: translateX(0%);
    }
}

.animate-wobble {
    animation: wobble 0.8s ease-in-out;
}

/* Jello */
@keyframes jello {
    from {
        transform: perspective(400px) skewX(0deg) skewY(0deg);
    }
    30% {
        transform: perspective(400px) skewX(12.5deg) skewY(12.5deg);
    }
    40% {
        transform: perspective(400px) skewX(-12.5deg) skewY(-12.5deg);
    }
    50% {
        transform: perspective(400px) skewX(6.25deg) skewY(6.25deg);
    }
    65% {
        transform: perspective(400px) skewX(-6.25deg) skewY(-6.25deg);
    }
    75% {
        transform: perspective(400px) skewX(3.125deg) skewY(3.125deg);
    }
    to {
        transform: perspective(400px) skewX(0deg) skewY(0deg);
    }
}

.animate-jello {
    animation: jello 0.9s ease-in-out;
}

/* Delay Classes for Staggered Animation */
.animate-delay-100 {
    animation-delay: 0.1s;
}

.animate-delay-200 {
    animation-delay: 0.2s;
}

.animate-delay-300 {
    animation-delay: 0.3s;
}

.animate-delay-400 {
    animation-delay: 0.4s;
}

.animate-delay-500 {
    animation-delay: 0.5s;
}

/* Duration Classes */
.animate-duration-1 {
    animation-duration: 1s;
}

.animate-duration-2 {
    animation-duration: 2s;
}

.animate-duration-3 {
    animation-duration: 3s;
}

.animate-duration-4 {
    animation-duration: 4s;
}

.animate-duration-5 {
    animation-duration: 5s;
}

/* Hover Animation Triggers */
.hover\:animate-bounce-smooth:hover {
    animation: bounce 2s ease-in-out infinite;
}

.group:hover .group-hover\:animate-scale-up {
    animation: scaleUp 0.4s ease-out;
}

/* Intersection Observer based animations (will be handled by JS) */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
}

.fade-in-up.animate {
    animation: fadeIn 0.8s ease-out forwards;
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
}

.fade-in-left.animate {
    animation: slideInLeft 0.8s ease-out forwards;
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
}

.fade-in-right.animate {
    animation: slideInRight 0.8s ease-out forwards;
}

/* Media Query for reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .animate-fade-in {
        animation: fadeIn 0.6s ease-out forwards;
    }

    .animate-bounce-smooth {
        animation: bounce 1.5s ease-in-out infinite;
    }

    .animate-float {
        animation: float 2s ease-in-out infinite;
    }
}