/* ========================================
   PPEBBL.com — Styles
   Scandinavian + Edgy-Rebellious
   Horizontal Scroll Experience
   ======================================== */

/* ---- CSS Custom Properties ---- */
:root {
    --fjord-midnight: #1a2332;
    --nordic-slate: #3d5a80;
    --pebble-amber: #e07a2f;
    --birch-cream: #f0e8d8;
    --granite-mid: #8e99a4;
    --ice-wash: #edf1f5;
    --signal-magenta: #d4376e;
    --carbon: #1c1f23;
    --dark-blue-shadow: #2a4468;
    --border-stone: #c8cdd4;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
    --font-mono: 'Space Mono', 'Courier New', monospace;

    --bounce-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
    --smooth-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --section-radius: clamp(24px, 4vw, 60px);
}

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

html {
    overflow: hidden;
    height: 100%;
    background: var(--fjord-midnight);
}

body {
    height: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.65;
    letter-spacing: 0.005em;
    color: var(--carbon);
    background: var(--fjord-midnight);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Grain/Noise Overlay ---- */
#grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* ---- Progress Bar ---- */
#progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    z-index: 999;
}

#progress-fill {
    height: 100%;
    width: 0%;
    background: var(--pebble-amber);
    transition: width 0.15s ease-out;
}

/* ---- Parallax Layers ---- */
.parallax-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

#parallax-bg {
    z-index: 1;
}

#particles-layer {
    z-index: 2;
}

#parallax-fg {
    z-index: 4;
}

.bg-circle {
    position: absolute;
    border-radius: 50%;
    background: var(--nordic-slate);
    opacity: 0.05;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: var(--granite-mid);
    pointer-events: none;
    will-change: transform;
}

.fg-line {
    position: absolute;
    height: 1px;
    background: var(--granite-mid);
    opacity: 0.08;
    transform-origin: left center;
    will-change: transform;
}

/* ---- Horizontal Canvas ---- */
#horizontal-canvas {
    display: flex;
    align-items: center;
    height: 100vh;
    width: max-content;
    position: relative;
    z-index: 3;
    scroll-behavior: smooth;
    padding: 0 5vw;
    gap: 0;
}

/* ---- Stone Sections (Pebble containers) ---- */
.stone-section {
    flex-shrink: 0;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--section-radius);
    border: 1px solid var(--border-stone);
    position: relative;
    overflow: hidden;
    margin: 0 clamp(2.5vw, 5vw, 7.5vw);
}

.stone-section[data-width="100"] {
    width: 90vw;
}

.stone-section[data-width="110"] {
    width: 100vw;
}

.stone-section[data-width="90"] {
    width: 80vw;
}

/* Scattered vertical offsets */
.stone-section:nth-child(1) {
    align-self: center;
}

.stone-section:nth-child(2) {
    align-self: flex-start;
    margin-top: 8vh;
}

.stone-section:nth-child(3) {
    align-self: center;
}

.stone-section:nth-child(4) {
    align-self: flex-end;
    margin-bottom: 5vh;
}

.stone-section:nth-child(5) {
    align-self: flex-start;
    margin-top: 6vh;
}

.stone-section:nth-child(6) {
    align-self: center;
}

.section-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 4vw, 5rem);
    position: relative;
}

/* ---- Section Color Variants ---- */
.section-dark {
    background: var(--fjord-midnight);
    border-color: rgba(200, 205, 212, 0.15);
    color: var(--ice-wash);
}

.section-light {
    background: var(--ice-wash);
    border-color: var(--border-stone);
    color: var(--carbon);
}

.section-cream {
    background: var(--birch-cream);
    border-color: rgba(200, 205, 212, 0.5);
    color: var(--carbon);
}

.section-neutral {
    background: transparent;
    border-color: transparent;
    color: var(--carbon);
}

/* ============================================
   SECTION 1: HERO / OPENING
   ============================================ */

