/* ==========================================================================
   Dr. Madhu Chopra — Motion
   Text and scroll effects follow the Icon Multispeciality Hospital site:
   GSAP SplitText headings, staggered words, curtain image reveals and
   fade-up section reveals. Everything is switched off for visitors who
   prefer reduced motion.
   ========================================================================== */

:root {
    --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------------------------------------
   Preloader
   The ring turns and the logo breathes while the page loads. The failsafe
   clears the overlay after 6s if main.js never removes it.
   -------------------------------------------------------------------------- */

.js-enabled .preloader {
    animation: preloader-failsafe 0.6s ease 6s forwards;
}

@keyframes preloader-failsafe {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

.preloader__ring {
    animation: spin 1.6s linear infinite;
}

.preloader__logo {
    animation: preloader-breathe 2.4s ease-in-out infinite;
}

@keyframes preloader-breathe {
    0%,
    100% {
        opacity: 1;
        scale: 1;
    }

    50% {
        opacity: 0.82;
        scale: 0.96;
    }
}

/* --------------------------------------------------------------------------
   Hero entrance
   Hidden until GSAP plays the intro timeline. The failsafe shows it anyway
   after 3s if the animation library never loads.
   -------------------------------------------------------------------------- */

.js-enabled [data-hero] {
    visibility: hidden;
    animation: hero-failsafe 0s linear 3s forwards;
}

@keyframes hero-failsafe {
    to {
        visibility: visible;
    }
}

/* CSS-only entrance used when GSAP is unavailable (set by main.js) */
.motion-fallback [data-hero] {
    visibility: visible;
    animation: hero-in 1.1s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 0.12s + 0.1s);
}

@keyframes hero-in {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Split text (SplitText words / characters)
   -------------------------------------------------------------------------- */

.split-word,
.split-char {
    display: inline-block;
    position: relative;
}

.hero__title {
    perspective: 400px;
}

/* --------------------------------------------------------------------------
   Scroll reveal (fade up with a subtle scale, or slide in from a side).
   Content is hidden only when JavaScript is available to reveal it. Uses the
   individual `translate` / `scale` properties so hover `transform` effects
   keep working.
   -------------------------------------------------------------------------- */

.js-enabled [data-reveal] {
    opacity: 0;
    translate: 0 36px;
    scale: 0.98;
    transition: opacity 0.8s var(--ease-reveal) var(--reveal-delay, 0s),
        translate 0.8s var(--ease-reveal) var(--reveal-delay, 0s),
        scale 0.8s var(--ease-reveal) var(--reveal-delay, 0s);
}

.js-enabled [data-reveal="left"] {
    translate: -40px 0;
    scale: 1;
}

.js-enabled [data-reveal="right"] {
    translate: 40px 0;
    scale: 1;
}

.js-enabled [data-reveal].is-revealed {
    opacity: 1;
    translate: none;
    scale: none;
}

/* Cards keep their own hover transitions alongside the reveal */
.js-enabled :is(.qual-card, .treat-card, .leader-card, .phil-card, .exp-card, .gallery-card)[data-reveal] {
    transition: opacity 0.8s var(--ease-reveal) var(--reveal-delay, 0s),
        translate 0.8s var(--ease-reveal) var(--reveal-delay, 0s),
        scale 0.8s var(--ease-reveal) var(--reveal-delay, 0s),
        transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease),
        background-color 0.5s var(--ease);
}

/* Icon spring pop once a card is revealed */
.qual-card.is-revealed .qual-card__icon,
.phil-card.is-revealed .phil-card__icon {
    animation: icon-pop 0.8s var(--ease-spring) both;
    animation-delay: calc(var(--reveal-delay, 0s) + 0.25s);
}

@keyframes icon-pop {
    from {
        opacity: 0;
        scale: 0.6;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes gallery-shine {
    to {
        transform: translateX(150%);
    }
}

@keyframes gallery-fade {
    from {
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   Treatment tabs
   -------------------------------------------------------------------------- */

.tab-panel.is-active {
    animation: panel-in 0.6s var(--ease) both;
}

@keyframes panel-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Ambient details
   -------------------------------------------------------------------------- */

.hero__badge-ring {
    animation: spin 28s linear infinite;
}

/* Uses `translate` so GSAP can still animate the card's transform */
.hero__card {
    animation: float 7s ease-in-out infinite;
}

@keyframes float {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -8px;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Floating call button: soft pulse ring */
.float-btn--phone::before {
    animation: call-pulse 2.4s ease-out infinite;
}

@keyframes call-pulse {
    from {
        opacity: 0.6;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.6);
    }
}

.btn.is-loading .btn__spinner {
    animation: spin 0.8s linear infinite;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .js-enabled [data-hero] {
        visibility: visible;
    }

    .js-enabled [data-reveal] {
        opacity: 1;
        translate: none;
        scale: none;
    }

    .btn.is-loading .btn__spinner {
        animation-duration: 1.6s !important;
        animation-iteration-count: infinite !important;
    }
}