/* ─── Nav Page ───────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'ArbelG';
    src: url('../fonts/ui/ArbelG-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

*, *:hover, *:active {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none !important;
}

html, body {
    width: 100vw;
    height: 100vh;
    background-color: #fcfbf7;
    font-family: 'ArbelG', 'Helvetica Neue', Arial, sans-serif;
    overflow: hidden;
    position: relative;
}

/* ─── Custom cursor – outline only ──────────────────────────────────────── */
#custom-cursor {
    position: fixed;
    width: 1.25vw;
    height: 1.25vw;
    border-radius: 50%;
    background-color: transparent;
    border: 1.5px solid #000;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    top: -100px;
    left: -100px;
    transition: border-color 0.2s ease;
}

/* Nav items: only size transitions, position keeps tracking freely */
#custom-cursor.expanded {
    transition: border-color 0.2s ease,
                width  0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Dot snap: size + position both animate */
#custom-cursor.snapped {
    transition: border-color 0.2s ease,
                width  0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                left   0.3s  cubic-bezier(0.25, 0.46, 0.45, 0.94),
                top    0.3s  cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─── Top-right dot ──────────────────────────────────────────────────────── */
.dot {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #000;
    display: block;
    text-decoration: none;
}

/* Figma: left calc(91.67%−6px) ≈ 91.25vw, top 105px on ~1024px tall viewport */
.dot-top-right {
    right: 2.64vw;
    top: 3vh;
    z-index: 100;
}

/* ─── Navigation ─────────────────────────────────────────────────────────── */
/* Figma: items left-aligned at 9.93% of width                                */
/* Vertical positions (% of viewport height):                                 */
/*   About      8.89vh  Playground 30.37vh  Archive 53.22vh  Media 74.41vh   */
.main-nav {
    position: absolute;
    left: 9.93vw;
    top: 0;
}

.nav-item {
    display: block;
    position: absolute;
    text-decoration: none;
    line-height: 0;
}

.nav-item img {
    display: block;
    width: auto;
    height: auto;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: left center;
}

.nav-item:hover img {
    transform: scale(1.03);
}

/* Figma dimensions × 0.7 scale (÷1440×100×0.7 = vw) */
.nav-about      img { width: 24.16vw; } /* 497.13 × 0.7 */
.nav-playground img { width: 47.28vw; } /* 972.57 × 0.7 */
.nav-archive    img { width: 27.61vw; } /* 568    × 0.7 */
.nav-media      img { width: 23.71vw; } /* 487.77 × 0.7 */

.nav-about      { top: 4.42vw;  } /*  91 ÷ 1440 × 0.7 */
.nav-playground { top: 15.12vw; } /* 311 ÷ 1440 × 0.7 */
.nav-archive    { top: 26.50vw; } /* 545 ÷ 1440 × 0.7 */
.nav-media      { top: 37.04vw; } /* 762 ÷ 1440 × 0.7 */

/* ─── Theme: Negative (dark mode) ───────────────────────────────────────── */
body.negative {
    background-color: #050505;
}

body.negative .dot {
    background-color: #fcfbf7;
}

body.negative #custom-cursor {
    border-color: #fcfbf7;
}

body.negative .nav-item img {
    filter: invert(1);
}

/* ─── Theme: Blue/Brown ─────────────────────────────────────────────────── */
body.blue-theme {
    background-color: #423028;
}

body.blue-theme .dot {
    background-color: #B6E6FF;
}

body.blue-theme #custom-cursor {
    border-color: #B6E6FF;
}

body.blue-theme .nav-item img {
    /* Convert black to #B6E6FF using brightness, invert, and hue-rotate */
    filter: brightness(0) saturate(100%) invert(85%) sepia(14%) saturate(1049%) hue-rotate(177deg) brightness(102%) contrast(101%);
}