/* ========================================
   Hero Section Animations
   ======================================== */

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

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

/* Fade In Down Animation */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-down {
    animation: fadeInDown 0.8s ease-out forwards;
    opacity: 0;
}

/* Fade In Left Animation */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-left {
    animation: fadeInLeft 0.8s ease-out forwards;
    opacity: 0;
}

/* Fade In Right Animation */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
    opacity: 0;
}

/* Floating Bag Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(-1deg);
    }
    50% {
        transform: translateY(-30px) rotate(1deg);
    }
}

.floating-hero-image {
    animation: float 4s ease-in-out infinite;
}

/* Floating Shape Animation */
.floating-shape {
    animation: float 6s ease-in-out infinite;
}

/* Floating Card Animation */
@keyframes floatCard {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

.floating-card-hero {
    animation: floatCard 3.5s ease-in-out infinite;
}

/* Scroll Indicator Animation */
@keyframes scrollBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.scroll-indicator {
    animation: scrollBounce 1.5s ease-in-out infinite;
}

.scroll-dot {
    width: 4px;
    height: 8px;
    background: linear-gradient(135deg, #C04D1B, #ff6600);
    border-radius: 50%;
    margin: 0 auto;
}

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

.text-gradient {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

/* Hero Content Animation */
.hero-content {
    perspective: 1000px;
}

.hero-content > div {
    will-change: transform;
}

/* Button Hover Effects */
a[href*="#"]:hover,
button:hover {
    box-shadow: 0 20px 40px rgba(192, 77, 27, 0.3);
}

/* Responsive Animations */
@media (max-width: 768px) {
    .floating-card-hero {
        animation: floatCard 2.5s ease-in-out infinite;
    }

    .fade-in-up,
    .fade-in-down {
        animation-duration: 0.6s;
    }
}

/* Performance Optimization */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* GPU Acceleration */
.fade-in-up,
.fade-in-down,
.fade-in-left,
.fade-in-right,
.floating-hero-image,
.floating-shape,
.floating-card-hero {
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

@keyframes blob-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}
.animate-blob {
    animation: blob-float 7s infinite alternate ease-in-out;
}