/* ==========================================================
   talegrapher.com — pop-up storybook
   Palette:
     #faf3e8 page cream     #e8efe3 page sage
     #3a3530 ink            #d94f4f red
     #4a8fb8 blue           #e8b83a yellow
     #5a8a5a green          #c4b8a4 paper shadow
     #e8a0a0 rose tab       #8b7e6a pencil
   Fonts: Fredoka, Nunito, Architects Daughter, Patrick Hand
========================================================== */

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

html, body {
    height: 100%;
    background: #faf3e8;
    color: #3a3530;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 16px;
    line-height: 26px;
    overflow-x: hidden;
}

body {
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
}

/* page-turn snap experience */
.storybook {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    height: 100vh;
    overflow-y: auto;
    perspective: 1500px;
}

/* ==========================================================
   BOOK COVER OPENING
========================================================== */
.book-cover {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    perspective: 1600px;
}

.cover-half {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: #5a8a5a;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(58, 53, 48, 0.08) 1px, transparent 1.5px);
    background-size: 4px 4px;
    transform-style: preserve-3d;
    transition: transform 1100ms cubic-bezier(.7, 0, .25, 1);
    pointer-events: auto;
    will-change: transform;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.18);
}

.cover-left  { left: 0;  transform-origin: left center; }
.cover-right { right: 0; transform-origin: right center; }

.book-cover.open .cover-left  { transform: rotateY(-105deg); }
.book-cover.open .cover-right { transform: rotateY(105deg); }
.book-cover.gone { opacity: 0; transition: opacity 600ms ease 800ms; pointer-events: none; }

/* embossed contents */
.cover-emboss, .cover-emboss-back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #faf3e8;
    text-shadow: 0 2px 0 rgba(0,0,0,0.25), 0 -1px 0 rgba(255,255,255,0.15);
    padding: 40px;
}

.cover-emboss::after, .cover-emboss-back::after {
    /* inner border frame */
    content: '';
    position: absolute;
    inset: 24px;
    border: 2px solid rgba(250, 243, 232, 0.3);
    border-radius: 6px;
    pointer-events: none;
}

.cover-deco {
    font-size: 28px;
    color: #e8b83a;
    margin-bottom: 18px;
    text-shadow: 0 2px 0 rgba(0,0,0,0.3);
}

.cover-title {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: clamp(48px, 8vw, 96px);
    line-height: 0.95;
    text-align: center;
    color: #faf3e8;
    letter-spacing: -1px;
}

.cover-sub {
    font-family: 'Architects Daughter', cursive;
    font-size: 22px;
    margin-top: 18px;
    color: #e8efe3;
    letter-spacing: 1px;
}

.cover-illo {
    position: relative;
    width: 220px;
    height: 90px;
    margin-top: 32px;
}

.cover-tree {
    position: absolute;
    bottom: 0;
    left: 30px;
    width: 30px;
    height: 60px;
    background: #3a3530;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.cover-castle {
    position: absolute;
    bottom: 0;
    left: 90px;
    width: 70px;
    height: 60px;
    background: #faf3e8;
    border-radius: 4px 4px 0 0;
    box-shadow: inset 0 -10px 0 #e8b83a;
}
.cover-castle::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 14px;
    background: #d94f4f;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.cover-hill {
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 20px;
    background: #4a8fb8;
    border-radius: 100% 100% 0 0 / 100% 100% 0 0;
}

.cover-stamp {
    font-family: 'Patrick Hand', cursive;
    font-size: 18px;
    letter-spacing: 4px;
    color: #faf3e8;
    border: 2px solid rgba(250,243,232,0.5);
    padding: 6px 14px;
    border-radius: 4px;
    margin-bottom: 24px;
}

