/* === ppuzzl.win — Dopamine-Neon Mountain Twilight === */

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

:root {
    --twilight-obsidian: #0d0b1a;
    --ridge-indigo: #1a1145;
    --electric-chartreuse: #39ff14;
    --hot-magenta: #ff6ec7;
    --cyan-pulse: #00f0ff;
    --sunset-amber: #ffb347;
    --mist-lavender: #c4b5e0;
    --altitude-white: #f0edf7;
    --mid-violet: #3d1466;
    --deep-violet: #2a1055;
    --spring-curve: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
    overflow: hidden;
    height: 100%;
    background: var(--twilight-obsidian);
}

body {
    height: 100%;
    overflow: hidden;
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    color: var(--mist-lavender);
    background: var(--twilight-obsidian);
}

/* --- Horizontal Scroll Container --- */
#scroll-container {
    display: flex;
    flex-direction: row;
    width: 500vw;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    position: relative;
    z-index: 10;
}

/* Scrollbar on body/container */
body {
    overflow-x: auto;
}

#scroll-container::-webkit-scrollbar {
    display: none;
}

#scroll-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- Zones --- */
.zone {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    position: relative;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zone-content {
    position: relative;
    z-index: 15;
    max-width: 90vw;
}

/* --- Zone Nav --- */
#zone-nav {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    gap: 12px;
}

.zone-icon {
    background: rgba(13, 11, 26, 0.7);
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: var(--mist-lavender);
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--spring-curve);
}

.zone-icon.active {
    color: var(--electric-chartreuse);
    border-color: var(--electric-chartreuse);
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.4);
}

.zone-icon:hover {
    border-color: var(--hot-magenta);
    color: var(--hot-magenta);
}

/* --- Progress Bar --- */
#progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 100;
    background: rgba(13, 11, 26, 0.5);
}

#progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, var(--electric-chartreuse), var(--hot-magenta), var(--cyan-pulse));
    transition: width 0.1s linear;
}

/* --- Mountain Ridge Layers --- */
.ridge-layer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 500vw;
    height: 100vh;
    pointer-events: none;
    will-change: transform;
}

#ridge-bg {
    z-index: 1;
    background: linear-gradient(180deg, transparent 0%, transparent 55%, var(--ridge-indigo) 55%, var(--twilight-obsidian) 100%);
    clip-path: polygon(
        0% 100%, 0% 78%, 2% 76%, 5% 74%, 8% 72%, 12% 70%, 15% 72%, 18% 68%, 22% 65%, 25% 67%, 28% 64%, 32% 62%, 35% 65%, 38% 60%, 42% 58%, 45% 61%, 48% 56%, 52% 54%, 55% 57%, 58% 52%, 62% 50%, 65% 53%, 68% 48%, 72% 52%, 75% 47%, 78% 50%, 82% 53%, 85% 48%, 88% 52%, 92% 55%, 95% 50%, 98% 54%, 100% 52%, 100% 100%
    );
    opacity: 0;
    transition: opacity 0.8s ease;
}

#ridge-bg.visible {
    opacity: 1;
}

#ridge-mid {
    z-index: 2;
    background: linear-gradient(180deg, transparent 0%, transparent 60%, var(--mid-violet) 60%, var(--ridge-indigo) 100%);
    clip-path: polygon(
        0% 100%, 0% 82%, 3% 78%, 6% 75%, 10% 72%, 13% 74%, 16% 68%, 20% 64%, 23% 67%, 26% 62%, 30% 58%, 33% 63%, 36% 55%, 40% 50%, 43% 54%, 46% 48%, 50% 44%, 53% 48%, 56% 42%, 60% 46%, 63% 40%, 66% 45%, 70% 50%, 73% 44%, 76% 48%, 80% 54%, 83% 50%, 86% 55%, 90% 60%, 93% 56%, 96% 60%, 100% 58%, 100% 100%
    );
    opacity: 0;
    transition: opacity 0.8s ease 0.1s;
}

#ridge-mid.visible {
    opacity: 1;
}

