/* ==========================================================
   addrenvoy.com - Pixel-Art Immersive Scroll World
   Palette: Burnt-Orange
   Fonts: Silkscreen (headlines), Nunito (body)
   ========================================================== */

/* --- CSS Custom Properties --- */
:root {
    --burnt-sienna: #C65D21;
    --deep-cocoa: #3B1F0B;
    --warm-parchment: #FFF5E8;
    --ember-night: #1A0E06;
    --marigold: #E8982A;
    --dusty-sage: #7A9E7E;
    --terracotta-cream: #F0D9BF;
    --pale-peach: #FFF0E0;
    --warm-umber: #4A2E1A;
}

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

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

body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.7;
    color: var(--warm-umber);
    background-color: var(--warm-parchment);
    overflow-x: hidden;
    -webkit-font-smoothing: auto;
    image-rendering: auto;
}

/* --- Pixel-art rendering --- */
.pixel-scene,
.pixel-scene * {
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

/* --- Typography --- */
.zone-title {
    font-family: 'Silkscreen', cursive;
    font-size: 48px;
    letter-spacing: 0.06em;
    color: var(--deep-cocoa);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 40px;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    position: relative;
    z-index: 5;
}

.zone-title-light {
    color: var(--pale-peach);
}

.bubble-label {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--burnt-sienna);
    display: block;
    margin-bottom: 8px;
}

/* --- Zone Base Styles --- */
.zone {
    position: relative;
    min-height: 120vh;
    width: 100%;
    overflow: hidden;
}

.zone-light {
    background-color: var(--warm-parchment);
}

.zone-dark {
    background-color: var(--ember-night);
    color: var(--pale-peach);
}

.zone-dark .content-bubble {
    background: var(--deep-cocoa);
    color: var(--pale-peach);
    box-shadow:
        2px 0 0 var(--marigold),
        -2px 0 0 var(--marigold),
        0 2px 0 var(--marigold),
        0 -2px 0 var(--marigold);
}

.zone-dark .bubble-label {
    color: var(--marigold);
}

.zone-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.zone-content {
    position: relative;
    z-index: 3;
    max-width: 720px;
    margin: 0 auto;
    padding: 120px 24px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/* --- Content Bubbles --- */
.content-bubble {
    background: var(--terracotta-cream);
    border-radius: 28px;
    padding: 28px 32px;
    max-width: 560px;
    width: 100%;
    position: relative;
    box-shadow:
        2px 0 0 var(--burnt-sienna),
        -2px 0 0 var(--burnt-sienna),
        0 2px 0 var(--burnt-sienna),
        0 -2px 0 var(--burnt-sienna);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.content-bubble.visible {
    opacity: 1;
    transform: translateY(0);
}

.content-bubble:hover {
    transform: scale(1.02);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.content-bubble.visible:hover {
    transform: translateY(0) scale(1.02);
}

.content-bubble p {
    font-size: 17px;
    line-height: 1.7;
}

.content-bubble strong {
    font-weight: 700;
    color: var(--burnt-sienna);
}

.zone-dark .content-bubble strong {
    color: var(--marigold);
}

/* Bubble float animation */
.bubble-float.visible {
    animation: bubbleFloat 4s ease-in-out infinite;
}

@keyframes bubbleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Bubble bloom (garden zone) */
.bubble-bloom {
    transform: translateY(60px) scale(0.9);
}

.bubble-bloom.visible {
    transform: translateY(0) scale(1);
    animation: bubbleBloom 4.5s ease-in-out infinite;
}

@keyframes bubbleBloom {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.01); }
}

/* Bubble orbit (observatory zone) */
.bubble-orbit {
    transform: translateY(40px) rotate(-1deg);
}

.bubble-orbit.visible {
    transform: translateY(0) rotate(0deg);
    animation: bubbleOrbit 6s ease-in-out infinite;
}

@keyframes bubbleOrbit {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(0.5deg); }
    75% { transform: translateY(3px) rotate(-0.5deg); }
}

/* Bubble rise (dock zone) */
.bubble-rise {
    transform: translateY(50px);
}

.bubble-rise.visible {
    animation: bubbleRise 5s ease-in-out infinite;
}

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

/* Glow bubble */
.glow-bubble {
    box-shadow:
        2px 0 0 var(--marigold),
        -2px 0 0 var(--marigold),
        0 2px 0 var(--marigold),
        0 -2px 0 var(--marigold),
        0 0 30px rgba(232, 152, 42, 0.25),
        0 0 60px rgba(232, 152, 42, 0.1);
}

/* --- Speech Bubbles --- */
.speech-bubble {
    background: var(--warm-parchment);
    border: 2px solid var(--deep-cocoa);
    border-radius: 20px;
    padding: 24px 28px;
    max-width: 480px;
    width: 100%;
    position: relative;
    margin-top: 12px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 5;
}

