/**
 * NovaFolio – Navigation & Animation Polish
 * ------------------------------------------
 * Overrides loaded AFTER header.css and animations.css to refine
 * typography, transitions, and micro-interactions toward a quieter,
 * gallery-grade aesthetic (inspired by Artlogic / Gagosian / Pace).
 *
 * @since 1.7.0
 */

/* ============================================================
   1.  PRIMARY NAVIGATION  — Quieter, mixed-case, more elegant
   ============================================================ */

/* --- Typography ------------------------------------------------ */
.nova-primary-nav {
    font-size: .82rem;
    font-weight: 400;
    text-transform: none;              /* Remove aggressive uppercase */
    letter-spacing: .025em;            /* Much lighter tracking       */
    gap: 36px;                         /* Tighter but still airy      */
}

/* --- Link transitions ------------------------------------------ */
.nova-primary-nav > li > a {
    transition:
        color .35s cubic-bezier(.22, .61, .36, 1),
        opacity .35s cubic-bezier(.22, .61, .36, 1);
}

/* Remove the "jump up" hover — replace with subtle opacity shift */
.nova-primary-nav > li:hover > a {
    transform: none;
    opacity: .65;
}
.nova-primary-nav > li.current-menu-item > a,
.nova-primary-nav > li.current_page_item > a {
    opacity: 1;
}

/* --- Underline indicator --------------------------------------- */
.nova-primary-nav > li > a::after {
    height: 1.5px;                     /* Thinner line                */
    bottom: -4px;
    transition: width .4s cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   2.  DROPDOWN MENUS  — Cinematic open, snappy close
   ============================================================ */

/* Hover bridge: invisible zone bridging the 26px gap between parent link and dropdown */
.nova-primary-nav > li:not(.nvf-mm) > ul::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 30px;        /* slightly larger than the 26px gap */
    pointer-events: auto;
}

.nova-primary-nav > li:not(.nvf-mm) ul {
    border-radius: var(--nvf-submenu-radius, 10px);
    box-shadow: 0 12px 40px rgba(15, 23, 42, .10),
                0  2px  8px rgba(15, 23, 42, .04);
    backdrop-filter: blur(12px);
    /* Resting / closed: shifted down + slightly scaled  */
    transform: translateY(6px) scale(.97);
    /* Leave → close: quick snap-back (accelerate-out)    */
    transition:
        opacity .15s cubic-bezier(.4, 0, 1, 1),
        transform .15s cubic-bezier(.4, 0, 1, 1),
        visibility 0s linear .15s;
}

/* Enter → open: cinematic overshoot entrance             */
.nova-primary-nav > li:not(.nvf-mm):hover > ul,
.nova-primary-nav > li:not(.nvf-mm):focus-within > ul {
    transform: translateY(0) scale(1);
    transition:
        opacity .28s cubic-bezier(.16, 1, .3, 1),
        transform .28s cubic-bezier(.16, 1, .3, 1),
        visibility 0s;
}

/* --- Item stagger ------------------------------------------ */
@keyframes nvf-sub-item-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.nova-primary-nav > li:not(.nvf-mm):is(:hover, :focus-within) > ul > li {
    animation: nvf-sub-item-in .22s cubic-bezier(.16, 1, .3, 1) both;
}
.nova-primary-nav > li:not(.nvf-mm):is(:hover, :focus-within) > ul > li:nth-child(2) { animation-delay: .03s; }
.nova-primary-nav > li:not(.nvf-mm):is(:hover, :focus-within) > ul > li:nth-child(3) { animation-delay: .05s; }
.nova-primary-nav > li:not(.nvf-mm):is(:hover, :focus-within) > ul > li:nth-child(4) { animation-delay: .07s; }
.nova-primary-nav > li:not(.nvf-mm):is(:hover, :focus-within) > ul > li:nth-child(5) { animation-delay: .09s; }
.nova-primary-nav > li:not(.nvf-mm):is(:hover, :focus-within) > ul > li:nth-child(n+6) { animation-delay: .10s; }

