/* ==========================================================================
   RACHYET - NAVBAR MOTION LAYER
   Loaded after navbar.css. Adds the entrance choreography, the floating glass
   bar, cursor light, direction-aware menu switching, the circular mobile
   drawer reveal, tap ripples and swipe-to-close (behaviour in navbar-motion.js).
   Everything here is skipped for visitors who prefer reduced motion.
   ========================================================================== */

/* Stagger index for the top-level items (used by several effects below) */
.navbar-nav > .nav-item:nth-child(1) { --i: 0; }
.navbar-nav > .nav-item:nth-child(2) { --i: 1; }
.navbar-nav > .nav-item:nth-child(3) { --i: 2; }
.navbar-nav > .nav-item:nth-child(4) { --i: 3; }
.navbar-nav > .nav-item:nth-child(5) { --i: 4; }
.navbar-nav > .nav-item:nth-child(6) { --i: 5; }
.navbar-nav > .nav-item:nth-child(7) { --i: 6; }
.navbar-nav > .nav-item:nth-child(n+8) { --i: 7; }

/* Robustness: if the menu opens while the bar is still sliding back in, drop the
   transform at once — any transform on .navbar would trap the fixed drawer. */
.navbar.menu-open { transform: none; transition: padding 0.35s var(--ease-premium); }

/* Bug fix: a collapsed About / Why us section on mobile kept its card padding
   and border, leaving an empty sliver under the row. */
@media (max-width: 1024px) {
    .mega-about-inner {
        transition: padding 0.4s var(--ease-premium), margin 0.4s var(--ease-premium), border-width 0.4s var(--ease-premium);
    }
    .has-dropdown:not(.dropdown-open) .mega-about-inner {
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
        border-width: 0;
    }
}

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

    /* ---------------------------------------------------------------
       1. ENTRANCE (first page of a visit; html.nav-intro set in <head>)
    --------------------------------------------------------------- */
    html.nav-intro .navbar::before { animation: nmBarIn 0.9s var(--ease-premium) backwards; }
    html.nav-intro .navbar-brand { animation: nmRise 0.8s var(--ease-premium) 0.15s backwards; }
    html.nav-intro .navbar-brand::after { animation: nmLogoSheen 1.3s ease 0.75s; }
    html.nav-intro .mobile-toggle { animation: nmPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards; }

    @keyframes nmBarIn { from { transform: translateY(-100%); opacity: 0; } }
    @keyframes nmRise { from { opacity: 0; transform: translateY(-10px); filter: blur(6px); } }
    @keyframes nmPop { from { opacity: 0; transform: scale(0.82); filter: blur(4px); } }
    @keyframes nmPillIn { from { opacity: 0; transform: scaleX(0.9); filter: blur(4px); } }

    /* ---------------------------------------------------------------
       2. LOGO light sweep
    --------------------------------------------------------------- */
    .navbar-brand { position: relative; isolation: isolate; overflow: hidden; border-radius: 10px; }
    .navbar-brand::after {
        content: '';
        position: absolute;
        top: -30%;
        bottom: -30%;
        left: -45%;
        width: 32%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.95), transparent);
        transform: skewX(-20deg);
        mix-blend-mode: soft-light;
        pointer-events: none;
        opacity: 0;
    }
    .navbar-brand:hover::after { animation: nmLogoSheen 1s ease; }
    @keyframes nmLogoSheen {
        0% { left: -45%; opacity: 1; }
        100% { left: 130%; opacity: 1; }
    }

    /* ---------------------------------------------------------------
       3. CTA: idle shimmer every few seconds + tap ripple
    --------------------------------------------------------------- */
    .btn-navbar-cta::before { animation: nmIdleShimmer 7s ease-in-out 2.5s infinite; }
    @keyframes nmIdleShimmer {
        0% { left: -75%; }
        16%, 100% { left: 130%; }
    }

    /* ---------------------------------------------------------------
       4. TAP RIPPLE (hosts get .nm-ripple-host from navbar-motion.js)
    --------------------------------------------------------------- */
    .nm-ripple-host { position: relative; overflow: hidden; isolation: isolate; }
    .nm-ripple {
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        pointer-events: none;
        background: currentColor;
        opacity: 0.16;
        transform: scale(0);
        animation: nmRipple 0.65s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    }
    .btn-navbar-cta .nm-ripple,
    .maf-cta .nm-ripple,
    .ms-expert .nm-ripple { z-index: 0; background: #ffffff; opacity: 0.3; }
    @keyframes nmRipple { to { transform: scale(1); opacity: 0; } }
}