.speech-bubble.visible {
    opacity: 1;
    transform: translateY(0);
}

.speech-bubble p {
    font-style: italic;
    font-size: 16px;
    line-height: 1.7;
    color: var(--deep-cocoa);
}

.speech-bubble-dark {
    background: var(--ember-night);
    border-color: var(--marigold);
}

.speech-bubble-dark p {
    color: var(--pale-peach);
}

.speech-tail {
    position: absolute;
    bottom: -12px;
    left: 32px;
    width: 12px;
    height: 12px;
    /* Pixel-art stepped tail using box-shadows */
    background: transparent;
    box-shadow:
        0px 0px 0 0 var(--warm-parchment),
        0px 2px 0 0 var(--deep-cocoa),
        2px 2px 0 0 var(--warm-parchment),
        2px 4px 0 0 var(--deep-cocoa),
        4px 4px 0 0 var(--warm-parchment),
        4px 6px 0 0 var(--deep-cocoa),
        6px 6px 0 0 var(--warm-parchment),
        6px 8px 0 0 var(--deep-cocoa);
}

.speech-bubble-dark .speech-tail {
    box-shadow:
        0px 0px 0 0 var(--ember-night),
        0px 2px 0 0 var(--marigold),
        2px 2px 0 0 var(--ember-night),
        2px 4px 0 0 var(--marigold),
        4px 4px 0 0 var(--ember-night),
        4px 6px 0 0 var(--marigold),
        6px 6px 0 0 var(--ember-night),
        6px 8px 0 0 var(--marigold);
}

/* Typewriter cursor */
.typewriter-cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background: var(--deep-cocoa);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: cursorBlink 0.6s step-end infinite;
}

.speech-bubble-dark .typewriter-cursor {
    background: var(--pale-peach);
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* --- Decorative Background Bubbles --- */
#bubble-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.deco-bubble {
    position: absolute;
    border-radius: 50%;
    background: var(--marigold);
    pointer-events: none;
}

.deco-bubble.popped {
    animation: bubblePop 0.4s ease-out forwards;
}

@keyframes bubblePop {
    0% { transform: scale(1); opacity: var(--bubble-opacity); }
    50% { transform: scale(1.3); opacity: calc(var(--bubble-opacity) * 0.5); }
    100% { transform: scale(0); opacity: 0; }
}

@keyframes bubbleDrift {
    0% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-20px) translateX(8px);
    }
    50% {
        transform: translateY(-10px) translateX(-5px);
    }
    75% {
        transform: translateY(-30px) translateX(12px);
    }
    100% {
        transform: translateY(0) translateX(0);
    }
}

/* --- Scroll Progress Indicator --- */
#scroll-indicator {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#scroll-character {
    width: 16px;
    height: 16px;
    position: relative;
}

.pixel-walker {
    width: 16px;
    height: 16px;
    background: var(--burnt-sienna);
    box-shadow:
        /* head */
        4px 0px 0 0 var(--deep-cocoa),
        8px 0px 0 0 var(--deep-cocoa),
        /* body */
        2px 4px 0 0 var(--burnt-sienna),
        4px 4px 0 0 var(--burnt-sienna),
        6px 4px 0 0 var(--burnt-sienna),
        8px 4px 0 0 var(--burnt-sienna),
        10px 4px 0 0 var(--burnt-sienna),
        4px 8px 0 0 var(--burnt-sienna),
        6px 8px 0 0 var(--burnt-sienna),
        8px 8px 0 0 var(--burnt-sienna),
        /* legs */
        4px 12px 0 0 var(--deep-cocoa),
        8px 12px 0 0 var(--deep-cocoa);
    animation: walkerIdle 0.8s step-end infinite;
    image-rendering: pixelated;
}

@keyframes walkerIdle {
    0%, 49% {
        box-shadow:
            4px 0px 0 0 var(--deep-cocoa),
            8px 0px 0 0 var(--deep-cocoa),
            2px 4px 0 0 var(--burnt-sienna),
            4px 4px 0 0 var(--burnt-sienna),
            6px 4px 0 0 var(--burnt-sienna),
            8px 4px 0 0 var(--burnt-sienna),
            10px 4px 0 0 var(--burnt-sienna),
            4px 8px 0 0 var(--burnt-sienna),
            6px 8px 0 0 var(--burnt-sienna),
            8px 8px 0 0 var(--burnt-sienna),
            4px 12px 0 0 var(--deep-cocoa),
            8px 12px 0 0 var(--deep-cocoa);
    }
    50%, 100% {
        box-shadow:
            4px 0px 0 0 var(--deep-cocoa),
            8px 0px 0 0 var(--deep-cocoa),
            2px 4px 0 0 var(--burnt-sienna),
            4px 4px 0 0 var(--burnt-sienna),
            6px 4px 0 0 var(--burnt-sienna),
            8px 4px 0 0 var(--burnt-sienna),
            10px 4px 0 0 var(--burnt-sienna),
            4px 8px 0 0 var(--burnt-sienna),
            6px 8px 0 0 var(--burnt-sienna),
            8px 8px 0 0 var(--burnt-sienna),
            2px 12px 0 0 var(--deep-cocoa),
            10px 12px 0 0 var(--deep-cocoa);
    }
}

