/* ============================================
   bada.systems — Blobitecture Fluid Layout
   Colors: #00C9A7, #0B1628, #152238, #FF6B5A,
           #1AFFD5, #E8EFF6, #7B8FA3, #0F2B4A
   Fonts: Outfit, DM Sans, Anybody, Azeret Mono
   ============================================ */

/* === RESET & BASE === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    background: linear-gradient(to bottom, #152238 0%, #0B1628 70%);
    background-attachment: fixed;
    color: #E8EFF6;
    font-family: 'Anybody', sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.65;
    overflow-x: hidden;
    min-height: 400vh;
}

/* === TYPOGRAPHY === */
.site-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 7vw, 96px);
    color: #E8EFF6;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.blob-heading {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 3vw, 36px);
    color: #E8EFF6;
    margin-bottom: 0.5em;
}

.blob-text {
    font-family: 'Anybody', sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.65;
    color: #E8EFF6;
    max-width: 36ch;
}

.label-annotation {
    font-family: 'Azeret Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7B8FA3;
    display: inline-block;
    margin-top: 0.8em;
}

.reservoir-heading {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 6vw, 80px);
    color: #E8EFF6;
    margin: 0.3em 0;
}

.reservoir-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 2vw, 22px);
    color: #7B8FA3;
    margin-bottom: 1.5em;
}

/* === PIPELINE SVG LAYER === */
#pipeline-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.pipeline-path {
    stroke-dasharray: 8 16;
    animation: pipelineFlow 1.6s linear infinite;
}

.pipeline-branch {
    stroke-dasharray: 6 12;
}

@keyframes pipelineFlow {
    to {
        stroke-dashoffset: -24;
    }
}

.flow-particle {
    opacity: 0.9;
}

/* === VALVE NODES === */
#valve-nodes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.valve-node {
    position: absolute;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: auto;
}

.valve-outer {
    position: absolute;
    inset: 0;
    border: 2px solid #00C9A7;
    border-radius: 50%;
    animation: valveRotate 30s linear infinite;
    border-top-color: transparent;
}

.valve-inner {
    position: absolute;
    inset: 8px;
    border: 2px solid #FF6B5A;
    border-radius: 50%;
    background: transparent;
    transition: inset 300ms ease-out, background 300ms ease-out;
}

.valve-node:hover .valve-inner {
    inset: 2px;
    background: rgba(255, 107, 90, 0.3);
}

@keyframes valveRotate {
    to {
        transform: rotate(360deg);
    }
}

.valve-node::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 201, 167, 0.25) 0%, transparent 70%);
    animation: valvePulse 2s ease-in-out infinite;
}

@keyframes valvePulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* === ZONES === */
.zone {
    position: relative;
    z-index: 2;
}

.sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* === MEMBRANE ZONE === */
#membrane-zone {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 8vw;
    position: relative;
    overflow: hidden;
}

/* Primary vessel blob */
#primary-vessel {
    position: relative;
    width: clamp(320px, 60vw, 800px);
    padding: clamp(40px, 6vw, 100px);
    background: rgba(15, 43, 74, 0.7);
    clip-path: polygon(
        12% 5%, 28% 2%, 48% 0%, 68% 3%, 85% 8%,
        95% 20%, 98% 38%, 97% 58%, 93% 75%,
        84% 88%, 68% 95%, 48% 98%, 28% 96%,
        12% 90%, 4% 78%, 2% 58%, 3% 38%, 5% 20%
    );
    z-index: 3;
    animation: blobBreathe 6s ease-in-out infinite;
    transition: clip-path 800ms ease-in-out;
}

/* Glow layer behind the blob to simulate a glowing border */
.blob-glow {
    position: absolute;
    inset: -4px;
    background: rgba(0, 201, 167, 0.15);
    clip-path: inherit;
    z-index: -1;
    filter: blur(8px);
}

#primary-vessel .blob-glow {
    inset: -6px;
    background: rgba(0, 201, 167, 0.2);
    filter: blur(12px);
}

/* Inset glow-border using box-shadow (works with clip-path) */
#primary-vessel::after {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: inherit;
    box-shadow: inset 0 0 0 3px #00C9A7;
    pointer-events: none;
}

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

.blob-content {
    position: relative;
    z-index: 2;
}

/* Drifting background blobs */
.drift-blob {
    position: absolute;
    padding: 30px 40px;
    background: rgba(15, 43, 74, 0.4);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#drift-blob-1 {
    top: 15%;
    right: 8%;
    width: 200px;
    height: 160px;
    clip-path: polygon(
        15% 8%, 40% 2%, 70% 5%, 90% 15%,
        96% 40%, 92% 70%, 80% 90%,
        50% 96%, 20% 92%, 6% 72%, 3% 40%
    );
    animation: driftA 20s ease-in-out infinite;
}