/* ===================================================================
   DESKTOP (≥1025px)
=================================================================== */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {

    /* Entrance: pill unfolds, links rise one by one, then search and CTA */
    html.nav-intro .navbar-nav-container { animation: nmPillIn 0.9s var(--ease-premium) 0.2s backwards; }
    html.nav-intro .navbar-nav > .nav-item { animation: nmRise 0.7s var(--ease-premium) backwards; animation-delay: calc(0.32s + var(--i) * 0.06s); }
    html.nav-intro .nav-search-btn { animation: nmPop 0.7s var(--ease-premium) 0.7s backwards; }
    html.nav-intro .navbar-right > .btn-navbar-cta {
        animation: nmPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s backwards, navCtaFlow 6s ease-in-out infinite alternate;
    }

    /* Floating glass capsule once the page scrolls */
    .navbar.scrolled { padding: 0.75rem 0; }
    .navbar::before {
        transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease,
            top 0.5s var(--ease-premium), bottom 0.5s var(--ease-premium),
            left 0.5s var(--ease-premium), right 0.5s var(--ease-premium), border-radius 0.5s var(--ease-premium);
    }
    .navbar.scrolled::before {
        top: 6px;
        bottom: 6px;
        left: max(10px, calc(50% - 664px));
        right: max(10px, calc(50% - 664px));
        border-radius: 22px;
        border: 1px solid rgba(31, 39, 184, 0.09);
        background: rgba(255, 255, 255, 0.84);
        box-shadow: 0 18px 40px -18px rgba(21, 31, 85, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    .nav-progress { transition: left 0.5s var(--ease-premium), right 0.5s var(--ease-premium), bottom 0.5s var(--ease-premium); }
    .navbar.scrolled .nav-progress {
        left: calc(max(10px, calc(50% - 664px)) + 22px);
        right: calc(max(10px, calc(50% - 664px)) + 22px);
        bottom: 6px;
    }

    /* Active page underline: flowing spectrum that stretches on hover */
    .nav-link.active::after {
        background: linear-gradient(90deg, var(--rc-azure), var(--rc-violet-light), var(--rc-orange), var(--rc-azure));
        background-size: 300% 100%;
        animation: nmFlow 4s linear infinite;
        transition: width 0.35s var(--ease-premium);
    }
    .nav-link.active:hover::after { width: 34px; }
    @keyframes nmFlow { to { background-position: 300% 0; } }

    /* Search shortcut key "presses" on hover */
    .nav-search-btn:hover .nav-search-kbd { animation: nmKeyPress 0.45s var(--ease-premium); }
    @keyframes nmKeyPress {
        40% { transform: translateY(1.5px); box-shadow: 0 0 0 rgba(21, 31, 85, 0); }
    }
}

/* Cursor light + glowing rim on the link pill, and direction-aware menus.
   Only for real mouse pointers (matches the existing premium layer). */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .navbar-nav-container::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        padding: 1px;
        pointer-events: none;
        background:
            radial-gradient(190px circle at var(--gx, 50%) var(--gy, 50%), rgba(123, 60, 245, 0.85), rgba(76, 198, 255, 0.35) 45%, transparent 72%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
        opacity: 0;
        transition: opacity 0.35s ease;
    }
    .navbar-nav-container::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        pointer-events: none;
        background: radial-gradient(150px circle at var(--gx, 50%) var(--gy, 50%), rgba(76, 198, 255, 0.2), rgba(123, 60, 245, 0.06) 50%, transparent 72%);
        opacity: 0;
        transition: opacity 0.35s ease;
    }
    .navbar-nav-container.nm-lit::after,
    .navbar-nav-container.nm-lit::before { opacity: 1; }

    /* Moving between About / Services / Why us: the open menu slides out the way
       you came and the next one slides in from the direction you're heading. */
    .navbar.dd-switch .mega-dropdown {
        transform: translateX(-50%);
        filter: none;
        transition: opacity 0.22s ease, translate 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.22s;
    }
    .navbar.dd-switch[data-dd-dir="next"] .mega-dropdown { translate: -80px 0; }
    .navbar.dd-switch[data-dd-dir="prev"] .mega-dropdown { translate: 80px 0; }
    .navbar.dd-switch .has-dropdown:hover .mega-dropdown,
    .navbar.dd-switch .has-dropdown:focus-within .mega-dropdown {
        transform: translateX(-50%);
        translate: 0 0;
        filter: none;
        transition: opacity 0.3s ease 0.04s, visibility 0s;
        animation: nmSlideFromNext 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }
    .navbar.dd-switch[data-dd-dir="prev"] .has-dropdown:hover .mega-dropdown,
    .navbar.dd-switch[data-dd-dir="prev"] .has-dropdown:focus-within .mega-dropdown { animation-name: nmSlideFromPrev; }
    @keyframes nmSlideFromNext { from { translate: 110px 0; } }
    @keyframes nmSlideFromPrev { from { translate: -110px 0; } }

    /* Services rail: the panel moves with you — down the list slides it up, and back */
    .ms-panels[data-dir="down"] .ms-panel:not(.is-active) { transform: translateY(-14px); }
    .ms-panels[data-dir="up"] .ms-panel:not(.is-active) { transform: translateY(14px); }
    .ms-panels[data-dir="down"] .ms-panel.is-active { animation: nmPanelFromBelow 0.5s var(--ease-premium) backwards; }
    .ms-panels[data-dir="up"] .ms-panel.is-active { animation: nmPanelFromAbove 0.5s var(--ease-premium) backwards; }
    @keyframes nmPanelFromBelow { from { opacity: 0; transform: translateY(20px); } }
    @keyframes nmPanelFromAbove { from { opacity: 0; transform: translateY(-20px); } }
}