#scroll-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    background: rgba(26, 14, 6, 0.6);
    border-radius: 10px;
}

.zone-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--terracotta-cream);
    opacity: 0.4;
    transition: opacity 0.3s, background 0.3s, transform 0.3s;
}

.zone-dot.active {
    opacity: 1;
    background: var(--marigold);
    transform: scale(1.4);
}

/* ==========================================================
   ZONE 1: Welcome Village - Pixel Art Scene
   ========================================================== */
.zone-1-bg {
    background: linear-gradient(
        180deg,
        #FFF5E8 0%,
        #FFF0E0 40%,
        #F0D9BF 70%,
        #E8982A 100%
    );
}

.village-scene {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Sun */
.pixel-sun {
    position: absolute;
    top: 8%;
    right: 15%;
    width: 48px;
    height: 48px;
    background: var(--marigold);
    box-shadow:
        -6px 0 0 var(--marigold),
        6px 0 0 var(--marigold),
        0 -6px 0 var(--marigold),
        0 6px 0 var(--marigold),
        48px 0 0 var(--marigold),
        54px 0 0 var(--marigold),
        -6px -6px 0 rgba(232, 152, 42, 0.3),
        54px -6px 0 rgba(232, 152, 42, 0.3),
        -6px 6px 0 rgba(232, 152, 42, 0.3),
        54px 6px 0 rgba(232, 152, 42, 0.3);
    border-radius: 0;
    image-rendering: pixelated;
    animation: sunPulse 3s ease-in-out infinite;
}

@keyframes sunPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* Clouds */
.pixel-cloud {
    position: absolute;
    width: 64px;
    height: 24px;
    background: var(--warm-parchment);
    border-radius: 0;
    image-rendering: pixelated;
    box-shadow:
        8px -8px 0 var(--warm-parchment),
        16px -8px 0 var(--warm-parchment),
        24px -8px 0 var(--warm-parchment),
        32px -8px 0 var(--warm-parchment),
        40px -8px 0 var(--warm-parchment),
        16px -16px 0 var(--warm-parchment),
        24px -16px 0 var(--warm-parchment),
        32px -16px 0 var(--warm-parchment);
}

.cloud-1 {
    top: 12%;
    left: 10%;
    animation: cloudDrift 20s linear infinite;
}

.cloud-2 {
    top: 18%;
    left: 55%;
    animation: cloudDrift 28s linear infinite reverse;
    transform: scale(0.8);
}

@keyframes cloudDrift {
    0% { transform: translateX(0); }
    100% { transform: translateX(60px); }
}

/* Mountains */
.pixel-mountain {
    position: absolute;
    bottom: 35%;
    image-rendering: pixelated;
}

.mountain-1 {
    left: 5%;
    width: 0;
    height: 0;
    border-left: 120px solid transparent;
    border-right: 120px solid transparent;
    border-bottom: 160px solid var(--terracotta-cream);
}

.mountain-2 {
    right: 8%;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 130px solid var(--terracotta-cream);
    opacity: 0.7;
}

/* Hills */
.pixel-hill {
    position: absolute;
    bottom: 25%;
    width: 300px;
    height: 100px;
    border-radius: 100px 100px 0 0;
    background: var(--dusty-sage);
    image-rendering: pixelated;
}

.hill-left {
    left: -50px;
}

.hill-right {
    right: -30px;
    width: 250px;
    height: 80px;
    opacity: 0.8;
}

/* Ground */
.pixel-ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28%;
    background: var(--dusty-sage);
    image-rendering: pixelated;
}

.pixel-ground::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        #6B8E6B 0px,
        #6B8E6B 8px,
        var(--dusty-sage) 8px,
        var(--dusty-sage) 16px
    );
}

/* Buildings */
.pixel-building {
    position: absolute;
    image-rendering: pixelated;
}

.building-shop {
    bottom: 28%;
    left: 18%;
    width: 120px;
    height: 100px;
}

.building-shop .building-roof {
    position: absolute;
    top: -20px;
    left: -10px;
    width: 140px;
    height: 24px;
    background: var(--burnt-sienna);
    box-shadow: 0 0 0 2px var(--deep-cocoa);
}

.building-shop .building-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 80px;
    background: var(--terracotta-cream);
    box-shadow: 0 0 0 2px var(--deep-cocoa);
}

