/* ============================================================
   Site-wide lightweight animations (subtle & professional)
   Hover, focus and state transitions only. No pre-hide / reveal —
   the site already uses WOW.js + .text-fade for scroll reveals,
   so we don't touch that to avoid any flash / blink on load.
   ============================================================ */

:root{
    --anim-ease: cubic-bezier(.22,.61,.36,1);
    --anim-ease-out: cubic-bezier(.16,.84,.44,1);
    --anim-fast: 220ms;
    --anim-med: 360ms;
}

/* ============================================================
   FIX: kill the per-page WOW.js fade-in flash.
   Above-the-fold elements with `.text-fade` were being hidden
   (opacity:0, translateY(2rem)) until WOW.js animated them on
   every page load — which reads as a "blink" between clicks.
   We force them visible from the first paint instead.
   ============================================================ */
.wow,
.text-fade,
.wow.text-fade,
.fadeIn, .fadeInUp, .fadeInDown, .fadeInLeft, .fadeInRight,
.zoomIn, .slideInUp, .slideInDown, .slideInLeft, .slideInRight{
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    animation-name: none !important;
    -webkit-animation-name: none !important;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   HEADER & MENUS
   ============================================================ */
#header.hdr-modern{
    transition: box-shadow var(--anim-med) var(--anim-ease);
}
#header.hdr-modern.is-scrolled{
    box-shadow: 0 6px 22px rgba(26,24,23,.06);
}

/* Animated underline on primary nav links */
.main-nav>ul>li>a{
    position: relative;
    transition: color var(--anim-fast) var(--anim-ease);
}
.main-nav>ul>li>a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-6px;
    width:0;
    height:2px;
    background:#62C370;
    border-radius:2px;
    transform: translateX(-50%);
    transition: width var(--anim-med) var(--anim-ease);
}
.main-nav>ul>li:hover>a::after,
.main-nav>ul>li.active>a::after{
    width: 22px;
}
.main-nav>ul>li:hover>a{ color:#62C370; }

/* Desktop dropdown smooth fade-up */
.main-nav>ul>li ul{
    transform: translateY(8px);
    transition: opacity var(--anim-med) var(--anim-ease-out),
                transform var(--anim-med) var(--anim-ease-out),
                visibility 0s linear var(--anim-med);
}
.main-nav>ul>li:hover>ul{
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s;
}
.main-nav>ul>li ul li a{
    transition: color var(--anim-fast) var(--anim-ease),
                padding-left var(--anim-fast) var(--anim-ease);
}
.main-nav>ul>li ul li a:hover{ padding-left: 24px; }

/* Header CTA hover */
.yellow-btn.hdr-cta a,
.mm-cta{
    transition: transform var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease),
                background-color var(--anim-fast) var(--anim-ease);
}
.yellow-btn.hdr-cta a:hover,
.mm-cta:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(98,195,112,.28);
}
.yellow-btn.hdr-cta a i,
.mm-cta svg{
    transition: transform var(--anim-fast) var(--anim-ease);
}
.yellow-btn.hdr-cta a:hover i,
.mm-cta:hover svg{ transform: translateX(3px); }

/* Hamburger morph */
.menu-icon button{
    transition: transform var(--anim-fast) var(--anim-ease);
}
.menu-icon button:hover{ transform: scale(1.06); }
.menu-icon button.active{ transform: rotate(90deg); }

