/**
 * Manattva Theme — Global Animation System
 *
 * Reusable across all pages and Elementor sections.
 * No layout-affecting properties.
 * GPU-accelerated transforms only.
 * Respects prefers-reduced-motion.
 *
 * @package   Manattva
 * @version   1.0.0
 */

/* =============================================
   REDUCED MOTION — GLOBAL OVERRIDE
   Must appear first to ensure it takes
   priority across all animation rules.
============================================= */
@media ( prefers-reduced-motion: reduce ) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto   !important;
    }

    .animate-on-scroll,
    .animate-on-scroll.is-visible {
        opacity:   1;
        transform: none;
    }
}

/* =============================================
   KEYFRAMES
============================================= */

/* Fade In */
@keyframes manattva-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade In Up */
@keyframes manattva-fade-in-up {
    from {
        opacity:   0;
        transform: translateY( 40px );
    }
    to {
        opacity:   1;
        transform: translateY( 0 );
    }
}

/* Fade In Down */
@keyframes manattva-fade-in-down {
    from {
        opacity:   0;
        transform: translateY( -40px );
    }
    to {
        opacity:   1;
        transform: translateY( 0 );
    }
}

/* Fade In Left */
@keyframes manattva-fade-in-left {
    from {
        opacity:   0;
        transform: translateX( -40px );
    }
    to {
        opacity:   1;
        transform: translateX( 0 );
    }
}

/* Fade In Right */
@keyframes manattva-fade-in-right {
    from {
        opacity:   0;
        transform: translateX( 40px );
    }
    to {
        opacity:   1;
        transform: translateX( 0 );
    }
}

/* Scale In */
@keyframes manattva-scale-in {
    from {
        opacity:   0;
        transform: scale( 0.92 );
    }
    to {
        opacity:   1;
        transform: scale( 1 );
    }
}

/* Slide Up */
@keyframes manattva-slide-up {
    from {
        transform: translateY( 100% );
        opacity:   0;
    }
    to {
        transform: translateY( 0 );
        opacity:   1;
    }
}

/* Pulse — for CTA buttons only */
@keyframes manattva-pulse {
    0%,
    100% {
        transform: scale( 1 );
        box-shadow: 0 0 0 0 rgba( 255, 107, 107, 0.4 );
    }
    50% {
        transform: scale( 1.02 );
        box-shadow: 0 0 0 10px rgba( 255, 107, 107, 0 );
    }
}

/* Shimmer — for skeleton loaders */
@keyframes manattva-shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Float — subtle hover lift */
@keyframes manattva-float {
    0%,
    100% {
        transform: translateY( 0 );
    }
    50% {
        transform: translateY( -8px );
    }
}

/* Draw Line — for decorative underlines */
@keyframes manattva-draw-line {
    from {
        transform: scaleX( 0 );
    }
    to {
        transform: scaleX( 1 );
    }
}

/* =============================================
   SCROLL-TRIGGERED BASE STATE
   Elements start hidden and transition
   to visible when .is-visible is added by JS.
============================================= */
.animate-on-scroll {
    opacity:            0;
    transform:          translateY( 30px );
    transition-property:      opacity, transform;
    transition-duration:      0.7s;
    transition-timing-function: cubic-bezier( 0.22, 1, 0.36, 1 );
    transition-delay:   0s;
    will-change:        opacity, transform;
}

.animate-on-scroll.is-visible {
    opacity:   1;
    transform: translateY( 0 );
}

/* =============================================
   STAGGER DELAYS
   Apply to child elements inside a section
   to create a cascading entrance effect.
============================================= */
.animate-on-scroll:nth-child( 1 ) { transition-delay: 0ms;   }
.animate-on-scroll:nth-child( 2 ) { transition-delay: 100ms; }
.animate-on-scroll:nth-child( 3 ) { transition-delay: 200ms; }
.animate-on-scroll:nth-child( 4 ) { transition-delay: 300ms; }
.animate-on-scroll:nth-child( 5 ) { transition-delay: 400ms; }
.animate-on-scroll:nth-child( 6 ) { transition-delay: 500ms; }

