/* =========================================================
   completengine.com - Blobitecture Data Organism
   ========================================================= */

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

:root {
    --bg-primary: #F2EDE4;
    --bg-alt: #D8D2C8;
    --text-primary: #3B3632;
    --accent-teal: #6B9E9B;
    --accent-coral: #C4847A;
    --accent-ochre: #C9A86C;
    --accent-lavender: #8E8BA7;
    --accent-indigo: #5C6B8A;
    --highlight-rose: #D4A5A0;
    --shadow-umber: #4A4036;

    --font-heading: 'Nunito', sans-serif;
    --font-secondary: 'Varela Round', sans-serif;
    --font-body: 'Quicksand', sans-serif;
    --font-data: 'Comfortaa', sans-serif;

    --spring-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--bg-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- Data-Viz Spine --- */
#data-spine {
    position: fixed;
    left: 0;
    top: 0;
    width: 15vw;
    height: 100vh;
    z-index: 10;
    pointer-events: none;
    opacity: 0.35;
}

#spine-svg {
    width: 100%;
    height: 100%;
}

.spine-stream {
    fill-opacity: 0.5;
    stroke: none;
    transition: fill-opacity 0.6s ease;
}

.spine-stream-1 { fill: var(--accent-teal); }
.spine-stream-2 { fill: var(--accent-coral); }
.spine-stream-3 { fill: var(--accent-ochre); }
.spine-stream-4 { fill: var(--accent-lavender); }

.spine-stream.active {
    fill-opacity: 1;
}

.spine-stream.inactive {
    fill-opacity: 0.15;
}

/* --- Floating Decorations --- */
#floating-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.floating-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: floatCircle 30s ease-in-out infinite;
}

@keyframes floatCircle {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.12; }
    25% { transform: translate(30px, -40px) scale(1.05); opacity: 0.18; }
    50% { transform: translate(-20px, -80px) scale(0.95); opacity: 0.15; }
    75% { transform: translate(40px, -30px) scale(1.02); opacity: 0.1; }
}

/* --- Blob Chambers (shared) --- */
.blob-chamber {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    display: grid;
    place-items: center;
    will-change: clip-path, transform;
}

.blob-bg {
    position: absolute;
    inset: -10% -5%;
    width: 110%;
    height: 120%;
    z-index: 0;
}

.chamber-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 5vh 5vw 5vh 18vw;
}

/* --- Chamber 1: The Pulse --- */
#chamber-1 {
    background: var(--bg-primary);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 85% 94%, 60% 90%, 35% 96%, 15% 91%, 0% 95%);
}

#chamber-1 .blob-bg {
    background: var(--bg-primary);
    background-image: radial-gradient(ellipse at 50% 50%, rgba(107, 158, 155, 0.1) 0%, transparent 70%);
}

.radial-chart-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -50%);
    width: min(60vw, 600px);
    height: min(60vw, 600px);
    z-index: 1;
}

#radial-chart {
    width: 100%;
    height: 100%;
}

/* --- Chamber 2: The Flow --- */
#chamber-2 {
    background: var(--bg-alt);
    clip-path: polygon(0% 5%, 15% 0%, 40% 4%, 65% 0%, 100% 3%, 100% 90%, 80% 96%, 55% 92%, 30% 97%, 0% 93%);
    margin-top: -6vh;
}

#chamber-2 .blob-bg {
    background: var(--bg-alt);
    background-image: radial-gradient(ellipse at 60% 40%, rgba(196, 132, 122, 0.1) 0%, transparent 70%);
}

.stream-graph-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 75vw;
    height: 45vh;
    z-index: 1;
}

#stream-graph {
    width: 100%;
    height: 100%;
}

/* --- Chamber 3: The Scatter --- */
#chamber-3 {
    background: var(--bg-primary);
    clip-path: polygon(0% 4%, 20% 0%, 50% 5%, 80% 1%, 100% 6%, 100% 92%, 75% 98%, 45% 93%, 20% 97%, 0% 91%);
    margin-top: -6vh;
}

