/* ============================================================
   Reset and Base Styles
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    background-color: #2E2A24;
    font-family: 'Work Sans', sans-serif;
    color: #A09080;
    line-height: 1.75;
}

/* ============================================================
   Typography
   ============================================================ */
h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    letter-spacing: -0.02em;
    color: #E8E0D0;
}

h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    letter-spacing: 0.03em;
    color: #C8B898;
    position: relative;
    display: inline-block;
    padding-bottom: 0.5rem;
}

h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%;
    height: 2px;
    background-color: #B89040;
}

body {
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    color: #A09080;
    line-height: 1.75;
}

.accent-label {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #706050;
    display: block;
    margin-top: 1rem;
}

/* ============================================================
   Section Base Styles
   ============================================================ */
section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.section-drop {
    background-color: #2E2A24;
}

.section-exhibition {
    background-color: #2E2A24;
}

.section-threshold {
    background-color: #2E2A24;
}

.section-ground {
    background-color: #1E1A16;
}

/* ============================================================
   Section 1: The Drop
   ============================================================ */
.hero-title {
    position: absolute;
    bottom: 15%;
    left: 8%;
    z-index: 10;
}

.polyhedron-1 {
    position: absolute;
    top: 15%;
    right: 10%;
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, #8A7A64 0%, #5A5040 100%);
    clip-path: polygon(50px 20px, 200px 40px, 220px 150px, 180px 200px, 20px 180px, 10px 80px);
    box-shadow: 20px 30px 40px rgba(30, 26, 22, 0.8);
}

.polyhedron-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    clip-path: inherit;
}

/* ============================================================
   Polyhedra and Circuit Overlays
   ============================================================ */
