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

:root {
    --color-dark: #1c1915;
    --color-brown: #2c1e14;
    --color-green: #7a8c6e;
    --color-tan: #b8a08a;
    --color-gold: #d4a843;
    --color-cream: #f4ece1;
    --color-red: #c75532;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--color-dark);
    color: var(--color-cream);
    font-family: 'Karla', sans-serif;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Grain Overlay */
.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.05;
    mix-blend-mode: overlay;
}

/* Zones */
.zone {
    position: relative;
    min-height: 120vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    overflow: hidden;
}

.zone-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 100%;
    text-align: center;
}

/* Hero */
.zone-hero {
    background: var(--color-dark);
}

.hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 12vw, 10rem);
    letter-spacing: 0.05em;
    color: var(--color-cream);
    line-height: 0.9;
    transition: transform 0.3s ease;
}

.hero-title:hover {
    transform: scale(1.05);
}

.hero-subtitle {
    font-family: 'Space Mono', monospace;
    font-size: clamp(0.9rem, 2vw, 1.3rem);
    color: var(--color-tan);
    margin-top: 1.5rem;
    letter-spacing: 0.1em;
}

.dice-scatter {
    margin-top: 3rem;
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    opacity: 0.7;
}

/* Section Titles */
.section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.5rem, 7vw, 6rem);
    letter-spacing: 0.05em;
    color: var(--color-cream);
    line-height: 1;
    margin-bottom: 2rem;
    transition: transform 0.3s ease;
}

.section-title:hover {
    transform: scale(1.03);
}

/* Body Text */
.body-text {
    font-family: 'Karla', sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    color: var(--color-tan);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.body-text.mono {
    font-family: 'Space Mono', monospace;
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
}

/* Wave Dividers */
.wave-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    z-index: 1;
}

.wave-divider svg {
    width: 100%;
    height: 100%;
    display: block;
}

.wave-path {
    fill: var(--color-green);
    opacity: 0.3;
    transition: d 0.5s ease;
}

/* Zone 2: Curves */
.zone-curves {
    background: var(--color-brown);
}

.zone-curves .wave-path {
    fill: var(--color-gold);
    opacity: 0.25;
}

.probability-display {
    margin-top: 3rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.prob-number {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(5rem, 15vw, 12rem);
    color: var(--color-gold);
    line-height: 1;
}

.prob-percent {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--color-gold);
    opacity: 0.7;
}

/* Zone 3: Street */
.zone-street {
    background: var(--color-dark);
}

.zone-street .wave-path {
    fill: var(--color-red);
    opacity: 0.2;
}

.scatter-text {
    position: relative;
    width: 100%;
    height: 300px;
    margin-top: 2rem;
}

.scatter-word {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: rotate(var(--rot));
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: var(--color-cream);
    opacity: 0.6;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.scatter-word:hover {
    opacity: 1;
    transform: rotate(var(--rot)) scale(1.3);
    color: var(--color-gold);
}

/* Zone 4: Data */
.zone-data {
    background: var(--color-brown);
}

.zone-data .wave-path {
    fill: var(--color-green);
    opacity: 0.3;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.8rem;
    height: 200px;
    margin-top: 3rem;
}

.bar {
    width: 40px;
    height: var(--height);
    background: var(--color-gold);
    opacity: 0.8;
    border-radius: 2px 2px 0 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: bottom;
}

.bar:hover {
    transform: scaleY(1.2);
    opacity: 1;
}

/* Zone 5: Close */
.zone-close {
    background: var(--color-dark);
}

.final-dice {
    font-size: 6rem;
    margin-top: 3rem;
    cursor: pointer;
    transition: transform 0.3s ease;
    display: inline-block;
}

.final-dice:hover {
    transform: scale(1.3) rotate(15deg);
}

/* Scroll reveal */
.zone-content {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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