/* ==========================================================================
   GLOBAL PREMIUM MOTION & ANIMATION SYSTEM - VIBHU TRAVEL HUB
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL CSS ANIMATION VARIABLES & SPRING EASING
   -------------------------------------------------------------------------- */
:root {
    /* Timing Durations */
    --anim-fast: 180ms;
    --anim-normal: 350ms;
    --anim-slow: 750ms;

    /* Easing Curves */
    --anim-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --anim-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --anim-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --anim-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --anim-spring-subtle: cubic-bezier(0.25, 1.3, 0.5, 1);
}

/* --------------------------------------------------------------------------
   2. KEYFRAME DEFINITIONS FOR PREMIUM FLOAT, PULSE & MORPH
   -------------------------------------------------------------------------- */

/* Text Float / Eyebrow Motion */
@keyframes premiumTextFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* Card Vertical Float (Stable, No 3D Rotation) */
@keyframes premiumCardFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* Image Cinematic Float */
@keyframes premiumImageFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-4px) scale(1.01);
    }
}

/* Icon Micro Float */
@keyframes premiumIconFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* Subtle Pulse Glow */
@keyframes luxuryPulseGlow {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(227, 30, 36, 0.15);
    }
    50% {
        box-shadow: 0 8px 25px rgba(227, 30, 36, 0.35);
    }
}

/* --------------------------------------------------------------------------
   3. GLOBAL FLOAT & CONTINUOUS MOTION CLASSES
   -------------------------------------------------------------------------- */

/* Text Float Targets */
.float-text,
.vth-eyebrow,
.vth-hero-script,
.section-title,
.vth-section-title,
.float-title {
    animation: premiumTextFloat 4.5s ease-in-out infinite;
    display: inline-block;
}

/* Card Float Targets (NO 3D ROTATION) */
.float-card,
.vth-fleet-card,
.service-card-item,
.destination-card,
.place-card-ref,
.hero-mini-card,
.package-card,
.blog-card,
.testimonial-card,
.hub-card {
    animation: premiumCardFloat 5s ease-in-out infinite;
    will-change: transform;
}

/* Staggered Card Animation Delays */
.stagger-grid > *:nth-child(1) .vth-fleet-card,
.stagger-grid > *:nth-child(1) .service-card-item,
.stagger-grid > *:nth-child(1) .destination-card,
.stagger-grid > *:nth-child(1) .place-card-ref,
.stagger-grid > *:nth-child(1) .hero-mini-card,
.stagger-card:nth-child(1),
.col-lg-4:nth-child(1) .service-card-item,
.col-lg-4:nth-child(1) .vth-fleet-card,
.col-lg-4:nth-child(1) .destination-card {
    animation-delay: 0s;
}

.stagger-grid > *:nth-child(2) .vth-fleet-card,
.stagger-grid > *:nth-child(2) .service-card-item,
.stagger-grid > *:nth-child(2) .destination-card,
.stagger-grid > *:nth-child(2) .place-card-ref,
.stagger-grid > *:nth-child(2) .hero-mini-card,
.stagger-card:nth-child(2),
.col-lg-4:nth-child(2) .service-card-item,
.col-lg-4:nth-child(2) .vth-fleet-card,
.col-lg-4:nth-child(2) .destination-card {
    animation-delay: 0.35s;
}

.stagger-grid > *:nth-child(3) .vth-fleet-card,
.stagger-grid > *:nth-child(3) .service-card-item,
.stagger-grid > *:nth-child(3) .destination-card,
.stagger-grid > *:nth-child(3) .place-card-ref,
.stagger-grid > *:nth-child(3) .hero-mini-card,
.stagger-card:nth-child(3),
.col-lg-4:nth-child(3) .service-card-item,
.col-lg-4:nth-child(3) .vth-fleet-card,
.col-lg-4:nth-child(3) .destination-card {
    animation-delay: 0.7s;
}

.stagger-grid > *:nth-child(4) .vth-fleet-card,
.stagger-grid > *:nth-child(4) .service-card-item,
.stagger-grid > *:nth-child(4) .destination-card,
.stagger-grid > *:nth-child(4) .place-card-ref,
.stagger-grid > *:nth-child(4) .hero-mini-card,
.stagger-card:nth-child(4) {
    animation-delay: 1.05s;
}

.stagger-grid > *:nth-child(5) .vth-fleet-card,
.stagger-grid > *:nth-child(5) .service-card-item,
.stagger-grid > *:nth-child(5) .destination-card,
.stagger-grid > *:nth-child(5) .place-card-ref,
.stagger-card:nth-child(5) {
    animation-delay: 1.4s;
}

.stagger-grid > *:nth-child(6) .vth-fleet-card,
.stagger-grid > *:nth-child(6) .service-card-item,
.stagger-grid > *:nth-child(6) .destination-card,
.stagger-grid > *:nth-child(6) .place-card-ref,
.stagger-card:nth-child(6) {
    animation-delay: 1.75s;
}

/* Image Float Targets */
.float-image,
.destination-image,
.place-card-img,
.about-hero-img {
    animation: premiumImageFloat 6s ease-in-out infinite;
}

