/* Scroll Animation Classes */
.fade-in {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    -webkit-transform: translate3d(0, 20px, 0);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                        -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

.slide-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax Effect */
.parallax-element {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* Stagger Animation Delays */
.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;
}

/* Hero Image Parallax */
.hero-image-container {
    will-change: transform;
}

/* Smooth Appear for Card */
.content-card {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    -webkit-transform: translate3d(0, 40px, 0);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
                transform 1s cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
                        -webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-card.visible {
    opacity: 0.96;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* Button Hover Animations */
.cta-button {
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.cta-button:hover::before {
    width: 300px;
    height: 300px;
}

/* Carousel Transitions */
.carousel-track {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Fade In for Text Elements */
.hero-title-section,
.intro-text,
.narrative-text,
.product-description,
.engagement-text,
.slogan-section {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-title-section.visible,
.intro-text.visible,
.narrative-text.visible,
.product-description.visible,
.engagement-text.visible,
.slogan-section.visible {
    opacity: 1;
}

/* Illustration Placeholder Animations */
.illustration-placeholder {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.illustration-placeholder.visible {
    opacity: 1;
    transform: scale(1);
}

/* Carousel Image Placeholder Animation */
.carousel-image-placeholder {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.carousel-image-placeholder.visible {
    opacity: 1;
}

/* Carousel Video Animation */
.carousel-video {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.carousel-video.visible {
    opacity: 1;
}

/* Carousel Image Animation */
.carousel-image {
    opacity: 0;
    transition: opacity 0.3s ease-in;
    -webkit-transition: opacity 0.3s ease-in;
}

.carousel-image.visible {
    opacity: 1 !important;
}

/* Show first carousel image immediately */
.carousel-slide:first-child .carousel-image {
    opacity: 1 !important;
}

/* Fallback: if no JS, show all images */
.no-js .carousel-image {
    opacity: 1;
}

/* Social Proof Carousel Animation */
.social-proof-carousel-section {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    -webkit-transform: translate3d(0, 20px, 0);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        -webkit-transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.social-proof-carousel-section.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

.social-proof-heading {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

.social-proof-carousel-section.visible .social-proof-heading {
    opacity: 1;
}

/* Product Identifier Animation */
.product-identifier {
    opacity: 0;
    transform: translate3d(-20px, -20px, 0);
    -webkit-transform: translate3d(-20px, -20px, 0);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
    -webkit-transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
                        -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.product-identifier.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* CTA Container Animation */
.cta-container {
    opacity: 0;
    transform: translate3d(0, 15px, 0);
    -webkit-transform: translate3d(0, 15px, 0);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                        -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-container.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

.cta-price-text {
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.cta-container.visible .cta-price-text {
    opacity: 1;
}

/* Features List Animation */
.features-list {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    -webkit-transform: translate3d(0, 20px, 0);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                        -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.features-list.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

.features-list-items li {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    -webkit-transform: translate3d(0, 10px, 0);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                        -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.features-list.visible .features-list-items li {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

.features-list.visible .features-list-items li:nth-child(1) {
    transition-delay: 0.1s;
}

.features-list.visible .features-list-items li:nth-child(2) {
    transition-delay: 0.2s;
}

.features-list.visible .features-list-items li:nth-child(3) {
    transition-delay: 0.3s;
}

.features-list.visible .features-list-items li:nth-child(4) {
    transition-delay: 0.4s;
}

.features-list.visible .features-list-items li:nth-child(5) {
    transition-delay: 0.5s;
}

/* Social Proof Intro Animation */
.social-proof-intro {
    opacity: 0;
    transform: translate3d(0, 15px, 0);
    -webkit-transform: translate3d(0, 15px, 0);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        -webkit-transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.social-proof-carousel-section.visible .social-proof-intro {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* Social Proof Dots Animation */
.social-proof-dots {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    -webkit-transform: translate3d(0, 10px, 0);
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s,
                transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
    -webkit-transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s,
                        -webkit-transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.social-proof-carousel-section.visible .social-proof-dots {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* Standalone Engagement Paragraph Animation */
.engagement-paragraph:not(.engagement-text .engagement-paragraph) {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    -webkit-transform: translate3d(0, 20px, 0);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                        -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.engagement-paragraph:not(.engagement-text .engagement-paragraph).visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* Hero Section Animation */
.hero-section {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-section.visible {
    opacity: 1;
}