/* ===================================================================
   PHONES & TABLETS (≤1024px)
=================================================================== */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {

    /* Floating glass capsule once the page scrolls */
    .navbar.scrolled { padding: 0.7rem 0; }
    .navbar .container { transition: padding 0.45s var(--ease-premium); }
    .navbar.scrolled .container { padding-left: 1.5rem; padding-right: 1.5rem; }
    .navbar::before {
        transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease,
            top 0.45s var(--ease-premium), bottom 0.45s var(--ease-premium),
            left 0.45s var(--ease-premium), right 0.45s var(--ease-premium), border-radius 0.45s var(--ease-premium);
    }
    .navbar.scrolled::before {
        top: 6px;
        bottom: 6px;
        left: 10px;
        right: 10px;
        border-radius: 18px;
        border: 1px solid rgba(31, 39, 184, 0.09);
        background: rgba(255, 255, 255, 0.86);
        box-shadow: 0 14px 32px -16px rgba(21, 31, 85, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    .nav-progress { transition: left 0.45s var(--ease-premium), right 0.45s var(--ease-premium), bottom 0.45s var(--ease-premium); }
    .navbar.scrolled .nav-progress { left: 26px; right: 26px; bottom: 6px; }

    /* Menu button: squeeze on tap, bars morph into an X while the drawer opens */
    .mobile-toggle { transition: background 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .mobile-toggle:active { transform: scale(0.88); }
    .mobile-toggle:hover .bar:nth-child(2) { width: 20px; }
    .navbar.menu-open .mobile-toggle .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .navbar.menu-open .mobile-toggle .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .navbar.menu-open .mobile-toggle .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* Drawer opens as a circle growing out of the menu button (origin set in JS) */
    .navbar-nav-container {
        transform: none;
        clip-path: circle(0px at var(--rv-x, calc(100% - 42px)) var(--rv-y, 32px));
        transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.25, 1), visibility 0s linear 0.55s;
        touch-action: pan-y;
    }
    .navbar-nav-container.mobile-open {
        transform: none;
        clip-path: circle(var(--rv-r, 150%) at var(--rv-x, calc(100% - 42px)) var(--rv-y, 32px));
        transition: clip-path 0.75s cubic-bezier(0.6, 0, 0.15, 1), visibility 0s;
    }
    .navbar-nav-container.nm-instant,
    .navbar-nav-container.nm-instant * { transition: none !important; }

    /* Drawer header: logo glides in, close button spins in, spectrum line draws across */
    .drawer-brand { opacity: 0; transform: translateX(-14px); transition: opacity 0.3s ease, transform 0.3s ease; }
    .mobile-open .drawer-brand { opacity: 1; transform: none; transition: opacity 0.5s ease 0.18s, transform 0.7s var(--ease-premium) 0.18s; }
    .drawer-close { opacity: 0; transform: rotate(-135deg) scale(0.5); transition: opacity 0.25s ease, transform 0.3s ease, background 0.25s ease; }
    .mobile-open .drawer-close {
        opacity: 1;
        transform: none;
        transition: opacity 0.4s ease 0.25s, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s, background 0.25s ease;
    }
    .mobile-open .drawer-close:hover { transform: rotate(90deg); transition-delay: 0s; }
    .drawer-header::after {
        background: linear-gradient(90deg, var(--rc-navy), var(--rc-blue), var(--rc-violet), var(--rc-pink), var(--rc-orange), var(--rc-blue));
        background-size: 200% 100%;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.3s ease;
    }
    .mobile-open .drawer-header::after {
        transform: scaleX(1);
        transition: transform 0.9s var(--ease-premium) 0.3s;
        animation: nmFlowLine 6s linear infinite;
    }
    @keyframes nmFlowLine { to { background-position: 200% 0; } }

    /* Links rise in one by one with a soft focus-pull; their icons pop */
    .navbar .navbar-nav > .nav-item {
        opacity: 0;
        transform: translateY(16px);
        filter: blur(3px);
        transition: opacity 0.25s ease, transform 0.3s ease, filter 0.25s ease;
        transition-delay: 0s;
    }
    .navbar .mobile-open .navbar-nav > .nav-item {
        opacity: 1;
        transform: none;
        filter: none;
        transition: opacity 0.5s ease, transform 0.75s var(--ease-premium), filter 0.5s ease;
        transition-delay: calc(0.2s + var(--i) * 0.05s);
    }
    .navbar .mobile-open .nav-link-icon {
        animation: nmIconPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
        animation-delay: calc(0.3s + var(--i) * 0.05s);
    }
    @keyframes nmIconPop { from { opacity: 0; transform: scale(0.4) rotate(-25deg); } }

    /* Footer: CTA and contact rise last; the CTA catches a light sweep */
    .drawer-footer > * { opacity: 0; transform: translateY(18px); transition: opacity 0.25s ease, transform 0.3s ease; }
    .mobile-open .drawer-footer > * { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.75s var(--ease-premium); }
    .mobile-open .drawer-footer > :nth-child(1) { transition-delay: 0.5s; }
    .mobile-open .drawer-footer > :nth-child(2) { transition-delay: 0.58s; }
    .mobile-open .drawer-cta::before { animation: navShimmer 1.1s ease 1s backwards, nmIdleShimmer 7s ease-in-out 4s infinite; }

    /* Accordions: springy arrows and every row staggered (any number of categories) */
    .has-dropdown .dropdown-arrow { transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, color 0.25s ease; }
    .has-dropdown.dropdown-open .dropdown-arrow { background: var(--rc-gradient-brand); color: #ffffff; }
    .category-toggle i { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .navbar .dropdown-open .mega-dropdown-category { animation-delay: calc(0.1s + var(--i, 0) * 0.045s); }
    .navbar .mega-dropdown-category.is-open .service-menu-link { animation-delay: calc(var(--i, 0) * 0.035s); }
    .navbar .dropdown-open .mega-about-feature,
    .navbar .dropdown-open .mm-hero { animation-name: nmCardIn; }
    @keyframes nmCardIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } }

    /* The drawer owns horizontal swipes while open: stop the browser's
       swipe-back gesture from navigating away mid-close. */
    html.nav-locked,
    html.nav-locked body { overscroll-behavior-x: none; }

    /* While a swipe-to-close drag is in progress */
    .navbar-nav-container.nm-dragging { transition: none; }
}