#ridge-fg {
    z-index: 3;
    background: linear-gradient(180deg, transparent 0%, transparent 65%, var(--deep-violet) 65%, var(--twilight-obsidian) 100%);
    clip-path: polygon(
        0% 100%, 0% 85%, 2% 82%, 5% 80%, 8% 78%, 11% 80%, 14% 74%, 18% 70%, 21% 73%, 24% 68%, 28% 64%, 31% 68%, 34% 60%, 38% 55%, 41% 59%, 44% 52%, 48% 48%, 51% 52%, 54% 46%, 58% 50%, 61% 44%, 64% 48%, 68% 54%, 71% 48%, 74% 52%, 78% 58%, 81% 54%, 84% 60%, 88% 65%, 91% 62%, 94% 66%, 97% 63%, 100% 65%, 100% 100%
    );
    filter: drop-shadow(0 -2px 8px var(--hot-magenta));
    opacity: 0;
    transition: opacity 0.8s ease 0.2s;
}

#ridge-fg.visible {
    opacity: 1;
}

/* --- Fog Particles --- */
#fog-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.fog-particle {
    position: absolute;
    width: 200px;
    height: 200px;
    animation: fog-drift linear infinite;
}

@keyframes fog-drift {
    0% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(15vw) translateY(-3vh); }
    50% { transform: translateX(30vw) translateY(2vh); }
    75% { transform: translateX(15vw) translateY(4vh); }
    100% { transform: translateX(0) translateY(0); }
}

/* --- Puzzle Pieces --- */
#puzzle-pieces {
    position: fixed;
    top: 0;
    left: 0;
    width: 500vw;
    height: 100vh;
    pointer-events: none;
    z-index: 6;
}

.puzzle-piece {
    position: absolute;
    width: var(--size, 5vw);
    height: var(--size, 5vw);
    background: var(--piece-color, var(--hot-magenta));
    opacity: 0.15;
    clip-path: polygon(
        0% 25%, 15% 25%, 15% 15%, 25% 0%, 35% 15%, 35% 25%,
        65% 25%, 65% 15%, 75% 0%, 85% 15%, 85% 25%, 100% 25%,
        100% 40%, 85% 40%, 85% 60%, 100% 60%, 100% 75%,
        85% 75%, 85% 85%, 75% 100%, 65% 85%, 65% 75%,
        35% 75%, 35% 85%, 25% 100%, 15% 85%, 15% 75%, 0% 75%,
        0% 60%, 15% 60%, 15% 40%, 0% 40%
    );
    animation: puzzle-drift var(--drift-dur, 20s) linear infinite;
}

@keyframes puzzle-drift {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Summit pieces special state */
.summit-piece.locked {
    opacity: 0.6;
    animation: none;
    transition: all 0.6s var(--spring-curve);
}

/* --- Background Gradient (applied to scroll container) --- */
#scroll-container {
    background: linear-gradient(to right, 
        var(--twilight-obsidian) 0%, 
        var(--ridge-indigo) 25%, 
        var(--mid-violet) 50%, 
        var(--ridge-indigo) 75%, 
        var(--twilight-obsidian) 100%
    );
}

/* === ZONE 1: The Approach === */
.approach-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 15vw;
    width: 100vw;
}

.title-stack {
    position: relative;
    height: clamp(3.5rem, 9vw, 8rem);
    width: 100%;
    margin-bottom: 0.5rem;
}

.title-shadow,
.title-glow,
.title-main {
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'Bungee', cursive;
    font-size: clamp(3rem, 8vw, 7rem);
    letter-spacing: 0.05em;
    line-height: 1;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s var(--spring-curve);
}

.title-shadow {
    color: var(--ridge-indigo);
    transform: translate(4px, 24px);
}

.title-glow {
    color: var(--hot-magenta);
    text-shadow: 0 0 20px var(--hot-magenta), 0 0 40px rgba(255, 110, 199, 0.5);
    transform: translate(2px, 22px);
}

.title-main {
    color: var(--electric-chartreuse);
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}

.title-shadow.visible,
.title-glow.visible,
.title-main.visible {
    opacity: 1;
    transform: translate(0, 0);
}

