/* ===================================================
   ncbd.dev — Muji Alpine Weather Station
   Palette: neon-electric on mountain-earth neutrals
   Layout: split-screen (binocular metaphor)
   Typography: Bungee Shade / Libre Franklin / IBM Plex Mono
   =================================================== */

/* --- Custom Properties (exact DESIGN.md hex values) --- */
:root {
    /* Backgrounds */
    --unbleached-linen: #f4f0e8;
    --deep-basalt: #1a1a1e;
    /* Text */
    --ink-wash: #2a2a28;
    --weathered-parchment: #e8e2d6;
    /* Accents */
    --electric-cyan: #00e5ff;
    --lichen-neon: #a8ff04;
    --alpenglow-magenta: #ff2d7b;
    /* Surfaces */
    --granite-dust: #c8bfad;
    --obsidian-gray: #2e2e2c;
    --station-charcoal: #3a3a38;
    /* Fonts */
    --font-display: 'Bungee Shade', cursive;
    --font-body: 'Libre Franklin', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    /* Layout */
    --spine-width: 3px;
    --nav-height: 48px;
    --left-width: 45vw;
    --right-width: 55vw;
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--ink-wash);
    background-color: var(--deep-basalt);
    overflow-x: hidden;
}

.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ===================================================
   NAVIGATION
   48px tall, obsidian-gray bg, spanning both panels
   =================================================== */
.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background-color: var(--obsidian-gray);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(1rem, 3vw, 2rem);
    z-index: 100;
}

/* Nav title: Bungee Shade, 0.9rem, 0.2em letter-spacing */
.nav-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    color: var(--weathered-parchment);
    line-height: 1;
}

/* Nav links: Libre Franklin 400, 0.85rem, 0.08em ls, uppercase */
.nav-links {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.nav-links::-webkit-scrollbar {
    display: none;
}

.nav-link {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--granite-dust);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--electric-cyan);
}

/* ===================================================
   SPINE — 3px Electric Cyan vertical line
   Pulses: opacity 0.6 → 1.0 over 4s
   Entry: draws top-to-bottom via clip-path over 800ms
   =================================================== */
.spine {
    position: fixed;
    top: var(--nav-height);
    left: var(--left-width);
    width: var(--spine-width);
    height: calc(100vh - var(--nav-height));
    background-color: var(--electric-cyan);
    z-index: 10;
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transform: translateX(-50%);
}

.spine.drawn {
    opacity: 1;
    animation: spineReveal 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards,
               spinePulse 4s ease-in-out 0.8s infinite;
}

@keyframes spineReveal {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0); }
}

@keyframes spinePulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1.0; }
}

/* ===================================================
   ELEVATION COUNTER
   Fixed, anchored to spine, IBM Plex Mono 500
   =================================================== */
.elevation-counter {
    position: fixed;
    top: 50%;
    left: var(--left-width);
    transform: translate(-50%, -50%);
    z-index: 11;
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1.4vw, 0.9rem);
    font-weight: 500;
    color: var(--electric-cyan);
    background-color: rgba(26, 26, 30, 0.88);
    padding: 4px 10px;
    letter-spacing: 0.05em;
    line-height: 1.5;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.elevation-counter.active {
    opacity: 1;
}

.elevation-value {
    display: inline-block;
    min-width: 3ch;
}

.elevation-unit {
    opacity: 0.6;
    font-size: 0.85em;
}

/* ===================================================
   SCROLL PROGRESS INDICATOR
   Alpenglow Magenta, 2px bar at top
   =================================================== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background-color: var(--alpenglow-magenta);
    z-index: 200;
    will-change: width;
}

/* ===================================================
   SPLIT CONTAINER
   Two-column side-by-side layout
   =================================================== */
.split-container {
    display: flex;
    padding-top: var(--nav-height);
    position: relative;
    min-height: 100vh;
}

/* ===================================================
   LEFT PANEL — The Field Notes (45vw)
   Unbleached Linen background + subtle paper texture
   =================================================== */
.left-panel {
    width: var(--left-width);
    background-color: var(--unbleached-linen);
    position: relative;
    z-index: 1;
    /* Subtle paper texture via inline SVG feTurbulence at 2% opacity */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
}

