/* ============================================
   Ayushya Mandalam — Homepage Animations
   Gentle & organic style for wellness brand
   ============================================ */

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

/* ============================================
   1. FLOATING LEAF PARTICLES (Hero Section)
   ============================================ */
.slider-container {
    overflow: hidden;
    position: relative;
}

.leaf-particle {
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    animation: leafFloat linear infinite;
}

.leaf-particle svg {
    width: 100%;
    height: 100%;
    fill: rgba(67, 212, 119, 0.35);
}

.leaf-particle:nth-child(1) { left: 5%;  animation-duration: 12s; animation-delay: 0s;   width: 18px; height: 18px; }
.leaf-particle:nth-child(2) { left: 15%; animation-duration: 15s; animation-delay: 2s;   width: 14px; height: 14px; }
.leaf-particle:nth-child(3) { left: 30%; animation-duration: 13s; animation-delay: 4s;   width: 22px; height: 22px; }
.leaf-particle:nth-child(4) { left: 50%; animation-duration: 16s; animation-delay: 1s;   width: 16px; height: 16px; }
.leaf-particle:nth-child(5) { left: 65%; animation-duration: 11s; animation-delay: 3s;   width: 20px; height: 20px; }
.leaf-particle:nth-child(6) { left: 80%; animation-duration: 14s; animation-delay: 5s;   width: 12px; height: 12px; }
.leaf-particle:nth-child(7) { left: 90%; animation-duration: 17s; animation-delay: 2.5s; width: 18px; height: 18px; }
.leaf-particle:nth-child(8) { left: 40%; animation-duration: 13s; animation-delay: 6s;   width: 15px; height: 15px; }

@keyframes leafFloat {
    0% {
        transform: translateY(-10%) rotate(0deg) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    50% {
        transform: translateY(50vh) rotate(180deg) translateX(40px);
        opacity: 0.4;
    }
    90% {
        opacity: 0.2;
    }
    100% {
        transform: translateY(110vh) rotate(360deg) translateX(-20px);
        opacity: 0;
    }
}

/* ============================================
   2. CARD HOVER EFFECTS
   ============================================ */

/* Stat cards */
.stat-card-animated {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.stat-card-animated:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(47, 185, 93, 0.15) !important;
}

/* Course grid cards */
.webinar-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webinar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Featured slider cards */
.feature-slider {
    transition: transform 0.4s ease;
}

.feature-slider:hover {
    transform: scale(1.02);
}

/* Testimonial cards */
.testimonials-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.testimonials-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Why Choose Us feature cards */
.why-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(82, 178, 47, 0.15);
}

/* Trending category cards */
.trending-card {
    transition: transform 0.4s ease;
}

.trending-card:hover {
    transform: translateY(-6px) scale(1.03);
}

/* ============================================
   3. BUTTON EFFECTS
   ============================================ */

.btn-primary {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(67, 212, 119, 0.3);
}

.btn-border-white {
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.btn-border-white:hover {
    transform: translateY(-2px);
}

/* ============================================
   4. SECTION DIVIDER ANIMATIONS
   ============================================ */

.section-title {
    position: relative;
    display: inline-block;
}

/* Animated underline for section titles */
.section-title::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #43d477, #2FB95D);
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.section-title.aos-animate::after,
.section-title:hover::after {
    width: 60px;
}

/* ============================================
   5. COUNTER ANIMATION STYLES
   ============================================ */

.counter-value {
    display: inline-block;
    font-weight: 700;
    font-size: 1.75rem;
    color: #1f3b64;
}

/* ============================================
   6. GENTLE PULSE FOR CTA
   ============================================ */

@keyframes gentlePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(67, 212, 119, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(67, 212, 119, 0); }
}

.hero-section2 .btn-primary {
    animation: gentlePulse 3s ease-in-out infinite;
}

/* ============================================
   7. VIDEO PLAY BUTTON GLOW
   ============================================ */

.home-video-play-button {
    transition: transform 0.4s ease;
}

.home-video-play-button:hover {
    transform: scale(1.15);
}

@keyframes playGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    50% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
}

.home-video-play-button {
    animation: playGlow 2.5s ease-in-out infinite;
}

/* ============================================
   8. NAVBAR SCROLL EFFECT
   ============================================ */

.top-navbar,
.navbar {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar.scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* ============================================
   9. IMAGE HOVER ZOOM (About section)
   ============================================ */

.about-img-wrapper {
    overflow: hidden;
    border-radius: 12px;
}

.about-img-wrapper img {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-img-wrapper:hover img {
    transform: scale(1.05);
}

/* ============================================
   10. SMOOTH ENTRANCE FOR HERO TEXT
   ============================================ */

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

.hero-section2 h1 {
    animation: heroFadeUp 1s ease-out 0.2s both;
}

.hero-section2 .slide-hint {
    animation: heroFadeUp 1s ease-out 0.5s both;
}

.hero-section2 .btn-primary {
    animation: heroFadeUp 1s ease-out 0.8s both, gentlePulse 3s ease-in-out 2s infinite;
}

/* ============================================
   11. STAGGERED CARD ENTRANCE
   ============================================ */

.stat-card-animated[data-aos] {
    transition-property: transform, opacity;
}

/* ============================================
   12. FOOTER LINK HOVER
   ============================================ */

footer a {
    transition: color 0.3s ease, padding-left 0.3s ease;
}

footer a:hover {
    padding-left: 5px;
    color: #fff !important;
}

/* ============================================
   13. RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .leaf-particle {
        display: none; /* hide particles on mobile for performance */
    }

    .hero-section2 h1 {
        animation-delay: 0.1s;
    }

    .hero-section2 .slide-hint {
        animation-delay: 0.3s;
    }
}

/* ============================================
   14. PREFERS REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .leaf-particle {
        display: none;
    }
}