/* ==========================================================================
   HEAL HEALTH — Premium Animation System
   Subtle, performant animations using CSS custom properties + IntersectionObserver
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. REDUCED MOTION OVERRIDE — Accessibility first
   -------------------------------------------------------------------------- */
@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;
    }
}

/* --------------------------------------------------------------------------
   1. KEYFRAME DEFINITIONS
   -------------------------------------------------------------------------- */

/* Fade up — primary reveal */
@keyframes hh-fade-up {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in — simple opacity */
@keyframes hh-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Fade left */
@keyframes hh-fade-left {
    from {
        opacity: 0;
        transform: translateX(-36px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade right */
@keyframes hh-fade-right {
    from {
        opacity: 0;
        transform: translateX(36px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale-up reveal */
@keyframes hh-scale-up {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide in from top (nav / banners) */
@keyframes hh-slide-down {
    from {
        opacity: 0;
        transform: translateY(-24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Gentle float (decorative elements) */
@keyframes hh-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

/* Shimmer / skeleton pulse */
@keyframes hh-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Underline expand (nav active / headings) */
@keyframes hh-underline-expand {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Counter tick up — handled in JS, just needs visible class */

/* --------------------------------------------------------------------------
   2. SCROLL-REVEAL BASE STATE (hidden before .hh-visible is added)
   -------------------------------------------------------------------------- */

[data-hh-anim] {
    opacity: 0;
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    -webkit-transition-duration: 0.7s;
    transition-duration: 0.7s;
    -webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-hh-anim="fade-up"]    { -webkit-transform: translateY(32px); transform: translateY(32px); }
[data-hh-anim="fade-in"]    { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
[data-hh-anim="fade-left"]  { -webkit-transform: translateX(-36px); transform: translateX(-36px); }
[data-hh-anim="fade-right"] { -webkit-transform: translateX(36px); transform: translateX(36px); }
[data-hh-anim="scale-up"]   { -webkit-transform: scale(0.92); transform: scale(0.92); }
[data-hh-anim="slide-down"] { -webkit-transform: translateY(-24px); transform: translateY(-24px); }

/* Stagger delays via data-hh-delay */
[data-hh-delay="100"] { transition-delay: 100ms; }
[data-hh-delay="150"] { transition-delay: 150ms; }
[data-hh-delay="200"] { transition-delay: 200ms; }
[data-hh-delay="300"] { transition-delay: 300ms; }
[data-hh-delay="400"] { transition-delay: 400ms; }
[data-hh-delay="500"] { transition-delay: 500ms; }
[data-hh-delay="600"] { transition-delay: 600ms; }
[data-hh-delay="700"] { transition-delay: 700ms; }
[data-hh-delay="800"] { transition-delay: 800ms; }
[data-hh-delay="900"] { transition-delay: 900ms; }

/* Visible state — added by IntersectionObserver */
[data-hh-anim].hh-visible {
    opacity: 1 !important;
    -webkit-transform: translate3d(0, 0, 0) scale(1) !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
}

/* --------------------------------------------------------------------------
   3. PAGE-LOAD ANIMATIONS (no JS needed — CSS only on critical elements)
   -------------------------------------------------------------------------- */

/* Hero banner text */
.hh-hero-heading {
    animation: hh-fade-up 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s both;
}

.hh-hero-text {
    animation: hh-fade-up 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.30s both;
}

.hh-hero-cta {
    animation: hh-fade-up 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.50s both;
}

.hh-hero-img {
    animation: hh-fade-right 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s both;
}

/* Header nav */
header.sticky-top {
    animation: hh-slide-down 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* --------------------------------------------------------------------------
   4. NAVIGATION — MICRO-ANIMATIONS
   -------------------------------------------------------------------------- */

/* Animated underline on active/hover nav links */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    width: 60%;
    height: 2px;
    background-color: var(--accent-color-2);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: translateX(-50%) scaleX(1);
}

/* Dropdown items slide-in */
.dropdown-menu {
    animation: hh-fade-up 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* --------------------------------------------------------------------------
   5. BUTTON MICRO-ANIMATIONS — premium press + hover lift
   -------------------------------------------------------------------------- */

.btn {
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
                background-color 0.4s ease,
                border-color 0.4s ease,
                color 0.4s ease !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(31, 77, 58, 0.18);
}

.btn:active {
    transform: translateY(0px) scale(0.98);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   6. CARD HOVER ANIMATIONS — refined lift + glow
   -------------------------------------------------------------------------- */

.card,
.mv-card {
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                background-color 0.4s ease,
                border-color 0.4s ease !important;
}

/* Service / Sector card-outline-hover */
.card.card-outline-hover {
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                background-color 0.4s ease !important;
}

.card.card-outline-hover:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(31, 77, 58, 0.18) !important;
}

/* Team member card */
.team-detail {
    transition: background-color 0.4s ease, color 0.4s ease !important;
}

/* --------------------------------------------------------------------------
   7. ICON / IMAGE MICRO-ANIMATIONS
   -------------------------------------------------------------------------- */

/* Service icon subtle pulse on card hover */
.card.card-outline-hover:hover img {
    animation: hh-float 2.5s ease-in-out infinite;
}

/* Social icons lift */
.social-item,
.social-item-2,
.social-item-3 {
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
                background-color 0.4s ease,
                color 0.4s ease,
                border-color 0.4s ease !important;
}

.social-item:hover,
.social-item-2:hover,
.social-item-3:hover {
    transform: translateY(-3px) scale(1.1) !important;
}

/* Read-more arrow slide */
.read-more .fa-arrow-right {
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    display: inline-block;
}

.read-more:hover .fa-arrow-right {
    transform: translateX(5px);
}

/* Button arrow slide */
.btn .fa-arrow-right {
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    display: inline-block;
}

.btn:hover .fa-arrow-right {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   8. SECTION HEADING DECORATIVE LINE
   -------------------------------------------------------------------------- */

/* Animated accent line under subheadings */
h6.accent-color {
    position: relative;
    display: inline-block;
}

h6.accent-color::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--accent-color-2);
    border-radius: 2px;
    margin-top: 4px;
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Activate on parent becoming visible */
.hh-visible h6.accent-color::after,
[data-hh-anim].hh-visible ~ h6.accent-color::after {
    width: 100%;
}

/* Simpler: always animate when element itself is h6 */
h6.accent-color.hh-heading-animate::after {
    width: 100%;
}

/* --------------------------------------------------------------------------
   9. TESTIMONIAL SECTION
   -------------------------------------------------------------------------- */

.swiper-slide {
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.4s ease;
}

/* --------------------------------------------------------------------------
   10. FOOTER — link hover animations
   -------------------------------------------------------------------------- */

footer .list li .link {
    transition: color 0.3s ease, letter-spacing 0.3s ease !important;
    display: inline-block;
}

footer .list li .link:hover {
    letter-spacing: 0.5px;
    color: var(--accent-color-2) !important;
}

/* --------------------------------------------------------------------------
   11. QUOTE BANNER (inner pages)
   -------------------------------------------------------------------------- */

.quote-banner-container .quote-icon {
    animation: hh-fade-in 0.8s ease 0.1s both;
}

.quote-banner-container .quote-text {
    animation: hh-fade-up 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
}

.quote-banner-container .quote-author {
    animation: hh-fade-up 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s both;
}

/* --------------------------------------------------------------------------
   12. MISSION / VISION CARDS
   -------------------------------------------------------------------------- */

.mv-card {
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 0.5s ease !important;
}

.mv-card:hover {
    transform: translateY(-14px) !important;
    box-shadow: 0 24px 48px rgba(31, 77, 58, 0.15) !important;
}

.mv-icon {
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                background-color 0.4s ease !important;
}

.mv-card:hover .mv-icon {
    transform: scale(1.1) rotate(6deg) !important;
    background-color: var(--accent-color-2) !important;
}

/* --------------------------------------------------------------------------
   13. DIFFERENT SECTION (About page — what makes us different)
   -------------------------------------------------------------------------- */

.different-item {
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.different-item:hover {
    transform: translateX(6px);
}

.different-item .fa-circle-check {
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.different-item:hover .fa-circle-check {
    transform: scale(1.15) rotate(-5deg);
}

/* --------------------------------------------------------------------------
   14. NAVBAR — sticky shadow transition
   -------------------------------------------------------------------------- */

header.sticky-top {
    transition: box-shadow 0.3s ease, background-color 0.3s ease !important;
}

header.sticky-top.hh-scrolled {
    box-shadow: 0 4px 24px rgba(31, 77, 58, 0.12) !important;
}

/* --------------------------------------------------------------------------
   15. SMOOTH IMAGE REVEAL (about section left image)
   -------------------------------------------------------------------------- */

.hh-img-reveal {
    overflow: hidden;
    border-radius: 8px;
}

.hh-img-reveal img {
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    transform-origin: center;
}

.hh-img-reveal:hover img {
    transform: scale(1.03);
}