.cover-spine-deco {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #e8b83a 0 30%, transparent 31%),
        radial-gradient(circle at center, #d94f4f 0 14%, transparent 15%);
    border: 3px solid #faf3e8;
    margin-bottom: 24px;
}

.cover-foot {
    font-family: 'Architects Daughter', cursive;
    font-size: 18px;
    color: #e8efe3;
}

/* ==========================================================
   BOOK SPINE / SCROLL PROGRESS
========================================================== */
.book-spine {
    position: fixed;
    top: 0;
    left: 0;
    width: 4px;
    height: 100vh;
    background: rgba(196, 184, 164, 0.4);
    z-index: 80;
    overflow: hidden;
}
.spine-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: #e8b83a;
    transition: height 120ms linear;
    box-shadow: 0 0 8px rgba(232, 184, 58, 0.6);
}

/* ==========================================================
   TAB NAVIGATION (paper tabs on the right)
========================================================== */
.tab-nav {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 70;
}

.tab {
    width: 80px;
    height: 32px;
    background: #faf3e8;
    color: #3a3530;
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 12px;
    font-family: 'Patrick Hand', cursive;
    font-size: 14px;
    text-decoration: none;
    box-shadow:
        -2px 2px 0 rgba(58, 53, 48, 0.12),
        inset 1px 1px 0 rgba(255,255,255,0.5);
    transform: translateX(36px);
    transition: transform 280ms cubic-bezier(.34,1.56,.64,1), width 280ms ease, background 280ms ease;
    position: relative;
    overflow: hidden;
}
.tab::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(58,53,48,0.06) 1px, transparent 1.5px);
    background-size: 4px 4px;
    pointer-events: none;
}
.tab span { position: relative; z-index: 2; }

