:root {
    --violet-fire: #7B2FBE;
    --gold-blaze: #D4A017;
    --teal-spark: #17A2B8;
    --deep-carbon: #0D0D12;
    --carbon-fiber: #1A1A24;
    --warm-white: #F0ECE2;
    --muted-silver: #8A8698;
    --dopamine-burst: #E91E8C;
    --font-display: 'Poiret One', cursive;
    --font-subhead: 'Josefin Sans', sans-serif;
    --font-body: 'Work Sans', sans-serif;
    --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
    --masonry-gap: clamp(12px, 2vw, 24px);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--deep-carbon);
    color: var(--warm-white);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

/* ========================================
   SCROLL INDICATOR
   ======================================== */
.scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 48px;
    height: 100vh;
    z-index: 100;
    pointer-events: none;
}

.scroll-indicator svg {
    width: 48px;
    height: 100%;
}

.scroll-progress-line {
    transition: none;
    stroke-linecap: round;
}

.scroll-marker {
    transition: opacity 0.4s var(--ease-out-expo);
}

/* ========================================
   BUBBLE CANVAS
   ======================================== */
.bubble-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* ========================================
   WAVE HORIZON
   ======================================== */
.wave-horizon {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20vh;
    z-index: 2;
    pointer-events: none;
}

.wave-horizon svg {
    width: 100%;
    height: 100%;
}

.wave-1 {
    animation: wave-shift 8s ease-in-out infinite alternate;
}

.wave-2 {
    animation: wave-shift 11s ease-in-out infinite alternate-reverse;
}

.wave-3 {
    animation: wave-shift 14s ease-in-out infinite alternate;
}

@keyframes wave-shift {
    0% { d: path("M0,100 C240,60 480,140 720,100 C960,60 1200,140 1440,100"); }
    50% { d: path("M0,100 C240,80 480,120 720,100 C960,80 1200,120 1440,100"); }
    100% { d: path("M0,100 C240,50 480,150 720,100 C960,50 1200,150 1440,100"); }
}

/* ========================================
   MACRO BUBBLES
   ======================================== */
.macro-bubble {
    position: fixed;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 30% 25%, rgba(123,47,190,0.4), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(23,162,184,0.3), transparent 50%);
    box-shadow:
        inset 0 -4px 12px rgba(212,160,23,0.15),
        0 0 20px rgba(123,47,190,0.1);
    border: 1px solid rgba(240,236,226,0.08);
    z-index: 3;
    pointer-events: none;
}

.macro-bubble--1 {
    width: 300px;
    height: 300px;
    top: 15vh;
    right: 10vw;
    animation: bubble-drift-1 16s ease-in-out infinite alternate;
}

.macro-bubble--2 {
    width: 220px;
    height: 220px;
    top: 50vh;
    left: 8vw;
    animation: bubble-drift-2 19s ease-in-out infinite alternate;
}

.macro-bubble--3 {
    width: 260px;
    height: 260px;
    top: 75vh;
    right: 25vw;
    animation: bubble-drift-3 14s ease-in-out infinite alternate;
}

@keyframes bubble-drift-1 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(15px, -25px) scale(1.03); }
    100% { transform: translate(-10px, 5px) scale(0.98); }
}

@keyframes bubble-drift-2 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-20px, -15px) scale(1.02); }
    100% { transform: translate(12px, 10px) scale(0.97); }
}

@keyframes bubble-drift-3 {
    0% { transform: translate(0, 0) scale(0.98); }
    50% { transform: translate(10px, -30px) scale(1.04); }
    100% { transform: translate(-15px, 8px) scale(1); }
}

/* ========================================
   ZONE 1: WORDMARK
   ======================================== */
.zone--wordmark {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    overflow: hidden;
}

.sunburst {
    position: absolute;
    width: 120vw;
    height: 120vw;
    background: conic-gradient(
        from 0deg,
        rgba(212,160,23,0.04) 0deg,
        transparent 15deg,
        rgba(212,160,23,0.04) 30deg,
        transparent 45deg,
        rgba(212,160,23,0.04) 60deg,
        transparent 75deg,
        rgba(212,160,23,0.04) 90deg,
        transparent 105deg,
        rgba(212,160,23,0.04) 120deg,
        transparent 135deg,
        rgba(212,160,23,0.04) 150deg,
        transparent 165deg,
        rgba(212,160,23,0.04) 180deg,
        transparent 195deg,
        rgba(212,160,23,0.04) 210deg,
        transparent 225deg,
        rgba(212,160,23,0.04) 240deg,
        transparent 255deg,
        rgba(212,160,23,0.04) 270deg,
        transparent 285deg,
        rgba(212,160,23,0.04) 300deg,
        transparent 315deg,
        rgba(212,160,23,0.04) 330deg,
        transparent 345deg,
        rgba(212,160,23,0.04) 360deg
    );
    border-radius: 50%;
    animation: sunburst-rotate 60s linear infinite;
}

@keyframes sunburst-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.wordmark {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--warm-white);
    position: relative;
    z-index: 2;
    text-shadow: 0 0 60px rgba(123,47,190,0.3);
}