.polyhedron {
    position: absolute;
    background: linear-gradient(135deg, #8A7A64 0%, #5A5040 100%);
    box-shadow: 20px 30px 40px rgba(30, 26, 22, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.circuit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.circuit-line {
    stroke: rgba(232, 224, 208, 0.15);
    stroke-width: 1;
    fill: none;
}

.circuit-node {
    fill: rgba(232, 224, 208, 0.15);
}

/* ============================================================
   Section 2: The Exhibition
   ============================================================ */
.section-exhibition {
    padding: 5vh 5vw;
}

.content-block {
    position: absolute;
    background-color: rgba(46, 42, 36, 0.7);
    border-left: 2px solid #5A5040;
    padding: 2rem;
    max-width: 26rem;
}

.block-a {
    top: 5%;
    right: 8%;
    width: 22rem;
}

.block-b {
    top: 45%;
    left: 8%;
    width: 18rem;
}

.block-c {
    top: 75%;
    right: 15%;
    width: 26rem;
}

.block-heading {
    margin-bottom: 1.5rem;
}

.block-text {
    font-size: clamp(0.95rem, 1.2vw, 1rem);
    color: #A09080;
    line-height: 1.8;
}

/* Polyhedra in Section 2 */
.polyhedron-2 {
    top: 25%;
    left: 45%;
    width: 180px;
    height: 180px;
    clip-path: polygon(40px 30px, 160px 20px, 180px 120px, 140px 180px, 30px 160px, 20px 80px);
}

.polyhedron-3 {
    top: 60%;
    left: 25%;
    width: 150px;
    height: 150px;
    clip-path: polygon(50px 25px, 140px 15px, 160px 110px, 100px 160px, 25px 140px, 20px 70px);
}

/* Accent plus signs */
.accent-plus {
    position: absolute;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    color: #706050;
    font-weight: 300;
    z-index: 2;
}

.plus-1 { top: 15%; left: 35%; }
.plus-2 { top: 35%; right: 25%; }
.plus-3 { top: 55%; left: 55%; }
.plus-4 { top: 70%; left: 15%; }
.plus-5 { top: 80%; right: 30%; }
.plus-6 { top: 25%; right: 50%; }

/* Connection lines */
.connection-line {
    position: absolute;
    background-color: #5A5040;
    opacity: 0.3;
    z-index: 1;
}

.line-1 {
    width: 150px;
    height: 2px;
    top: 35%;
    left: 15%;
    transform: rotate(-15deg);
}

.line-2 {
    width: 120px;
    height: 2px;
    top: 65%;
    right: 20%;
    transform: rotate(25deg);
}

/* ============================================================
   Section 3: The Threshold
   ============================================================ */
.threshold-text {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width: 800px;
    padding: 0 2rem;
    z-index: 10;
}

.threshold-heading {
    margin-bottom: 1.5rem;
    text-align: center;
}

.threshold-body {
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    color: #A09080;
    line-height: 1.9;
}

.shapes-row {
    position: absolute;
    top: 65%;
    left: 5%;
    right: 5%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 2rem;
}

/* Polyhedra in Section 3 */
.polyhedron-4 {
    width: 220px;
    height: 220px;
    clip-path: polygon(60px 30px, 170px 35px, 190px 140px, 130px 190px, 35px 160px, 25px 75px);
}

.polyhedron-5 {
    width: 200px;
    height: 200px;
    clip-path: polygon(45px 40px, 155px 25px, 175px 130px, 120px 175px, 30px 155px, 20px 85px);
}

.polyhedron-6 {
    width: 190px;
    height: 190px;
    clip-path: polygon(50px 35px, 150px 30px, 170px 120px, 115px 170px, 25px 150px, 15px 80px);
}

.polyhedron-7 {
    width: 210px;
    height: 210px;
    clip-path: polygon(55px 32px, 165px 28px, 185px 135px, 125px 180px, 30px 160px, 20px 78px);
}

.plus-7 { top: 50%; left: 8%; }
.plus-8 { top: 70%; left: 45%; }
.plus-9 { top: 55%; right: 8%; }

/* ============================================================
   Section 4: The Ground
   ============================================================ */
.ground-text {
    position: absolute;
    left: 80%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 300px;
    z-index: 10;
}

.ground-statement {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 400;
    color: #E8E0D0;
    line-height: 1.8;
    letter-spacing: -0.01em;
}

/* Polyhedra in Section 4 */
.polyhedron-8 {
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-30%);
    width: 280px;
    height: 280px;
    clip-path: polygon(70px 40px, 200px 50px, 240px 180px, 160px 240px, 20px 210px, 10px 90px);
}

/* ============================================================
   Fade-In and Stagger Animation
   ============================================================ */
.content-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* ============================================================
   Responsive Design (Mobile)
   ============================================================ */
@media (max-width: 768px) {
    section {
        position: relative;
        min-height: auto;
        padding: 3rem 2rem;
    }

    .section-drop {
        min-height: 100vh;
    }

    .hero-title {
        position: relative;
        bottom: auto;
        left: auto;
        margin-bottom: 3rem;
        font-size: 2.5rem;
    }

    .polyhedron-1 {
        position: relative;
        top: auto;
        right: auto;
        margin: 2rem auto 0;
        width: 180px;
        height: 180px;
    }

    .section-exhibition {
        padding: 3rem 2rem;
    }

    .content-block {
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin-bottom: 3rem;
        width: 100% !important;
        max-width: 100%;
    }

    .block-a,
    .block-b,
    .block-c {
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    .polyhedron-2,
    .polyhedron-3 {
        position: relative;
        top: auto !important;
        left: auto !important;
        margin: 2rem auto;
        width: 150px;
        height: 150px;
    }

    .accent-plus {
        position: relative;
        display: inline-block;
        margin: 1rem;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    .connection-line {
        display: none;
    }

    .threshold-text {
        position: relative;
        top: auto !important;
        left: auto !important;
        transform: none;
        margin-bottom: 2rem;
    }

    .shapes-row {
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        flex-direction: column;
        gap: 3rem;
        align-items: center;
        margin: 2rem 0;
    }

    .polyhedron-4,
    .polyhedron-5,
    .polyhedron-6,
    .polyhedron-7 {
        position: relative;
        width: 150px;
        height: 150px;
    }

    .section-ground {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .ground-text {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        text-align: center;
        margin-bottom: 2rem;
    }

    .polyhedron-8 {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: 0 auto;
        width: 200px;
        height: 200px;
    }
}

/* ============================================================
   High Resolution Support
   ============================================================ */
@media (min-width: 1920px) {
    .polyhedron-1 {
        width: 300px;
        height: 300px;
    }

    .polyhedron-2,
    .polyhedron-3 {
        width: 220px;
        height: 220px;
    }

    .polyhedron-4,
    .polyhedron-5,
    .polyhedron-6,
    .polyhedron-7 {
        width: 250px;
        height: 250px;
    }

    .polyhedron-8 {
        width: 320px;
        height: 320px;
    }
}