/* Icon Float Targets */
.float-icon,
.mini-icon-box,
.vth-icon-float,
i.text-danger,
.bi-people-fill {
    animation: premiumIconFloat 3.8s ease-in-out infinite;
    display: inline-block;
}

/* --------------------------------------------------------------------------
   4. SPRING INTERACTION SYSTEM & BUTTON INTERACTIVE STATES
   -------------------------------------------------------------------------- */
.btn,
.fleet-view-btn,
.destination-button,
.btn-danger,
.btn-outline-danger,
.btn-light,
.btn-outline-dark,
.btn-success,
.hero-mini-card {
    transition: transform 0.32s var(--anim-spring-subtle),
                box-shadow 0.32s var(--anim-ease-out),
                background-color 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease !important;
    will-change: transform;
}

.btn:hover,
.fleet-view-btn:hover,
.destination-button:hover {
    transform: translateY(-3px) scale(1.02) !important;
}

.btn:active,
.fleet-view-btn:active,
.destination-button:active {
    transform: translateY(0px) scale(0.98) !important;
}

.btn i,
.destination-button i {
    transition: transform 0.25s var(--anim-ease-smooth);
    display: inline-block;
}

.btn:hover i.bi-arrow-right,
.btn:hover i.bi-chevron-right,
.btn:hover i.bi-compass,
.destination-button:hover i {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   5. MULTI-DIRECTIONAL SCROLL REVEAL & SEQUENTIAL TIMELINE ENGINE
   -------------------------------------------------------------------------- */
.reveal,
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-fade,
.stagger-item,
[data-reveal] {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Base Offsets */
.reveal,
.reveal-up,
[data-reveal="up"] {
    transform: translateY(32px);
}

.reveal-down,
[data-reveal="down"] {
    transform: translateY(-32px);
}

.reveal-left,
[data-reveal="left"] {
    transform: translateX(-35px);
}

.reveal-right,
[data-reveal="right"] {
    transform: translateX(35px);
}

.reveal-scale,
[data-reveal="scale"] {
    transform: scale(0.95);
}

.reveal-fade,
[data-reveal="fade"] {
    transform: translateY(0);
}

/* Active Triggered States */
.reveal.active,
.reveal.is-visible,
.reveal-up.active,
.reveal-up.is-visible,
.reveal-down.active,
.reveal-down.is-visible,
.reveal-left.active,
.reveal-left.is-visible,
.reveal-right.active,
.reveal-right.is-visible,
.reveal-scale.active,
.reveal-scale.is-visible,
.reveal-fade.active,
.reveal-fade.is-visible,
.stagger-item.active,
.stagger-item.is-visible,
[data-reveal].active,
[data-reveal].is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(0, 0) scale(1) !important;
}

/* Guarantee visibility for children inside visible containers */
.is-visible *,
.active * {
    visibility: visible;
}

/* --------------------------------------------------------------------------
   6. FAQ ACCORDION SMOOTH TRANSITION
   -------------------------------------------------------------------------- */
.home-faq-accordion .accordion-button {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.home-faq-accordion .accordion-button::after {
    transition: transform 0.3s var(--anim-spring-subtle) !important;
}

.home-faq-accordion .accordion-collapse {
    transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease !important;
}

/* --------------------------------------------------------------------------
   7. PARALLAX & VELOCITY-DRIVEN SCROLL ENGINE
   -------------------------------------------------------------------------- */
.vth-hero-bg-img,
.parallax-bg {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* --------------------------------------------------------------------------
   8. MOBILE RESPONSIVENESS & TOUCH OPTIMIZATIONS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    @keyframes premiumTextFloat {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-2px); }
    }

    @keyframes premiumCardFloat {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-2.5px); }
    }

    @keyframes premiumImageFloat {
        0%, 100% { transform: translateY(0px) scale(1); }
        50% { transform: translateY(-2px) scale(1); }
    }

    @keyframes premiumIconFloat {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-1.5px); }
    }

    .reveal-left,
    .reveal-right,
    [data-reveal="left"],
    [data-reveal="right"] {
        transform: translateY(18px) !important;
    }

    .reveal,
    .reveal-up,
    .reveal-down,
    [data-reveal="up"],
    [data-reveal="down"] {
        transform: translateY(16px);
    }

    /* Mobile Touch Swipe Snap for Card Grids */
    .touch-swipe-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 12px;
    }

    .touch-swipe-grid > * {
        scroll-snap-align: center;
        flex: 0 0 85%;
    }
}

/* --------------------------------------------------------------------------
   9. ACCESSIBILITY (PREFERS REDUCED MOTION)
   -------------------------------------------------------------------------- */
@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;
    }

    .float-text,
    .vth-eyebrow,
    .vth-hero-script,
    .float-title,
    .float-card,
    .vth-fleet-card,
    .service-card-item,
    .destination-card,
    .place-card-ref,
    .hero-mini-card,
    .float-image,
    .destination-image,
    .place-card-img,
    .float-icon,
    .mini-icon-box {
        animation: none !important;
        transform: none !important;
    }

    .reveal,
    .reveal-up,
    .reveal-down,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-fade,
    .stagger-item,
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}