#drift-blob-2 {
    bottom: 18%;
    right: 15%;
    width: 180px;
    height: 140px;
    clip-path: polygon(
        20% 5%, 50% 0%, 80% 8%, 95% 30%,
        98% 60%, 88% 85%, 60% 97%,
        30% 95%, 8% 78%, 2% 50%, 5% 22%
    );
    animation: driftB 20s ease-in-out infinite;
}

@keyframes driftA {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(15px, -20px); }
    50% { transform: translate(-10px, -35px); }
    75% { transform: translate(20px, -10px); }
}

@keyframes driftB {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-20px, 10px); }
    50% { transform: translate(15px, 25px); }
    75% { transform: translate(-10px, -15px); }
}

/* === PIPELINE ZONE === */
#pipeline-zone {
    position: relative;
    min-height: 200vh;
    padding: 10vh 0;
}

/* Content blob base */
.content-blob {
    position: relative;
    width: clamp(280px, 40vw, 520px);
    padding: clamp(30px, 4vw, 60px);
    background: rgba(15, 43, 74, 0.7);
    margin-bottom: 15vh;
    transition: clip-path 800ms ease-in-out, opacity 600ms ease-out, transform 600ms ease-out;
}

.content-blob::after {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: inherit;
    box-shadow: inset 0 0 0 2px #00C9A7;
    pointer-events: none;
}

.content-blob .blob-glow {
    inset: -3px;
    background: rgba(0, 201, 167, 0.12);
    filter: blur(6px);
}

/* Blob positions */
.blob-left {
    margin-left: 8vw;
}

.blob-right {
    margin-left: auto;
    margin-right: 8vw;
}

.blob-center {
    margin-left: auto;
    margin-right: auto;
}

/* Deflated states (before entering viewport) */
.blob-deflated {
    opacity: 0.3;
    transform: scale(0.95);
}

/* Inflated state (when visible) */
.blob-inflated {
    opacity: 1;
    transform: scale(1);
}

/* Unique clip-paths per blob */
#blob-1 {
    clip-path: polygon(
        10% 6%, 30% 2%, 55% 0%, 78% 4%, 92% 14%,
        98% 32%, 96% 55%, 90% 75%, 78% 90%,
        55% 97%, 30% 95%, 12% 88%, 3% 70%, 2% 45%, 5% 22%
    );
}
#blob-1.blob-deflated {
    clip-path: polygon(
        12% 10%, 32% 6%, 55% 5%, 76% 8%, 88% 16%,
        94% 34%, 93% 55%, 88% 72%, 76% 86%,
        55% 92%, 32% 90%, 15% 84%, 7% 68%, 5% 47%, 8% 25%
    );
}

#blob-2 {
    clip-path: polygon(
        8% 8%, 25% 1%, 50% 3%, 75% 0%, 90% 10%,
        97% 28%, 95% 52%, 92% 72%, 82% 88%,
        60% 96%, 35% 98%, 15% 92%, 4% 76%, 1% 52%, 3% 28%
    );
}
#blob-2.blob-deflated {
    clip-path: polygon(
        11% 12%, 28% 6%, 50% 7%, 73% 5%, 86% 14%,
        93% 30%, 92% 52%, 89% 70%, 80% 84%,
        60% 91%, 37% 93%, 18% 88%, 8% 74%, 5% 53%, 7% 31%
    );
}

#blob-3 {
    clip-path: polygon(
        5% 10%, 22% 3%, 45% 1%, 70% 2%, 88% 8%,
        96% 24%, 98% 48%, 94% 68%, 85% 85%,
        65% 95%, 40% 98%, 18% 94%, 6% 80%, 2% 58%, 3% 32%
    );
}
#blob-3.blob-deflated {
    clip-path: polygon(
        9% 14%, 25% 7%, 45% 6%, 68% 6%, 84% 12%,
        92% 27%, 94% 48%, 91% 66%, 83% 81%,
        65% 90%, 42% 93%, 21% 90%, 10% 77%, 6% 59%, 7% 35%
    );
}

#blob-4 {
    clip-path: polygon(
        12% 4%, 35% 1%, 58% 2%, 80% 6%, 93% 16%,
        98% 35%, 96% 58%, 88% 78%, 72% 92%,
        50% 98%, 25% 96%, 10% 86%, 3% 68%, 1% 45%, 4% 22%
    );
}
#blob-4.blob-deflated {
    clip-path: polygon(
        15% 8%, 37% 5%, 58% 6%, 78% 10%, 89% 19%,
        94% 37%, 93% 58%, 86% 75%, 72% 87%,
        52% 93%, 28% 91%, 14% 82%, 7% 66%, 5% 47%, 8% 26%
    );
}