.building-shop .building-door {
    position: absolute;
    bottom: 0;
    left: 44px;
    width: 32px;
    height: 44px;
    background: var(--deep-cocoa);
    box-shadow: inset 0 0 0 2px var(--burnt-sienna);
}

.building-shop .building-window {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 20px;
    background: var(--marigold);
    box-shadow: 0 0 0 2px var(--deep-cocoa), 0 0 12px rgba(232, 152, 42, 0.4);
}

.building-sign {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Silkscreen', cursive;
    font-size: 12px;
    color: var(--warm-parchment);
    background: var(--deep-cocoa);
    padding: 2px 8px;
    white-space: nowrap;
    box-shadow: 0 0 0 2px var(--burnt-sienna);
}

.building-tower {
    bottom: 28%;
    right: 20%;
    width: 80px;
    height: 140px;
}

.tower-roof {
    position: absolute;
    top: -30px;
    left: 10px;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 34px solid var(--burnt-sienna);
}

.tower-body {
    position: absolute;
    top: 0;
    left: 10px;
    width: 60px;
    height: 140px;
    background: var(--terracotta-cream);
    box-shadow: 0 0 0 2px var(--deep-cocoa);
}

.tower-window-1 {
    position: absolute;
    top: 20px;
    left: 28px;
    width: 20px;
    height: 20px;
    border-radius: 10px 10px 0 0;
    background: var(--marigold);
    box-shadow: 0 0 0 2px var(--deep-cocoa), 0 0 10px rgba(232, 152, 42, 0.3);
}

.tower-window-2 {
    position: absolute;
    top: 60px;
    left: 28px;
    width: 20px;
    height: 20px;
    border-radius: 10px 10px 0 0;
    background: var(--marigold);
    box-shadow: 0 0 0 2px var(--deep-cocoa), 0 0 10px rgba(232, 152, 42, 0.3);
}

/* Trees */
.pixel-tree {
    position: absolute;
    width: 40px;
    height: 60px;
    image-rendering: pixelated;
}

.pixel-tree::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 24px;
    background: var(--deep-cocoa);
}

.pixel-tree::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 40px;
    background: var(--dusty-sage);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--deep-cocoa);
}

.tree-1 { bottom: 28%; left: 6%; }
.tree-2 { bottom: 30%; left: 42%; transform: scale(0.85); }
.tree-3 { bottom: 28%; right: 8%; transform: scale(1.1); }

/* Bushes */
.pixel-bush {
    position: absolute;
    bottom: 26%;
    width: 32px;
    height: 20px;
    background: var(--dusty-sage);
    border-radius: 12px 12px 4px 4px;
    box-shadow: 0 0 0 2px var(--deep-cocoa);
    image-rendering: pixelated;
}

.bush-1 { left: 35%; }
.bush-2 { right: 35%; }

/* Path */
.pixel-path {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 28%;
    background: repeating-linear-gradient(
        180deg,
        #C9A882 0px,
        #C9A882 8px,
        #B8956F 8px,
        #B8956F 16px
    );
    border-left: 2px solid var(--deep-cocoa);
    border-right: 2px solid var(--deep-cocoa);
}

/* NPC */
.welcome-npc {
    position: absolute;
    bottom: 32%;
    left: 52%;
    width: 24px;
    height: 32px;
}

.npc-body {
    width: 16px;
    height: 24px;
    position: relative;
    margin: 0 auto;
    background: var(--burnt-sienna);
    box-shadow:
        /* head */
        2px -8px 0 0 var(--terracotta-cream),
        4px -8px 0 0 var(--terracotta-cream),
        6px -8px 0 0 var(--terracotta-cream),
        8px -8px 0 0 var(--terracotta-cream),
        10px -8px 0 0 var(--terracotta-cream),
        2px -10px 0 0 var(--terracotta-cream),
        4px -10px 0 0 var(--terracotta-cream),
        6px -10px 0 0 var(--terracotta-cream),
        8px -10px 0 0 var(--terracotta-cream),
        10px -10px 0 0 var(--terracotta-cream),
        /* eyes */
        4px -10px 0 0 var(--deep-cocoa),
        8px -10px 0 0 var(--deep-cocoa);
    image-rendering: pixelated;
    animation: npcIdle 2s step-end infinite;
}

@keyframes npcIdle {
    0%, 90% { opacity: 1; }
    91%, 95% { opacity: 0.8; }
    96%, 100% { opacity: 1; }
}

/* Terrain Transitions */
.zone-terrain-edge {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 2;
    image-rendering: pixelated;
}

.terrain-grass-to-cobble {
    background: repeating-linear-gradient(
        90deg,
        var(--dusty-sage) 0px,
        var(--dusty-sage) 16px,
        #8AAE8A 16px,
        #8AAE8A 24px,
        var(--dusty-sage) 24px,
        var(--dusty-sage) 32px
    );
}