.hero-inner {
    flex-direction: column;
    text-align: center;
}

.hero-wordmark {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.02em;
}

.hero-letter {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 12vw;
    letter-spacing: -0.03em;
    color: var(--ice-wash);
    display: inline-block;
    opacity: 0;
    transform: translateY(-20vh);
    will-change: transform, opacity;
}

.hero-letter.landed {
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.6s var(--bounce-ease), opacity 0.3s ease;
}

.hero-letter.settled {
    animation: microVibrate 0.3s ease-in-out;
}

@keyframes microVibrate {
    0%, 100% { transform: translateY(0) translateX(0); }
    15% { transform: translateY(-1px) translateX(1px); }
    30% { transform: translateY(1px) translateX(-1px); }
    45% { transform: translateY(-1px) translateX(0); }
    60% { transform: translateY(0px) translateX(1px); }
    75% { transform: translateY(1px) translateX(-1px); }
}

.hero-line {
    width: 0;
    height: 2px;
    background: var(--pebble-amber);
    margin: 2rem auto;
    transition: width 1.5s ease-in-out;
}

.hero-line.drawn {
    width: min(300px, 40vw);
}

.hero-tagline {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--granite-mid);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    letter-spacing: 0.01em;
}

.hero-tagline.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    right: clamp(2rem, 4vw, 4rem);
    top: 50%;
    transform: translateY(-50%);
    animation: pulseRight 2s ease-in-out infinite;
    opacity: 0;
    transition: opacity 1s ease 3s;
}

.scroll-indicator.visible {
    opacity: 1;
}

@keyframes pulseRight {
    0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.5; }
    50% { transform: translateY(-50%) translateX(8px); opacity: 1; }
}

/* ============================================
   SECTION 2: STORY / NARRATIVE
   ============================================ */

.story-inner {
    gap: clamp(2rem, 5vw, 6rem);
}

.story-illustration {
    flex: 0 0 35%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iso-pebble-main {
    width: clamp(200px, 25vw, 380px);
    height: auto;
}

.iso-face {
    opacity: 0;
    transform-origin: center;
    transition: opacity 0.6s ease, transform 0.6s var(--bounce-ease);
}

.iso-face.assembled {
    opacity: 1;
    transform: none;
}

.iso-face-top { transform: translateY(-40px); }
.iso-face-left { transform: translateX(-40px); }
.iso-face-right { transform: translateX(40px); }
.iso-face-bottom { transform: translateY(40px); }

.iso-shadow {
    opacity: 0;
    transition: opacity 0.8s ease 0.3s;
}

.iso-shadow.assembled {
    opacity: 0.2;
}

.iso-edge {
    opacity: 0;
    transition: opacity 0.5s ease 0.6s;
}

.iso-edge.assembled {
    opacity: 1;
}

.story-text {
    flex: 1;
    max-width: 600px;
}

.story-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: -0.03em;
    color: var(--carbon);
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s var(--smooth-ease);
}

.story-heading.visible {
    opacity: 1;
    transform: translateY(0);
}

.story-line {
    color: var(--carbon);
    margin-bottom: 1.25rem;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease, transform 0.5s var(--smooth-ease);
}

.story-line.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   SECTION 3: QUOTE
   ============================================ */

.quote-inner {
    flex-direction: column;
    text-align: center;
    padding: clamp(3rem, 6vw, 8rem);
}

.massive-quote {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--carbon);
    margin-bottom: 2rem;
}

.quote-word {
    display: inline-block;
    opacity: 0.15;
    transition: opacity 0.4s ease;
    margin-right: 0.25em;
}

.quote-word.revealed {
    opacity: 1;
}

.quote-rule {
    width: 60px;
    height: 1px;
    background: var(--granite-mid);
    margin: 0 auto 1rem;
}

.quote-attribution {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--granite-mid);
}

