/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: linear-gradient(165deg, #1A2632 0%, #243442 40%, #1E2E3A 100%);
    color: #C8D8E0;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.72;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    min-height: 100vh;
}

/* ===== TYPOGRAPHY ===== */
.masthead {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(48px, 10vw, 120px);
    letter-spacing: 0.18em;
    line-height: 1.1;
    text-transform: uppercase;
    color: #E8F4F8;
    text-align: center;
    position: relative;
    z-index: 10;
}

.tagline {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 2.5vw, 22px);
    color: #C8D8E0;
    text-align: center;
    margin-top: 1.2em;
    letter-spacing: 0.04em;
    position: relative;
    z-index: 10;
}

.hex-title {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(24px, 4vw, 48px);
    letter-spacing: 0.06em;
    line-height: 1.1;
    color: #E8F4F8;
    margin-bottom: 0.6em;
}

.hex-label {
    font-family: 'Fira Code', monospace;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #7AB8C8;
    display: block;
    margin-bottom: 1em;
}

.hex-body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.72;
    color: #C8D8E0;
    max-width: 38em;
}

.footprint-text {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 3.5vw, 36px);
    letter-spacing: 0.06em;
    line-height: 1.4;
    color: #E8F4F8;
    text-align: center;
    margin-top: 2em;
}

/* ===== SECTIONS ===== */
.section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.section--summit {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.section--ridge {
    min-height: 150vh;
    padding: 10vh 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section--valley {
    min-height: 150vh;
    padding: 10vh 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section--footprint {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10vh 5vw;
}

/* ===== CONTOUR BACKGROUNDS ===== */
.contour-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ===== MOUNTAINS ===== */
.mountains {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    z-index: 2;
    pointer-events: none;
}

.mountain {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mountain svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.mountain--4 { z-index: 1; }
.mountain--3 { z-index: 2; }
.mountain--2 { z-index: 3; }
.mountain--1 { z-index: 4; }

/* ===== SUMMIT CONTENT ===== */
.summit-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 2rem;
}

/* ===== FOOTPRINTS (SVG scattered) ===== */
.footprint {
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

.footprint--summit {
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%) rotate(-12deg);
    opacity: 0.7;
}

.footprint--mid {
    position: relative;
    display: block;
    margin: 4rem auto 0;
    transform: rotate(8deg);
    opacity: 0.6;
}

/* ===== HEX GRID ===== */
.hex-grid {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.hex-grid--ridge {
    align-items: stretch;
}

.hex-grid--valley {
    gap: 20px;
}

/* ===== HEX CELLS ===== */
.hex-cell {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, rgba(122,184,200,0.08) 0%, rgba(200,168,130,0.05) 100%);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    position: relative;
    transition: box-shadow 300ms ease, border-color 300ms ease;
}

.hex-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border: 1px solid rgba(232,244,248,0.08);
    pointer-events: none;
    z-index: 1;
    transition: border-color 300ms ease;
}

.hex-cell:hover::before {
    border-color: rgba(232,244,248,0.2);
}

.hex-cell:hover {
    box-shadow: 0 4px 24px rgba(74,155,174,0.12);
}

.hex-cell--large {
    width: 380px;
    height: 420px;
    flex-shrink: 0;
}

.hex-cell--small {
    width: 240px;
    height: 270px;
    flex-shrink: 0;
}

.hex-cell--massive {
    width: min(600px, 90vw);
    height: min(660px, 100vw);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, rgba(122,184,200,0.08) 0%, rgba(200,168,130,0.05) 100%);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    position: relative;
    margin: 0 auto;
}

.hex-cell--massive::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border: 1px solid rgba(232,244,248,0.08);
    pointer-events: none;
    z-index: 1;
}

.hex-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20%;
    height: 100%;
    width: 100%;
}

