/* ============================================
   GSAP ANIMATION STYLES
   ============================================ */

/* Initial states for GSAP animations */
.hero-title .title-line,
.hero-subtitle,
.hero-cta,
.scroll-indicator {
    opacity: 0;
}

.feature-card,
.menu-item,
.testimonial-slide,
.contact-item,
.product-card,
.gallery-item {
    opacity: 0;
    transform: translateY(30px);
}

.section-title,
.section-subtitle {
    opacity: 0;
    transform: translateY(20px);
}

.discover-text,
.funeral-text p,
.story-text {
    opacity: 0;
    transform: translateY(20px);
}

/* Animation classes */
.fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-up {
    animation: slideUp 0.8s ease forwards;
}

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

/* Parallax elements */
.parallax-element {
    will-change: transform;
}

/* Smooth reveal animations */
.reveal-text {
    overflow: hidden;
}

.reveal-text span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.6s ease;
}

.reveal-text.revealed span {
    transform: translateY(0);
}

/* Stagger animation for grid items */
.stagger-item {
    opacity: 0;
    transform: translateY(30px);
}

.stagger-item.animated {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}