/* ============================================
   SECTION 4: OVERLAPPING CONTAINERS
   ============================================ */

.overlap-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.overlap-dark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-55%);
    width: 55%;
    height: 75%;
    background: var(--fjord-midnight);
    border-radius: var(--section-radius);
    border: 1px solid rgba(200, 205, 212, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    will-change: transform;
}

.iso-cluster {
    width: clamp(200px, 20vw, 350px);
    height: auto;
}

.overlap-light {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-45%);
    width: 55%;
    height: 70%;
    background: var(--ice-wash);
    border-radius: var(--section-radius);
    border: 1px solid var(--border-stone);
    padding: clamp(2rem, 4vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

.overlap-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.03em;
    color: var(--carbon);
    margin-bottom: 1.5rem;
}

.overlap-text {
    color: var(--carbon);
    margin-bottom: 1rem;
    max-width: 520px;
}

/* ============================================
   SECTION 5: INTERACTIVE PEBBLE FIELD
   ============================================ */

.interactive-inner {
    flex-direction: column;
    gap: 2rem;
}

.interactive-heading {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: -0.03em;
    color: var(--ice-wash);
    text-align: center;
}

.pebble-field {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 2vw, 2rem);
    justify-content: center;
    align-items: center;
    max-width: 800px;
}

.field-pebble {
    position: relative;
    width: clamp(80px, 10vw, 120px);
    height: clamp(70px, 9vw, 110px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.4s var(--bounce-ease);
}

.field-pebble svg {
    width: 100%;
    height: auto;
    transition: filter 0.3s ease;
}

.field-pebble:hover {
    transform: translateY(-8px);
}

.field-pebble:hover svg {
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
}

.field-pebble:hover svg path:first-child {
    fill: var(--pebble-amber) !important;
    transition: fill 0.3s ease;
}

.pebble-word {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--pebble-amber);
    opacity: 0;
    transition: opacity 0.3s ease, bottom 0.3s var(--bounce-ease);
    white-space: nowrap;
}

.field-pebble:hover .pebble-word {
    opacity: 1;
    bottom: -25px;
}

.interactive-hint {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--granite-mid);
    text-align: center;
    opacity: 0.6;
}

/* ============================================
   SECTION 6: CLOSING
   ============================================ */

.closing-inner {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
}

.closing-wordmark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1.5vw, 1.5rem);
}

.closing-letter-stone {
    width: clamp(50px, 8vw, 90px);
    height: auto;
    transition: transform 0.4s var(--bounce-ease);
}

.closing-letter-stone:hover {
    transform: translateY(-6px) rotate(3deg);
}

.closing-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--granite-mid);
    letter-spacing: 0.01em;
}

/* Magenta flash */
#magenta-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--signal-magenta);
    pointer-events: none;
    opacity: 0;
    z-index: 998;
}

#magenta-flash.flash {
    animation: magentaPulse 0.3s ease-out;
}

@keyframes magentaPulse {
    0% { opacity: 0; }
    30% { opacity: 0.08; }
    100% { opacity: 0; }
}

/* ============================================
   RESPONSIVE / REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .hero-letter {
        opacity: 1;
        transform: none;
    }
    .hero-line {
        width: min(300px, 40vw);
    }
    .hero-tagline {
        opacity: 1;
        transform: none;
    }
    .scroll-indicator {
        animation: none;
        opacity: 0.5;
    }
    .iso-face {
        opacity: 1;
        transform: none;
    }
    .quote-word {
        opacity: 1;
    }
    .story-heading, .story-line {
        opacity: 1;
        transform: none;
    }
    .field-pebble {
        transition: none;
    }
    #magenta-flash.flash {
        animation: none;
    }
}

/* ---- Scrollbar hidden ---- */
#horizontal-canvas::-webkit-scrollbar {
    display: none;
}

#horizontal-canvas {
    -ms-overflow-style: none;
    scrollbar-width: none;
}