.terrain-cobble-to-garden {
    background: repeating-linear-gradient(
        90deg,
        #C9A882 0px,
        #C9A882 12px,
        #B8956F 12px,
        #B8956F 20px,
        var(--dusty-sage) 20px,
        var(--dusty-sage) 32px
    );
}

.terrain-garden-to-night {
    background: linear-gradient(
        180deg,
        var(--dusty-sage) 0%,
        var(--deep-cocoa) 60%,
        var(--ember-night) 100%
    );
}

.terrain-night-to-dock {
    background: linear-gradient(
        180deg,
        var(--ember-night),
        #0D0704
    );
}

/* ==========================================================
   ZONE 2: The Workshop
   ========================================================== */
.zone-2-bg {
    background: linear-gradient(
        180deg,
        var(--terracotta-cream) 0%,
        #E8C9A5 50%,
        var(--terracotta-cream) 100%
    );
}

.workshop-scene {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.workshop-wall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: var(--terracotta-cream);
    box-shadow: inset 0 -4px 0 var(--deep-cocoa);
}

.workshop-wall::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 120px,
        rgba(59, 31, 11, 0.05) 120px,
        rgba(59, 31, 11, 0.05) 122px
    );
}

.workshop-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: repeating-linear-gradient(
        90deg,
        #A07850 0px,
        #A07850 60px,
        #8B6842 60px,
        #8B6842 62px,
        #B08860 62px,
        #B08860 122px,
        #8B6842 122px,
        #8B6842 124px
    );
}

/* Shelves */
.pixel-shelf {
    position: absolute;
    left: 5%;
    width: 160px;
    height: 12px;
    background: var(--deep-cocoa);
    box-shadow: 0 2px 0 #2A1508;
}

.shelf-top { top: 15%; }
.shelf-bottom { top: 32%; }

.shelf-item {
    position: absolute;
    bottom: 100%;
    image-rendering: pixelated;
}

.book-1 {
    left: 8px;
    width: 14px;
    height: 22px;
    background: var(--burnt-sienna);
    box-shadow: 0 0 0 1px var(--deep-cocoa);
}

.book-2 {
    left: 28px;
    width: 12px;
    height: 18px;
    background: var(--dusty-sage);
    box-shadow: 0 0 0 1px var(--deep-cocoa);
}

.jar-1 {
    left: 52px;
    width: 16px;
    height: 20px;
    background: var(--marigold);
    border-radius: 4px 4px 8px 8px;
    box-shadow: 0 0 0 1px var(--deep-cocoa);
    opacity: 0.8;
}

.scroll-1 {
    left: 8px;
    width: 24px;
    height: 10px;
    background: var(--warm-parchment);
    border-radius: 5px;
    box-shadow: 0 0 0 1px var(--deep-cocoa);
}

.inkwell {
    left: 44px;
    width: 12px;
    height: 14px;
    background: var(--deep-cocoa);
    border-radius: 2px 2px 6px 6px;
}

.book-3 {
    left: 68px;
    width: 16px;
    height: 24px;
    background: var(--marigold);
    box-shadow: 0 0 0 1px var(--deep-cocoa);
}

/* Workbench */
.pixel-workbench {
    position: absolute;
    bottom: 30%;
    right: 8%;
    width: 180px;
    height: 70px;
}

.workbench-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 12px;
    background: var(--deep-cocoa);
    box-shadow: 0 2px 0 #2A1508;
}

.workbench-legs {
    position: absolute;
    top: 12px;
    left: 10px;
    width: 8px;
    height: 58px;
    background: var(--deep-cocoa);
    box-shadow: 150px 0 0 var(--deep-cocoa);
}

.envelope-on-bench {
    position: absolute;
    top: -16px;
    left: 40px;
    width: 32px;
    height: 22px;
    background: var(--warm-parchment);
    box-shadow: 0 0 0 2px var(--deep-cocoa);
}

.envelope-on-bench::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 12px solid var(--burnt-sienna);
}

.pixel-quill {
    position: absolute;
    top: -24px;
    right: 30px;
    width: 4px;
    height: 28px;
    background: var(--deep-cocoa);
    transform: rotate(-20deg);
}

.pixel-quill::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -4px;
    width: 12px;
    height: 10px;
    background: var(--marigold);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Lanterns */
.pixel-lantern {
    position: absolute;
    width: 16px;
    height: 24px;
}

.pixel-lantern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 4px;
    width: 8px;
    height: 4px;
    background: var(--deep-cocoa);
}

.pixel-lantern::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 2px;
    width: 12px;
    height: 16px;
    background: var(--marigold);
    box-shadow: 0 0 0 2px var(--deep-cocoa), 0 0 16px rgba(232, 152, 42, 0.5);
    border-radius: 2px;
    animation: lanternGlow 2s ease-in-out infinite alternate;
}