/* Dropdown item links — cinematic easing                 */
.nova-primary-nav > li:not(.nvf-mm) ul li a {
    font-weight: 400;
    font-size: .8rem;
    letter-spacing: .01em;
    border-radius: 6px;
    position: relative;
    padding-left: 14px;
    transition:
        background .25s cubic-bezier(.16, 1, .3, 1),
        color .2s ease,
        padding-left .3s cubic-bezier(.25, .59, .29, .96);
}

/* Orbius-style animated line — appears from left on hover */
.nova-primary-nav > li:not(.nvf-mm) ul li a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    height: 1px;
    width: 0;
    background: currentColor;
    opacity: 0;
    transition:
        width .3s cubic-bezier(.25, .59, .29, .96),
        opacity .25s ease;
}

/* Active state: line + padding shift (Orbius signature) */
.nova-primary-nav > li:not(.nvf-mm) ul li a:hover::before,
.nova-primary-nav > li:not(.nvf-mm) ul li.current-menu-item > a::before,
.nova-primary-nav > li:not(.nvf-mm) ul li.current_page_item > a::before {
    width: 16px;
    opacity: 1;
}

.nova-primary-nav > li:not(.nvf-mm) ul li a:hover,
.nova-primary-nav > li:not(.nvf-mm) ul li.current-menu-item > a,
.nova-primary-nav > li:not(.nvf-mm) ul li.current_page_item > a {
    padding-left: 34px;
    background: var(--nvf-color-soft, #f3f4f6);
    color: var(--nvf-color-text, #111827);
}

/* ============================================================
   2b. MEGA-MENU  — Cinematic open, snappy close, column stagger
   ============================================================ */

/* Panel close: fast snap-back */
.nova-primary-nav > li.nvf-mm > ul.sub-menu.nvf-mm__panel {
    transition:
        opacity .15s cubic-bezier(.4, 0, 1, 1),
        transform .18s cubic-bezier(.4, 0, 1, 1),
        visibility 0s linear .15s;
}

/* Panel open: cinematic entrance */
body.nvf-mm-mode-hover .nova-primary-nav > li.nvf-mm:hover > ul.sub-menu.nvf-mm__panel,
body.nvf-mm-mode-hover .nova-primary-nav > li.nvf-mm:focus-within > ul.sub-menu.nvf-mm__panel,
.nova-primary-nav > li.nvf-mm.nvf-mm--open > ul.sub-menu.nvf-mm__panel {
    transition:
        opacity .3s cubic-bezier(.16, 1, .3, 1),
        transform .38s cubic-bezier(.16, 1, .3, 1),
        visibility 0s;
}

/* Overlay — silkier fade */
#nvf-mm-overlay {
    transition: opacity .3s cubic-bezier(.16, 1, .3, 1);
}

/* Mega-menu item links — cinematic color shift */
ul.sub-menu.nvf-mm__col-list a.nvf-mm__item-link {
    transition: color .25s cubic-bezier(.16, 1, .3, 1);
}

/* --- Column stagger ---------------------------------------- */
@keyframes nvf-mm-col-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

body.nvf-mm-mode-hover .nova-primary-nav > li.nvf-mm:is(:hover, :focus-within) > .nvf-mm__panel > .nvf-mm__col,
.nova-primary-nav > li.nvf-mm.nvf-mm--open > .nvf-mm__panel > .nvf-mm__col {
    animation: nvf-mm-col-in .3s cubic-bezier(.16, 1, .3, 1) both;
}
body.nvf-mm-mode-hover li.nvf-mm:is(:hover, :focus-within) > .nvf-mm__panel > .nvf-mm__col:nth-child(2),
li.nvf-mm.nvf-mm--open > .nvf-mm__panel > .nvf-mm__col:nth-child(2) {
    animation-delay: .05s;
}
body.nvf-mm-mode-hover li.nvf-mm:is(:hover, :focus-within) > .nvf-mm__panel > .nvf-mm__col:nth-child(3),
li.nvf-mm.nvf-mm--open > .nvf-mm__panel > .nvf-mm__col:nth-child(3) {
    animation-delay: .09s;
}
body.nvf-mm-mode-hover li.nvf-mm:is(:hover, :focus-within) > .nvf-mm__panel > .nvf-mm__col:nth-child(n+4),
li.nvf-mm.nvf-mm--open > .nvf-mm__panel > .nvf-mm__col:nth-child(n+4) {
    animation-delay: .12s;
}

/* ============================================================
   3.  BURGER / MOBILE OFF-CANVAS  — Smoother motion
   ============================================================ */

/* Burger button — remove jump hover */
.nova-burger-menu:hover {
    transform: none;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .10);
}