/* Mobile menu drawer + backdrop */
.mobile-menu-outer{
    transition: transform 420ms var(--anim-ease),
                visibility 0s linear 420ms;
    box-shadow: 18px 0 60px rgba(0,0,0,.18);
}
.mobile-menu-outer.active-menu{
    transform: translateX(0) !important;
    visibility: visible !important;
    transition-delay: 0s, 0s;
}
.mm-backdrop{
    transition: opacity 320ms var(--anim-ease),
                visibility 0s linear 320ms;
    background: rgba(26,24,23,.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.mm-backdrop.active{
    opacity:1 !important;
    visibility: visible !important;
    pointer-events:auto !important;
    transition-delay: 0s, 0s;
}

/* Mobile nav rows hover */
.mobile-nav-main ul li a{
    transition: background-color var(--anim-fast) var(--anim-ease),
                color var(--anim-fast) var(--anim-ease),
                padding-left var(--anim-fast) var(--anim-ease);
}
.mobile-nav-main ul li a:hover,
.mobile-nav-main ul li.active>a{
    padding-left: 6px;
}
.mobile-nav-main ul li a .mm-arrow{
    transition: transform var(--anim-fast) var(--anim-ease);
}
.mobile-nav-main ul li a:hover .mm-arrow{ transform: translateX(4px); }

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.prodcuts-box,
.product-box-a{
    cursor: pointer;
    transition: transform var(--anim-med) var(--anim-ease),
                box-shadow var(--anim-med) var(--anim-ease);
}
.prodcuts-box .img,
.product-box-a .img{
    overflow: hidden;
}
.prodcuts-box .img img,
.product-box-a .img img{
    transition: transform 600ms var(--anim-ease-out);
}
.prodcuts-box:hover,
.product-box-a:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(26,24,23,.10);
}
.prodcuts-box:hover .img img,
.product-box-a:hover .img img{
    transform: scale(1.06);
}
.prodcuts-box .arrow-link-black i,
.product-box-a .arrow-link-black i{
    transition: transform var(--anim-fast) var(--anim-ease);
    display:inline-block;
}
.prodcuts-box:hover .arrow-link-black i,
.product-box-a:hover .arrow-link-black i{ transform: translateX(4px); }

/* ============================================================
   GENERIC CARD / BUTTON HOVER LIFT
   ============================================================ */
.testi-box,
.contact-card,
.cta-block,
.blog-slider-block .item,
.why-choose-block .item{
    transition: transform var(--anim-med) var(--anim-ease),
                box-shadow var(--anim-med) var(--anim-ease);
}
.testi-box:hover,
.contact-card:hover,
.cta-block:hover,
.blog-slider-block .item:hover,
.why-choose-block .item:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(26,24,23,.08);
}

.btn,
.btn-submit,
.arrow-link a,
.green-link-with-arrow,
.red-link-with-arrow,
.yellow-btn a{
    transition: transform var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease),
                background-color var(--anim-fast) var(--anim-ease),
                color var(--anim-fast) var(--anim-ease);
}
.btn:hover,
.btn-submit:hover,
.arrow-link a:hover,
.green-link-with-arrow:hover,
.red-link-with-arrow:hover,
.yellow-btn a:hover{
    transform: translateY(-2px);
}

.arrow-link a i,
.arrow-link a img,
.green-link-with-arrow i,
.red-link-with-arrow i{
    transition: transform var(--anim-fast) var(--anim-ease);
    display:inline-block;
}
.arrow-link a:hover i,
.arrow-link a:hover img,
.green-link-with-arrow:hover i,
.red-link-with-arrow:hover i{ transform: translateX(4px); }

/* ============================================================
   FAQ accordion smoothness (already JS-driven height)
   ============================================================ */
.faq-block-inner .ac-click .cla-acc-body{
    transition: height 380ms var(--anim-ease) !important;
    overflow: hidden;
}
.faq-block-inner .ac-click .acc-title{
    transition: color var(--anim-fast) var(--anim-ease);
}
.faq-block-inner .ac-click .acc-title:hover{ color:#62C370; }
.faq-block-inner .ac-click .acc-title::after,
.faq-block-inner .ac-click .acc-title .icon{
    transition: transform var(--anim-med) var(--anim-ease);
}
.faq-block-inner .ac-click.active .acc-title::after,
.faq-block-inner .ac-click.active .acc-title .icon{
    transform: rotate(180deg);
}

/* ============================================================
   TABS — product detail / generic
   ============================================================ */
.nav-tabs .nav-link,
.tab-link,
.product-tabs a{
    transition: color var(--anim-fast) var(--anim-ease),
                border-color var(--anim-fast) var(--anim-ease),
                background-color var(--anim-fast) var(--anim-ease);
}
.tab-pane.active.show{
    animation: fadeTabIn 320ms var(--anim-ease-out);
}
@keyframes fadeTabIn{
    from{ opacity: .4; transform: translateY(4px); }
    to  { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FOOTER + social
   ============================================================ */
footer a{
    transition: color var(--anim-fast) var(--anim-ease),
                opacity var(--anim-fast) var(--anim-ease);
}
footer a:hover{ opacity: .85; }

.h-social a,
.mm-social a,
footer .social a{
    display:inline-flex;
    transition: transform var(--anim-fast) var(--anim-ease);
}
.h-social a:hover,
.mm-social a:hover,
footer .social a:hover{ transform: translateY(-2px) scale(1.06); }