/* ============================================
   VITACAVA - Animations
   Keyframes and GSAP-ready states
   ============================================ */

/* ---- Initial States for GSAP ---- */
[data-animate] {
    opacity: 0;
}

[data-animate="fade-up"] {
    transform: translateY(40px);
}

[data-animate="fade-in"] {
    opacity: 0;
}

[data-animate="slide-left"] {
    transform: translateX(-60px);
    opacity: 0;
}

[data-animate="slide-right"] {
    transform: translateX(60px);
    opacity: 0;
}

[data-animate="scale-in"] {
    transform: scale(0.9);
    opacity: 0;
}

/* Hero text is visible by default (animated on load) */
.hero-title,
.hero-label,
.hero-subtitle,
.hero-ctas,
.hero-scroll {
    opacity: 1;
    transform: none;
}

/* ---- CSS Keyframe Animations (fallback/enhancement) ---- */

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide-left {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-right {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

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

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(201, 169, 110, 0.1); }
    50% { box-shadow: 0 0 40px rgba(201, 169, 110, 0.2); }
}

/* ---- Animated Elements (no JS fallback) ---- */
.no-js [data-animate] {
    opacity: 1;
    transform: none;
}