/* Off-canvas panel — galleria-style slide */
.nova-mobile-menu-wrap {
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.nova-mobile-overlay-bg {
    transition: opacity .35s ease;
}

/* Mobile nav links — lighter tracking to match desktop */
.nova-mobile-nav-list > li > a,
.nova-mobile-menu-wrap .nova-mobile-nav-list > li:not(.menu-item-has-children) > a,
.nova-mobile-menu-wrap .nova-mobile-nav-list > li.menu-item-has-children > .nvf-mobile-row > a {
    letter-spacing: .03em;
    font-weight: 400;
    text-transform: none;
}

/* Off-canvas social icons — remove jump */
.nova-offcanvas-social-icons .nvf-social-link--offcanvas:hover,
.nova-offcanvas-social-icons .nvf-social-link--offcanvas:focus-visible {
    transform: none;
}

/* ============================================================
   4.  SITE TITLE / BRANDING — Soften
   ============================================================ */

.nova-site-title {
    letter-spacing: .04em;
    text-transform: none;
    font-weight: 500;
}

/* ============================================================
   5.  HEADER BAR — Refined shadow & sticky transition
   ============================================================ */

#nova-header.header-main {
    box-shadow: 0 1px 0 rgba(15, 23, 42, .06);      /* Minimal line shadow */
    transition:
        box-shadow .35s ease,
        background-color .35s ease;
}
#nova-header.header-main.is-sticky {
    box-shadow: 0 1px 12px rgba(15, 23, 42, .07);    /* Subtle on scroll   */
}

/* ============================================================
   6.  SCROLL ANIMATIONS  — Reduced distance, refined easing
   ============================================================ */

[data-nvf-anim] {
    transition:
        opacity .7s cubic-bezier(.16, 1, .3, 1),
        transform .7s cubic-bezier(.16, 1, .3, 1);
}

/* Smaller translate distances for a quieter entrance */
[data-nvf-anim="fade-up"]   { transform: translateY(24px); }
[data-nvf-anim="fade-down"] { transform: translateY(-18px); }
[data-nvf-anim="fade-left"] { transform: translateX(24px); }
[data-nvf-anim="fade-right"]{ transform: translateX(-24px); }
[data-nvf-anim="scale-in"]  { transform: scale(.96); }
[data-nvf-anim="zoom-up"]   { transform: translateY(18px) scale(.97); }

/* ============================================================
   7.  PORTFOLIO CARD HOVER — Smoother overlay
   ============================================================ */

.nvf-core-card--portfolio .nvf-card-hover-label {
    transition:
        opacity .4s cubic-bezier(.22, .61, .36, 1),
        transform .4s cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   8.  GENERIC LINK TRANSITIONS — Site-wide grace
   ============================================================ */

#nova-header a {
    transition: color .3s cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   9.  REDUCED MOTION — Respect user preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    [data-nvf-anim] {
        transition-duration: 0.01ms !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .nova-mobile-menu-wrap,
    .nova-mobile-overlay-bg,
    .nova-primary-nav > li:not(.nvf-mm) ul,
    .nova-primary-nav > li.nvf-mm > ul.sub-menu.nvf-mm__panel,
    #nvf-mm-overlay,
    #nova-header.header-main {
        transition-duration: 0.01ms !important;
    }
    .nova-primary-nav > li:not(.nvf-mm):is(:hover, :focus-within) > ul > li,
    .nvf-mm__panel > .nvf-mm__col {
        animation: none !important;
    }
}