.wordmark-sub {
    font-family: var(--font-subhead);
    font-weight: 300;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: var(--muted-silver);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 1rem;
    position: relative;
    z-index: 2;
}

/* ========================================
   MASONRY LATTICE
   ======================================== */
.masonry-lattice {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 5fr 4fr 5fr;
    gap: var(--masonry-gap);
    padding: var(--masonry-gap);
    padding-left: calc(48px + var(--masonry-gap));
    max-width: 1400px;
    margin: 0 auto;
}

/* ========================================
   CELL BASE
   ======================================== */
.cell {
    opacity: 0;
    transform: scale(0.85) translateY(30px);
    transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.cell.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ========================================
   DIAMOND CELLS
   ======================================== */
.cell--diamond {
    background: var(--carbon-fiber);
    clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(212,160,23,0.08);
}

.cell--diamond::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212,160,23,0.08), transparent 60%);
    pointer-events: none;
}

.cell__deco-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s var(--ease-out-expo);
    background:
        repeating-linear-gradient(
            135deg,
            transparent,
            transparent 20px,
            rgba(212,160,23,0.03) 20px,
            rgba(212,160,23,0.03) 21px
        );
    pointer-events: none;
}

.cell--diamond:hover .cell__deco-overlay {
    opacity: 1;
}

.cell__heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--warm-white);
    margin-bottom: 1rem;
    position: relative;
}

.cell--diamond:hover .cell__heading {
    animation: glitch-flash 200ms steps(1) forwards;
    text-shadow: 2px 0 var(--dopamine-burst), -2px 0 var(--teal-spark);
}

@keyframes glitch-flash {
    0% { clip-path: inset(0 0 60% 0); transform: translateX(3px); }
    33% { clip-path: inset(30% 0 30% 0); transform: translateX(-2px); }
    66% { clip-path: inset(60% 0 0 0); transform: translateX(1px); }
    100% { clip-path: none; transform: translateX(0); text-shadow: none; }
}

.cell__text {
    font-family: var(--font-body);
    color: var(--muted-silver);
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    line-height: 1.7;
}

/* ========================================
   GRAPHENE CELLS
   ======================================== */
.cell--graphene {
    grid-column: span 2;
    background: var(--carbon-fiber);
    border: 1px solid rgba(123,47,190,0.2);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.cell__subheading {
    font-family: var(--font-subhead);
    font-weight: 600;
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    color: var(--teal-spark);
    position: relative;
    z-index: 2;
}

.wave-ribbon {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.wave-ribbon svg {
    width: 100%;
    height: 100%;
}

.ribbon-wave {
    animation: ribbon-flow 6s ease-in-out infinite alternate;
    stroke-linecap: round;
}

.ribbon-wave--2 {
    animation-duration: 9s;
    animation-direction: alternate-reverse;
}

@keyframes ribbon-flow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 200; }
}

.ribbon-wave {
    stroke-dasharray: 20 10;
}

/* ========================================
   FULLERENE CELLS
   ======================================== */
.cell--fullerene {
    border-radius: 50%;
    background: var(--carbon-fiber);
    border: 1px solid rgba(123,47,190,0.25);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    max-width: 280px;
    justify-self: center;
}

.fullerene-wireframe {
    width: 80%;
    height: 80%;
    animation: fullerene-spin 20s linear infinite;
}

.fullerene-wireframe--alt {
    animation-direction: reverse;
    animation-duration: 25s;
}

.fullerene-wireframe svg {
    width: 100%;
    height: 100%;
}

@keyframes fullerene-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========================================
   VOID CELLS
   ======================================== */
.cell--void {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.void-pulse {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123,47,190,0.06), transparent 70%);
    animation: void-breathe 6s ease-in-out infinite;
}

@keyframes void-breathe {
    0%, 100% { transform: scale(0.8); opacity: 0.4; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

/* ========================================
   ZONE 5: CARBON FUTURES
   ======================================== */
.zone--futures {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    padding: 4rem 2rem;
    text-align: center;
    overflow: hidden;
    transition: background-color 1s ease;
}

.futures-bubble {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 30% 25%, rgba(123,47,190,0.35), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(23,162,184,0.25), transparent 50%);
    box-shadow:
        inset 0 -4px 12px rgba(212,160,23,0.15),
        0 0 40px rgba(123,47,190,0.15);
    border: 1px solid rgba(240,236,226,0.06);
    transition: transform 0.5s var(--ease-out-expo);
    z-index: 1;
}

.futures-heading {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--warm-white);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.futures-text {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--muted-silver);
    max-width: 600px;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.8;
    position: relative;
    z-index: 2;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .masonry-lattice {
        grid-template-columns: 1fr;
        padding-left: var(--masonry-gap);
    }

    .cell--graphene {
        grid-column: span 1;
    }

    .cell--fullerene {
        max-width: 200px;
    }

    .scroll-indicator {
        display: none;
    }

    .macro-bubble--1 { width: 150px; height: 150px; }
    .macro-bubble--2 { width: 120px; height: 120px; }
    .macro-bubble--3 { width: 140px; height: 140px; }
}