:root {
    /* Design cue: Intersection Observer detect full-bleed panels enters intersection: */
    --deep-ground: #3a2a1a;
    --warm-ground: #6b4c2e;
    --golden-haze: #c49a5c;
    --cream-surface: #f5ead6;
    --blush-accent: #c87f5a;
    --faded-paper: #e8d5b8;
    --shadow-tone: #4a3525;
    --display-font: Nunito, "Noto Sans KR", "Trebuchet MS", Arial Rounded MT Bold, sans-serif;
    --body-font: Quicksand, "Noto Sans KR", "Segoe UI", Arial, sans-serif;
    --bokeh-drift-x: 0px;
    --bokeh-drift-y: 0px;
}

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

html {
    overflow-x: hidden;
    background: var(--deep-ground);
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--cream-surface);
    font-family: var(--body-font);
    font-size: 18px;
    line-height: 1.7;
    background: var(--deep-ground);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 150px 150px;
    mix-blend-mode: soft-light;
}

.frame {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bokeh-field::before {
    content: "";
    position: absolute;
    inset: -28px;
    z-index: 0;
    pointer-events: none;
    transform: translate(var(--bokeh-drift-x), var(--bokeh-drift-y));
    transition: transform 180ms linear;
    background:
        radial-gradient(circle at 12% 18%, rgba(196,154,92,0.16) 0 5%, transparent 17%),
        radial-gradient(circle at 28% 72%, rgba(200,127,90,0.10) 0 6%, transparent 20%),
        radial-gradient(circle at 46% 31%, rgba(245,234,214,0.07) 0 4%, transparent 15%),
        radial-gradient(circle at 69% 16%, rgba(196,154,92,0.12) 0 8%, transparent 22%),
        radial-gradient(circle at 83% 63%, rgba(196,154,92,0.13) 0 7%, transparent 21%),
        radial-gradient(circle at 57% 86%, rgba(200,127,90,0.10) 0 5%, transparent 19%),
        radial-gradient(circle at 7% 53%, rgba(245,234,214,0.055) 0 6%, transparent 18%),
        radial-gradient(circle at 95% 29%, rgba(196,154,92,0.08) 0 4%, transparent 16%);
    filter: blur(8px);
}

.bokeh-field > * {
    position: relative;
    z-index: 1;
}

.hero-frame {
    background: linear-gradient(180deg, #6b4c2e 0%, #3a2a1a 100%);
}

.hero-core {
    text-align: center;
    transform: translateY(-2vh);
}

.hero-gabs {
    font-family: var(--display-font);
    font-size: clamp(10rem, 20vw, 22rem);
    font-weight: 800;
    line-height: .86;
    color: var(--golden-haze);
    letter-spacing: -.08em;
    animation: breathe 6s ease-in-out infinite;
    text-shadow:
        0 10px 0 rgba(74,53,37,0.55),
        0 24px 44px rgba(58,42,26,0.55),
        inset 0 4px 8px rgba(245,234,214,0.25);
    filter: drop-shadow(0 22px 28px rgba(58,42,26,0.42));
}

.puffy-type {
    background: radial-gradient(ellipse at 34% 24%, rgba(245,234,214,0.85) 0%, rgba(196,154,92,0.94) 30%, rgba(107,76,46,1) 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-translation,
.closing-translation {
    margin-top: 1.2rem;
    color: var(--faded-paper);
    font-size: clamp(.92rem, 1.4vw, 1.15rem);
    font-variant: small-caps;
    font-weight: 500;
    letter-spacing: .15em;
}

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.market-panel {
    gap: min(7vw, 90px);
    padding: 8vh 7vw;
    background: linear-gradient(180deg, #f5ead6 0%, #e8d5b8 100%);
    color: var(--shadow-tone);
}

.market-panel.reverse {
    background: linear-gradient(180deg, #e8d5b8 0%, #6b4c2e 100%);
    color: var(--cream-surface);
}

.panel-hourglass {
    background: linear-gradient(180deg, #6b4c2e 0%, #3a2a1a 100%);
    color: var(--cream-surface);
}

.market-object-wrap {
    flex: 0 1 60%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.market-copy {
    flex: 0 1 40%;
    max-width: 520px;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--blush-accent);
    font-size: .78rem;
    font-variant: small-caps;
    font-weight: 500;
    letter-spacing: .15em;
}

.market-copy h1,
.ledger-intro h2 {
    font-family: var(--display-font);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.04em;
    color: currentColor;
}

.market-copy p {
    margin-top: 1.3rem;
    max-width: 36rem;
    color: currentColor;
    opacity: .86;
    font-weight: 400;
}

.puffy-object {
    position: relative;
    display: grid;
    place-items: center;
    box-shadow:
        0 8px 32px rgba(58,42,26,0.3),
        0 2px 8px rgba(58,42,26,0.2),
        inset 0 -4px 12px rgba(58,42,26,0.15),
        inset 0 4px 8px rgba(245,234,214,0.25);
    background:
        radial-gradient(ellipse at 35% 30%, rgba(245,234,214,0.5) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%, #c49a5c 0%, #6b4c2e 100%);
}

.puffy-coin {
    width: clamp(190px, 28vw, 320px);
    height: clamp(190px, 28vw, 320px);
    border-radius: 50%;
}

.puffy-coin::after {
    content: "";
    position: absolute;
    inset: 13%;
    border: 3px solid rgba(245,234,214,.38);
    border-radius: 50%;
    box-shadow: inset 0 0 24px rgba(74,53,37,.22);
}

.puffy-coin span,
.pillow-heart span {
    position: relative;
    z-index: 2;
    font-family: var(--display-font);
    font-size: clamp(4rem, 9vw, 8rem);
    font-weight: 800;
    color: var(--cream-surface);
    text-shadow: 0 6px 18px rgba(58,42,26,.35);
}

.pillow-heart {
    width: clamp(220px, 31vw, 370px);
    height: clamp(205px, 29vw, 345px);
    filter: drop-shadow(0 22px 32px rgba(58,42,26,.32));
    background: transparent;
    box-shadow: none;
}

.pillow-heart::before,
.pillow-heart::after {
    content: "";
    position: absolute;
    width: 58%;
    height: 58%;
    top: 7%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 35% 30%, rgba(245,234,214,.52) 0%, transparent 52%), radial-gradient(ellipse at 50% 54%, #c87f5a 0%, #6b4c2e 100%);
    box-shadow: inherit;
}

.pillow-heart::before { left: 10%; }
.pillow-heart::after { right: 10%; }

.pillow-heart {
    background: radial-gradient(ellipse at 32% 28%, rgba(245,234,214,.4) 0%, transparent 53%), radial-gradient(ellipse at 50% 60%, #c87f5a 0%, #6b4c2e 100%);
    clip-path: polygon(50% 94%, 10% 55%, 13% 24%, 35% 11%, 50% 25%, 65% 11%, 87% 24%, 90% 55%);
}

.puffy-hourglass {
    width: clamp(190px, 26vw, 315px);
    height: clamp(260px, 38vw, 430px);
    gap: 0;
    background: transparent;
    box-shadow: none;
}

.glass {
    width: 82%;
    height: 42%;
    background: radial-gradient(ellipse at 35% 30%, rgba(245,234,214,.58) 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, #c49a5c 0%, #6b4c2e 100%);
    box-shadow: 0 8px 32px rgba(58,42,26,0.3), inset 0 -4px 12px rgba(58,42,26,0.15), inset 0 4px 8px rgba(245,234,214,0.25);
}

.glass.top { border-radius: 48% 48% 38% 38%; transform: translateY(5%); }
.glass.bottom { border-radius: 38% 38% 48% 48%; transform: translateY(-5%); }
.waist { width: 26%; height: 19%; border-radius: 45%; background: #c87f5a; box-shadow: inset 0 4px 10px rgba(245,234,214,.22), inset 0 -8px 15px rgba(58,42,26,.18); }

.reveal-object,
.reveal-copy {
    opacity: 0;
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-object { transform: translateY(40px); }
.reveal-copy.from-right { transform: translateX(30px); }
.reveal-copy.from-left { transform: translateX(-30px); }
.market-panel.in-view .reveal-object { opacity: 1; transform: translateY(0); }
.market-panel.in-view .reveal-copy { opacity: 1; transform: translateX(0); transition-delay: 200ms; }
.market-panel.in-view .puffy-coin span,
.market-panel.in-view .pillow-heart span { animation: characterPop 800ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both; }

@keyframes characterPop {
    from { transform: scale(.9); }
    to { transform: scale(1); }
}

.transition-tag {
    position: absolute;
    width: 110px;
    color: var(--blush-accent);
    opacity: .76;
}

.transition-tag svg,
.market-divider svg {
    width: 100%;
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tag-one { right: 8vw; bottom: -6px; transform: rotate(-5deg); }
.tag-two { left: 9vw; top: -6px; transform: rotate(8deg); }
.market-divider { position: absolute; bottom: 3vh; left: 50%; width: 180px; transform: translateX(-50%); color: var(--shadow-tone); opacity: .42; }
.panel-hourglass .market-divider { color: var(--faded-paper); opacity: .28; }

.ledger-section {
    position: relative;
    min-height: 320vh;
    background: linear-gradient(180deg, #f5ead6 0%, #e8d5b8 45%, #6b4c2e 100%);
    overflow: visible;
}

.ledger-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ledger-intro {
    flex: 0 0 38vw;
    padding-left: 7vw;
    padding-right: 4vw;
    color: var(--shadow-tone);
}

.ribbon-track {
    display: flex;
    gap: 24px;
    align-items: center;
    padding-right: 12vw;
    will-change: transform;
}

.value-card {
    flex: 0 0 280px;
    width: 280px;
    height: 280px;
    padding: 30px 28px;
    border-radius: 24px;
    border: 1px solid rgba(107,76,46,.18);
    color: var(--shadow-tone);
    background:
        radial-gradient(circle at 25% 19%, rgba(245,234,214,.78) 0%, transparent 38%),
        radial-gradient(circle at 81% 74%, rgba(200,127,90,.22) 0%, transparent 44%),
        linear-gradient(150deg, #f5ead6 0%, #e8d5b8 100%);
    box-shadow: 0 18px 44px rgba(58,42,26,.18), inset 0 2px 8px rgba(245,234,214,.42);
}

.value-card:nth-child(odd) { transform: translateY(-15px); }
.value-card:nth-child(even) { transform: translateY(15px); }
.value-card:nth-child(3n) { transform: translateY(-30px); }
.value-card:nth-child(4n) { transform: translateY(30px); }

.value-card strong {
    display: block;
    font-family: var(--display-font);
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--blush-accent);
}

.value-card span {
    display: block;
    margin-top: .55rem;
    font-variant: small-caps;
    letter-spacing: .15em;
    color: var(--warm-ground);
    font-weight: 600;
}

.value-card p {
    margin-top: 1.1rem;
    font-size: 1rem;
    line-height: 1.55;
}

.closing-frame {
    flex-direction: column;
    text-align: center;
    background: #3a2a1a;
}

.closing-line {
    color: #f5ead6;
    font-family: var(--display-font);
    font-size: clamp(2.7rem, 7vw, 7.5rem);
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 22px 56px rgba(0,0,0,.32);
}

.scroll-orb {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 50;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f5ead6;
    box-shadow: 0 0 0 0 rgba(245,234,214,.35), 0 0 24px rgba(196,154,92,.55);
    animation: orbPulse 2.4s ease-in-out infinite;
    transition: opacity 360ms ease, transform 360ms ease;
}

.scroll-orb.is-hidden {
    opacity: 0;
    transform: scale(.5);
}

@keyframes orbPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,234,214,.32), 0 0 24px rgba(196,154,92,.55); }
    50% { box-shadow: 0 0 0 13px rgba(245,234,214,0), 0 0 34px rgba(196,154,92,.72); }
}

@media (max-width: 820px) {
    .market-panel,
    .market-panel.reverse {
        flex-direction: column;
        gap: 5vh;
        padding: 10vh 7vw;
    }

    .market-object-wrap,
    .market-copy {
        flex-basis: auto;
        width: 100%;
    }

    .ledger-sticky {
        align-items: flex-start;
        padding-top: 12vh;
    }

    .ledger-intro {
        flex-basis: 68vw;
        padding-left: 7vw;
    }

    .value-card {
        flex-basis: 250px;
        width: 250px;
        height: 250px;
    }
}