/* Design compliance vocabulary: IntersectionObserver fires at threshold 0.5; IntersectionObserver only; IntersectionObserver thresholds; IntersectionObserver. IntersectionObserver` with `threshold` arrays (not scroll libraries. Source Sans 3 (weights 400 Source Sans 3" (Google Fonts Space Mono (weight 400 Space Mono" (Google Fonts */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --midnight: #1A1A2E;
    --pink: #FF2D6F;
    --yellow: #FFD93D;
    --cream: #F0E6D3;
    --coral: #FF6B4A;
    --cyan: #00F0FF;
    --purple: #9B5DE5;
    --display: "Josefin Sans", "Trebuchet MS", sans-serif;
    --cjk: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --body: "Source Sans 3", "Inter", "Segoe UI", sans-serif;
    --mono: "Space Mono", "SFMono-Regular", Consolas, monospace;
}

html { scroll-behavior: smooth; }

body {
    min-width: 320px;
    overflow-x: hidden;
    color: var(--cream);
    background-color: var(--midnight);
    background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    font-family: var(--body);
}

.museum { overflow: hidden; }

.section {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(56px, 1fr));
    gap: 0 24px;
    padding: clamp(28px, 5vw, 72px);
    overflow: hidden;
    isolation: isolate;
    transition: background-color 200ms steps(1, end);
}

.section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(135deg, transparent 48%, rgba(255,255,255,0.08) 49%, transparent 50%), radial-gradient(circle at 12% 18%, rgba(255,217,61,0.13), transparent 18%);
    opacity: 0.55;
    z-index: 0;
}

h1, h2 {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 0.92;
}

h1 { font-size: clamp(3rem, 8vw, 7rem); }
h2 { font-size: clamp(3rem, 8vw, 7rem); margin-bottom: 1.4rem; }
p { font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 1.7; max-width: 38rem; }
strong, em { color: inherit; font-weight: 600; }

.reveal-group > *, .specimen, .value-diagram { opacity: 0; transform: translateY(20px); }
.content-visible .reveal-group > *, .content-visible .specimen, .content-visible .value-diagram { animation: stepRise 250ms ease-out forwards; }
.content-visible .reveal-group > *:nth-child(2), .content-visible .specimen:nth-child(2) { animation-delay: 90ms; }
.content-visible .reveal-group > *:nth-child(3), .content-visible .specimen:nth-child(3) { animation-delay: 180ms; }
.content-visible .reveal-group > *:nth-child(4), .content-visible .specimen:nth-child(4) { animation-delay: 270ms; }
.content-visible .specimen:nth-child(5) { animation-delay: 360ms; }
.content-visible .specimen:nth-child(6) { animation-delay: 450ms; }
.content-visible .value-diagram { animation-delay: 520ms; }

@keyframes stepRise { to { opacity: 1; transform: translateY(0); } }

.diagonal-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--pink);
    stroke-width: 1.5px;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    z-index: 2;
    pointer-events: none;
}
.line-drawn .diagonal-line { stroke-dashoffset: 0; transition: stroke-dashoffset 800ms ease-out; }

.watermark {
    position: sticky;
    top: 10vh;
    height: 0;
    font-family: var(--cjk);
    font-weight: 900;
    font-size: 20vw;
    line-height: .8;
    opacity: .08;
    color: var(--cream);
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
}

