:root {
    --mountain-mist: #e6ddd4;
    --cloud-white: #f5ede5;
    --neo-dark: #c4b8ad;
    --neo-light: #f5ede5;
    --neo-dist: 8px;
    --neo-blur: 16px;
    --borealis-teal: #4ecdc4;
    --northern-violet: #6b5b95;
    --polar-rose: #d4688e;
    --basalt-night: #1e1428;
    --deep-dark: #140d1e;
    --slate-plum: #2b1d3a;
    --lavender-mist: #6a5b7e;
    --warm-paper: #ebe3da;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Source Serif 4', Georgia, serif;
    background: var(--mountain-mist);
    color: var(--slate-plum);
    overflow-x: hidden;
}

/* Scene 1: The Summit */
.scene-summit {
    position: relative;
    height: 100vh;
    background: var(--mountain-mist);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mountain-layers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mountain-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
}

.mountain-layer-7 {
    clip-path: polygon(0 75%, 10% 60%, 25% 70%, 40% 50%, 55% 65%, 70% 45%, 85% 60%, 100% 55%, 100% 100%, 0 100%);
    background: linear-gradient(180deg, #4ecdc410, #6b5b9515);
}

.mountain-layer-6 {
    clip-path: polygon(0 70%, 12% 55%, 28% 65%, 45% 45%, 60% 58%, 75% 42%, 90% 55%, 100% 50%, 100% 100%, 0 100%);
    background: linear-gradient(180deg, #6b5b9512, #4ecdc418);
}

.mountain-layer-5 {
    clip-path: polygon(0 68%, 15% 52%, 30% 60%, 48% 42%, 62% 55%, 78% 40%, 92% 52%, 100% 48%, 100% 100%, 0 100%);
    background: linear-gradient(180deg, #4ecdc418, #d4688e15);
}

.mountain-layer-4 {
    clip-path: polygon(0 72%, 18% 58%, 33% 66%, 50% 48%, 65% 60%, 80% 46%, 95% 58%, 100% 54%, 100% 100%, 0 100%);
    background: linear-gradient(180deg, #6b5b9520, #4ecdc420);
}

.mountain-layer-3 {
    clip-path: polygon(0 76%, 14% 62%, 28% 72%, 44% 55%, 58% 68%, 72% 52%, 88% 64%, 100% 60%, 100% 100%, 0 100%);
    background: linear-gradient(180deg, #4ecdc425, #6b5b9525);
}

.mountain-layer-2 {
    clip-path: polygon(0 80%, 16% 68%, 32% 76%, 48% 62%, 64% 74%, 80% 60%, 94% 72%, 100% 68%, 100% 100%, 0 100%);
    background: linear-gradient(180deg, #d4688e18, #6b5b9530);
}

.mountain-layer-1 {
    clip-path: polygon(0 85%, 20% 74%, 35% 82%, 52% 70%, 68% 80%, 82% 68%, 96% 78%, 100% 75%, 100% 100%, 0 100%);
    background: linear-gradient(180deg, #6b5b9530, #4ecdc435);
}

.aurora-streaks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.aurora-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}

.aurora-path.animated {
    animation: aurora-flow 12s linear infinite;
}

@keyframes aurora-flow {
    0% { stroke-dashoffset: 2000; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -2000; }
}

.summit-content {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: -15vh;
}

.site-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(4rem, 10vw, 8rem);
    letter-spacing: 0.03em;
    line-height: 1.08;
    color: var(--slate-plum);
    text-shadow: 2px 2px 4px var(--neo-dark), -2px -2px 4px var(--neo-light);
}

.site-subtitle {
    font-family: 'Source Serif 4', serif;
    font-weight: 300;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    color: var(--lavender-mist);
    margin-top: 1rem;
    letter-spacing: 0.02em;
}

.chevron-down {
    position: absolute;
    bottom: 15vh;
    left: 50%;
    transform: translateX(-50%);
    animation: chevron-bob 3s ease-in-out infinite;
    z-index: 2;
}

@keyframes chevron-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* Scene 2: The Treeline */
.scene-treeline {
    background: var(--mountain-mist);
    padding: clamp(48px, 8vh, 120px) clamp(16px, 4vw, 48px);
    min-height: 100vh;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(16px, 2.5vw, 40px);
    max-width: 1400px;
    margin: 0 auto;
}

.neo-panel {
    background: var(--mountain-mist);
    border-radius: 16px;
    box-shadow: var(--neo-dist) var(--neo-dist) var(--neo-blur) var(--neo-dark),
                calc(var(--neo-dist) * -1) calc(var(--neo-dist) * -1) var(--neo-blur) var(--neo-light);
    padding: clamp(20px, 3vw, 36px);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 300ms ease;
    background-image: radial-gradient(ellipse at 30% 40%, rgba(245, 237, 229, 0.03) 0%, transparent 70%);
}

.neo-panel.revealed {
    opacity: 1;
    transform: translateY(0);
}

.neo-panel:hover {
    box-shadow: 6px 6px 12px var(--neo-dark),
                -6px -6px 12px var(--neo-light),
                inset 0 0 30px rgba(78, 205, 196, 0.08);
}

.panel-1 { grid-column: 1 / 5; }
.panel-2 { grid-column: 5 / 9; }
.panel-3 { grid-column: 9 / 13; }
.panel-4 { grid-column: 2 / 6; }
.panel-5 { grid-column: 6 / 10; }
.panel-6 { grid-column: 10 / 13; }
.panel-7 { grid-column: 1 / 8; }
.panel-8 { grid-column: 8 / 13; }

.panel-date {
    font-family: 'Recursive', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--northern-violet);
    display: block;
    margin-bottom: 12px;
}

.panel-vignette {
    width: 100%;
    height: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
    border-radius: 4px;
}

.vignette-1 { clip-path: polygon(0 80%, 20% 40%, 40% 70%, 60% 30%, 80% 60%, 100% 50%, 100% 100%, 0 100%); background: linear-gradient(135deg, #4ecdc430, #6b5b9520); }
.vignette-2 { clip-path: polygon(0 70%, 25% 45%, 50% 65%, 75% 35%, 100% 55%, 100% 100%, 0 100%); background: linear-gradient(135deg, #6b5b9530, #d4688e20); }
.vignette-3 { clip-path: polygon(0 75%, 15% 50%, 35% 70%, 55% 40%, 75% 60%, 100% 45%, 100% 100%, 0 100%); background: linear-gradient(135deg, #d4688e25, #4ecdc425); }
.vignette-4 { clip-path: polygon(0 65%, 30% 45%, 50% 60%, 70% 35%, 90% 55%, 100% 50%, 100% 100%, 0 100%); background: linear-gradient(135deg, #4ecdc420, #6b5b9530); }
.vignette-5 { clip-path: polygon(0 72%, 20% 50%, 45% 68%, 65% 38%, 85% 58%, 100% 48%, 100% 100%, 0 100%); background: linear-gradient(135deg, #6b5b9525, #4ecdc430); }
.vignette-6 { clip-path: polygon(0 78%, 18% 55%, 38% 72%, 58% 42%, 78% 62%, 100% 52%, 100% 100%, 0 100%); background: linear-gradient(135deg, #d4688e20, #6b5b9525); }
.vignette-7 { clip-path: polygon(0 68%, 22% 48%, 42% 65%, 62% 36%, 82% 56%, 100% 46%, 100% 100%, 0 100%); background: linear-gradient(135deg, #4ecdc425, #d4688e20); }
.vignette-8 { clip-path: polygon(0 74%, 16% 52%, 36% 70%, 56% 40%, 76% 60%, 100% 50%, 100% 100%, 0 100%); background: linear-gradient(135deg, #6b5b9520, #4ecdc430); }

.neo-panel p {
    font-family: 'Source Serif 4', serif;
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    line-height: 1.6;
    color: var(--slate-plum);
}

/* Scene 3: The Valley Floor */
.scene-valley {
    background: radial-gradient(ellipse at 50% 0%, var(--warm-paper), var(--mountain-mist));
    padding: 10vh 24px;
}

.valley-content {
    max-width: 680px;
    margin: 0 auto;
}

.valley-text {
    font-family: 'Source Serif 4', serif;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.75;
    color: var(--slate-plum);
    margin-bottom: 2rem;
}

.wash-divider {
    width: 100%;
    height: 20px;
    margin-bottom: 2rem;
    opacity: 0.7;
}

/* Scene 4: The Bedrock */
.scene-bedrock {
    position: relative;
    min-height: 100vh;
    background: var(--basalt-night);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.aurora-streak-footer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    pointer-events: none;
}

.aurora-path-footer {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}

.aurora-path-footer.animated {
    animation: aurora-flow 12s linear infinite;
}

.bedrock-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.bedrock-closing {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    color: #e8dfe6;
    letter-spacing: 0.02em;
    margin-bottom: 2rem;
}

.bedrock-attribution {
    font-family: 'Source Serif 4', serif;
    font-size: 0.9rem;
    color: #b8a8c8;
    letter-spacing: 0.05em;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
    .panel-1, .panel-2, .panel-3, .panel-4,
    .panel-5, .panel-6, .panel-7, .panel-8 {
        grid-column: 1 / -1;
    }
    .summit-content {
        margin-top: -10vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}