:root {
    --bg-cream: #f5ede0;
    --bg-burgundy: #6b1d35;
    --text-walnut: #2e1a0e;
    --text-cream: #f9f3ea;
    --accent-rosewood: #8c2f4b;
    --holo-teal: #3dd6c8;
    --holo-violet: #9b6dff;
    --holo-rose: #ff6b9d;
    --divider-blush: #e2cfc0;
    --holo-phase: 0;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg-cream);
    color: var(--text-walnut);
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
}

h2 {
    font-size: clamp(2rem, 4.5vw, 4rem);
    margin-bottom: 0.5em;
}

.annotation {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    color: var(--accent-rosewood);
}

/* ========== Holographic Shimmer Keyframes ========== */

@keyframes holoShimmer {
    0%   { border-color: var(--holo-teal); }
    33%  { border-color: var(--holo-violet); }
    66%  { border-color: var(--holo-rose); }
    100% { border-color: var(--holo-teal); }
}

@keyframes pulseScale {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* ========== Workshop Window ========== */

#workshop-window {
    position: relative;
    height: 100vh;
    background: var(--bg-cream);
    overflow: hidden;
}

.annotation-welcome {
    position: absolute;
    top: 38%;
    left: 6%;
    transform: rotate(-3deg);
    font-size: clamp(1rem, 2vw, 1.3rem);
    opacity: 0.85;
    z-index: 2;
}

.hero-blob {
    position: absolute;
    top: 12%;
    right: 8%;
    width: 65vw;
    height: 70vh;
    max-width: 900px;
    background: var(--bg-cream);
    border: 3px solid var(--holo-teal);
    border-radius: 42% 58% 63% 37% / 55% 35% 65% 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    animation: holoShimmer 6s linear infinite;
    box-shadow:
        inset 0 0 20px rgba(61, 214, 200, 0.08),
        0 0 15px rgba(155, 109, 255, 0.06),
        0 4px 25px rgba(107, 29, 53, 0.12);
    z-index: 1;
}

.hero-blob h1 {
    font-size: clamp(3rem, 6vw, 5rem);
    color: var(--text-walnut);
    text-align: center;
}

.hero-blob .tagline {
    font-family: 'Source Sans 3', sans-serif;
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: var(--text-walnut);
    margin-top: 0.5em;
    opacity: 0.8;
}

.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border: 2px solid var(--accent-rosewood);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: pulseScale 2s ease-in-out infinite;
    z-index: 2;
}

.scroll-indicator span {
    font-family: 'Caveat', cursive;
    font-size: 0.65rem;
    color: var(--accent-rosewood);
}

/* ========== The Scatter ========== */

#the-scatter {
    position: relative;
    height: 180vh;
    background: var(--bg-cream);
    padding: 5vh 0;
}

.connection-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.conn-line {
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 1.5s ease;
}

.conn-line.drawn {
    stroke-dashoffset: 0;
}

.scatter-blob {
    position: absolute;
    background: var(--bg-cream);
    border: 2.5px solid var(--holo-teal);
    animation: holoShimmer 6s linear infinite;
    box-shadow:
        inset 0 0 20px rgba(61, 214, 200, 0.08),
        0 0 15px rgba(155, 109, 255, 0.06),
        0 4px 25px rgba(107, 29, 53, 0.12);
    padding: 2.5rem 2rem;
    opacity: 0.4;
    transform: scale(0.85);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
}

.scatter-blob.in-focus {
    opacity: 1;
    transform: scale(1);
    box-shadow:
        inset 0 0 30px rgba(61, 214, 200, 0.16),
        0 0 25px rgba(155, 109, 255, 0.12),
        0 6px 35px rgba(107, 29, 53, 0.18);
}

.blob-1 {
    top: 5%;
    left: 8%;
    width: clamp(280px, 38vw, 480px);
    border-radius: 42% 58% 63% 37% / 55% 35% 65% 45%;
}

.blob-2 {
    top: 22%;
    right: 6%;
    width: clamp(260px, 34vw, 440px);
    border-radius: 63% 37% 42% 58% / 35% 65% 45% 55%;
}

.blob-3 {
    top: 46%;
    left: 14%;
    width: clamp(270px, 36vw, 460px);
    border-radius: 37% 63% 58% 42% / 65% 45% 55% 35%;
}

.blob-4 {
    top: 68%;
    right: 10%;
    width: clamp(250px, 32vw, 420px);
    border-radius: 58% 42% 37% 63% / 45% 55% 35% 65%;
}

.blob-content h2 {
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    margin-bottom: 0.4em;
    color: var(--text-walnut);
}

.blob-content p {
    color: var(--text-walnut);
    line-height: 1.72;
}

.blob-annotation {
    display: block;
    margin-top: 1em;
    transform: rotate(2deg);
    opacity: 0;
    transition: opacity 0.6s ease 0.3s;
}

.scatter-blob.in-focus .blob-annotation {
    opacity: 0.85;
}

/* ========== The Assembly ========== */

#the-assembly {
    position: relative;
    height: 100vh;
    background: var(--bg-cream);
    display: flex;
    justify-content: center;
    align-items: center;
}

.assembly-container {
    position: relative;
    width: 80vw;
    height: 70vh;
    max-width: 1000px;
}

.assembly-blob {
    position: absolute;
    background: var(--bg-cream);
    border: 2.5px solid var(--holo-violet);
    animation: holoShimmer 4s linear infinite;
    padding: 2rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow:
        inset 0 0 20px rgba(61, 214, 200, 0.08),
        0 0 15px rgba(155, 109, 255, 0.06),
        0 4px 25px rgba(107, 29, 53, 0.12);
}

