/* ═══════════════════════════════════════════════════════════════════
   LUMAVISION — Shared Navigation System
   ═══════════════════════════════════════════════════════════════════
   Single source of truth for every page's nav bar, hamburger toggle,
   mobile overlay menu, scroll-lock, z-index layering, and shadow.

   USAGE
   ─────
   1.  <link rel="stylesheet" href="assets/css/nav.css">
   2.  <script src="assets/js/nav.js" defer></script>
   3.  Add a data-nav attribute on <body> to pick a mode:

       data-nav="fixed"        (default — sticks to viewport, shadow on)
       data-nav="scroll"       (rides with the page, shadow on)
       data-nav="mobile-only"  (no desktop nav; hamburger + overlay only)

   4.  Add class="z-cover-nav" to any section that should render
       ABOVE the nav on scroll (editorial, bio, films, etc.).

   HTML STRUCTURE (standardized across all pages)
   ─────
   <nav> … desktop links … </nav>
   <a class="logo" href="…"> … </a>
   <button class="nav-toggle" id="nav-toggle"> … </button>
   <div class="mobile-menu" id="mobile-menu"> … </div>

   Logo + hamburger live OUTSIDE <nav> so they sit in the root
   stacking context — no z-index nesting surprises.

   VARIABLES — override any of these per-page in a <style> block.
   ═══════════════════════════════════════════════════════════════════ */


/* ── Tokens ───────────────────────────────────────────────────────── */
:root {
    --nav-shadow-opacity: 0.25;
    --nav-shadow-height: 180px;
    --nav-logo-height: 20px;
    --nav-center: 2rem;           /* vertical midpoint of nav bar */
    --nav-padding-x: 5%;
    --nav-link-gap: 4.5rem;
    --nav-max-width: 1400px;
    --nav-font: "itc-avant-garde-gothic-pro", sans-serif;
    --nav-transition: 0.3s;

    /* Z-index ladder (ascending)
       ── Normal scroll ──────────────
       100  nav bar (desktop links)
       200  logo + hamburger
       ── Sections that cover nav ────
       300  .z-cover-nav sections
       ── Mobile menu open ──────────
       350  overlay backdrop
       400  logo + hamburger (boosted)
       ─────────────────────────────── */
    --z-nav: 100;
    --z-nav-controls: 200;
    --z-cover-nav: 300;
    --z-mobile-overlay: 350;
    --z-mobile-controls: 400;
}


/* ── Anchor offset — keeps jumped-to sections clear of the fixed nav ──
   Desktop sections already have generous top padding that clears the nav,
   so only mobile needs this offset. Cross-page anchor jumps (e.g.
   collections.html → index.html#about) and same-page smooth scroll
   both respect scroll-padding-top automatically. */
@media (max-width: 768px) {
    html {
        scroll-padding-top: 4rem;
    }
}

/* ── Base <nav> — desktop link bar ────────────────────────────────── */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.5rem var(--nav-padding-x);
    z-index: var(--z-nav);
    pointer-events: none;
}

nav a,
nav .logo {
    pointer-events: auto;
}

nav .container {
    max-width: var(--nav-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav ul {
    list-style: none;
    display: flex;
    gap: var(--nav-link-gap);
    align-items: center;
    margin: 0;
    padding: 0;
}

nav a {
    text-decoration: none;
    color: #ffffff;
    font-size: 0.9rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: var(--nav-font);
    font-weight: 500;
    opacity: 0.9;
    -webkit-font-smoothing: antialiased;
}

nav a:hover {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}


/* ── Shadow gradient behind nav ───────────────────────────────────── */
/* Mask: sharp at top, feathers to transparent */
nav::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--nav-shadow-height);
    z-index: -1;
    -webkit-mask-image: linear-gradient(to bottom,
        black 0%, black 15%,
        rgba(0,0,0,0.85) 30%, rgba(0,0,0,0.55) 50%,
        rgba(0,0,0,0.20) 70%, rgba(0,0,0,0.04) 88%,
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        black 0%, black 15%,
        rgba(0,0,0,0.85) 30%, rgba(0,0,0,0.55) 50%,
        rgba(0,0,0,0.20) 70%, rgba(0,0,0,0.04) 88%,
        transparent 100%);
}

/* Gradient fill — oklab with sRGB fallback */
nav::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--nav-shadow-height);
    z-index: -1;
    opacity: var(--nav-shadow-opacity);
    /* sRGB fallback */
    background: linear-gradient(to bottom,
        hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0.95) 12%,
        hsla(0,0%,0%,0.80) 25%, hsla(0,0%,0%,0.55) 42%,
        hsla(0,0%,0%,0.28) 60%, hsla(0,0%,0%,0.08) 78%,
        hsla(0,0%,0%,0.01) 92%, hsla(0,0%,0%,0) 100%);
    /* oklab — overrides when supported (no dark banding over video) */
    background: linear-gradient(in oklab to bottom,
        oklch(0% 0 0 / 1) 0%, oklch(0% 0 0 / 0.95) 12%,
        oklch(0% 0 0 / 0.80) 25%, oklch(0% 0 0 / 0.55) 42%,
        oklch(0% 0 0 / 0.28) 60%, oklch(0% 0 0 / 0.08) 78%,
        oklch(0% 0 0 / 0.01) 92%, oklch(0% 0 0 / 0) 100%);
}


/* ── Logo — fixed, left-aligned ───────────────────────────────────── */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    position: fixed;
    left: var(--nav-padding-x);
    top: var(--nav-center);
    transform: translateY(-50%);
    z-index: var(--z-nav-controls);
    pointer-events: auto;
    /* Exclude z-index from the global `a { transition: all }` —
       z-index must snap instantly for the mobile-open boost. */
    transition-property: opacity, color;
}