@keyframes lanternGlow {
    0% { box-shadow: 0 0 0 2px var(--deep-cocoa), 0 0 12px rgba(232, 152, 42, 0.4); }
    100% { box-shadow: 0 0 0 2px var(--deep-cocoa), 0 0 22px rgba(232, 152, 42, 0.6); }
}

.lantern-1 { top: 20%; right: 30%; }
.lantern-2 { top: 35%; left: 25%; }

/* Corkboard */
.workshop-corkboard {
    position: absolute;
    top: 12%;
    right: 20%;
    width: 100px;
    height: 80px;
    background: #B08860;
    box-shadow: 0 0 0 4px var(--deep-cocoa);
}

.corkboard-pin {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--burnt-sienna);
}

.pin-1 { top: 10px; left: 15px; }
.pin-2 { top: 10px; right: 20px; }
.pin-3 { top: 40px; left: 40px; }

.corkboard-pin::after {
    content: '';
    position: absolute;
    top: 6px;
    left: -6px;
    width: 18px;
    height: 14px;
    background: var(--warm-parchment);
    box-shadow: 0 0 0 1px var(--deep-cocoa);
}

/* ==========================================================
   ZONE 3: The Garden Path
   ========================================================== */
.zone-3-bg {
    background: linear-gradient(
        180deg,
        #B8E0B8 0%,
        #A0D0A0 30%,
        var(--dusty-sage) 70%,
        #5C7E5C 100%
    );
}

.garden-scene {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.garden-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(
        180deg,
        #FFF5E8 0%,
        #FFF0E0 50%,
        #B8E0B8 100%
    );
}

.garden-ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: var(--dusty-sage);
}

.garden-path-tiles {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 60%;
    background: repeating-linear-gradient(
        180deg,
        #C9A882 0px,
        #C9A882 16px,
        #B8956F 16px,
        #B8956F 20px
    );
    border-left: 2px solid var(--deep-cocoa);
    border-right: 2px solid var(--deep-cocoa);
    opacity: 0.7;
}

/* Flowers */
.pixel-flower {
    position: absolute;
    width: 12px;
    height: 20px;
    image-rendering: pixelated;
}

.pixel-flower::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 12px;
    background: #5C7E5C;
}

.pixel-flower::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--marigold);
    box-shadow: 0 0 0 2px var(--burnt-sienna);
}

.flower-1 { bottom: 42%; left: 15%; }
.flower-2 { bottom: 48%; left: 30%; }
.flower-3 { bottom: 38%; right: 25%; }
.flower-4 { bottom: 55%; right: 15%; }
.flower-5 { bottom: 50%; left: 8%; }
.flower-6 { bottom: 44%; right: 38%; }

.flower-2::after, .flower-4::after, .flower-6::after {
    background: var(--burnt-sienna);
    box-shadow: 0 0 0 2px var(--deep-cocoa);
}

.garden-tree-1 {
    bottom: 40%;
    left: 3%;
    transform: scale(1.3);
}

.garden-tree-2 {
    bottom: 40%;
    right: 5%;
    transform: scale(1.2);
}

.garden-bush-1 { bottom: 38%; left: 22%; }
.garden-bush-2 { bottom: 42%; right: 30%; }
.garden-bush-3 { bottom: 36%; left: 60%; }

/* Butterflies */
.pixel-butterfly {
    position: absolute;
    width: 12px;
    height: 8px;
    image-rendering: pixelated;
}

.pixel-butterfly::before,
.pixel-butterfly::after {
    content: '';
    position: absolute;
    top: 0;
    width: 6px;
    height: 8px;
    background: var(--marigold);
    border-radius: 50%;
}

.pixel-butterfly::before { left: 0; }
.pixel-butterfly::after { right: 0; }

.butterfly-1 {
    top: 30%;
    left: 25%;
    animation: butterflyFly 8s ease-in-out infinite;
}

.butterfly-2 {
    top: 25%;
    right: 20%;
    animation: butterflyFly 10s ease-in-out infinite reverse;
}

@keyframes butterflyFly {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -15px) rotate(5deg); }
    50% { transform: translate(40px, 5px) rotate(-3deg); }
    75% { transform: translate(15px, -20px) rotate(4deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* Floating envelope */
.floating-envelope {
    position: absolute;
    top: 35%;
    left: 50%;
    width: 28px;
    height: 20px;
    background: var(--warm-parchment);
    box-shadow: 0 0 0 2px var(--deep-cocoa);
    animation: envelopeFloat 6s ease-in-out infinite;
}

.floating-envelope::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 10px solid var(--burnt-sienna);
}

@keyframes envelopeFloat {
    0%, 100% { transform: translate(-50%, 0) rotate(-3deg); }
    50% { transform: translate(-50%, -20px) rotate(3deg); }
}

/* ==========================================================
   ZONE 4: The Observatory
   ========================================================== */
.zone-4-bg {
    background: linear-gradient(
        180deg,
        #0D0704 0%,
        var(--ember-night) 30%,
        #1A0E06 70%,
        #0D0704 100%
    );
}

.observatory-scene {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.night-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Stars */
.pixel-star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--warm-parchment);
    image-rendering: pixelated;
}