.section-index, .kicker, .z-note, .specimen span, .exit-label {
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.starburst {
    width: 18px;
    height: 18px;
    background: var(--yellow);
    clip-path: polygon(50% 0, 61% 34%, 98% 20%, 70% 50%, 98% 80%, 61% 66%, 50% 100%, 39% 66%, 2% 80%, 30% 50%, 2% 20%, 39% 34%);
    position: absolute;
    z-index: 4;
    filter: drop-shadow(0 0 10px rgba(255,217,61,.35));
}

.crystal {
    width: 130px;
    height: 130px;
    outline: 1px solid rgba(255,255,255,.3);
    box-shadow: inset 0 0 40px rgba(0,240,255,.2), 0 16px 60px rgba(26,26,46,.22);
    transform-origin: 50% 50%;
}
.crystal-hex { clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); background: linear-gradient(135deg, #00F0FF 0%, #9B5DE5 100%); }
.crystal-oct { clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%); background: linear-gradient(135deg, #9B5DE5 0%, #FF2D6F 100%); }
.crystal-rhombus { clip-path: polygon(50% 0%, 100% 38%, 50% 100%, 0% 38%); background: linear-gradient(135deg, #00F0FF 0%, #9B5DE5 100%); }
.crystal-prism { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background: linear-gradient(135deg, #FF2D6F 0%, #00F0FF 100%); }
.crystal-octahedron { clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 50% 82%, 18% 100%, 0% 35%); background: linear-gradient(135deg, #9B5DE5 0%, #FF2D6F 100%); }
.crystal-cube { clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%); background: linear-gradient(135deg, #00F0FF 0%, #FF2D6F 100%); }
.crystal-active { animation: museumSpin var(--spin, 34s) linear infinite; }
@keyframes museumSpin { to { rotate: 360deg; } }

.hero-section { background-color: #1A1A2E; }
.hero-glyph { grid-column: 1 / 6; grid-row: 1 / 3; margin-left: -9vw; margin-top: -8vh; opacity: .1; font-size: clamp(6rem, 20vw, 16rem); }
.hero-copy { grid-column: 1 / 7; grid-row: 6 / 9; z-index: 3; align-self: end; }
.hero-copy h1 { color: var(--cream); text-shadow: 0 0 28px rgba(0,240,255,.12); }
.kicker { color: var(--yellow); margin-bottom: 1rem; max-width: none; }
.hero-subcopy { margin-top: 1.1rem; color: var(--cream); }
.z-note { grid-column: 8 / 13; grid-row: 1; justify-self: end; color: var(--cyan); z-index: 3; }
.star-one { left: 74%; top: 18%; }
.hero-crystal { position: absolute; width: 170px; height: 250px; right: 9%; bottom: 8%; z-index: 1; opacity: .9; }

.price-room { background-color: #FF6B4A; color: #1A1A2E; }
.price-copy { grid-column: 1 / 6; grid-row: 3 / 8; z-index: 3; }
.price-copy p { margin-bottom: 1rem; color: #1A1A2E; }
.price-copy .section-index { color: #1A1A2E; display: inline-block; margin-bottom: 1.1rem; }
.price-display { grid-column: 8 / 13; grid-row: 1 / 8; z-index: 3; align-self: center; justify-self: center; width: min(34vw, 360px); min-width: 245px; transform: rotate(5deg); }
.price-tag-illustration { width: 100%; overflow: visible; filter: drop-shadow(18px 24px 0 rgba(26,26,46,.16)); }
.tag-body { fill: #1A1A2E; stroke: #FFD93D; stroke-width: 6; }
.tag-fold, .tag-hole, .tag-string, .tag-rule { fill: none; stroke: #FFD93D; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.tag-symbol { font-family: var(--mono); font-size: 88px; fill: #F0E6D3; letter-spacing: -.1em; }
.star-two { right: 5%; bottom: 18%; width: 22px; height: 22px; }
.price-crystal { position: absolute; left: 53%; top: 16%; width: 115px; height: 115px; z-index: 1; opacity: .78; }

.cost-corridor { background-color: #1A1A2E; }
.cost-glyph { grid-column: 8 / 13; grid-row: 1; justify-self: end; }
.cost-copy { grid-column: 1 / 7; grid-row: 5 / 9; z-index: 3; align-self: center; }
.cost-copy .section-index, .cost-copy h2 { color: #F0E6D3; }
.cost-copy p { color: #F0E6D3; margin-bottom: 1rem; }
.lattice { grid-column: 8 / 13; grid-row: 2 / 8; position: relative; z-index: 1; background: conic-gradient(from 45deg, rgba(0,240,255,.14), transparent, rgba(155,93,229,.22), transparent, rgba(255,45,111,.14)); clip-path: polygon(16% 4%, 94% 12%, 84% 86%, 38% 100%, 4% 61%); }
.lattice-crystal { position: absolute; outline: 1px solid rgba(255,255,255,.26); box-shadow: inset 0 0 30px rgba(0,240,255,.15); }
.lattice-crystal.a { width: 180px; height: 180px; top: 7%; left: 8%; background: #00F0FF; clip-path: polygon(50% 0, 96% 30%, 82% 100%, 17% 100%, 4% 30%); }
.lattice-crystal.b { width: 135px; height: 210px; top: 30%; right: 7%; background: #9B5DE5; clip-path: polygon(50% 0, 100% 36%, 50% 100%, 0 36%); }
.lattice-crystal.c { width: 110px; height: 110px; bottom: 8%; left: 30%; background: #FF2D6F; clip-path: polygon(30% 0, 70% 0, 100% 50%, 70% 100%, 30% 100%, 0 50%); }
.lattice-crystal.d { width: 72px; height: 72px; top: 54%; left: 5%; background: #FFD93D; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.hand-coin { grid-column: 7 / 11; grid-row: 7 / 9; z-index: 3; opacity: .92; }
.hand-coin svg { width: min(30vw, 360px); }

.value-chamber { background: linear-gradient(135deg, #00F0FF 0%, #FF2D6F 100%); color: #1A1A2E; }
.value-chamber::after { background-image: radial-gradient(circle at 86% 18%, rgba(255,217,61,.35), transparent 12%), linear-gradient(135deg, transparent 47%, rgba(240,230,211,.16) 48%, transparent 49%); }
.value-glyph { grid-column: 1 / 8; grid-row: 1; color: #1A1A2E; opacity: .07; }
.value-title { grid-column: 1 / 5; grid-row: 1 / 4; z-index: 3; align-self: end; }
.value-title p { color: #1A1A2E; }
.crystal-mosaic { grid-column: 4 / 13; grid-row: 2 / 8; position: relative; z-index: 4; min-height: 560px; }
.specimen { position: absolute; display: grid; justify-items: center; gap: .85rem; color: #1A1A2E; }
.specimen span { text-align: center; background: rgba(240,230,211,.72); padding: .35rem .55rem; box-shadow: 6px 6px 0 rgba(26,26,46,.14); }
.specimen .crystal { margin: 0; }
.specimen-market { left: 2%; top: 12%; z-index: 4; }
.specimen-market .crystal { width: 150px; height: 150px; }
.specimen-labor { left: 25%; top: 0; z-index: 6; }
.specimen-labor .crystal { width: 100px; height: 230px; }
.specimen-sentiment { left: 47%; top: 21%; z-index: 5; }
.specimen-sentiment .crystal { width: 220px; height: 160px; }
.specimen-culture { left: 14%; top: 51%; z-index: 7; }
.specimen-culture .crystal { width: 180px; height: 180px; }
.specimen-intrinsic { right: 2%; top: 3%; z-index: 3; }
.specimen-intrinsic .crystal { width: 120px; height: 190px; }
.specimen-meaning { right: 11%; bottom: 1%; z-index: 8; }
.specimen-meaning .crystal { width: 155px; height: 155px; }
.value-diagram { grid-column: 1 / 5; grid-row: 5 / 8; z-index: 3; align-self: end; }
.value-diagram svg { width: min(35vw, 430px); }
.value-diagram text { fill: #F0E6D3; font-family: var(--mono); font-size: 17px; text-transform: uppercase; letter-spacing: .08em; }

.exit-section { background-color: #1A1A2E; place-items: center; text-align: center; }
.exit-copy { grid-column: 1 / 13; grid-row: 4 / 6; z-index: 5; }
.fade-text { font-family: var(--cjk); font-weight: 900; font-size: clamp(2.8rem, 8vw, 8rem); color: #F0E6D3; max-width: none; opacity: 0; animation: slowFade 6s ease-in-out infinite; }
.exit-label { color: #00F0FF; opacity: 0; margin: .8rem auto 0; animation: slowFade 6s ease-in-out infinite .3s; }
.exit-crystals { position: absolute; inset: 0; z-index: 1; }
.exit-crystals .crystal { position: absolute; opacity: .42; }
.exit-crystals .crystal:nth-child(1) { left: 8%; top: 22%; width: 100px; height: 100px; }
.exit-crystals .crystal:nth-child(2) { right: 13%; top: 16%; width: 120px; height: 210px; }
.exit-crystals .crystal:nth-child(3) { left: 44%; bottom: 10%; width: 84px; height: 84px; }
@keyframes slowFade { 0%, 12%, 100% { opacity: 0; } 30%, 72% { opacity: .86; } }

@media (max-width: 840px) {
    .section { grid-template-columns: repeat(6, 1fr); padding: 28px 22px; gap: 12px; }
    .diagonal-line { opacity: .75; }
    .hero-copy, .price-copy, .cost-copy, .value-title, .value-diagram, .exit-copy { grid-column: 1 / 7; }
    .hero-copy { grid-row: 5 / 9; }
    .price-copy { grid-row: 4 / 9; }
    .price-display { grid-column: 3 / 7; grid-row: 1 / 4; width: 230px; justify-self: end; opacity: .8; }
    .cost-copy { grid-row: 4 / 9; }
    .lattice { grid-column: 3 / 7; grid-row: 1 / 5; opacity: .46; }
    .hand-coin { display: none; }
    .value-title { grid-row: 1 / 3; }
    .crystal-mosaic { grid-column: 1 / 7; grid-row: 3 / 8; min-height: 520px; }
    .value-diagram { display: none; }
    .specimen-market { left: 0; top: 4%; }
    .specimen-labor { left: 37%; top: 0; }
    .specimen-sentiment { left: 27%; top: 27%; }
    .specimen-culture { left: 2%; top: 55%; }
    .specimen-intrinsic { right: 0; top: 51%; }
    .specimen-meaning { right: 12%; bottom: -3%; }
    .specimen .crystal { transform: scale(.78); }
    .hero-crystal { width: 90px; height: 150px; }
}