/* ================================================================
   STUDIO G — Shared Navigation  v8
   Source: all PSDs  |  Canvas: 1920 × 1080 px
   ================================================================ */

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

:root {
    --bg:   #121212;
    --fg:   #ffffff;
    --line: rgba(255, 255, 255, 0.65);
    --myriad: 'Myriad Pro', 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    background: var(--bg);
    overflow: hidden;
    color: var(--fg);
}

.ui {
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

/* ──────────────────────────────────────────────────────
   NAV TEXT  —  MyriadPro-Regular
   Size: 8mm @ 72ppi = 22.68px → 23px
   Tracking: 200 → letter-spacing: 0.2em
   Weight: 300 — Jost Light is a closer visual match
   to Myriad Pro Regular than Jost 400
────────────────────────────────────────────────────── */
.nav {
    position: absolute;
    font-family: var(--myriad);
    font-weight: 200;
    font-style: normal;
    font-size: clamp(10px, 1.182vw, 23px);
    letter-spacing: 0.2em;
    color: var(--fg);
    text-decoration: none;
    pointer-events: all;
    cursor: pointer;
    transition: transform 0.22s ease-out;
    animation: navFade 0.9s ease both;
}

/* ── Per-element hover: scale preserves each item's base transform ── */
.about-link:hover    { transform: translate(-50%, -50%) scale(1.07); }
.contact-link:hover  { transform: translate(-50%, 50%)  scale(1.07); }
.photography-link:hover { transform: rotate(180deg) scale(1.07); }
.watch-reel-link:hover  { transform: rotate(180deg) scale(1.07); }

/* ── About  —  PSD: X=914 Y=63 W=81 H=19            */
.about-link {
    top: 6.713%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.5s;
}

/* ── Contact  —  PSD: X=900 Y=998 W=107 H=18         */
.contact-link {
    bottom: 6.759%;
    left: 50%;
    transform: translate(-50%, 50%);
    animation-delay: 0.6s;
}

/* ── Photography  —  PSD: X=74 Y=377 W=24 H=178  ↑  */
.photography-link {
    left: 3.854%;
    top: 34.907%;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    animation-delay: 0.4s;
}

/* ── Watch Reels  —  PSD: X=1827 Y=382 W=19 H=167 ↑ */
.watch-reel-link {
    right: 3.854%;
    top: 35.370%;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    animation-delay: 0.45s;
}

/* ──────────────────────────────────────────────────────
   DECORATIVE LINES  —  PSD layer data
────────────────────────────────────────────────────── */
.deco {
    position: absolute;
    background: var(--line);
    pointer-events: none;
    animation: lineFade 1.2s ease both;
}

/* Line 1 copy 3  —  W108 X341 H4 Y70  */
.top-left-line {
    left:   17.760%;
    top:     6.667%;
    width:   5.625%;
    height:  1px;
    transform: translateY(-50%);
    animation-delay: 0.15s;
}

/* Line 1 copy  —  W3 X1835 H229 Y75   */
.right-tall-line {
    left:   95.651%;
    top:     6.944%;
    width:   1px;
    height: 21.204%;
    animation-delay: 0.25s;
}

/* ── Line 1 copy 6  ——  was the custom-scrollbar track ──
   Kept as a styleable element for any page that still uses it.
   On Photography + Watch Reels it is no longer rendered (the
   scrollbar was removed), so it stays hidden there via markup.
────────────────────────────────────────────────────── */
.extra-right-line {
    left:    92.161%;           /* 1769.5 / 1920  — PSD center X */
    top:     16.204%;           /* 175    / 1080  — grid top Y   */
    width:   1px;
    height:  67.407%;           /* (903-175) / 1080 = grid height */
    background: rgba(255, 255, 255, 0.18);
    animation-delay: 0.28s;
    position: absolute;
}

/* Line 1  —  W4 X84 H229 Y578   */
.left-short-line {
    left:    4.479%;
    top:    53.519%;
    width:   1px;
    height: 21.204%;
    animation-delay: 0.35s;
}

/* Line 1 copy 2  —  W109 X1660 H5 Y1003  */
.bottom-right-line {
    left:   86.458%;
    top:    93.102%;
    width:   5.677%;
    height:  1px;
    transform: translateY(-50%);
    animation-delay: 0.20s;
}

/* ─── Animations ─── */
@keyframes navFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes lineFade { from { opacity: 0; } to { opacity: 1; } }


/* ──────────────────────────────────────────────────────
   PAGE TRANSITIONS
   Body fades in on load (animation) and out on navigate
   (transitions.js adds .page-leaving class before href).
────────────────────────────────────────────────────── */
body {
    animation: pageIn 0.35s ease both;
}
body.page-leaving {
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
}
@keyframes pageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ──────────────────────────────────────────────────────
   ACTIVE PAGE INDICATOR
────────────────────────────────────────────────────── */
.nav[aria-current="page"] {
    font-weight: 300;
    cursor: default;
    pointer-events: none;
}

.about-link[aria-current="page"],
.contact-link[aria-current="page"] {
    position: absolute;
}
.about-link[aria-current="page"]::after,
.contact-link[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.55);
    bottom: -5px;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    /* Let the WHOLE document scroll on touch devices.
       Previously html stayed `overflow:hidden; height:100%` while only
       body was set to overflow:auto — that turns body into a fragile
       nested scroller that phones frequently refuse to scroll, so only
       the first rows of the grid were reachable. Releasing both lets
       the page grow with its content and scroll normally. */
    html, body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior-y: auto;
    }

    /* ── Show the FULL menu frame on every page (like desktop) ──
       The side labels and corner lines used to be hidden on mobile,
       which is why the menu lost its structure. They are restored
       here and pinned to the screen edges, OUTSIDE the content. */
    .nav { font-size: 11px; letter-spacing: 0.22em; }

    .photography-link,
    .watch-reel-link   { display: block; }
    .top-left-line,
    .right-tall-line,
    .left-short-line,
    .bottom-right-line { display: block; }
    .extra-right-line  { display: none; }   /* old scrollbar track stays gone */

    /* Keep the corner lines clear of the menu text. The side labels are
       vertically centred (~42–58%), so the side lines are moved into the
       upper / lower thirds. The horizontal corner lines already sit in
       empty corners away from the centred top/bottom labels. */
    .right-tall-line  { top: 10%; height: 15%; }
    .left-short-line  { top: 72%; height: 15%; }

    /* About — top centre. Vertically centred on 3.6% so its MIDDLE
       (not its top edge) sits at a known height the line can match. */
    .about-link {
        top: 3.6%; bottom: auto; left: 50%;
        transform: translate(-50%, -50%);
    }
    .about-link:hover { transform: translate(-50%, -50%) scale(1.07); }
    .about-link[aria-current="page"]::after  { bottom: -4px; }
    .contact-link[aria-current="page"]::after { bottom: -4px; }

    /* Packages — bottom centre. Middle sits at 96.4% (= bottom 3.6%). */
    .contact-link {
        bottom: 3.6%; top: auto; left: 50%;
        transform: translate(-50%, 50%);
    }
    .contact-link:hover { transform: translate(-50%, 50%) scale(1.07); }

    /* Horizontal corner lines — pinned to the SAME vertical middle as the
       About / Packages labels above, so they read as one decorative line
       at the text's mid-height (matches desktop). translateY(-50%) centres
       the 1px rule on the given top%. */
    .top-left-line {
        top: 3.6%; bottom: auto; left: 16%; right: auto;
        width: 9%; height: 1px;
        transform: translateY(-50%);
    }
    .bottom-right-line {
        top: 96.4%; bottom: auto; left: 75%; right: auto;
        width: 9%; height: 1px;
        transform: translateY(-50%);
    }

    /* Photography — left edge, vertically centred */
    .photography-link {
        left: 2.5%; right: auto; top: 50%;
        writing-mode: vertical-rl;
        transform: translateY(-50%) rotate(180deg);
    }
    .photography-link:hover { transform: translateY(-50%) rotate(180deg) scale(1.07); }

    /* Watch Reels — right edge, vertically centred */
    .watch-reel-link {
        right: 2.5%; left: auto; top: 50%;
        writing-mode: vertical-rl;
        transform: translateY(-50%) rotate(180deg);
    }
    .watch-reel-link:hover { transform: translateY(-50%) rotate(180deg) scale(1.07); }
}