.pixel-star::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 8px;
    height: 8px;
    background: transparent;
    box-shadow:
        2px 0 0 rgba(255, 245, 232, 0.3),
        -2px 0 0 rgba(255, 245, 232, 0.3),
        0 2px 0 rgba(255, 245, 232, 0.3),
        0 -2px 0 rgba(255, 245, 232, 0.3);
}

.star-1 { top: 8%; left: 12%; animation: starTwinkle 3s ease-in-out infinite; }
.star-2 { top: 15%; left: 35%; animation: starTwinkle 4s ease-in-out infinite 0.5s; }
.star-3 { top: 5%; left: 55%; animation: starTwinkle 3.5s ease-in-out infinite 1s; }
.star-4 { top: 20%; left: 75%; animation: starTwinkle 2.8s ease-in-out infinite 0.3s; }
.star-5 { top: 10%; left: 88%; animation: starTwinkle 4.2s ease-in-out infinite 1.5s; }
.star-6 { top: 25%; left: 5%; animation: starTwinkle 3.2s ease-in-out infinite 0.8s; }
.star-7 { top: 30%; left: 22%; animation: starTwinkle 3.8s ease-in-out infinite 0.2s; }
.star-8 { top: 12%; left: 48%; animation: starTwinkle 2.5s ease-in-out infinite 1.2s; }
.star-9 { top: 35%; left: 65%; animation: starTwinkle 4.5s ease-in-out infinite 0.7s; }
.star-10 { top: 18%; left: 92%; animation: starTwinkle 3.1s ease-in-out infinite 1.8s; }
.star-11 { top: 40%; left: 15%; animation: starTwinkle 3.6s ease-in-out infinite 0.4s; }
.star-12 { top: 22%; left: 42%; animation: starTwinkle 2.9s ease-in-out infinite 1.1s; }
.star-13 { top: 8%; left: 70%; animation: starTwinkle 4.1s ease-in-out infinite 0.6s; }
.star-14 { top: 45%; left: 80%; animation: starTwinkle 3.3s ease-in-out infinite 1.4s; }
.star-15 { top: 38%; left: 52%; animation: starTwinkle 2.7s ease-in-out infinite 0.9s; }

@keyframes starTwinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Moon */
.pixel-moon {
    position: absolute;
    top: 10%;
    right: 12%;
    width: 48px;
    height: 48px;
    background: var(--marigold);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(232, 152, 42, 0.4), 0 0 48px rgba(232, 152, 42, 0.2);
    image-rendering: pixelated;
}

.pixel-moon::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 8px;
    width: 36px;
    height: 36px;
    background: rgba(26, 14, 6, 0.2);
    border-radius: 50%;
}

/* Observatory structure */
.observatory-dome {
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 80px;
    background: var(--deep-cocoa);
    border-radius: 80px 80px 0 0;
    box-shadow: 0 0 0 2px var(--burnt-sienna);
}

.observatory-dome::after {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 30px;
    background: var(--deep-cocoa);
    box-shadow: 0 0 0 2px var(--burnt-sienna);
}

.observatory-base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 25%;
    background: var(--deep-cocoa);
    box-shadow: 0 0 0 2px var(--burnt-sienna);
}

.observatory-telescope {
    position: absolute;
    bottom: 28%;
    left: calc(50% + 40px);
    width: 80px;
    height: 8px;
    background: var(--burnt-sienna);
    transform: rotate(-30deg);
    transform-origin: left center;
    box-shadow: 0 0 0 2px var(--deep-cocoa);
}

.observatory-telescope::after {
    content: '';
    position: absolute;
    top: -6px;
    right: -12px;
    width: 16px;
    height: 20px;
    background: var(--burnt-sienna);
    border-radius: 4px;
    box-shadow: 0 0 0 2px var(--deep-cocoa);
}

/* ==========================================================
   ZONE 5: The Farewell Dock
   ========================================================== */
.zone-5-bg {
    background: linear-gradient(
        180deg,
        #0D0704 0%,
        var(--ember-night) 20%,
        #1A1228 40%,
        #152035 60%,
        #1A3040 100%
    );
}

.dock-scene {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dock-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
}

.dock-water {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(
        180deg,
        #1A3040 0%,
        #0D1E2A 100%
    );
}

.water-ripple {
    position: absolute;
    width: 80px;
    height: 4px;
    border-radius: 2px;
    background: rgba(232, 152, 42, 0.15);
    animation: ripple 4s ease-in-out infinite;
}

