/* ============================================
   BASE — Shared foundations for all pages
   Fonts, variables, reset, navigation, transitions
   ============================================ */

/* ---- Font Faces ---- */

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('../fonts/PP Neue Montreal/PPNeueMontreal-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('../fonts/PP Neue Montreal/PPNeueMontreal-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('../fonts/PP Neue Montreal/PPNeueMontreal-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'PP Object Sans';
    src: url('../fonts/PP Object Sans/PPObjectSans-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PP Object Sans';
    src: url('../fonts/PP Object Sans/PPObjectSans-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'PP Woodland';
    src: url('../fonts/PP Woodland/PPWoodland-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PP Woodland';
    src: url('../fonts/PP Woodland/PPWoodland-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'PP Neue Bit';
    src: url('../fonts/PPNeuebit/PPNeueBit-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'PP Supply Mono';
    src: url('../fonts/PP Supply/Mono/PPSupplyMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PP Supply Sans';
    src: url('../fonts/PP Supply/Sans/PPSupplySans-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PP Supply Sans';
    src: url('../fonts/PP Supply/Sans/PPSupplySans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

/* ---- Design Tokens ---- */

:root {
    --bg-black: #000000;
    --bg-dark: #08090c;
    --text-white: #ffffff;
    --text-light: #e8e9eb;
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-muted-solid: #8b8d93;
    --text-dim: rgba(255, 255, 255, 0.3);
    --text-gray: #575757;

    --font-main: 'PP Neue Montreal', sans-serif;
    --font-display: 'PP Woodland', serif;
    --font-display-bit: 'PP Neue Bit', serif;
    --font-accent: 'PP Object Sans', sans-serif;
    --font-mono: 'PP Supply Mono', monospace;
    --font-sans: 'PP Supply Sans', sans-serif;
}

/* ---- Reset ---- */

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

body {
    background-color: var(--bg-black);
    color: var(--text-white);
    font-family: var(--font-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ---- Navigation ---- */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-black);
    z-index: 1000;
}

header .nav-container {
    width: 100%;
    max-width: 1440px;
    padding: 0 80px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.nav-link {
    color: var(--text-white);
    text-decoration: none;
    font-size: 16px;
    font-family: var(--font-accent);
    letter-spacing: -0.01em;
    transition: opacity 0.2s ease;
}

.nav-link:hover {
    opacity: 0.7;
}

@media (max-width: 1024px) {
    header .nav-container {
        padding: 0 40px;
    }
}

@media (max-width: 640px) {
    header .nav-container {
        padding: 0 20px;
    }

    .nav-link {
        font-size: 14px;
    }
}

/* ---- Page Transitions ---- */

.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-black);
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.page-transition.is-loaded {
    opacity: 0;
}

/* ---- Reveal Animations ---- */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(var(--travel-y, 15px));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal {
    opacity: 0;
    animation: fadeInUp 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.reveal-1 { animation-delay: 0.2s; }
.reveal-2 {
    animation-delay: 0.4s;
    --travel-y: 8px;
}
.reveal-3 { animation-delay: 0.6s; }

/* ---- Exit Animations ---- */

@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-15px);
    }
}

body.is-leaving .reveal {
    opacity: 1;
    transform: translateY(0);
    animation: fadeOutUp 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards !important;
}

body.is-leaving .reveal-1 { animation-delay: 0s !important; }
body.is-leaving .reveal-2 { animation-delay: 0.08s !important; }
body.is-leaving .reveal-3 { animation-delay: 0.16s !important; }

/* ---- Utility Classes ---- */

.font-mono { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }