@keyframes fadeInTopToBottom {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-top-to-bottom {
  animation: fadeInTopToBottom 1.2s ease-out forwards;
}

@keyframes fadeInLeftToRight {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.animate-fade-in-left-to-right {
  animation: fadeInLeftToRight 1.2s ease-out forwards;
}

@keyframes fadeInRightToLeft {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.animate-fade-in-right-to-left {
  animation: fadeInRightToLeft 3.2s ease-out forwards;
}



@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(100px) scale(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-30px) rotate(120deg);
    }
    66% {
        transform: translateY(15px) rotate(240deg);
    }
}

/* === GENERAL ANIMATION UTILITIES === */
.animate-slide-up {
    animation: slideInUp 2.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-fade-up {
    animation: fadeInUp 2s ease-out both;
}

.animate-fade-up-delay {
    animation: fadeInUp 3s ease-in 0.3s both;
}

.animate-float-in {
    animation: floatIn 2s cubic-bezier(0.16, 1, 0.3, 1) both, float 6s ease-in-out infinite 2.5s;
}

.animate-gradient-text {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
}

/* === TRANSITION STATE FOR SCROLL === */
.scroll-animate {
    opacity: 0;
    transform: translateY(60px);
    filter: blur(10px);
    transition: all 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-animate.animate {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
}

/* === CARD & BUTTON === */
.card-animated {
    transform: translateY(80px) scale(0.7) rotateX(15deg);
    opacity: 0;
    transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate .card-animated {
    transform: translateY(0) scale(1) rotateX(0deg);
    opacity: 1;
}

.btn-animated {
    transform: translateY(30px) scale(0.8);
    opacity: 0;
    transition: all 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate .btn-animated {
    transform: translateY(0) scale(1);
    opacity: 1;
}