.ripple-1 { top: 20%; left: 20%; animation-delay: 0s; }
.ripple-2 { top: 45%; left: 55%; animation-delay: 1.5s; }
.ripple-3 { top: 70%; left: 35%; animation-delay: 3s; }

@keyframes ripple {
    0%, 100% { transform: scaleX(1); opacity: 0.15; }
    50% { transform: scaleX(1.5); opacity: 0.3; }
}

/* Dock structure */
.pixel-dock {
    position: absolute;
    bottom: 48%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 20px;
}

.dock-plank {
    position: absolute;
    height: 8px;
    background: #8B6842;
    box-shadow: 0 0 0 1px var(--deep-cocoa);
}

.plank-1 { top: 0; left: 0; width: 200px; }
.plank-2 { top: 8px; left: 4px; width: 192px; background: #A07850; }
.plank-3 { top: 16px; left: 8px; width: 184px; background: #8B6842; }

.dock-post {
    position: absolute;
    bottom: 0;
    width: 12px;
    height: 40px;
    background: var(--deep-cocoa);
    box-shadow: 0 0 0 1px #5A3A1E;
}

.post-left { left: 10px; }
.post-right { right: 10px; }

.dock-lantern {
    position: absolute;
    top: -24px;
    right: 8px;
    width: 10px;
    height: 14px;
    background: var(--marigold);
    box-shadow: 0 0 0 2px var(--deep-cocoa), 0 0 16px rgba(232, 152, 42, 0.5);
    border-radius: 2px;
    animation: lanternGlow 2.5s ease-in-out infinite alternate;
}

/* Boat */
.pixel-boat {
    position: absolute;
    bottom: 30%;
    right: 18%;
    width: 80px;
    height: 60px;
    animation: boatBob 5s ease-in-out infinite;
}

.boat-hull {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 24px;
    background: var(--deep-cocoa);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 0 0 2px var(--burnt-sienna);
}

.boat-sail {
    position: absolute;
    bottom: 24px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 28px solid transparent;
    border-bottom: 40px solid var(--warm-parchment);
}

.boat-flag {
    position: absolute;
    bottom: 60px;
    left: 32px;
    width: 16px;
    height: 10px;
    background: var(--burnt-sienna);
    clip-path: polygon(0 0, 100% 30%, 100% 70%, 0 100%);
}

@keyframes boatBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-4px) rotate(1deg); }
    75% { transform: translateY(4px) rotate(-1deg); }
}

/* Water bubbles */
.water-bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(232, 152, 42, 0.15);
    border: 1px solid rgba(232, 152, 42, 0.2);
}

.wb-1 { bottom: 20%; left: 25%; width: 12px; height: 12px; animation: waterBubbleRise 6s ease-in-out infinite; }
.wb-2 { bottom: 15%; left: 40%; width: 8px; height: 8px; animation: waterBubbleRise 8s ease-in-out infinite 1s; }
.wb-3 { bottom: 25%; right: 30%; width: 16px; height: 16px; animation: waterBubbleRise 7s ease-in-out infinite 2s; }
.wb-4 { bottom: 10%; left: 60%; width: 10px; height: 10px; animation: waterBubbleRise 9s ease-in-out infinite 3s; }
.wb-5 { bottom: 18%; right: 20%; width: 14px; height: 14px; animation: waterBubbleRise 6.5s ease-in-out infinite 4s; }

@keyframes waterBubbleRise {
    0% { transform: translateY(0) scale(1); opacity: 0.15; }
    50% { transform: translateY(-40px) scale(1.1); opacity: 0.3; }
    100% { transform: translateY(-80px) scale(0.8); opacity: 0; }
}

/* --- Farewell Zone Content --- */
.farewell-cta {
    text-align: center;
}

.farewell-wave {
    font-size: 24px;
    letter-spacing: 0.3em;
    color: var(--marigold);
    margin-bottom: 8px;
}

.farewell-tagline {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--marigold);
    margin-top: 4px;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    .zone-title {
        font-size: 32px;
    }

    .zone-content {
        padding: 80px 16px 60px;
    }

    .content-bubble,
    .speech-bubble {
        max-width: 100%;
        padding: 20px 24px;
    }

    .pixel-building,
    .pixel-workbench,
    .workshop-corkboard {
        transform: scale(0.7);
    }

    .pixel-shelf {
        transform: scale(0.6);
    }

    .observatory-dome {
        width: 120px;
        height: 60px;
    }

    .observatory-base {
        width: 150px;
    }

    .pixel-boat {
        right: 8%;
        transform: scale(0.8);
    }

    #scroll-indicator {
        bottom: 12px;
        right: 12px;
    }
}

@media (max-width: 480px) {
    .zone-title {
        font-size: 24px;
    }

    body {
        font-size: 15px;
    }

    .content-bubble p {
        font-size: 15px;
    }

    .building-shop,
    .building-tower {
        display: none;
    }
}