/* ==========================================================================
   Keyframe Animations
   ========================================================================== */

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

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

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideUp {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

@keyframes floatSlow {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(10deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

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

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes wave {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    50% { border-color: transparent; }
}

/* ==========================================================================
   Animation Utility Classes
   ========================================================================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }
.animate-delay-4 { transition-delay: 0.4s; }
.animate-delay-5 { transition-delay: 0.5s; }

/* ==========================================================================
   Floating Elements
   ========================================================================== */
.cloud {
    position: absolute;
    opacity: 0.15;
    animation: float 6s ease-in-out infinite;
}

.cloud-1 {
    top: 10%;
    left: 5%;
    width: 100px;
    animation-delay: 0s;
}

.cloud-2 {
    top: 20%;
    right: 10%;
    width: 150px;
    animation-delay: 2s;
}

.cloud-3 {
    bottom: 20%;
    left: 15%;
    width: 120px;
    animation-delay: 4s;
}

.star {
    position: absolute;
    color: var(--primary-peach);
    animation: twinkle 3s infinite;
    font-size: 1.2rem;
}

.star-1 { top: 15%; left: 20%; animation-delay: 0s; }
.star-2 { top: 30%; right: 25%; animation-delay: 0.5s; }
.star-3 { bottom: 25%; left: 10%; animation-delay: 1s; }
.star-4 { top: 10%; right: 15%; animation-delay: 1.5s; }
.star-5 { bottom: 15%; right: 20%; animation-delay: 2s; }

/* ==========================================================================
   Specific Animations
   ========================================================================== */
.whatsapp-btn {
    animation: pulse 2s infinite;
}

.hero-title {
    animation: fadeInDown 1s ease forwards;
}

.hero-subtitle {
    opacity: 0;
    animation: fadeInUp 1s ease 0.3s forwards;
}

.hero-buttons {
    opacity: 0;
    animation: fadeInUp 1s ease 0.6s forwards;
}

.page-banner .shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    background: white;
}

.shape-1 {
    width: 200px;
    height: 200px;
    top: -50px;
    right: -50px;
    animation: floatSlow 8s infinite;
}

.shape-2 {
    width: 150px;
    height: 150px;
    bottom: -30px;
    left: 10%;
    animation: floatSlow 10s infinite 2s;
}

.shape-3 {
    width: 100px;
    height: 100px;
    top: 30%;
    left: -30px;
    animation: floatSlow 7s infinite 4s;
}