.tab-1 { background: #e8a0a0; }
.tab-2 { background: #4a8fb8; color: #faf3e8; }
.tab-3 { background: #e8b83a; }
.tab-4 { background: #5a8a5a; color: #faf3e8; }
.tab-5 { background: #d94f4f; color: #faf3e8; }

.tab:hover { transform: translateX(20px); }
.tab.active {
    transform: translateX(0);
    width: 100px;
}

/* ==========================================================
   SPREAD / PAGE
========================================================== */
.spread {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 700ms cubic-bezier(.7,0,.25,1);
}

.spread-cream { background: #faf3e8; }
.spread-sage  { background: #e8efe3; }

/* halftone screen-print texture */
.halftone {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 2px 2px, rgba(58, 53, 48, 0.12) 1px, transparent 1.5px);
    background-size: 4px 4px;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: multiply;
    z-index: 1;
}

/* center vertical fold line */
.fold-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 60px;
    height: 100%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(58, 53, 48, 0.0) 35%,
        rgba(58, 53, 48, 0.18) 50%,
        rgba(58, 53, 48, 0.0) 65%,
        transparent 100%);
}
.fold-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: rgba(255,255,255,0.45);
    transform: translateX(-1px);
}

/* page numbers */
.page-number {
    position: absolute;
    bottom: 40px;
    font-family: 'Patrick Hand', cursive;
    font-size: 14px;
    color: #8b7e6a;
    z-index: 5;
}
.page-number.left  { left: 60px; }
.page-number.right { right: 60px; }

/* page foot */
.page-foot {
    position: absolute;
    bottom: 24px;
    left: 60px;
    right: 60px;
    display: flex;
    justify-content: space-between;
    font-family: 'Patrick Hand', cursive;
    font-size: 14px;
    color: #8b7e6a;
    z-index: 5;
}

/* page-curl invitation */
.page-curl {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    z-index: 6;
    cursor: pointer;
    background:
        linear-gradient(225deg,
            #c4b8a4 0%,
            #c4b8a4 48%,
            transparent 49%);
    box-shadow: -2px -2px 4px rgba(58,53,48,0.12) inset;
    transition: width 320ms ease, height 320ms ease;
}
.page-curl::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(225deg, rgba(255,255,255,0.4) 0%, transparent 50%);
}
.page-curl:hover {
    width: 80px;
    height: 80px;
}

/* ==========================================================
   STAGE: 3D perspective container
========================================================== */
.stage {
    position: absolute;
    inset: 0;
    perspective: 1200px;
    perspective-origin: 50% 60%;
    transform-style: preserve-3d;
    z-index: 3;
}

.popup {
    position: absolute;
    transform-origin: bottom center;
    transform: scaleY(0);
    opacity: 0;
    transition:
        transform 600ms cubic-bezier(.34, 1.56, .64, 1),
        opacity 400ms ease;
    will-change: transform, opacity;
}

.spread.in-view .popup { opacity: 1; transform: scaleY(1); }
.spread.in-view .popup.back-layer  { transition-delay: 80ms; }
.spread.in-view .popup.mid-layer   { transition-delay: 280ms; }
.spread.in-view .popup.front-layer { transition-delay: 480ms; }

/* depth layers */
.back-layer  { transform: scaleY(0) translateZ(-160px); filter: saturate(0.85); }
.mid-layer   { transform: scaleY(0) translateZ(-40px); }
.front-layer { transform: scaleY(0) translateZ(40px); filter: drop-shadow(0 12px 14px rgba(58,53,48,0.18)); }

.spread.in-view .back-layer  { transform: scaleY(1) translateZ(-160px); }
.spread.in-view .mid-layer   { transform: scaleY(1) translateZ(-40px); }
.spread.in-view .front-layer { transform: scaleY(1) translateZ(40px); }

/* paper grain helper */
.popup.pop-cloud,
.popup.pop-mountain,
.popup.pop-tree,
.popup.pop-castle,
.popup.pop-hill,
.popup.pop-bird,
.popup.pop-sun,
.popup .frame-inner,
.popup.die-cut-frame,
.popup.pop-stripes {
    background-blend-mode: multiply;
}

/* ==========================================================
   TEXT BLOCK
========================================================== */
.text-block {
    width: min(440px, 42vw);
    top: 28%;
    left: 8%;
    z-index: 9;
    transform-origin: bottom center;
}
.text-block.text-right { left: auto; right: 8%; text-align: left; }
.text-block.text-center { left: 50%; transform: translateX(-50%); text-align: center; top: 16%; }
.spread.in-view .text-block.text-center { transform: translateX(-50%) scaleY(1) translateZ(40px); }
.text-block.text-center { transform: translateX(-50%) scaleY(0) translateZ(40px); }

.eyebrow {
    display: inline-block;
    font-family: 'Patrick Hand', cursive;
    font-size: 14px;
    color: #8b7e6a;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
    padding: 4px 10px;
    background: rgba(232, 184, 58, 0.18);
    border-radius: 4px;
}

.page-title {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: clamp(36px, 4.4vw, 52px);
    line-height: 1.04;
    color: #3a3530;
    margin-bottom: 18px;
    letter-spacing: -0.5px;
    text-shadow: 1px 1px 0 #e8a0a0;
}

.page-body {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #3a3530;
    max-width: 420px;
}

.text-block.text-center .page-body { margin-left: auto; margin-right: auto; }

.caption {
    margin-top: 26px;
    font-family: 'Architects Daughter', cursive;
    font-size: 18px;
    color: #4a8fb8;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
.caption-pin { color: #e8b83a; font-size: 14px; }

.hand-note {
    margin-top: 22px;
    font-family: 'Architects Daughter', cursive;
    font-size: 18px;
    line-height: 24px;
    color: #d94f4f;
    border-top: 1px dashed #c4b8a4;
    padding-top: 14px;
    max-width: 360px;
}

/* ==========================================================
   PAPER POP-UP CHARACTERS — SPREAD 1
========================================================== */
.pop-sun {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #e8b83a;
    top: 8%;
    right: 16%;
    box-shadow:
        inset -10px -10px 0 rgba(58,53,48,0.08),
        0 0 0 1px #d94f4f;
    /* registration offset */
    transform-origin: bottom center;
}
.pop-sun::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #f5d375 0%, #e8b83a 60%);
}

.pop-cloud {
    background: #faf3e8;
    border-radius: 60% 40% 50% 50% / 60% 60% 40% 40%;
    box-shadow:
        4px 4px 0 #c4b8a4,
        inset -4px -4px 0 rgba(196,184,164,0.3);
    border: 2px solid #3a3530;
}
.pop-cloud-a { width: 160px; height: 70px; top: 14%; left: 8%; }
.pop-cloud-b { width: 120px; height: 50px; top: 22%; left: 28%; }

.pop-mountain {
    width: 360px;
    height: 220px;
    bottom: 18%;
    background: linear-gradient(180deg, #4a8fb8 0%, #3a7596 100%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.pop-mountain::before {
    /* snow cap */
    content: '';
    position: absolute;
    inset: 0;
    background: #faf3e8;
    clip-path: polygon(50% 0, 65% 22%, 55% 18%, 50% 28%, 45% 18%, 35% 22%);
}
.pop-mountain::after {
    /* fold */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        transparent 49%,
        rgba(58,53,48,0.18) 50%,
        transparent 51%);
}
.pop-mountain-a { left: 6%;  width: 380px; height: 240px; }
.pop-mountain-b { right: 4%; width: 340px; height: 200px; bottom: 14%; }

.pop-tree {
    width: 80px;
    height: 140px;
    bottom: 8%;
    background: transparent;
}
.pop-tree::before {
    /* trunk */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 40px;
    background: #8b7e6a;
    border-radius: 2px;
}
.pop-tree::after {
    /* foliage */
    content: '';
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 110px;
    background: #5a8a5a;
    clip-path: polygon(50% 0, 100% 50%, 80% 50%, 100% 100%, 0 100%, 20% 50%, 0 50%);
    box-shadow: 0 6px 0 rgba(58,53,48,0.15);
}
.pop-tree-a { left: 10%;  bottom: 6%; }
.pop-tree-b { right: 14%; bottom: 9%; transform-origin: bottom; }

.pop-castle {
    width: 240px;
    height: 200px;
    bottom: 10%;
    left: 50%;
    transform-origin: bottom center;
    margin-left: -120px;
}
.pop-castle::before {
    /* main body */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: #faf3e8;
    border: 2px solid #3a3530;
    border-radius: 4px 4px 0 0;
    box-shadow: inset 0 -20px 0 #e8b83a, inset 4px 0 0 rgba(196,184,164,0.3);
}
.pop-castle::after {
    /* battlements + flag */
    content: '';
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    height: 14px;
    background:
        repeating-linear-gradient(to right,
            #faf3e8 0,
            #faf3e8 14px,
            transparent 14px,
            transparent 28px);
    border-bottom: 2px solid #3a3530;
}

/* spread 2 — striped page back layer */
.pop-stripes {
    inset: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(45deg,
            rgba(74, 143, 184, 0.06) 0,
            rgba(74, 143, 184, 0.06) 12px,
            transparent 12px,
            transparent 28px);
    transform-origin: center;
}

/* die-cut window frame on spread 2 */
.die-cut-frame {
    width: min(520px, 44vw);
    height: 360px;
    top: 18%;
    left: 6%;
    background: #d94f4f;
    border: 2px solid #3a3530;
    border-radius: 8px;
    box-shadow:
        6px 6px 0 #c4b8a4,
        inset 0 0 0 6px rgba(250,243,232,0.7);
    overflow: hidden;
    transform-origin: bottom center;
}
.die-cut-frame .frame-inner {
    position: absolute;
    inset: 18px;
    background: #4a8fb8;
    clip-path: polygon(
        50% 0%,
        100% 18%,
        100% 82%,
        50% 100%,
        0% 82%,
        0% 18%
    );
    overflow: hidden;
}
.frame-scene {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #4a8fb8 0%, #6dadd0 60%, #faf3e8 60%, #e8efe3 100%);
}
.frame-wave {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 50px;
    background: #4a8fb8;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    opacity: 0.5;
}
.wave-a { bottom: 0;   left: -50%; }
.wave-b { bottom: -10px; left: -30%; opacity: 0.8; background: #3a7596; }

.frame-ship {
    position: absolute;
    bottom: 36%;
    left: 50%;
    width: 120px;
    height: 90px;
    transform: translateX(-50%);
}
.ship-hull {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120px;
    height: 32px;
    background: #8b7e6a;
    clip-path: polygon(8% 0, 92% 0, 80% 100%, 20% 100%);
    border: 2px solid #3a3530;
}
.ship-mast {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 60px;
    background: #3a3530;
}
.ship-sail {
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 50px;
    height: 56px;
    background: #faf3e8;
    border: 2px solid #3a3530;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
    transform: translateX(-50%);
}
.ship-flag {
    position: absolute;
    top: 0;
    left: 50%;
    width: 18px;
    height: 10px;
    background: #d94f4f;
    transform: translateX(2px);
    clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%);
}

.pop-bird {
    width: 32px;
    height: 16px;
    background: transparent;
    border-top: 3px solid #3a3530;
    border-radius: 50%;
    transform-origin: center;
    border-left: 3px solid #3a3530;
    border-right: 3px solid #3a3530;
    border-bottom: none;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.pop-bird-a { top: 18%; right: 28%; transform: scaleY(0); }
.pop-bird-b { top: 28%; right: 14%; transform: scaleY(0); width: 24px; height: 12px; }
.spread.in-view .pop-bird-a { transform: scaleY(1); }
.spread.in-view .pop-bird-b { transform: scaleY(1); }

/* ==========================================================
   SPREAD 3 — WORLDS
========================================================== */
.pop-sky-dot {
    inset: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 12% 18%, #e8b83a 0 6px, transparent 7px),
        radial-gradient(circle at 84% 14%, #d94f4f 0 6px, transparent 7px),
        radial-gradient(circle at 50% 8%, #4a8fb8 0 4px, transparent 5px),
        radial-gradient(circle at 22% 80%, #5a8a5a 0 5px, transparent 6px),
        radial-gradient(circle at 88% 78%, #e8a0a0 0 5px, transparent 6px);
    opacity: 0.5;
}

.worlds-row {
    position: absolute;
    bottom: 10%;
    left: 6%;
    right: 6%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    transform-origin: bottom center;
}

.world {
    position: relative;
    background: #faf3e8;
    border: 2px solid #3a3530;
    border-radius: 8px;
    padding: 130px 18px 22px;
    box-shadow:
        4px 4px 0 #c4b8a4,
        inset 0 -4px 0 rgba(196,184,164,0.3);
    transition: transform 320ms cubic-bezier(.34,1.56,.64,1), box-shadow 320ms ease;
    transform-style: preserve-3d;
}
.world::before {
    /* halftone overlay */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(58,53,48,0.06) 1px, transparent 1.5px);
    background-size: 4px 4px;
    pointer-events: none;
    border-radius: 6px;
}
.world::after {
    /* fold line */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(58,53,48,0.12), transparent);
}
.world:hover {
    transform: translateZ(20px) translateY(-6px) scale(1.04);
    box-shadow: 8px 12px 0 rgba(196,184,164,0.7), inset 0 -4px 0 rgba(196,184,164,0.3);
}

.world-art {
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 2;
}

.world-title {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.1;
    color: #3a3530;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}
.world-body {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    line-height: 21px;
    color: #3a3530;
    position: relative;
    z-index: 2;
}

/* castle artwork */
.art-castle { position: relative; width: 100px; height: 90px; }
.art-tower {
    position: absolute;
    bottom: 0;
    width: 22px;
    background: #d94f4f;
    border: 2px solid #3a3530;
    border-radius: 2px;
}
.art-tower::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 14px solid #3a3530;
}
.tower-l { left: 10%; height: 50px; }
.tower-c { left: 50%; transform: translateX(-50%); height: 70px; background: #faf3e8; }
.tower-r { right: 10%; height: 50px; }
.art-flag {
    position: absolute;
    top: -22px;
    left: calc(50% - 1px);
    width: 14px;
    height: 8px;
    background: #e8b83a;
    transform: translateX(2px);
}
.art-door {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 22px;
    background: #3a3530;
    border-radius: 7px 7px 0 0;
}

/* tree artwork */
.art-tree { position: relative; width: 90px; height: 90px; }
.art-trunk {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 28px;
    background: #8b7e6a;
    border: 2px solid #3a3530;
}
.art-canopy {
    position: absolute;
    border: 2px solid #3a3530;
    border-radius: 50%;
}
.canopy-1 { width: 60px; height: 60px; bottom: 22px; left: 50%; transform: translateX(-50%); background: #5a8a5a; }
.canopy-2 { width: 36px; height: 36px; bottom: 50px; left: 18%; background: #6da46d; }
.canopy-3 { width: 36px; height: 36px; bottom: 50px; right: 18%; background: #6da46d; }
.art-fruit {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #d94f4f;
    border-radius: 50%;
    border: 1.5px solid #3a3530;
    z-index: 3;
}
.fruit-1 { bottom: 36px; left: 28%; }
.fruit-2 { bottom: 56px; right: 32%; }

/* ship artwork */
.art-ship { position: relative; width: 110px; height: 90px; }
.art-hull {
    position: absolute;
    bottom: 14px;
    left: 0;
    width: 110px;
    height: 26px;
    background: #d94f4f;
    border: 2px solid #3a3530;
    clip-path: polygon(8% 0, 92% 0, 80% 100%, 20% 100%);
}
.art-mast2 {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 50px;
    background: #3a3530;
}
.art-sail-big {
    position: absolute;
    bottom: 38px;
    left: 50%;
    width: 36px;
    height: 44px;
    background: #faf3e8;
    border: 2px solid #3a3530;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
    transform: translateX(-100%);
}
.art-sail-small {
    position: absolute;
    bottom: 38px;
    left: 50%;
    width: 30px;
    height: 36px;
    background: #e8b83a;
    border: 2px solid #3a3530;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    transform: translateX(0%);
}
.art-water {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 14px;
    background: #4a8fb8;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    opacity: 0.55;
}

/* mountain artwork */
.art-mountain { position: relative; width: 110px; height: 90px; }
.art-peak {
    position: absolute;
    bottom: 0;
    border: 2px solid #3a3530;
}
.peak-back {
    width: 70px;
    height: 70px;
    left: 12px;
    background: #8b7e6a;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.peak-front {
    width: 90px;
    height: 80px;
    right: 0;
    background: #4a8fb8;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.art-snow {
    position: absolute;
    bottom: 60px;
    right: 22px;
    width: 30px;
    height: 14px;
    background: #faf3e8;
    clip-path: polygon(50% 0, 80% 80%, 60% 50%, 50% 100%, 40% 50%, 20% 80%);
}
.art-cloud-m {
    position: absolute;
    top: 4px;
    left: 0;
    width: 36px;
    height: 14px;
    background: #faf3e8;
    border: 2px solid #3a3530;
    border-radius: 60% 50% 50% 60% / 70% 70% 60% 60%;
}

/* ==========================================================
   SPREAD 4 — PROCESS / FOLD LIST
========================================================== */
.pop-grid {
    inset: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(to right, rgba(58,53,48,0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(58,53,48,0.07) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.7;
}

.fold-list {
    list-style: none;
    position: absolute;
    bottom: 12%;
    right: 6%;
    width: min(560px, 46vw);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform-origin: bottom center;
}

.fold-step {
    display: flex;
    align-items: stretch;
    gap: 14px;
    transform-origin: left center;
    transition: transform 320ms cubic-bezier(.34,1.56,.64,1);
}
.fold-step:hover { transform: translateZ(12px) translateX(-4px); }

.step-num {
    flex: 0 0 56px;
    background: #e8b83a;
    border: 2px solid #3a3530;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #3a3530;
    box-shadow: 3px 3px 0 #c4b8a4;
}

.fold-step:nth-child(1) .step-num { background: #d94f4f; color: #faf3e8; }
.fold-step:nth-child(2) .step-num { background: #4a8fb8; color: #faf3e8; }
.fold-step:nth-child(3) .step-num { background: #e8b83a; }
.fold-step:nth-child(4) .step-num { background: #5a8a5a; color: #faf3e8; }
.fold-step:nth-child(5) .step-num { background: #e8a0a0; }

.step-card {
    flex: 1;
    background: #faf3e8;
    border: 2px solid #3a3530;
    border-radius: 8px;
    padding: 14px 18px;
    box-shadow: 3px 3px 0 #c4b8a4;
    position: relative;
}
.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(58,53,48,0.1), transparent);
}
.step-card h4 {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #3a3530;
    margin-bottom: 4px;
}
.step-card p {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    line-height: 21px;
    color: #3a3530;
}

/* ==========================================================
   SPREAD 5 — BEGIN
========================================================== */
.pop-rays {
    inset: 0;
    width: 100%;
    height: 100%;
    background:
        conic-gradient(
            from 0deg at 50% 38%,
            rgba(232, 184, 58, 0.18) 0deg,
            transparent 12deg,
            rgba(232, 184, 58, 0.18) 24deg,
            transparent 36deg,
            rgba(232, 184, 58, 0.18) 48deg,
            transparent 60deg,
            rgba(232, 184, 58, 0.18) 72deg,
            transparent 84deg,
            rgba(232, 184, 58, 0.18) 96deg,
            transparent 108deg,
            rgba(232, 184, 58, 0.18) 120deg,
            transparent 132deg,
            rgba(232, 184, 58, 0.18) 144deg,
            transparent 156deg,
            rgba(232, 184, 58, 0.18) 168deg,
            transparent 180deg,
            rgba(232, 184, 58, 0.18) 192deg,
            transparent 204deg,
            rgba(232, 184, 58, 0.18) 216deg,
            transparent 228deg,
            rgba(232, 184, 58, 0.18) 240deg,
            transparent 252deg,
            rgba(232, 184, 58, 0.18) 264deg,
            transparent 276deg,
            rgba(232, 184, 58, 0.18) 288deg,
            transparent 300deg,
            rgba(232, 184, 58, 0.18) 312deg,
            transparent 324deg,
            rgba(232, 184, 58, 0.18) 336deg,
            transparent 348deg);
}

.pop-sun-final { top: 16%; left: 50%; transform: translateX(-50%) scaleY(0); width: 220px; height: 220px; }
.spread.in-view .pop-sun-final { transform: translateX(-50%) scaleY(1); }

.pop-hill {
    width: 70%;
    height: 220px;
    bottom: 0;
    background: #5a8a5a;
    border-radius: 100% 100% 0 0 / 100% 100% 0 0;
    transform-origin: bottom center;
}
.pop-hill::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(58,53,48,0.10) 1px, transparent 1.5px);
    background-size: 6px 6px;
    border-radius: inherit;
}
.pop-hill-a { left: -10%;  background: #6da46d; height: 180px; }
.pop-hill-b { right: -20%; background: #5a8a5a; height: 240px; }

.pop-tree-final { left: 12%; bottom: 14%; }

.pop-bird-final {
    top: 22%;
    left: 18%;
    transform: scaleY(0);
}
.spread.in-view .pop-bird-final { transform: scaleY(1); }

.contact-card {
    margin: 28px auto 0;
    max-width: 440px;
    background: #faf3e8;
    border: 2px solid #3a3530;
    border-radius: 8px;
    padding: 22px 26px;
    text-align: left;
    position: relative;
    box-shadow: 4px 4px 0 #c4b8a4;
}
.card-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #e8b83a;
    border: 2px solid #3a3530;
    border-radius: 50%;
}
.card-corner-tl { top: -8px; left: -8px; }
.card-corner-tr { top: -8px; right: -8px; background: #d94f4f; }
.card-corner-bl { bottom: -8px; left: -8px; background: #4a8fb8; }
.card-corner-br { bottom: -8px; right: -8px; background: #5a8a5a; }

.card-row {
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    color: #3a3530;
    display: flex;
    gap: 14px;
    padding: 6px 0;
    border-bottom: 1px dashed #c4b8a4;
}
.card-row:last-of-type { border-bottom: none; }
.card-label {
    flex: 0 0 70px;
    font-family: 'Patrick Hand', cursive;
    color: #8b7e6a;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.card-value { font-weight: 600; }

.card-button {
    display: inline-block;
    margin-top: 18px;
    padding: 12px 22px;
    background: #d94f4f;
    color: #faf3e8;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    border: 2px solid #3a3530;
    border-radius: 8px;
    box-shadow: 3px 3px 0 #3a3530;
    transition: transform 220ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms ease;
}
.card-button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 #3a3530;
}

/* ==========================================================
   POP-UP HOVER SPRING
========================================================== */
.popup.pop-tree:hover,
.popup.pop-castle:hover,
.popup.pop-mountain:hover,
.popup.die-cut-frame:hover,
.popup.pop-hill:hover {
    cursor: pointer;
}
.spread.in-view .popup.pop-tree:hover {
    transform: scaleY(1.05) translateZ(50px);
    filter: drop-shadow(0 18px 16px rgba(58,53,48,0.25));
}
.spread.in-view .popup.pop-castle:hover {
    transform: scaleY(1.05) translateZ(50px);
}
.spread.in-view .popup.die-cut-frame:hover {
    transform: scaleY(1.04) translateZ(0);
    box-shadow:
        10px 10px 0 #c4b8a4,
        inset 0 0 0 6px rgba(250,243,232,0.7);
}

/* ==========================================================
   PAGE-TURN FOLD EFFECT (when leaving viewport)
========================================================== */
.spread.folding-out {
    transform: rotateX(5deg);
    transform-origin: bottom center;
}
.spread.folding-in {
    transform: rotateX(-3deg);
    transform-origin: top center;
}

/* ==========================================================
   RESPONSIVE
========================================================== */
@media (max-width: 900px) {
    .text-block { width: 84%; left: 8%; right: 8%; top: 18%; }
    .text-block.text-right { right: 8%; left: 8%; }
    .pop-mountain-a { width: 240px; height: 160px; }
    .pop-mountain-b { width: 200px; height: 140px; }
    .die-cut-frame { width: 86%; height: 280px; left: 7%; top: 8%; }
    .text-block.text-right { top: 50%; }
    .worlds-row { grid-template-columns: repeat(2, 1fr); bottom: 6%; }
    .fold-list { width: 86%; right: 7%; left: 7%; bottom: 6%; }
    .tab-nav { display: none; }
    .page-number.left { left: 24px; }
    .page-number.right { right: 24px; }
    .page-foot { left: 24px; right: 24px; }
}

@media (max-width: 560px) {
    .page-title { font-size: 32px; }
    .worlds-row { grid-template-columns: 1fr; gap: 12px; }
    .world { padding: 110px 14px 18px; }
    .fold-list { gap: 10px; }
    .step-num { flex: 0 0 44px; font-size: 20px; }
    .pop-castle, .pop-mountain-a, .pop-mountain-b, .pop-tree-a, .pop-tree-b { display: none; }
    .pop-sun { width: 110px; height: 110px; right: 8%; top: 4%; }
}