#chamber-3 .blob-bg {
    background: var(--bg-primary);
    background-image: radial-gradient(ellipse at 40% 50%, rgba(201, 168, 108, 0.1) 0%, transparent 70%);
}

.bubble-field-container {
    position: absolute;
    inset: 0;
    z-index: 1;
}

#bubble-field {
    width: 100%;
    height: 100%;
}

/* --- Chamber 4: The Grid --- */
#chamber-4 {
    background: var(--bg-alt);
    clip-path: polygon(0% 3%, 30% 0%, 60% 4%, 100% 1%, 100% 94%, 70% 100%, 40% 95%, 0% 99%);
    margin-top: -6vh;
}

#chamber-4 .blob-bg {
    background: var(--bg-alt);
    background-image: radial-gradient(ellipse at 35% 50%, rgba(142, 139, 167, 0.1) 0%, transparent 70%);
}

.chamber-grid .chamber-content {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 2vw;
    align-items: center;
}

.waffle-chart-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#waffle-chart {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 4px;
    width: 100%;
    max-width: 520px;
}

.waffle-cell {
    aspect-ratio: 1;
    border-radius: 30%;
    background: var(--bg-alt);
    transition: background-color 0.15s ease-out, transform 0.3s var(--spring-ease);
    will-change: background-color, transform;
}

.waffle-cell:hover {
    transform: scale(1.15);
}

.waffle-cell.filled {
    transform: scale(1);
}

/* --- Chamber 5: The Convergence --- */
#chamber-5 {
    background: var(--bg-primary);
    clip-path: polygon(0% 5%, 25% 0%, 55% 6%, 85% 1%, 100% 4%, 100% 100%, 0% 100%);
    margin-top: -6vh;
}

#chamber-5 .blob-bg {
    background: var(--bg-primary);
    background-image:
        radial-gradient(ellipse at 50% 50%, rgba(107, 158, 155, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 40%, rgba(196, 132, 122, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(201, 168, 108, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 30%, rgba(142, 139, 167, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 40% 70%, rgba(92, 107, 138, 0.05) 0%, transparent 50%);
}

.convergence-viz-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -50%);
    width: min(65vw, 700px);
    height: min(65vw, 700px);
    z-index: 1;
}

#convergence-viz {
    width: 100%;
    height: 100%;
}

.convergence-heading {
    font-size: clamp(2.4rem, 6vw, 5rem) !important;
    text-align: center;
}

/* --- Floating Islands --- */
.floating-island {
    background: rgba(242, 237, 228, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 40px 60px 50px 70px;
    padding: 2rem 2.5rem;
    position: relative;
    z-index: 3;
    max-width: 520px;
    box-shadow: 0 8px 40px rgba(74, 64, 54, 0.08);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s var(--spring-ease);
    will-change: transform, opacity;
}

.floating-island.visible {
    opacity: 1;
    transform: translateY(0);
}

.island-1 {
    position: absolute;
    top: 18vh;
    right: 8vw;
    transform: rotate(-1deg) translateY(30px);
    animation: islandFloat 8s ease-in-out infinite;
}

.island-1.visible {
    transform: rotate(-1deg) translateY(0);
}

.island-2 {
    position: absolute;
    bottom: 18vh;
    right: 12vw;
    transform: rotate(1.5deg) translateY(30px);
    border-radius: 50px 40px 60px 45px;
    animation: islandFloat 9s ease-in-out infinite;
    animation-delay: -3s;
}

.island-2.visible {
    transform: rotate(1.5deg) translateY(0);
}

.island-3 {
    position: absolute;
    top: 50%;
    right: 6vw;
    transform: translate(0, -50%) rotate(1deg) translateY(30px);
    border-radius: 55px 45px 65px 40px;
    max-width: 420px;
    animation: islandFloat 10s ease-in-out infinite;
    animation-delay: -2s;
}

.island-3.visible {
    transform: translate(0, -50%) rotate(1deg) translateY(0);
}

.island-4 {
    position: absolute;
    top: 15vh;
    left: 20vw;
    transform: rotate(-2deg) translateY(30px);
    border-radius: 60px 45px 55px 50px;
    max-width: 400px;
    animation: islandFloat 8.5s ease-in-out infinite;
    animation-delay: -4s;
}

.island-4.visible {
    transform: rotate(-2deg) translateY(0);
}

.island-5 {
    transform: rotate(1.5deg) translateY(30px);
    border-radius: 45px 60px 50px 55px;
    animation: islandFloat 9.5s ease-in-out infinite;
    animation-delay: -1s;
    background: rgba(216, 210, 200, 0.85);
}

.island-5.visible {
    transform: rotate(1.5deg) translateY(0);
}

.island-6 {
    position: absolute;
    bottom: 20vh;
    left: 50%;
    transform: translate(-50%, 30px);
    border-radius: 50px 55px 60px 45px;
    text-align: center;
    animation: islandFloat 7s ease-in-out infinite;
    animation-delay: -5s;
}

.island-6.visible {
    transform: translate(-50%, 0);
}

@keyframes islandFloat {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -5px; }
}