.title-shadow.visible {
    transform: translate(4px, 4px);
}

.title-glow.visible {
    transform: translate(2px, 2px);
}

.title-win {
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(1.5rem, 4vw, 3.5rem);
    color: var(--cyan-pulse);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease 0.2s, transform 0.5s var(--spring-curve) 0.2s;
}

.title-win.visible {
    opacity: 1;
    transform: translateY(0);
}

.approach-subtitle {
    font-family: 'Quicksand', sans-serif;
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    line-height: 1.72;
    max-width: 38ch;
    color: var(--mist-lavender);
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease 0.4s, transform 0.6s var(--spring-curve) 0.4s;
}

.approach-subtitle.visible {
    opacity: 1;
    transform: translateY(0);
}

/* === ZONE 2: The Ascent === */
.ascent-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4vw;
    width: 100vw;
    padding: 0 8vw;
}

.staircase-block {
    background: rgba(13, 11, 26, 0.85);
    border: 2px solid var(--cyan-pulse);
    border-radius: 8px;
    padding: 2rem 1.8rem;
    max-width: 28ch;
    transform: scale(0.7);
    opacity: 0;
    transition: transform 0.6s var(--spring-curve), opacity 0.5s ease;
}

.staircase-block.in-view {
    transform: scale(1);
    opacity: 1;
}

.stair-1 {
    margin-top: 45vh;
}

.stair-2 {
    margin-top: 30vh;
}

.stair-3 {
    margin-top: 15vh;
}

.staircase-block h2 {
    font-family: 'Bungee', cursive;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    letter-spacing: 0.05em;
    color: var(--electric-chartreuse);
    margin-bottom: 1rem;
}

.staircase-block p {
    font-family: 'Quicksand', sans-serif;
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    line-height: 1.72;
    max-width: 38ch;
    color: var(--mist-lavender);
}

/* === ZONE 3: The Summit === */
.summit-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    text-align: center;
}

.summit-text {
    font-family: 'Bungee', cursive;
    font-size: clamp(8rem, 20vw, 18rem);
    line-height: 0.9;
    letter-spacing: 0.05em;
    transform: scale(0.7);
    opacity: 0;
    transition: transform 0.6s var(--spring-curve), opacity 0.5s ease;
}

.summit-text.in-view {
    transform: scale(1);
    opacity: 1;
}

.win-letter {
    display: inline-block;
    text-shadow: 0 0 30px currentColor, 0 0 60px currentColor;
}

.summit-statement {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.72;
    max-width: 50ch;
    color: var(--mist-lavender);
    margin-top: 2rem;
    transform: scale(0.7);
    opacity: 0;
    transition: transform 0.6s var(--spring-curve) 0.15s, opacity 0.5s ease 0.15s;
}

.summit-statement.in-view {
    transform: scale(1);
    opacity: 1;
}

/* Summit shake effect */
@keyframes screen-shake {
    0% { transform: translate(0, 0); }
    15% { transform: translate(2px, -1px); }
    30% { transform: translate(-2px, 1px); }
    45% { transform: translate(1px, 2px); }
    60% { transform: translate(-1px, -2px); }
    75% { transform: translate(2px, 0px); }
    90% { transform: translate(-1px, 1px); }
    100% { transform: translate(0, 0); }
}

.summit-content.shaking {
    animation: screen-shake 0.3s ease-out;
}

/* === ZONE 4: The Descent === */
.descent-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4vw;
    width: 100vw;
    padding: 0 8vw;
}

.descend-1 {
    margin-top: 15vh;
}

.descend-2 {
    margin-top: 30vh;
}

.descend-3 {
    margin-top: 45vh;
}

.descent-content .staircase-block {
    border-radius: 12px;
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.15);
    border-color: transparent;
    transition: transform 0.6s var(--spring-curve), opacity 0.5s ease, border-color 0.2s ease;
}

.descent-content .staircase-block:hover {
    border-color: var(--hot-magenta);
}

.card-image {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1145 0%, #3d1466 50%, #1a1145 100%);
}

