/**
 * Scroll-triggered Animation Styles
 * For Why TMind AI, Carousel, and Features sections
 */

/* ===== Base Animation Classes ===== */

/* Elements that will animate on scroll start hidden */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* When animated class is added, elements become visible */
.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Fade-in only (no slide-up) for carousel logos */
.fade-in {
    transform: none !important;
    transition: opacity 0.6s ease-out;
}

.fade-in.animated {
    opacity: 1;
}

/* ===== Why TMind AI Section Animations ===== */

/* Bullets container - slides up and fades in */
.why-tmind-section .bullets-container.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.why-tmind-section .bullets-container.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Feature items - slide up and fade in with staggered delay */
.why-tmind-section .feature-item.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.why-tmind-section .feature-item.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Carousel Section Animations ===== */

/* University logos fade in sequentially */
.carousel-section .university-logo.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.carousel-section .university-logo.animated {
    opacity: 1;
}

/* ===== Features Section Animations ===== */

/* Feature cards start at 0 opacity */
.features-section .feature-card.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

/* Feature cards fade to 100% opacity */
.features-section .feature-card.animated {
    opacity: 1;
}

/* Optional: Add a subtle scale effect to cards */
.features-section .feature-card.animate-on-scroll {
    transform: scale(0.95);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.features-section .feature-card.animated {
    opacity: 1;
    transform: scale(1);
}

/* ===== Smooth Scrolling Enhancement ===== */
html {
    scroll-behavior: smooth;
}

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

/* Base state for hero animated elements */
.hero-animate {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* First line: "Practice Therapy With" - Fade in from top */
.hero-line-1 {
    transform: translateY(-20px);
}

.hero-line-1.animated {
    opacity: 1 !important;
    transform: translateY(0);
}

/* "REALISTIC AI" - Slide in from left with scale */
.hero-realistic-ai {
    transform: translateX(-30px) scale(0.95);
}

.hero-realistic-ai.animated {
    opacity: 1 !important;
    transform: translateX(0) scale(1);
}

/* Star icon - Rotate and scale in */
.hero-star {
    transform: scale(0) rotate(-180deg);
}

.hero-star.animated {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy effect */
}

/* "Clients" - Slide in from right */
.hero-clients {
    transform: translateX(30px);
}

.hero-clients.animated {
    opacity: 1 !important;
    transform: translateX(0);
}

/* Signup button - Fade and slide up */
.hero-signup {
    transform: translateY(30px) scale(0.95);
}

.hero-signup.animated {
    opacity: 1 !important;
    transform: translateY(0) scale(1);
}

/* Chat section - Fade and slide up */
.hero-chat {
    transform: translateY(40px);
}

.hero-chat.animated {
    opacity: 1 !important;
    transform: translateY(0);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Carousel Auto-Scroll Enhancement ===== */

/* White fade gradient removed - logos scroll cleanly without fade effect */

/* ===== Instant Feedback Section Animations ===== */

/* Radar chart - scale up and rotate slightly */
.instant-feedback-section .radar-chart-wrapper.animate-on-scroll {
    opacity: 0;
    transform: scale(0.8) rotate(-5deg);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.instant-feedback-section .radar-chart-wrapper.animated {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Description - slide in from right */
.instant-feedback-section .feedback-description.animate-on-scroll {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.instant-feedback-section .feedback-description.animated {
    opacity: 1;
    transform: translateX(0);
}

/* ===== Join Course Section Animations ===== */

/* Left course feature - slide in from left */
.join-course-section .course-feature:first-child.animate-on-scroll {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.join-course-section .course-feature:first-child.animated {
    opacity: 1;
    transform: translateX(0);
}

/* Right course feature - slide in from right */
.join-course-section .course-feature:last-child.animate-on-scroll {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.join-course-section .course-feature:last-child.animated {
    opacity: 1;
    transform: translateX(0);
}

/* Course illustrations - scale up */
.join-course-section .course-feature-illustration.animate-on-scroll {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.join-course-section .course-feature-illustration.animated {
    opacity: 1;
    transform: scale(1);
}

/* ===== Success Stories Section Animations ===== */

/* Section title */
.success-stories-section .success-stories-title.animate-on-scroll {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.success-stories-section .success-stories-title.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Salisbury content - slide from left */
.success-stories-section .salisbury-content.animate-on-scroll {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.success-stories-section .salisbury-content.animated {
    opacity: 1;
    transform: translateX(0);
}

/* Salisbury video - scale and lift */
.success-stories-section .salisbury-video.animate-on-scroll {
    opacity: 0;
    transform: scale(0.9) translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.success-stories-section .salisbury-video.animated {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* York video - scale and lift */
.success-stories-section .york-video.animate-on-scroll {
    opacity: 0;
    transform: scale(0.9) translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.success-stories-section .york-video.animated {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* York content - slide from right */
.success-stories-section .york-content.animate-on-scroll {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.success-stories-section .york-content.animated {
    opacity: 1;
    transform: translateX(0);
}

/* ===== How Tmind AI Works Section Animations ===== */

/* Title - fade and slide down */
.how-works-section .how-works-title.animate-on-scroll {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.how-works-section .how-works-title.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Switch container - scale bounce */
.how-works-section .switch-container.animate-on-scroll {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.how-works-section .switch-container.animated {
    opacity: 1;
    transform: scale(1);
}

/* Workflow diagram - fade with zoom */
.how-works-section .workflow-diagram.animate-on-scroll {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.how-works-section .workflow-diagram.animated {
    opacity: 1;
    transform: scale(1);
}

/* ===== Testimony Section Animations ===== */

/* Title */
.testimony-section .testimony-title.animate-on-scroll {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.testimony-section .testimony-title.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Quotation icon - rotate and scale */
.testimony-section .testimony-icon.animate-on-scroll {
    opacity: 0;
    transform: scale(0) rotate(-90deg);
    transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.testimony-section .testimony-icon.animated {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Quote text - fade up */
.testimony-section .testimony-quote.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.testimony-section .testimony-quote.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Reference - slide up with delay */
.testimony-section .testimony-reference.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.testimony-section .testimony-reference.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Mission Section Animations ===== */

/* Mission heading - fade and slide */
.mission-section .mission-heading.animate-on-scroll {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.mission-section .mission-heading.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Mission title - fade and slide with delay */
.mission-section .mission-title.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.mission-section .mission-title.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Signup button - bounce effect */
.mission-section .mission-signup-container.animate-on-scroll {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mission-section .mission-signup-container.animated {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ===== Reduced Motion Preference ===== */
/* Respect user's motion preferences for accessibility */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .fade-in,
    .hero-animate {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}