/* Topographic contour lines on left panel */
.left-contours {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.left-contour-svg {
    width: 100%;
    height: 100%;
}

/* Left sections: generous vertical padding, centered vertically */
.left-section {
    min-height: 100vh;
    padding: clamp(2rem, 4vh, 4rem) clamp(1.5rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.left-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero left: always visible, positioned 20px above center */
.hero-left {
    opacity: 1;
    transform: none;
    transition: none;
}

.hero-left-inner {
    transform: translateY(-20px);
}

/* ===================================================
   RIGHT PANEL — The Observation Window (55vw)
   Deep Basalt, flat matte (no texture)
   =================================================== */
.right-panel {
    width: var(--right-width);
    background-color: var(--deep-basalt);
    position: relative;
    z-index: 1;
}

/* Right sections: 100vh, clip-path wipe transitions */
.right-section {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.right-section.visible {
    clip-path: inset(0) !important;
}

/* Directional wipe variants */
.right-section[data-wipe="bottom"] { clip-path: inset(100% 0 0 0); }
.right-section[data-wipe="left"]   { clip-path: inset(0 100% 0 0); }
.right-section[data-wipe="top"]    { clip-path: inset(0 0 100% 0); }
.right-section[data-wipe="right"]  { clip-path: inset(0 0 0 100%); }

/* Hero right: always visible */
.hero-right {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    clip-path: inset(0) !important;
}

/* ===================================================
   HERO ELEMENTS
   Entry sequence: spine → title → mountain → subtitle
   =================================================== */
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 6rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--deep-basalt);
    line-height: 1.1;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero-title.revealed {
    opacity: 1;
    transform: translateY(0);
}

.hero-subtitle {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero-subtitle.revealed {
    opacity: 1;
    transform: translateY(0);
}

.coord-text {
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1.4vw, 0.9rem);
    font-weight: 400;
    color: var(--station-charcoal);
    letter-spacing: 0.03em;
    line-height: 1.5;
}

.elevation-reading {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--ink-wash);
    letter-spacing: 0.02em;
}

/* Mountain silhouette on hero right */
.mountain-silhouette {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.mountain-silhouette.revealed {
    opacity: 1;
    transform: translateY(0);
}

.mountain-svg {
    width: 100%;
    height: 100%;
}

/* Contour lines on hero right panel */
.contour-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.contour-svg {
    width: 100%;
    height: 100%;
}

/* Contour animation: stroke-dashoffset shift over 20s */
.contour-path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 0;
    animation: contourFlow 20s linear infinite;
}

@keyframes contourFlow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -1200; }
}

/* ===================================================
   TYPOGRAPHY
   Display: Bungee Shade, 0.04em ls
   Body: Libre Franklin, line-height 1.72
   Mono: IBM Plex Mono
   =================================================== */

/* Section headings: Bungee Shade on light = Deep Basalt (#1a1a1e) */
.section-heading {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--deep-basalt);
    line-height: 1.2;
    margin-bottom: clamp(1rem, 2vh, 2rem);
}

.section-heading--uppercase {
    text-transform: uppercase;
}

/* Section headings on dark = Lichen Neon (#a8ff04) */
.right-panel .section-heading {
    color: var(--lichen-neon);
}

/* Body text */
.body-text {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    font-weight: 400;
    line-height: 1.72;
    color: var(--ink-wash);
    margin-bottom: 1.2em;
    max-width: 52ch;
}

.body-text:last-child {
    margin-bottom: 0;
}

/* Captions: 0.8rem, weight 300, 0.03em ls */
.caption-text {
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 0.03em;
    color: var(--station-charcoal);
}

/* ===================================================
   DATA STRIPS
   IBM Plex Mono, border-top granite-dust
   =================================================== */
.data-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--granite-dust);
}

.data-label {
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1.4vw, 0.9rem);
    font-weight: 500;
    color: var(--station-charcoal);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-value {
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1.4vw, 0.9rem);
    font-weight: 400;
    color: var(--station-charcoal);
    letter-spacing: 0.03em;
    line-height: 1.5;
}

/* ===================================================
   VINTAGE PHOTOGRAPHY
   sepia(0.15) contrast(1.1) brightness(0.95)
   Grain overlay at 4% opacity
   Hover: scale(1.05) + sepia(0)
   =================================================== */
.vintage-photo {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    cursor: default;
}

.photo-content {
    width: 100%;
    height: 100%;
    filter: sepia(0.15) contrast(1.1) brightness(0.95);
    transition: filter 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    transform-origin: center center;
}

.photo-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.vintage-photo:hover .photo-content {
    filter: sepia(0) contrast(1.1) brightness(0.95);
    transform: scale(1.05);
}

/* SVG grain overlay at 4% opacity */
.photo-grain {
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    opacity: 0.04;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 300px 300px;
}