/* =============================================
   DIRECTIONAL VARIANTS
   Override the default translateY on elements
   that should animate from a different direction.
============================================= */
.animate-from-left {
    transform: translateX( -40px );
}

.animate-from-left.is-visible {
    transform: translateX( 0 );
}

.animate-from-right {
    transform: translateX( 40px );
}

.animate-from-right.is-visible {
    transform: translateX( 0 );
}

.animate-from-top {
    transform: translateY( -30px );
}

.animate-from-top.is-visible {
    transform: translateY( 0 );
}

.animate-scale-in {
    transform: scale( 0.92 );
}

.animate-scale-in.is-visible {
    transform: scale( 1 );
}

.animate-fade-only {
    transform: none;
}

.animate-fade-only.is-visible {
    transform: none;
}

/* =============================================
   HOVER EFFECTS — GLOBAL
   Applied to interactive elements sitewide.
============================================= */

/* Button grow on hover */
.elementor-animation-grow {
    transition: transform 0.3s cubic-bezier( 0.22, 1, 0.36, 1 ),
                box-shadow 0.3s cubic-bezier( 0.22, 1, 0.36, 1 );
    will-change: transform;
}

.elementor-animation-grow:hover {
    transform:  scale( 1.04 );
    box-shadow: 0 8px 24px rgba( 255, 107, 107, 0.3 );
}

/* Card lift on hover */
.manattva-card {
    transition: transform 0.3s cubic-bezier( 0.22, 1, 0.36, 1 ),
                box-shadow 0.3s cubic-bezier( 0.22, 1, 0.36, 1 );
    will-change: transform;
}

.manattva-card:hover {
    transform:  translateY( -6px );
    box-shadow: 0 16px 40px rgba( 0, 0, 0, 0.12 );
}

/* Image zoom on hover */
.manattva-card__image-wrap {
    overflow: hidden;
}

.manattva-card__image {
    transition: transform 0.5s cubic-bezier( 0.22, 1, 0.36, 1 );
    will-change: transform;
}

.manattva-card:hover .manattva-card__image {
    transform: scale( 1.05 );
}

/* Feature icon bounce on hover */
.manattva-feature {
    transition: transform 0.3s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.manattva-feature:hover {
    transform: translateY( -4px );
}

.manattva-feature__icon {
    transition: transform 0.4s cubic-bezier( 0.34, 1.56, 0.64, 1 );
    will-change: transform;
}

.manattva-feature:hover .manattva-feature__icon {
    transform: scale( 1.15 );
}

/* Navigation link underline */
.site-header__menu a {
    position: relative;
}

.site-header__menu a::after {
    content:          '';
    position:         absolute;
    bottom:           -2px;
    left:             0;
    width:            100%;
    height:           2px;
    background-color: var( --color-primary );
    transform:        scaleX( 0 );
    transform-origin: left center;
    transition:       transform 0.3s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.site-header__menu a:hover::after,
.site-header__menu .current-menu-item > a::after {
    transform: scaleX( 1 );
}

/* Social icon hover */
.site-footer__social-link {
    transition: transform 0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 ),
                color     0.3s ease;
    will-change: transform;
}

.site-footer__social-link:hover {
    transform: translateY( -3px );
    color:     var( --color-primary );
}

/* Scroll to top button */
.manattva-scroll-top {
    transition: transform   0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 ),
                background  0.3s ease,
                box-shadow  0.3s ease,
                opacity     0.3s ease;
    will-change: transform, opacity;
}

.manattva-scroll-top:hover {
    transform:  translateY( -3px );
    box-shadow: 0 8px 20px rgba( 255, 107, 107, 0.4 );
}

/* =============================================
   CTA SECTION — PULSE BUTTON
   Only applied to the primary CTA button.
============================================= */
.manattva-cta .elementor-button--white {
    animation: manattva-pulse 3s ease-in-out infinite;
}

.manattva-cta .elementor-button--white:hover {
    animation-play-state: paused;
}