.logo img {
    height: var(--nav-logo-height);
    width: auto;
    display: block;
}


/* ── Hamburger toggle ─────────────────────────────────────────────── */
.nav-toggle {
    display: none;               /* shown at ≤768 px */
    position: fixed;
    top: var(--nav-center);
    right: var(--nav-padding-x);
    transform: translateY(-50%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    z-index: var(--z-nav-controls);
    padding: 4px;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    touch-action: manipulation;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background-color: #ffffff;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
    border-radius: 1px;
}

/* X close state — gap 5px + span 1.5px → offset 5.75px */
.nav-toggle.open span:nth-child(1) { transform: translateY( 5.75px) rotate( 45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-5.75px) rotate(-45deg); }


/* ── Mobile overlay menu ──────────────────────────────────────────── */
.mobile-menu {
    display: flex;
    position: fixed;
    inset: 0;
    background-color: rgba(14, 14, 15, 0.98);
    z-index: 190;                /* below logo/hamburger at 200 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    /* Tiny delay lets z-index recomposite before overlay appears */
    transition: opacity 0.45s ease 0.02s;
}

.mobile-menu.open {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 0;
}

.mobile-menu ul li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Staggered entrance animation */
.mobile-menu.open ul li:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: none; }
.mobile-menu.open ul li:nth-child(2) { transition-delay: 0.11s; opacity: 1; transform: none; }
.mobile-menu.open ul li:nth-child(3) { transition-delay: 0.17s; opacity: 1; transform: none; }
.mobile-menu.open ul li:nth-child(4) { transition-delay: 0.23s; opacity: 1; transform: none; }
.mobile-menu.open ul li:nth-child(5) { transition-delay: 0.29s; opacity: 1; transform: none; }
.mobile-menu.open ul li:nth-child(6) { transition-delay: 0.35s; opacity: 1; transform: none; }

.mobile-menu ul a {
    font-family: var(--nav-font);
    font-size: 1.4rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-light-primary, #e8e8e8);
    text-decoration: none;
    display: block;
    padding: 1.1rem 0;
    text-align: center;
    opacity: 0.85;
    transition: opacity 0.2s ease;
    -webkit-font-smoothing: antialiased;
    touch-action: manipulation;
}

.mobile-menu ul a:active {
    opacity: 1;
}

.mobile-menu ul li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}


/* ── Mobile-open z-index boost ────────────────────────────────────
   body.nav-open is toggled by nav.js. Lifts the entire mobile
   nav system above .z-cover-nav sections (300) ONLY while the
   menu is active, then drops back to normal on close.
   ─────────────────────────────────────────────────────────────── */
body.nav-open .mobile-menu { z-index: var(--z-mobile-overlay);  }
body.nav-open .logo        { z-index: var(--z-mobile-controls); }
body.nav-open .nav-toggle  { z-index: var(--z-mobile-controls); }

/* Scroll lock — overflow:hidden stops desktop scroll; touchmove is
   blocked in JS (passive:false) to stop iOS Safari background scroll.
   No position:fixed means no page-jump when the menu opens/closes. */
body.nav-open {
    overflow: hidden;
    touch-action: none;
}


/* ── Utility: section covers nav ──────────────────────────────────
   Add class="z-cover-nav" to any section that should render
   ABOVE the nav bar and its shadow on scroll.
   ─────────────────────────────────────────────────────────────── */
.z-cover-nav {
    position: relative;
    z-index: var(--z-cover-nav);
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    nav ul { gap: 2.5rem; }
}

@media (max-width: 768px) {
    /* Hide desktop links, show hamburger */
    nav ul,
    #nav-links       { display: none; }
    .nav-toggle       { display: flex; }

    /* Center logo on mobile */
    .logo {
        left: 50%;
        transform: translate(-50%, -50%);
    }
}


/* ═══════════════════════════════════════════════════════════════════
   NAV MODE: SCROLL
   ═══════════════════════════════════════════════════════════════════
   <body data-nav="scroll">

   Nav rides with the page instead of sticking to the viewport.
   position:relative keeps it in document flow so it pushes content
   below it down naturally (same behaviour as the old film-page.css).
   Logo + hamburger switch to absolute, positioned relative to the
   page's containing block (body).
   Used on: film pages.
   ═══════════════════════════════════════════════════════════════════ */

[data-nav="scroll"] nav {
    position: relative;
}

[data-nav="scroll"] .logo {
    position: absolute;
}

[data-nav="scroll"] .nav-toggle {
    position: absolute;
}


/* ═══════════════════════════════════════════════════════════════════
   NAV MODE: MOBILE-ONLY
   ═══════════════════════════════════════════════════════════════════
   <body data-nav="mobile-only">

   Desktop: nav + logo + hamburger are all hidden.
   The page provides its own desktop navigation (e.g. contact page
   logo bar). Mobile: hamburger + overlay appear normally.
   ═══════════════════════════════════════════════════════════════════ */

[data-nav="mobile-only"] nav,
[data-nav="mobile-only"] .logo,
[data-nav="mobile-only"] .nav-toggle {
    display: none;
}

@media (max-width: 768px) {
    [data-nav="mobile-only"] .nav-toggle {
        display: flex;
    }

    [data-nav="mobile-only"] .logo {
        display: flex;
    }

    /* Lighter shadow for pages that use this mode (contact, etc.) */
    [data-nav="mobile-only"] nav::after {
        --nav-shadow-opacity: 0.20;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   SHADOW VARIANT: OFF
   ═══════════════════════════════════════════════════════════════════
   Add data-nav-shadow="off" on <body> to hide the gradient.
   ═══════════════════════════════════════════════════════════════════ */

[data-nav-shadow="off"] nav::before,
[data-nav-shadow="off"] nav::after {
    display: none;
}