/* ===================================================
   PAPER TAPE TRANSITIONS
   24px tall, Obsidian Gray bg, slides from left
   1.5s visible, then fades to 30% opacity
   =================================================== */
.paper-tape {
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 100%;
    height: 24px;
    background-color: var(--obsidian-gray);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                opacity 0.3s ease;
    z-index: 5;
}

.paper-tape.visible {
    transform: translateX(0);
    opacity: 1;
}

.paper-tape.faded {
    opacity: 0.3;
}

.tape-holes {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.tape-hole {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--granite-dust);
}

.tape-text {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--electric-cyan);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ===================================================
   MOUNTAIN DIVIDERS
   Cyan ghost silhouettes at 8% opacity on dark
   =================================================== */
.mountain-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    pointer-events: none;
}

.divider-svg {
    width: 100%;
    height: 100%;
}

/* ===================================================
   INSTRUMENT GAUGE
   Circular SVG gauge with rotating needle
   =================================================== */
.instrument-gauge {
    position: absolute;
    bottom: 100px;
    right: 40px;
    width: 80px;
    height: 80px;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.instrument-gauge.visible {
    opacity: 1;
}

.gauge-svg {
    width: 100%;
    height: 100%;
}

.gauge-needle {
    transform-origin: 50px 50px;
    animation: gaugeRotate 8s ease-in-out infinite;
}

@keyframes gaugeRotate {
    0%, 100% { transform: rotate(-30deg); }
    50%      { transform: rotate(30deg); }
}

/* ===================================================
   CONTACT BLOCK
   =================================================== */
.contact-block {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--granite-dust);
}

/* ===================================================
   FOOTER
   Deep Basalt background
   =================================================== */
.site-footer {
    background-color: var(--deep-basalt);
    padding: 2rem clamp(1.5rem, 4vw, 3rem);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-text {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--granite-dust);
    letter-spacing: 0.05em;
}

/* ===================================================
   RESPONSIVE — Below 768px
   Split collapses to single column
   Spine → horizontal 2px line, 60% width, centered
   Elevation counter → bottom-right, 0.7rem
   Directional wipes → simple fade-in transitions
   Mountain dividers → simplified to 2 layers
   =================================================== */
@media (max-width: 768px) {
    .split-container {
        flex-direction: column;
    }

    .left-panel,
    .right-panel {
        width: 100%;
    }

    .left-section {
        min-height: auto;
        padding: clamp(2rem, 6vh, 4rem) clamp(1rem, 4vw, 2rem);
    }

    .right-section {
        min-height: 70vh;
    }

    /* Hide desktop spine */
    .spine {
        display: none;
    }

    /* Elevation counter: bottom-right, smaller */
    .elevation-counter {
        top: auto;
        bottom: 1rem;
        right: 1rem;
        left: auto;
        transform: none;
        font-size: 0.7rem;
    }

    /* Replace directional wipes with simple fades */
    .right-section,
    .right-section[data-wipe="bottom"],
    .right-section[data-wipe="left"],
    .right-section[data-wipe="top"],
    .right-section[data-wipe="right"] {
        clip-path: none !important;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .right-section.visible,
    .right-section[data-wipe="bottom"].visible,
    .right-section[data-wipe="left"].visible,
    .right-section[data-wipe="top"].visible,
    .right-section[data-wipe="right"].visible {
        opacity: 1;
        transform: translateY(0);
    }

    .hero-right {
        min-height: 60vh;
        clip-path: none !important;
        opacity: 1;
        transform: none;
    }

    .mountain-divider {
        height: 80px;
    }

    .hero-title {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }

    .section-heading {
        font-size: clamp(1.4rem, 5vw, 2rem);
    }

    .hero-left-inner {
        transform: translateY(0);
    }

    .footer-content {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .paper-tape {
        bottom: 30px;
    }

    .instrument-gauge {
        width: 60px;
        height: 60px;
        bottom: 60px;
        right: 20px;
    }

    .vintage-photo {
        height: 70vh;
    }

    .nav-title {
        font-size: 0.8rem;
        letter-spacing: 0.1em;
    }
}

/* ===================================================
   RESPONSIVE — Below 480px
   =================================================== */
@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(1.8rem, 12vw, 2.8rem);
    }

    .body-text {
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .nav-title {
        font-size: 0.75rem;
    }

    .data-strip {
        flex-direction: column;
        gap: 0.4rem;
        align-items: flex-start;
    }
}