/* =============================================
   HERO SECTION — ENTRANCE ANIMATION
   One-time animation on page load.
============================================= */
.manattva-hero__title {
    animation: manattva-fade-in-up 0.9s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
    animation-delay: 0.1s;
}

.manattva-hero__description {
    animation: manattva-fade-in-up 0.9s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
    animation-delay: 0.25s;
}

.manattva-hero .elementor-button-wrapper {
    animation: manattva-fade-in-up 0.9s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
    animation-delay: 0.4s;
}

.manattva-hero__image {
    animation: manattva-fade-in 1s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
    animation-delay: 0.3s;
}

/* =============================================
   TESTIMONIAL SLIDER — TRANSITION
============================================= */
.manattva-testimonial-slider__item {
    transition: opacity   0.5s ease,
                transform 0.5s cubic-bezier( 0.22, 1, 0.36, 1 );
    will-change: opacity, transform;
}

.manattva-testimonial-slider__item.is-entering {
    animation: manattva-fade-in-right 0.5s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

.manattva-testimonial-slider__item.is-leaving {
    animation: manattva-fade-in-left 0.5s cubic-bezier( 0.22, 1, 0.36, 1 ) reverse both;
}

.manattva-testimonial-slider__dot {
    transition: transform         0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 ),
                background-color  0.3s ease,
                width             0.3s ease;
    will-change: transform, width;
}

.manattva-testimonial-slider__dot.is-active {
    transform: scale( 1.3 );
}

/* =============================================
   MOBILE MENU — SLIDE DOWN
============================================= */
.mobile-menu {
    transform-origin: top center;
    transition: opacity   0.3s ease,
                transform 0.3s cubic-bezier( 0.22, 1, 0.36, 1 );
    will-change: opacity, transform;
}

.mobile-menu:not( .is-active ) {
    opacity:   0;
    transform: translateY( -10px );
    pointer-events: none;
}

.mobile-menu.is-active {
    opacity:   1;
    transform: translateY( 0 );
    pointer-events: auto;
}

/* Mobile toggle icon lines */
.toggle-line {
    transition: transform 0.3s cubic-bezier( 0.22, 1, 0.36, 1 ),
                opacity   0.3s ease;
    transform-origin: center;
}

.mobile-menu-toggle[aria-expanded="true"] .toggle-line--top {
    transform: rotate( 45deg ) translate( 6px, 6px );
}

.mobile-menu-toggle[aria-expanded="true"] .toggle-line--middle {
    opacity:   0;
    transform: scaleX( 0 );
}

.mobile-menu-toggle[aria-expanded="true"] .toggle-line--bottom {
    transform: rotate( -45deg ) translate( 6px, -6px );
}

/* =============================================
   SITE HEADER — SCROLL SHRINK
============================================= */
.site-header {
    transition: padding    0.3s ease,
                box-shadow 0.3s ease;
}

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

/* =============================================
   PAGE HERO — ENTRANCE
============================================= */
.manattva-page-hero__title {
    animation: manattva-fade-in-up 0.8s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
    animation-delay: 0.1s;
}

.manattva-breadcrumb {
    animation: manattva-fade-in 0.6s ease both;
    animation-delay: 0.3s;
}

/* =============================================
   SECTION EYEBROW — DRAW LINE
============================================= */
.elementor-heading-eyebrow {
    position: relative;
    display:  inline-block;
}

.elementor-heading-eyebrow::before {
    content:          '';
    position:         absolute;
    bottom:           -4px;
    left:             0;
    width:            100%;
    height:           2px;
    background-color: var( --color-primary );
    transform:        scaleX( 0 );
    transform-origin: left center;
    transition:       transform 0.5s cubic-bezier( 0.22, 1, 0.36, 1);
}

.animate-on-scroll.is-visible .elementor-heading-eyebrow::before {
    transform: scaleX( 1 );
}

/* =============================================
   LINK HOVER — ARROW NUDGE
============================================= */
.manattva-card__link svg {
    transition: transform 0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 );
    will-change: transform;
}

.manattva-card__link:hover svg {
    transform: translateX( 4px );
}