/* --- Typography --- */
.heading-primary {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(2.4rem, 6vw, 5rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--text-primary);
}

.heading-secondary {
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.body-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    line-height: 1.7;
    letter-spacing: 0.005em;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.body-text:last-child {
    margin-bottom: 0;
}

.data-label {
    font-family: var(--font-data);
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--accent-indigo);
}

/* --- Concentric Rings --- */
.concentric-rings {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    animation: ringPulse 8s ease-in-out infinite;
}

.concentric-rings svg {
    width: 100%;
    height: 100%;
}

.concentric-rings circle {
    fill: none;
    stroke-width: 1.5;
}

.rings-1 {
    width: 180px;
    height: 180px;
    bottom: 20vh;
    left: 20vw;
}

.rings-1 circle { stroke: var(--accent-teal); }
.rings-1 circle:nth-child(1) { opacity: 0.15; }
.rings-1 circle:nth-child(2) { opacity: 0.12; }
.rings-1 circle:nth-child(3) { opacity: 0.09; }
.rings-1 circle:nth-child(4) { opacity: 0.06; }

.rings-2 {
    width: 150px;
    height: 150px;
    top: 15vh;
    left: 22vw;
}

.rings-2 circle { stroke: var(--accent-coral); }
.rings-2 circle:nth-child(1) { opacity: 0.15; }
.rings-2 circle:nth-child(2) { opacity: 0.1; }
.rings-2 circle:nth-child(3) { opacity: 0.06; }

.rings-3 {
    width: 200px;
    height: 200px;
    bottom: 10vh;
    right: 8vw;
}

.rings-3 circle { stroke: var(--accent-ochre); }
.rings-3 circle:nth-child(1) { opacity: 0.15; }
.rings-3 circle:nth-child(2) { opacity: 0.1; }
.rings-3 circle:nth-child(3) { opacity: 0.06; }

.rings-4 {
    width: 160px;
    height: 160px;
    top: 12vh;
    right: 15vw;
}

.rings-4 circle { stroke: var(--accent-lavender); }
.rings-4 circle:nth-child(1) { opacity: 0.15; }
.rings-4 circle:nth-child(2) { opacity: 0.12; }
.rings-4 circle:nth-child(3) { opacity: 0.09; }
.rings-4 circle:nth-child(4) { opacity: 0.06; }
.rings-4 circle:nth-child(5) { opacity: 0.04; }

@keyframes ringPulse {
    0%, 100% { transform: scale(0.98); }
    50% { transform: scale(1.02); }
}

/* --- SVG Chart Styles --- */
.radial-bar {
    stroke-linecap: round;
    transform-origin: center;
    transition: opacity 0.3s ease;
}

.radial-bar:hover {
    opacity: 0.85;
    filter: brightness(1.1);
}

.stream-path {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: opacity 0.3s ease;
}

.bubble {
    transition: transform 0.3s var(--spring-ease), r 0.3s var(--spring-ease);
    cursor: default;
}

.bubble:hover {
    filter: brightness(1.08);
}

/* --- Blob boundary animation --- */
@keyframes blobBreathe1 {
    0%, 100% { clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 85% 94%, 60% 90%, 35% 96%, 15% 91%, 0% 95%); }
    50% { clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 82% 92%, 58% 93%, 38% 94%, 18% 89%, 0% 93%); }
}

