/* ──────────────────────────────────────────────────────────────
   ff-chrome.css
   Shared site chrome for finalfinal.xyz public pages:
     · cursor suppression (system cursor hidden on desktop,
       restored on touch/coarse-pointer devices)
     · top bar + FFF logo block
     · nav links, hamburger
     · menu overlay (with Lottie hooks)
     · bottom bar
     · #custom-cursor element

   CSS variables expected from the host page:
     --nav-color (default #000000)
     --bg-color  (default #ffffff)

   Per-page content layout (page-content padding, hero, gallery,
   showcase, marquee, imprint, etc.) stays in each page's own
   <style> block — only the chrome lives here.
   ────────────────────────────────────────────────────────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body, *, *::before, *::after, a, a:hover, a:active, a:focus, button, input, textarea, select, li, img, video, svg, canvas, iframe { cursor: none !important; }
@media (pointer: coarse), (hover: none) {
    html, body, *, *::before, *::after, a, a:hover, a:active, a:focus, button, input, textarea, select, li, img, video, svg, canvas, iframe { cursor: auto !important; }
    a, button, .hamburger, #menu-close-wrap { cursor: pointer !important; }
    #custom-cursor { display: none !important; }
}

html, body { background-color: var(--bg-color); color: var(--nav-color); min-height: 100%; }

/* ── TOP BAR ── */
#top-bar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; display: flex; flex-direction: column; opacity: 0; transition: opacity 0.4s ease; }
.top-content { display: flex; align-items: center; padding: 12px 24px; background: rgba(255,255,255,0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: background 0.4s ease; position: relative; }
.top-border { width: 100%; height: 1px; background: var(--nav-color); transition: background 0.4s ease; }
#ff-animation { display: inline-flex; align-items: center; margin-left: 24px; overflow: hidden; white-space: nowrap; position: relative; }
#ff-animation a { text-decoration: none; color: inherit; cursor: none; }
/* Keep these sizes in lockstep with finalfinal.ai + finalfinal.ooo
   — the FFF logo block must look identical across all three sites. */
#ff-text { font-family: 'FFFOVERDRIVE', sans-serif; color: var(--nav-color); font-size: 200px; line-height: 1; font-variation-settings: 'wdth' 21; white-space: nowrap; display: inline-block; transition: color 0.4s ease; }
@media (max-width: 768px) { #ff-text { font-size: 160px; } #ff-animation { margin-left: 16px; } }

.studio-name { font-family: 'FFMonoVF', 'FFMono', monospace; font-size: 10pt; color: var(--nav-color); text-decoration: none; letter-spacing: 0.02em; font-variation-settings: 'wght' 90; transition: color 0.4s ease, font-variation-settings 0.3s ease; cursor: none; position: relative; z-index: 1; }
.studio-name:hover { font-variation-settings: 'wght' 155; }
.nav-left, .nav-right { display: flex; align-items: center; gap: 24px; }
.nav-left { margin-left: 24px; }
.nav-right { margin-left: auto; }
.nav-left a, .nav-right a { font-family: 'FFMonoVF', 'FFMono', monospace; font-size: 10pt; color: var(--nav-color); text-decoration: none; letter-spacing: 0.02em; font-variation-settings: 'wght' 90; transition: color 0.4s ease, font-variation-settings 0.3s ease; cursor: none; position: relative; z-index: 1; }
.nav-left a:hover, .nav-right a:hover { font-variation-settings: 'wght' 155; }

/* Hover-only nav effects — the bar-hl pill, fc-hover invert, and wght-pulse
   animation only apply on hover-capable devices, so they never stick after a
   tap on touch devices. */
@media (hover: hover) and (pointer: fine) {
    /* Bar highlight pill (placed by ff-cursor.js into .top-content / .bottom-content
       on init). Sits BEHIND the link text inside the bar's stacking context — so
       the inverted link sits above it cleanly without fighting the #top-bar's
       stacking context. */
    .bar-hl {
        position: absolute;
        top: 0; left: 0;
        width: 0; height: 100%;
        background: var(--nav-color);
        pointer-events: none;
        opacity: 0;
        z-index: 0;
        transition: left 0.25s cubic-bezier(0.23,1,0.32,1),
                    width 0.25s cubic-bezier(0.23,1,0.32,1),
                    opacity 0.15s ease;
    }
    .bar-hl.active { opacity: 1; }
    /* Extend each bar nav link's hit area to match the visible .bar-hl pill —
       12px each side horizontally + full bar height vertically. The link's
       natural box is unchanged (no layout reflow), but ::before catches mouse
       events in the extended region so hover/click fire on the link anywhere
       inside the pill. */
    .nav-left a::before, .nav-right a::before,
    .studio-name::before,
    .bottom-links a::before {
        content: '';
        position: absolute;
        top: -12px; bottom: -12px;
        left: -12px; right: -12px;
    }
    .studio-name.fc-hover { color: var(--bg-color); animation: nav-wght-pulse 1s ease-in-out infinite; }
    .nav-left a.fc-hover, .nav-right a.fc-hover { color: var(--bg-color); animation: nav-wght-pulse 1s ease-in-out infinite; }
    .bottom-links a.fc-hover { color: var(--bg-color); animation: nav-wght-pulse 1s ease-in-out infinite; }
    /* Pulsing weight on hovered bar nav links — variable-font wght axis
       oscillates 30 ↔ 200. Animations override declared values per the CSS
       cascade, so this wins over the static :hover wght rule above. */
    @keyframes nav-wght-pulse {
        0%, 100% { font-variation-settings: 'wght' 30; }
        50% { font-variation-settings: 'wght' 200; }
    }
    @media (prefers-reduced-motion: reduce) {
        .nav-left a.fc-hover, .nav-right a.fc-hover,
        .studio-name.fc-hover,
        .bottom-links a.fc-hover { animation: none; font-variation-settings: 'wght' 155; }
    }
}

/* ── HAMBURGER ── */
.hamburger {
    background: none; border: none; cursor: none; padding: 4px;
    display: none; flex-direction: column; gap: 3px;
    width: 28px; margin-left: auto;
}
.ham-line { display: block; width: 100%; height: 4px; overflow: visible; }
@media (max-width: 768px) {
    .nav-left, .nav-right { display: none; }
    .hamburger { display: flex; }
}

/* ── MENU OVERLAY ── */
#menu-overlay {
    /* Fullscreen via 100dvh — height:100% / pinned top+bottom under-fill
       or collapse on iOS Safari, leaving a strip of the page showing.
       100dvh fills the visible screen; 100vh is the older-browser
       fallback. */
    position: fixed; top: 0; left: 0; width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 2000; display: none; flex-direction: column;
    justify-content: space-between;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    padding: 0; box-sizing: border-box;
}
#menu-overlay-logo {
    padding: calc(24px + env(safe-area-inset-top)) 0 0 calc(24px + env(safe-area-inset-left));
    width: 100%; box-sizing: border-box;
    display: flex; justify-content: flex-start; align-items: flex-start;
}
.menu-ff-lottie { width: 320px; height: 136px; cursor: none; overflow: hidden; }
.menu-ff-lottie svg { display: block; width: 100%; height: 100%; margin-left: -44px; }
.menu-ff-lottie svg path, .menu-ff-lottie svg * { fill: var(--nav-color) !important; stroke: var(--nav-color) !important; }
#menu-overlay.open { display: flex; }
#menu-close-lottie { width: 50px; height: 44px; }
#menu-close-wrap {
    position: absolute;
    top: calc(24px + env(safe-area-inset-top));
    right: calc(24px + env(safe-area-inset-right));
    width: 50px; height: 44px;
    z-index: 2100; cursor: pointer;
}
#menu-close-lottie svg path, #menu-close-lottie svg * { fill: var(--nav-color) !important; stroke: var(--nav-color) !important; }
#menu-overlay nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    width: 100%; box-sizing: border-box; padding: 0 24px;
    flex: 1; justify-content: center;
}
#menu-overlay nav a {
    font-family: 'FFMonoVF', 'FFMono', monospace;
    font-size: 22px; color: var(--nav-color); text-decoration: none;
    cursor: none; line-height: 1.2;
    font-variation-settings: 'wght' 90;
}
#menu-overlay nav a.nav-primary { font-size: 50px; font-variation-settings: 'wght' 30; }
#menu-overlay nav a.nav-tiny { font-variation-settings: 'wght' 90; }
#menu-overlay .menu-divider {
    width: 100vw; height: 1px; background: var(--nav-color);
    margin: 12px 0; margin-left: -24px;
}
#menu-overlay .menu-bottom {
    padding: 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    padding-left: calc(24px + env(safe-area-inset-left));
    padding-right: calc(24px + env(safe-area-inset-right));
    width: 100%; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 8px;
}
#menu-overlay .menu-contact { font-family: 'FFMono', monospace; font-size: 10pt; color: var(--nav-color); line-height: 1.6; letter-spacing: 0.02em; }
#menu-overlay .menu-contact a { font-size: 10pt; color: var(--nav-color); text-decoration: none; }
@media (max-width: 768px) { #menu-overlay nav a { font-size: 18px; } #menu-overlay nav a.nav-primary { font-size: 42px; } }

/* ── BOTTOM BAR ── */
#bottom-bar { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; display: flex; flex-direction: column; opacity: 0; transition: opacity 0.4s ease; }
.bottom-border { width: 100%; height: 1px; background: var(--nav-color); transition: background 0.4s ease; }
.bottom-content { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: rgba(255,255,255,0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: relative; }
.bottom-links { display: flex; gap: 24px; }
.bottom-links a { font-family: 'FFMonoVF', 'FFMono', monospace; font-size: 10pt; color: var(--nav-color); text-decoration: none; letter-spacing: 0.02em; font-variation-settings: 'wght' 90; transition: color 0.4s ease, font-variation-settings 0.3s ease; cursor: none; position: relative; z-index: 1; }
.bottom-links a:hover { font-variation-settings: 'wght' 155; }
@media (max-width: 768px) { .bottom-links { display: none; } }

/* ── iOS SAFE-AREA (notch / home indicator) ──
   The viewport meta uses viewport-fit=cover so the page fills the
   whole screen edge-to-edge. Without compensating padding the fixed
   bars would sit under the notch / home indicator and their content
   would be clipped, while the strips around them showed the raw page
   background as black/white bars. Padding the bars by the safe-area
   insets makes their (blurred) background fill those strips while the
   content stays in the safe zone — one continuous bar, no separate
   band. env() resolves to 0 on devices without insets (desktop,
   non-notch phones), so those layouts are unchanged. */
.top-content {
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-left: calc(24px + env(safe-area-inset-left));
    padding-right: calc(24px + env(safe-area-inset-right));
}
.bottom-content {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    padding-left: calc(24px + env(safe-area-inset-left));
    padding-right: calc(24px + env(safe-area-inset-right));
}

/* ── MOBILE: bars-free header ──
   Drop the bottom bar entirely and strip the top bar down to just the
   hamburger. The FFF logo rises into the space the top bar used to
   occupy (sits just below the notch). The hamburger floats in its
   original top-right spot. !important so these win over the per-page
   pages/*.css mobile rules loaded after this file. */
@media (max-width: 768px) {
    #bottom-bar { display: none !important; }
    .top-content {
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
        border: none !important;
    }
    .top-border { display: none !important; }
    .studio-name { display: none !important; }
    .hamburger {
        position: fixed !important;
        top: calc(12px + env(safe-area-inset-top)) !important;
        right: calc(24px + env(safe-area-inset-right)) !important;
        z-index: 1001 !important;
        display: flex !important;
    }
    /* Align the FFF logo's cap-top with the top of the hamburger lines
       (12px + 4px hamburger padding = 16px below the notch). The font
       sets USE_TYPO_METRICS, so the caps sit 0.1em below the text line
       box; translateY(-0.1em) cancels that gap so the visible letter
       tops — not the invisible line-box top — land on 16px. Works at
       any logo size because 0.1em scales with the font. */
    #ff-animation { padding-top: calc(16px + env(safe-area-inset-top)) !important; }
    #ff-text { transform: translateY(-0.1em); }
}

/* ── CUSTOM CURSOR ── */
/* Stacking when hovering a nav-bar link:
     z-index 1000: top-bar / bottom-bar with their glass background
     z-index 1001: #custom-cursor — filled black rectangle, full bar height
     z-index 1002: the link itself (text colour inverted to bg-color) — sits
                   above the cursor so it reads as white-on-black.
   For non-bar interactive elements the cursor still expands to wrap the
   element (with a small 4px pad); the invert + z-index push only applies
   to bar nav links and to selectors passed via initCursor's invertSel arg. */
#custom-cursor {
    position: fixed; width: 12px; height: 12px;
    background: var(--nav-color); pointer-events: none; z-index: 1001;
    transform: translate(-50%,-50%);
    transition: width 0.25s cubic-bezier(0.23,1,0.32,1),
                height 0.25s cubic-bezier(0.23,1,0.32,1),
                transform 0.25s cubic-bezier(0.23,1,0.32,1),
                opacity 0.15s ease;
}