#blob-5 {
    clip-path: polygon(
        8% 7%, 28% 2%, 52% 0%, 76% 3%, 92% 12%,
        98% 30%, 96% 55%, 90% 78%, 76% 92%,
        52% 98%, 28% 95%, 10% 85%, 3% 65%, 1% 42%, 4% 20%
    );
}
#blob-5.blob-deflated {
    clip-path: polygon(
        12% 11%, 30% 6%, 52% 5%, 74% 7%, 88% 15%,
        94% 32%, 93% 55%, 88% 75%, 74% 88%,
        52% 93%, 30% 91%, 14% 82%, 7% 63%, 5% 44%, 8% 24%
    );
}

/* === PRESSURE GAUGES === */
.pressure-gauge {
    position: absolute;
    bottom: 15px;
    right: 20px;
    width: 60px;
    text-align: center;
}

.gauge-svg {
    width: 60px;
    height: 35px;
}

.gauge-fill {
    stroke-dasharray: 78.5;
    stroke-dashoffset: 78.5;
    transition: stroke-dashoffset 1s ease-out;
}

.pressure-gauge .label-annotation {
    margin-top: 2px;
    font-size: 9px;
}

/* === RESERVOIR ZONE === */
#reservoir-zone {
    position: relative;
    min-height: 100vh;
    background: #0B1628;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 120px;
}

#reservoir-wave {
    position: absolute;
    top: -118px;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 3;
}

.wave-path {
    transition: d 0.3s ease;
}

#wave-path-1 {
    animation: waveMorph1 8s ease-in-out infinite;
}

#wave-path-2 {
    animation: waveMorph2 8s ease-in-out infinite;
    animation-delay: -4s;
}

@keyframes waveMorph1 {
    0%, 100% {
        d: path('M0,60 C240,20 480,100 720,60 C960,20 1200,100 1440,60 L1440,120 L0,120 Z');
    }
    50% {
        d: path('M0,50 C240,90 480,20 720,70 C960,100 1200,30 1440,50 L1440,120 L0,120 Z');
    }
}

@keyframes waveMorph2 {
    0%, 100% {
        d: path('M0,70 C240,30 480,110 720,70 C960,30 1200,110 1440,70 L1440,120 L0,120 Z');
    }
    50% {
        d: path('M0,55 C240,95 480,25 720,65 C960,95 1200,25 1440,55 L1440,120 L0,120 Z');
    }
}

/* === STEAM PARTICLES === */
#steam-container {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 200px;
    z-index: 4;
    pointer-events: none;
    overflow: visible;
}

.steam-particle {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    background: #1AFFD5;
    opacity: 0;
    animation: steamRise linear infinite;
}

@keyframes steamRise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.2;
    }
    100% {
        transform: translateY(-180px) scale(0.3);
        opacity: 0;
    }
}

/* === RESERVOIR CONTENT === */
#reservoir-content {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 5vh 5vw 10vh;
}

.reservoir-blob {
    display: inline-block;
    padding: clamp(40px, 5vw, 80px);
    background: rgba(15, 43, 74, 0.5);
    position: relative;
    clip-path: polygon(
        8% 5%, 30% 1%, 55% 0%, 78% 2%, 94% 10%,
        99% 28%, 97% 55%, 92% 78%, 80% 93%,
        55% 99%, 30% 97%, 10% 88%, 2% 68%, 0% 42%, 3% 18%
    );
}

.reservoir-blob::after {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: inherit;
    box-shadow: inset 0 0 0 2px #00C9A7;
    pointer-events: none;
}

.reservoir-links {
    display: flex;
    gap: 2em;
    justify-content: center;
    flex-wrap: wrap;
}

.reservoir-links .label-annotation {
    color: #00C9A7;
}

/* === PIPELINE PRESSURIZE EFFECT === */
.pipeline-path.pressurized {
    stroke: #FF6B5A;
    filter: drop-shadow(0 0 4px rgba(255, 107, 90, 0.5));
    transition: stroke 0.6s ease, filter 0.6s ease;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    #membrane-zone {
        padding-left: 5vw;
        align-items: center;
        justify-content: center;
    }

    #primary-vessel {
        width: 90vw;
    }

    .drift-blob {
        display: none;
    }

    .content-blob {
        width: 85vw;
    }

    .blob-left,
    .blob-right {
        margin-left: auto;
        margin-right: auto;
    }

    .reservoir-links {
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
    }

    .valve-node {
        display: none;
    }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .flow-particle {
        display: none;
    }

    .steam-particle {
        display: none;
    }

    .blob-deflated {
        opacity: 1;
        transform: scale(1);
    }

    .pipeline-path {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }
}