/* =========================================
   SCROLL FADE-UP ANIMATIONS
========================================= */

/* Initial Hidden State */

.hero-banner,
.clarity-section,
.about-section,
.meaning-section,
.therapy-section,
.sessions-section,
.services-section,
.contact-section{
    opacity:0;
    transform:translateY(80px);
    transition:
        opacity 1s ease,
        transform 1s ease;
    will-change: opacity, transform;
}

/* Active State */

.hero-banner.show-section,
.clarity-section.show-section,
.about-section.show-section,
.meaning-section.show-section,
.therapy-section.show-section,
.sessions-section.show-section,
.services-section.show-section,
.contact-section.show-section{
    opacity:1;
    transform:translateY(0);
}

/* Optional Stagger Animation */

.therapy-card,
.explore-card,
.service-card,
.info-card{
    opacity:0;
    transform:translateY(50px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.show-section .therapy-card,
.show-section .explore-card,
.show-section .service-card,
.show-section .info-card{
    opacity:1;
    transform:translateY(0);
}

/* Stagger Delays */

.show-section .therapy-card:nth-child(1),
.show-section .explore-card:nth-child(1),
.show-section .service-card:nth-child(1){
    transition-delay:0.1s;
}

.show-section .therapy-card:nth-child(2),
.show-section .explore-card:nth-child(2),
.show-section .service-card:nth-child(2){
    transition-delay:0.25s;
}

.show-section .therapy-card:nth-child(3),
.show-section .explore-card:nth-child(3),
.show-section .service-card:nth-child(3){
    transition-delay:0.4s;
}

/* Image Fade Animation */

.image-box,
.about-image,
.image-wrapper,
.sessions-image,
.contact-form-box{
    opacity:0;
    transform:translateY(60px) scale(0.98);
    transition:
        opacity 1s ease,
        transform 1s ease;
}

.show-section .image-box,
.show-section .about-image,
.show-section .image-wrapper,
.show-section .sessions-image,
.show-section .contact-form-box{
    opacity:1;
    transform:translateY(0) scale(1);
}


/* =========================================
   BUTTON HOVER ANIMATIONS
========================================= */

/* Common Button Transition */

.hero-btn,
.book-btn,
.service-btn,
.submit-btn{
    position:relative;
    overflow:hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background-color 0.35s ease,
        color 0.35s ease;
}

/* Hover Lift */

.hero-btn:hover,
.book-btn:hover,
.service-btn:hover,
.submit-btn:hover{
    transform:translateY(-5px) scale(1.03);
    box-shadow:0 14px 30px rgba(0,0,0,0.15);
}

/* Click Effect */

.hero-btn:active,
.book-btn:active,
.service-btn:active,
.submit-btn:active{
    transform:translateY(-1px) scale(0.98);
}

/* Shine Animation */

.hero-btn::before,
.book-btn::before,
.service-btn::before,
.submit-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:100%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
    );
    transition:all 0.7s ease;
}

.hero-btn:hover::before,
.book-btn:hover::before,
.service-btn:hover::before,
.submit-btn:hover::before{
    left:120%;
}

/* SVG Arrow Animation */

.hero-btn svg,
.book-btn svg,
.service-btn svg,
.submit-btn svg{
    transition:transform 0.35s ease;
}

.hero-btn:hover svg,
.book-btn:hover svg,
.service-btn:hover svg,
.submit-btn:hover svg{
    transform:translateX(4px);
}

/* Learn Link Hover */

.learn-link{
    position:relative;
    transition:
        letter-spacing 0.35s ease,
        transform 0.35s ease;
}

.learn-link:hover{
    /* letter-spacing:2px; */
    transform:translateX(6px);
}

.learn-link::after{
    transition:width 0.35s ease;
}

.learn-link:hover::after{
    width:70px;
}

/*=========================================
   GLOW EFFECT
========================================= */

@keyframes buttonGlow {

    0%{
        box-shadow:0 0 0 rgba(103, 114, 86, 0);
    }

    50%{
        box-shadow:0 10px 28px rgba(103, 114, 86, 0.25);
    }

    100%{
        box-shadow:0 0 0 rgba(103, 114, 86, 0);
    }

}

.hero-btn:hover,
.book-btn:hover,
.service-btn:hover,
.submit-btn:hover{
    animation:buttonGlow 1.5s infinite;
}

/* =========================================
   IMAGE ANIMATIONS
========================================= */

/* Smooth Transition */

.image-box,
.about-image,
.image-wrapper,
.sessions-image,
.service-card img,
.therapy-icon,
.service-icon{
    overflow:hidden;
}

/* Main Images */

.image-box img,
.about-image img,
.image-wrapper img,
.sessions-image img{
    transition:
        transform 0.8s ease,
        filter 0.6s ease;
    will-change:transform;
}

/* Hover Zoom */

.image-box:hover img,
.about-image:hover img,
.image-wrapper:hover img,
.sessions-image:hover img{
    transform:scale(1.08);
    filter:brightness(1.05);
}

/* Floating Animation */

@keyframes floatingImage {

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* Subtle Floating */

/* .image-box,
.about-image,
.image-wrapper,
.sessions-image{
    animation:floatingImage 6s ease-in-out infinite;
} */

/* =========================================
   ICON ANIMATIONS
========================================= */

/* Icon Transition */

.icon-circle,
.therapy-icon,
.service-icon,
.info-item .icon-circle svg{
    transition:
        transform 0.4s ease,
        opacity 0.4s ease;
}

/* Rotate + Scale on Hover */

.therapy-card:hover .therapy-icon,
.service-card:hover .service-icon,
.info-card:hover .icon-circle svg{
    transform:rotate(10deg) scale(1.15);
}

/* Pulse Animation */

@keyframes pulseIcon {

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.12);
    }

    100%{
        transform:scale(1);
    }

}

/* Icon Hover Effect */

.icon-circle:hover,
.therapy-icon:hover,
.service-icon:hover{
    animation:pulseIcon 1s ease infinite;
}

/* =========================================
   IMAGE SHADOW HOVER
========================================= */

.image-box,
.about-image,
.image-wrapper,
.sessions-image{
    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;
}

.image-box:hover,
.about-image:hover,
.image-wrapper:hover,
.sessions-image:hover{
    transform:translateY(-8px);
    /* box-shadow:0 20px 40px rgba(0,0,0,0.15); */
}

/* =========================================
   DECORATIVE LEAF ANIMATION
========================================= */

@keyframes leafFloat {

    0%{
        transform:rotate(0deg) translateY(0px);
    }

    50%{
        transform:rotate(4deg) translateY(-6px);
    }

    100%{
        transform:rotate(0deg) translateY(0px);
    }

}

.decorative-leaf,
.leaf-card{
    animation:leafFloat 5s ease-in-out infinite;
}

/* =========================================
   MOBILE OPTIMIZATION
========================================= */

@media (max-width:767px){

    .image-box:hover img,
    .about-image:hover img,
    .image-wrapper:hover img,
    .sessions-image:hover img{
        transform:scale(1.04);
    }

}