.duotone-photo {
    filter: grayscale(1) contrast(1.2) brightness(0.9);
    mix-blend-mode: luminosity;
}

.duotone-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--electric-chartreuse), var(--hot-magenta));
    mix-blend-mode: color;
    opacity: 0.85;
}

/* === ZONE 5: The Base Camp === */
.basecamp-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    text-align: center;
}

.logo-assembly {
    width: 200px;
    height: 200px;
    position: relative;
    margin-bottom: 3rem;
}

.logo-piece {
    position: absolute;
    width: 40px;
    height: 40px;
    clip-path: polygon(
        0% 25%, 15% 25%, 15% 15%, 25% 0%, 35% 15%, 35% 25%,
        65% 25%, 65% 15%, 75% 0%, 85% 15%, 85% 25%, 100% 25%,
        100% 40%, 85% 40%, 85% 60%, 100% 60%, 100% 75%,
        85% 75%, 85% 85%, 75% 100%, 65% 85%, 65% 75%,
        35% 75%, 35% 85%, 25% 100%, 15% 85%, 15% 75%, 0% 75%,
        0% 60%, 15% 60%, 15% 40%, 0% 40%
    );
    opacity: 0;
    transition: all 1s var(--spring-curve);
}

.logo-piece.assembled {
    opacity: 0.8;
}

.lp-1 { background: var(--electric-chartreuse); top: 30px; left: 30px; }
.lp-2 { background: var(--hot-magenta); top: 30px; left: 80px; }
.lp-3 { background: var(--cyan-pulse); top: 30px; left: 130px; }
.lp-4 { background: var(--sunset-amber); top: 80px; left: 55px; }
.lp-5 { background: var(--electric-chartreuse); top: 80px; left: 105px; }

.lp-1:not(.assembled) { transform: translate(-80px, -60px) rotate(45deg) scale(0.3); }
.lp-2:not(.assembled) { transform: translate(0, -80px) rotate(-30deg) scale(0.3); }
.lp-3:not(.assembled) { transform: translate(80px, -60px) rotate(60deg) scale(0.3); }
.lp-4:not(.assembled) { transform: translate(-60px, 80px) rotate(-45deg) scale(0.3); }
.lp-5:not(.assembled) { transform: translate(60px, 80px) rotate(30deg) scale(0.3); }

.lp-1.assembled { transform: translate(0, 0) rotate(0deg) scale(1); }
.lp-2.assembled { transform: translate(0, 0) rotate(0deg) scale(1); }
.lp-3.assembled { transform: translate(0, 0) rotate(0deg) scale(1); }
.lp-4.assembled { transform: translate(0, 0) rotate(0deg) scale(1); }
.lp-5.assembled { transform: translate(0, 0) rotate(0deg) scale(1); }

.basecamp-links {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.basecamp-link {
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(0.55rem, 0.9vw, 0.7rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--electric-chartreuse);
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
}

.basecamp-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--electric-chartreuse);
    transition: width 0.3s ease;
}

.basecamp-link:hover::after {
    width: 100%;
}

.basecamp-link:hover {
    color: var(--altitude-white);
}

.basecamp-final {
    font-family: 'Quicksand', sans-serif;
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    line-height: 1.72;
    color: var(--mist-lavender);
    opacity: 0.7;
    max-width: 38ch;
}

/* --- Responsive / utility --- */
@media (max-width: 768px) {
    .ascent-content,
    .descent-content {
        flex-direction: column;
        gap: 2rem;
        align-items: center;
        padding: 0 6vw;
    }

    .stair-1, .stair-2, .stair-3 {
        margin-top: 10vh;
    }

    .descend-1, .descend-2, .descend-3 {
        margin-top: 10vh;
    }

    .approach-content {
        padding-left: 8vw;
    }

    .basecamp-links {
        flex-direction: column;
        gap: 1.5rem;
    }

    #zone-nav {
        top: 10px;
        right: 10px;
        gap: 6px;
    }

    .zone-icon {
        width: 28px;
        height: 28px;
    }
}