@keyframes blobBreathe2 {
    0%, 100% { clip-path: polygon(0% 5%, 15% 0%, 40% 4%, 65% 0%, 100% 3%, 100% 90%, 80% 96%, 55% 92%, 30% 97%, 0% 93%); }
    50% { clip-path: polygon(0% 3%, 18% 2%, 42% 2%, 62% 3%, 100% 1%, 100% 92%, 78% 94%, 52% 95%, 32% 94%, 0% 91%); }
}

@keyframes blobBreathe3 {
    0%, 100% { clip-path: polygon(0% 4%, 20% 0%, 50% 5%, 80% 1%, 100% 6%, 100% 92%, 75% 98%, 45% 93%, 20% 97%, 0% 91%); }
    50% { clip-path: polygon(0% 2%, 22% 3%, 48% 3%, 78% 4%, 100% 4%, 100% 94%, 72% 96%, 48% 95%, 22% 95%, 0% 93%); }
}

@keyframes blobBreathe4 {
    0%, 100% { clip-path: polygon(0% 3%, 30% 0%, 60% 4%, 100% 1%, 100% 94%, 70% 100%, 40% 95%, 0% 99%); }
    50% { clip-path: polygon(0% 1%, 28% 2%, 58% 2%, 100% 3%, 100% 96%, 72% 98%, 42% 97%, 0% 97%); }
}

@keyframes blobBreathe5 {
    0%, 100% { clip-path: polygon(0% 5%, 25% 0%, 55% 6%, 85% 1%, 100% 4%, 100% 100%, 0% 100%); }
    50% { clip-path: polygon(0% 3%, 28% 2%, 52% 4%, 82% 3%, 100% 2%, 100% 100%, 0% 100%); }
}

#chamber-1 { animation: blobBreathe1 12s ease-in-out infinite; }
#chamber-2 { animation: blobBreathe2 12s ease-in-out infinite; animation-delay: -3s; }
#chamber-3 { animation: blobBreathe3 12s ease-in-out infinite; animation-delay: -6s; }
#chamber-4 { animation: blobBreathe4 12s ease-in-out infinite; animation-delay: -9s; }
#chamber-5 { animation: blobBreathe5 12s ease-in-out infinite; animation-delay: -2s; }

/* --- Pill shapes for tags --- */
.pill {
    display: inline-block;
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    font-family: var(--font-data);
    font-size: 0.75rem;
    font-weight: 400;
    background: rgba(107, 158, 155, 0.15);
    color: var(--accent-teal);
    margin: 0.25rem;
}

/* --- Interactive states --- */
.interactive {
    cursor: pointer;
    transition: background-color 0.3s ease-out, border-radius 0.3s var(--spring-ease);
}

.interactive:hover {
    background-color: var(--accent-coral);
    border-radius: 55% 45% 60% 40%;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    #data-spine {
        display: none;
    }

    .chamber-content {
        padding: 5vh 5vw;
    }

    .chamber-grid .chamber-content {
        grid-template-columns: 1fr;
    }

    .island-1, .island-2, .island-3, .island-4, .island-5, .island-6 {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
        margin: 1rem auto;
    }

    .island-1.visible, .island-2.visible, .island-3.visible,
    .island-4.visible, .island-5.visible {
        transform: none;
    }

    .island-6.visible {
        transform: none;
    }

    .radial-chart-container,
    .convergence-viz-container {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 80vw;
        height: 80vw;
        margin: 2rem auto;
    }

    .stream-graph-container {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 90vw;
        height: 40vh;
        margin: 2rem auto;
    }

    #waffle-chart {
        grid-template-columns: repeat(12, 1fr);
    }
}

@media (max-width: 600px) {
    .heading-primary {
        font-size: clamp(1.8rem, 8vw, 2.8rem);
    }

    .floating-island {
        padding: 1.2rem 1.5rem;
        border-radius: 25px 35px 30px 40px;
    }

    #waffle-chart {
        grid-template-columns: repeat(10, 1fr);
        gap: 3px;
    }
}