/* ===== ZOOM-FOCUS ANIMATION ===== */
.zoom-target {
    transform: scale(0.85);
    opacity: 0;
    filter: blur(4px);
    transition: transform 800ms ease-out, opacity 800ms ease-out, filter 800ms ease-out;
}

.zoom-target.in-view {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
}

/* ===== DIVIDERS ===== */
.divider {
    position: absolute;
    width: 100%;
    height: 60px;
    z-index: 10;
    pointer-events: none;
}

.divider--1 {
    top: calc(100vh - 30px);
}

.divider--2 {
    top: calc(250vh - 30px);
}

/* ===== FOOTPRINT ICON in final section ===== */
.footprint-icon {
    display: block;
    margin: 0 auto;
}

/* ===== RESPONSIVE: TABLET ===== */
@media (max-width: 1200px) {
    .hex-cell--large {
        width: 320px;
        height: 360px;
    }

    .hex-cell--small {
        width: 200px;
        height: 225px;
    }

    .hex-cell--small .hex-body {
        font-size: 14px;
    }

    .hex-cell--small .hex-label {
        font-size: 11px;
    }

    .mountains {
        height: 50%;
    }

    .hex-grid {
        gap: 20px;
    }
}

/* ===== RESPONSIVE: MOBILE ===== */
@media (max-width: 768px) {
    .hex-cell,
    .hex-cell--large,
    .hex-cell--small,
    .hex-cell--massive {
        clip-path: none;
        border-radius: 16px;
        width: 100%;
        max-width: 500px;
        height: auto;
        min-height: 200px;
    }

    .hex-cell::before,
    .hex-cell--massive::before {
        clip-path: none;
        border-radius: 16px;
    }

    .hex-cell--large {
        height: auto;
        min-height: 250px;
    }

    .hex-cell--massive {
        height: auto;
        min-height: 400px;
    }

    .hex-inner {
        padding: 2rem 1.5rem;
    }

    .hex-grid {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .masthead {
        letter-spacing: 0.1em;
    }

    .footprint-icon {
        width: 100px;
        height: auto;
    }

    .mountains {
        height: 40%;
    }

    .section--ridge,
    .section--valley {
        padding: 8vh 4vw;
    }

    .footprint--summit {
        bottom: 10%;
    }
}

/* ===== DESIGN PALETTE REFERENCE ===== */
/* All colors from DESIGN.md:
   #1A2632 - Background Deep (Dark Mountain)
   #243442 - Background Mid (Twilight Slate)
   #1E2E3A - Background tertiary
   #2C3A42 - Deep Slate (text on light)
   #3A4A52 - Muted Slate (body text on light)
   #E8F4F8 - Frost Primary (Glacier White)
   #7AB8C8 - Frost Accent (Alpine Blue)
   #4A9BAE - Frost Glow (Aurora Teal)
   #C8A882 - Terrain Warm (Sandstone)
   #8B6B4A - Terrain Deep (Iron Earth)
   #C8D8E0 - Pale Frost (body text)
   #D4EEF4 - Frost Flare (hover highlight)
*/

/* ===== TERRAIN WARM ACCENTS ===== */
.footprint-text em,
.footprint-text strong {
    color: #C8A882;
}

/* ===== SECTION ON LIGHT CONTEXT ===== */
.section--light .hex-body {
    color: #3A4A52;
}

.section--light .hex-title {
    color: #2C3A42;
}

/* ===== CONTOUR AND FOOTPRINT SVG COLORS ===== */
.contour-bg path {
    stroke: #4A9BAE;
}

.footprint path {
    stroke: #8B6B4A;
}

/* ===== HIGHLIGHT / HOVER FLARE ===== */
.hex-cell.in-view:hover {
    box-shadow: 0 6px 32px rgba(74,155,174,0.15);
    outline: 1px solid #D4EEF4;
    outline-offset: -1px;
}

/* ===== FINAL HEXAGON ROTATION ===== */
#final-hex {
    transition: transform 800ms ease-out, opacity 800ms ease-out, filter 800ms ease-out;
}