.assembly-blob h2 {
    font-size: clamp(1.2rem, 2.2vw, 1.8rem);
    color: var(--text-walnut);
    margin-bottom: 0;
    text-align: center;
}

.a-blob-1 {
    width: clamp(160px, 22vw, 260px);
    height: clamp(140px, 18vh, 200px);
    top: 5%;
    left: 5%;
    border-radius: 42% 58% 63% 37% / 55% 35% 65% 45%;
}

.a-blob-2 {
    width: clamp(150px, 20vw, 240px);
    height: clamp(130px, 17vh, 190px);
    top: 2%;
    right: 8%;
    border-radius: 63% 37% 42% 58% / 35% 65% 45% 55%;
}

.a-blob-3 {
    width: clamp(155px, 21vw, 250px);
    height: clamp(135px, 17vh, 195px);
    bottom: 8%;
    left: 10%;
    border-radius: 37% 63% 58% 42% / 65% 45% 55% 35%;
}

.a-blob-4 {
    width: clamp(145px, 19vw, 230px);
    height: clamp(125px, 16vh, 185px);
    bottom: 5%;
    right: 5%;
    border-radius: 58% 42% 37% 63% / 45% 55% 35% 65%;
}

.assembly-blob.assembled {
    box-shadow:
        inset 0 0 40px rgba(61, 214, 200, 0.24),
        0 0 35px rgba(155, 109, 255, 0.2),
        0 0 40px rgba(255, 107, 157, 0.15),
        0 8px 45px rgba(107, 29, 53, 0.22);
}

.a-blob-1.assembled { top: 18%; left: 22%; }
.a-blob-2.assembled { top: 15%; right: 22%; }
.a-blob-3.assembled { bottom: 18%; left: 25%; }
.a-blob-4.assembled { bottom: 15%; right: 22%; }

@keyframes holoFlash {
    0%   { box-shadow: inset 0 0 40px rgba(61,214,200,0.3), 0 0 50px rgba(155,109,255,0.3), 0 0 50px rgba(255,107,157,0.3); }
    100% { box-shadow: inset 0 0 20px rgba(61,214,200,0.08), 0 0 15px rgba(155,109,255,0.06), 0 4px 25px rgba(107,29,53,0.12); }
}

.assembly-blob.flash {
    animation: holoFlash 0.4s ease-out forwards;
}

.assembly-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    color: var(--bg-burgundy);
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 5;
}

.assembly-text.visible {
    opacity: 1;
}

/* ========== The Workshop Floor ========== */

#workshop-floor {
    position: relative;
    min-height: 80vh;
    background: var(--bg-burgundy);
    color: var(--text-cream);
    overflow: hidden;
}

.floor-gradient {
    position: absolute;
    top: -15vh;
    left: 0;
    width: 100%;
    height: 15vh;
    background: linear-gradient(to bottom, var(--bg-cream), var(--bg-burgundy));
    pointer-events: none;
}

.floor-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding: 10vh 8vw 8vh;
}

.floor-content h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    color: var(--text-cream);
    margin-bottom: 0.6em;
}

.floor-content p {
    margin-bottom: 1.5em;
    color: var(--text-cream);
    opacity: 0.92;
}

.floor-content strong {
    font-weight: 600;
}

.floor-annotation {
    display: block;
    margin-top: 2em;
    transform: rotate(2deg);
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    color: var(--holo-rose);
    opacity: 0.8;
}

.floor-blob {
    position: absolute;
    background: var(--accent-rosewood);
    opacity: 0.25;
    border-radius: 50%;
    z-index: 1;
}

.floor-blob-1 {
    width: 35px;
    height: 30px;
    top: 15%;
    right: 12%;
    border-radius: 42% 58% 63% 37% / 55% 35% 65% 45%;
    animation: floatY 9s ease-in-out infinite;
}

.floor-blob-2 {
    width: 25px;
    height: 25px;
    top: 40%;
    right: 25%;
    border-radius: 63% 37% 42% 58% / 35% 65% 45% 55%;
    animation: floatY 11s ease-in-out infinite 1s;
}

.floor-blob-3 {
    width: 40px;
    height: 35px;
    bottom: 20%;
    right: 8%;
    border-radius: 37% 63% 58% 42% / 65% 45% 55% 35%;
    animation: floatY 8s ease-in-out infinite 2s;
}

.floor-blob-4 {
    width: 20px;
    height: 20px;
    top: 60%;
    right: 35%;
    border-radius: 50%;
    animation: floatY 12s ease-in-out infinite 0.5s;
}

.floor-blob-5 {
    width: 30px;
    height: 28px;
    bottom: 35%;
    right: 18%;
    border-radius: 58% 42% 37% 63% / 45% 55% 35% 65%;
    animation: floatY 10s ease-in-out infinite 3s;
}

/* ========== Responsive ========== */

@media (max-width: 768px) {
    .hero-blob {
        width: 85vw;
        right: 5%;
        top: 15%;
        height: 60vh;
    }

    .annotation-welcome {
        top: 8%;
        left: 8%;
    }

    .scatter-blob {
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 85vw !important;
        margin: 3rem auto;
    }

    #the-scatter {
        height: auto;
        padding: 5vh 5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .connection-svg {
        display: none;
    }

    .assembly-container {
        width: 90vw;
    }

    .a-blob-1, .a-blob-2, .a-blob-3, .a-blob-4 {
        width: clamp(120px, 40vw, 200px) !important;
        height: clamp(100px, 28vw, 160px) !important;
    }
}