/* ===================================
   Site-wide motion layer
   Page-load entrances are pure CSS (no flicker); scroll reveals are
   assigned by static/js/animations.js, which only hides elements that start
   below the fold. Everything is off under prefers-reduced-motion.
   Remove the <link>/<script> pair in base.html to turn the layer off.
   =================================== */
:root {
    --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-fast: 180ms;
    --motion-base: 260ms;
}

@media (prefers-reduced-motion: no-preference) {

    html { scroll-behavior: smooth; }

    /* ----- Page load ----- */
    @keyframes motionFadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes motionRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
    @keyframes motionDrop { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }

    .navbar.sticky-top { animation: motionDrop 0.6s var(--motion-ease-out) both; }
    main { animation: motionFadeIn 0.5s ease both; }

    /* Hero copy rises in, line by line (the home hero and About title
       already have their own entrance, so they're left alone) */
    .tour-hero-inner > *,
    .page-hero-content > *:not(.hero-load-up),
    .search-hero .container > *,
    .blog-hero > div > *,
    .vehicle-hero .container > * {
        animation: motionRise 0.75s var(--motion-ease-out) both;
    }
    .tour-hero-inner > :nth-child(2), .page-hero-content > :nth-child(2),
    .search-hero .container > :nth-child(2), .blog-hero > div > :nth-child(2),
    .vehicle-hero .container > :nth-child(2) { animation-delay: 0.1s; }
    .tour-hero-inner > :nth-child(3), .page-hero-content > :nth-child(3),
    .search-hero .container > :nth-child(3), .blog-hero > div > :nth-child(3),
    .vehicle-hero .container > :nth-child(3) { animation-delay: 0.2s; }
    .tour-hero-inner > :nth-child(n+4), .page-hero-content > :nth-child(n+4),
    .search-hero .container > :nth-child(n+4), .blog-hero > div > :nth-child(n+4),
    .vehicle-hero .container > :nth-child(n+4) { animation-delay: 0.3s; }

    /* ----- Scroll reveal (classes added by animations.js) ----- */
    .motion-reveal {
        opacity: 0;
        transform: translateY(28px);
        transition:
            opacity 0.7s var(--motion-ease),
            transform 0.7s var(--motion-ease);
        transition-delay: var(--motion-delay, 0ms);
    }
    .motion-reveal.motion-in { opacity: 1; transform: none; }

    /* ----- Navigation ----- */
    .navbar-light .navbar-nav .nav-link:not(.dropdown-toggle) { position: relative; }
    .navbar-light .navbar-nav .nav-link:not(.dropdown-toggle)::after {
        content: '';
        position: absolute;
        left: 14px; right: 14px; bottom: 2px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--secondary-color, #0174CD), var(--primary-color, #019524));
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--motion-base) var(--motion-ease);
    }
    .navbar-light .navbar-nav .nav-link:not(.dropdown-toggle):hover::after,
    .navbar-light .navbar-nav .nav-link.active::after { transform: scaleX(1); }
    @media (min-width: 1200px) and (max-width: 1399.98px) {
        .navbar-light .navbar-nav .nav-link:not(.dropdown-toggle)::after { left: 9px; right: 9px; }
    }

    /* ----- Dropdown menus: frosted panel that springs open from its
       toggle, items cascading in, a sliding brand-tinted highlight ----- */
    @keyframes motionMenuIn {
        0%   { opacity: 0; transform: translateY(-8px) scale(0.94); filter: blur(6px); }
        60%  { opacity: 1; filter: blur(0); }
        100% { opacity: 1; transform: none; filter: none; }
    }
    @keyframes motionItemIn {
        from { opacity: 0; transform: translateX(-10px); }
        to   { opacity: 1; transform: none; }
    }
    .navbar .dropdown-menu.show {
        transform-origin: top center;
        animation: motionMenuIn 0.42s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    }
    .navbar .dropdown-menu.show > li { animation: motionItemIn 0.34s var(--motion-ease-out) both; }
    .navbar .dropdown-menu.show > li:nth-child(1) { animation-delay: 0.06s; }
    .navbar .dropdown-menu.show > li:nth-child(2) { animation-delay: 0.10s; }
    .navbar .dropdown-menu.show > li:nth-child(3) { animation-delay: 0.14s; }
    .navbar .dropdown-menu.show > li:nth-child(4) { animation-delay: 0.18s; }
    .navbar .dropdown-menu.show > li:nth-child(5) { animation-delay: 0.22s; }
    .navbar .dropdown-menu.show > li:nth-child(n+6) { animation-delay: 0.26s; }

    .navbar .dropdown-item {
        position: relative;
        transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-base) var(--motion-ease);
    }
    .navbar .dropdown-item::before {
        content: '';
        position: absolute;
        left: 6px; top: 50%;
        width: 3px; height: 0;
        border-radius: 3px;
        background: linear-gradient(180deg, var(--secondary-color, #0174CD), var(--primary-color, #019524));
        transform: translateY(-50%);
        transition: height var(--motion-base) var(--motion-ease);
    }
    .navbar .dropdown-item:hover,
    .navbar .dropdown-item:focus-visible {
        transform: translateX(4px);
    }
    .navbar .dropdown-item:hover::before,
    .navbar .dropdown-item:focus-visible::before { height: 60%; }

    /* Toggle caret flips while its menu is open */
    .navbar .dropdown-toggle::after { transition: transform var(--motion-base) var(--motion-ease); }
    .navbar .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

    /* ----- Buttons: a small lift, never a layout shift ----- */
    .btn,
    .btn-view-trek,
    .btn-search-trips,
    .pd-subnav-btn,
    .btn-view-gallery {
        transition:
            transform var(--motion-fast) var(--motion-ease),
            box-shadow var(--motion-base) var(--motion-ease),
            background-color var(--motion-fast) ease,
            border-color var(--motion-fast) ease,
            color var(--motion-fast) ease;
    }
    .btn:not(:disabled):not(.disabled):not(.btn-link):not(.input-group .btn):hover,
    .btn-search-trips:hover,
    .pd-subnav-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(16, 26, 52, 0.14);
    }
    .btn:not(:disabled):not(.disabled):active,
    .btn-search-trips:active,
    .pd-subnav-btn:active { transform: translateY(0); box-shadow: none; }

    /* ----- Clickable cards lift ----- */
    a.card,
    .card:has(> a:not(.btn)),
    .card:has(.card-img-top),
    .related-card {
        transition: transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease);
    }
    a.card:hover,
    .card:has(> a:not(.btn)):hover,
    .card:has(.card-img-top):hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(16, 26, 52, 0.12);
    }
    .card:has(.card-img-top) { overflow: hidden; }
    .card-img-top { transition: transform 0.5s var(--motion-ease); }
    .card:has(.card-img-top):hover .card-img-top { transform: scale(1.05); }

    /* Icons inside buttons nudge toward where they lead */
    .btn-view-trek i,
    .btn .fa-arrow-right,
    .btn .fa-chevron-right { transition: transform var(--motion-base) var(--motion-ease); }
    .btn-view-trek:hover i,
    .btn:hover .fa-arrow-right,
    .btn:hover .fa-chevron-right { transform: translateX(3px); }

    /* Floating buttons pop in */
    @keyframes motionPop { 0% { opacity: 0; transform: scale(0.6); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
    .whatsapp-float { animation: motionPop 0.5s var(--motion-ease-out) 0.8s both; }
}

/* ----- Dropdown panel look (static styling, motion-independent) ----- */
.navbar .dropdown-menu {
    padding: 8px;
    border-radius: 14px !important;
    border: 1px solid rgba(16, 26, 52, 0.06) !important;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(170%) blur(14px);
    backdrop-filter: saturate(170%) blur(14px);
    box-shadow: 0 2px 6px rgba(16, 26, 52, 0.06), 0 18px 40px rgba(16, 26, 52, 0.14) !important;
    min-width: 13rem;
}
.navbar .dropdown-item {
    border-radius: 9px;
    padding: 9px 14px 9px 18px;
    font-size: 0.9rem;
    font-weight: 500;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: linear-gradient(90deg, #E8F2FC, rgba(232, 242, 252, 0.35));
    color: var(--secondary-dark, #045A9E);
}

/* ----- Reading progress bar (element created by animations.js) ----- */
.motion-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 1100;
    pointer-events: none;
    background: linear-gradient(90deg, var(--secondary-color, #0174CD), var(--primary-color, #019524));
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .motion-progress { display: none; }
}