/* ==========================================================================
   NAVBAR MOTION LAYER (loaded after navbar.css)
   Floating rounded glass bar on scroll, frosted-glass hover pill, cursor light
   and glowing rim on the link capsule. Behaviour in js/navbar-motion.js.
   ========================================================================== */

/* ---------- Floating rounded glass bar once the page scrolls (desktop) ---------- */
@media (min-width: 1025px) {
    .navbar::before {
        transition: background .35s ease, box-shadow .35s ease, border-color .35s ease,
            top .5s var(--ease-premium), bottom .5s var(--ease-premium),
            left .5s var(--ease-premium), right .5s var(--ease-premium), border-radius .5s var(--ease-premium);
    }
    .navbar.scrolled { padding: .75rem 0; }
    .navbar.scrolled::before {
        top: 7px; bottom: 7px;
        left: max(12px, calc(50% - 680px));
        right: max(12px, calc(50% - 680px));
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, .7);
        background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(243,248,253,.84));
        backdrop-filter: blur(22px) saturate(190%);
        -webkit-backdrop-filter: blur(22px) saturate(190%);
        box-shadow: 0 20px 44px -20px rgba(11, 18, 32, .35), 0 0 0 1px rgba(30, 117, 176, .08), inset 0 1px 0 rgba(255,255,255,.95);
    }
    .navbar.scrolled .navbar-nav-container {
        background: rgba(255, 255, 255, .45);
        border-color: rgba(30, 117, 176, .14);
    }
}

/* ---------- Phones & tablets: solid full-width bar on scroll ----------
   A floating see-through pill let headings and the dark footer show around and through it. */
@media (max-width: 1024px) {
    .navbar.scrolled:not(.menu-open)::before { background: #fff; }
}

/* ---------- Frosted glass hover pill + cursor light (real mouse only) ---------- */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .nav-indicator {
        background: linear-gradient(135deg, rgba(79,207,255,.38), rgba(255,255,255,.5) 48%, rgba(155,199,59,.3));
        backdrop-filter: blur(14px) saturate(200%);
        -webkit-backdrop-filter: blur(14px) saturate(200%);
        border: 1px solid rgba(255, 255, 255, .95);
        box-shadow: 0 12px 26px -8px rgba(30, 143, 208, .55), 0 0 0 1px rgba(30, 143, 208, .22), inset 0 1px 0 #fff, inset 0 -10px 18px -10px rgba(30, 143, 208, .6);
    }
    /* capsule glows softly where the cursor is */
    .navbar-nav-container.nm-lit { box-shadow: 0 0 0 1px rgba(30,143,208,.12), 0 12px 32px -14px rgba(30,143,208,.55); }
    /* glass shine across the top of the pill */
    .nav-indicator::before {
        content: ''; position: absolute; left: 10%; right: 10%; top: 2px; height: 48%; border-radius: 999px; pointer-events: none;
        background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0));
    }
    .navbar-nav-container { transition: box-shadow .35s ease; }
    .navbar-nav-container:hover { box-shadow: 0 10px 30px -18px rgba(22, 80, 142, .5); }
    /* links lift a touch under the glass */
    .navbar-nav > .nav-item > .nav-link { transition: color .25s ease, transform .35s var(--ease-premium); }
    .navbar-nav > .nav-item:hover > .nav-link { transform: translateY(-1px); }

    /* Search and CTA get the same glass on hover */
    .nav-search-btn { transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease-premium); }
    .nav-search-btn:hover {
        background: rgba(255,255,255,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border-color: rgba(30, 143, 208, .3);
        box-shadow: 0 10px 24px -14px rgba(22, 80, 142, .5), inset 0 1px 0 #fff;
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar::before, .nav-indicator { transition: none !important; }
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .navbar-nav > .nav-item:hover > .nav-link { color: #16508E; }
}

/* ---------- Dropdown cards: same frosted glass on hover (Why Us, Join Us, Services menu) ---------- */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .mega-about-card, .ms-card { isolation: isolate; overflow: hidden; }
    .mega-about-card:hover, .mega-about-card:focus-visible,
    .ms-card:hover, .ms-card:focus-visible {
        background: linear-gradient(135deg, color-mix(in srgb, var(--card-color, var(--ms-color, #1E8FD0)) 16%, transparent), rgba(255,255,255,.6) 50%, rgba(155,199,59,.14)) !important;
        backdrop-filter: blur(14px) saturate(200%);
        -webkit-backdrop-filter: blur(14px) saturate(200%);
        border-color: rgba(255,255,255,.95) !important;
        box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--card-color, var(--ms-color, #1E8FD0)) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--card-color, var(--ms-color, #1E8FD0)) 22%, transparent), inset 0 1px 0 #fff, inset 0 -12px 22px -14px color-mix(in srgb, var(--card-color, var(--ms-color, #1E8FD0)) 55%, transparent) !important;
    }
    /* glass shine across the top */
    .mega-about-card::before {
        content: ''; position: absolute; z-index: -1; left: 6%; right: 6%; top: 2px; height: 42%; border-radius: 14px; pointer-events: none;
        background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0));
        opacity: 0; transition: opacity .3s ease;
    }
    .mega-about-card:hover::before, .mega-about-card:focus-visible::before { opacity: .55; }
    .mega-about-card:hover .mega-about-card-icon { position: relative; z-index: 1; }
}

/* ---------- Scroll progress: brighter line with the glowing dot in front ---------- */
.nav-progress { z-index: 5; height: 3px; }
.nav-progress-bar {
    background: linear-gradient(90deg, #22D3EE, #1E8FD0 22%, #7CD13B 50%, #FFC93C 75%, #FF8A1F);
    background-size: 100vw 100%;
    filter: saturate(1.35) brightness(1.12);
    box-shadow: 0 0 10px rgba(34, 211, 238, .55), 0 0 18px rgba(255, 170, 40, .35);
    border-radius: 0 3px 3px 0;
}
.nav-progress::after {
    z-index: 2;
    width: 12px; height: 12px; margin: -6px 0 0 -6px;
    background: #fff;
    border: 2px solid #FFB020;
    box-shadow: 0 0 0 4px rgba(255, 176, 32, .3), 0 0 16px 5px rgba(255, 176, 32, .75), 0 0 28px 8px rgba(34, 211, 238, .3);
}