/* =====================================================
   telomere.digital — Cellular Interior
   blobitecture + neomorphism + creamy-pastel
   ===================================================== */

:root {
    /* Palette from DESIGN.md */
    --bg-primary: #F0ECF5;        /* Cytoplasm cream */
    --bg-secondary: #E4DFF0;      /* Membrane lavender */
    --surface: #FFFFFF;            /* Vesicle white */
    --shadow-cast: #C8C0D8;        /* Organelle shadow */
    --text-primary: #2D2A3E;       /* Nucleus purple */
    --text-secondary: #5A5470;     /* Violet gray */
    --accent-green: #7A9E8A;       /* Chloroplast green */
    --accent-pink: #9E7A8A;        /* Membrane pink */
    --glow-blue: #B8D4E8;          /* Bioluminescent blue */

    /* Typography */
    --font-head: 'Nunito', system-ui, sans-serif;
    --font-body: 'Quicksand', system-ui, sans-serif;
    --font-mono: 'DM Mono', ui-monospace, monospace;
    --font-display: 'Fraunces', Georgia, serif;

    --scroll-offset: 0;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    position: relative;
    min-height: 100vh;
}

/* =====================================================
   GRADIENT MESH BACKGROUND (cellular staining)
   ===================================================== */

.mesh-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: var(--bg-primary);
    pointer-events: none;
}

.mesh-layer {
    position: absolute;
    inset: -25%;
    will-change: transform;
}

.mesh-1 {
    background:
        radial-gradient(circle at 18% 24%, rgba(228, 223, 240, 0.45) 0%, transparent 38%),
        radial-gradient(circle at 78% 18%, rgba(184, 212, 232, 0.30) 0%, transparent 42%);
    animation: drift-mesh-a 38s ease-in-out infinite alternate;
}
.mesh-2 {
    background:
        radial-gradient(circle at 64% 64%, rgba(158, 122, 138, 0.18) 0%, transparent 36%),
        radial-gradient(circle at 12% 76%, rgba(122, 158, 138, 0.22) 0%, transparent 40%);
    animation: drift-mesh-b 52s ease-in-out infinite alternate;
}
.mesh-3 {
    background:
        radial-gradient(circle at 84% 88%, rgba(184, 212, 232, 0.22) 0%, transparent 44%),
        radial-gradient(circle at 28% 50%, rgba(228, 223, 240, 0.30) 0%, transparent 38%);
    animation: drift-mesh-c 64s ease-in-out infinite alternate;
}
.mesh-4 {
    background:
        radial-gradient(circle at 50% 12%, rgba(158, 122, 138, 0.14) 0%, transparent 30%),
        radial-gradient(circle at 92% 50%, rgba(122, 158, 138, 0.16) 0%, transparent 32%);
    animation: drift-mesh-d 46s ease-in-out infinite alternate;
}

@keyframes drift-mesh-a {
    0%   { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(4%, -3%) rotate(8deg); }
}
@keyframes drift-mesh-b {
    0%   { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-5%, 4%) rotate(-10deg); }
}
@keyframes drift-mesh-c {
    0%   { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(3%, 3%) rotate(6deg); }
}
@keyframes drift-mesh-d {
    0%   { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-4%, -2%) rotate(-7deg); }
}

/* =====================================================
   STRUCTURAL ZONES (cellular interior)
   ===================================================== */

.cell-interior {
    display: block;
    position: relative;
    width: 100%;
}

.zone {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 6vh 4vw;
}

.zone-hero        { min-height: 100vh; }
.zone-organelle   { min-height: 200vh; }
.zone-membrane    { min-height: 100vh; }
.zone-extracellular { min-height: 100vh; }
.zone-terminal    { min-height: 90vh; display: flex; align-items: center; justify-content: center; }

.zone-label {
    position: absolute;
    top: 4vh;
    left: 4vw;
    z-index: 4;
    pointer-events: none;
}

/* =====================================================
   BLOB CONTAINER SYSTEM
   12 unique border-radius shape variants
   Neomorphism dual-shadow surface treatment
   ===================================================== */

.blob {
    position: absolute;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        20px 20px 60px var(--shadow-cast),
        -20px -20px 60px #FFFFFF;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 32px 36px;
    color: var(--text-secondary);
    will-change: transform, border-radius;
    transition:
        box-shadow 400ms ease-out,
        transform 400ms ease-out;
}

.blob:hover {
    box-shadow:
        30px 30px 80px var(--shadow-cast),
        -30px -30px 80px #FFFFFF;
    transform: translate(var(--drift-x, 0), -4px);
}

.blob:active {
    box-shadow:
        inset 12px 12px 30px var(--shadow-cast),
        inset -12px -12px 30px #FFFFFF;
}

/* Twelve preset border-radius variants. */
.blob-shape-1  { border-radius: 62% 38% 46% 54% / 54% 60% 40% 46%; }
.blob-shape-2  { border-radius: 38% 62% 60% 40% / 46% 54% 46% 54%; }
.blob-shape-3  { border-radius: 56% 44% 38% 62% / 60% 38% 62% 40%; }
.blob-shape-4  { border-radius: 42% 58% 64% 36% / 50% 64% 36% 50%; }
.blob-shape-5  { border-radius: 70% 30% 50% 50% / 36% 60% 40% 64%; }
.blob-shape-6  { border-radius: 30% 70% 60% 40% / 50% 40% 70% 60%; }
.blob-shape-7  { border-radius: 48% 52% 56% 44% / 64% 50% 48% 36%; }
.blob-shape-8  { border-radius: 60% 40% 30% 70% / 40% 60% 56% 44%; }
.blob-shape-9  { border-radius: 36% 64% 52% 48% / 58% 38% 62% 42%; }
.blob-shape-10 { border-radius: 54% 46% 70% 30% / 44% 56% 38% 62%; }
.blob-shape-11 { border-radius: 64% 36% 44% 56% / 38% 64% 36% 62%; }
.blob-shape-12 { border-radius: 50% 50% 38% 62% / 62% 38% 62% 38%; }

/* Hero blob (massive central form) */
.blob-hero {
    position: relative;
    margin: 12vh auto 0;
    width: min(80vw, 1100px);
    min-height: 70vh;
    padding: 9vh 7vw;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blob-satellite {
    width: clamp(220px, 22vw, 320px);
    min-height: 180px;
    padding: 26px 30px;
    z-index: 2;
}

/* Organelle cluster */
.blob-organelle {
    width: clamp(260px, 26vw, 380px);
    min-height: 220px;
    z-index: 2;
}

.blob-organelle-mini {
    width: clamp(180px, 16vw, 220px);
    min-height: 140px;
    padding: 22px 26px;
}

/* Membrane mini blobs (along sine-wave) */
.blob-mini {
    position: relative;
    width: clamp(140px, 14vw, 200px);
    min-height: 110px;
    padding: 18px 22px;
}

/* Extracellular dispersing blobs */
.blob-disperse {
    width: clamp(220px, 22vw, 320px);
    min-height: 170px;
    z-index: 2;
}

/* Pull-quote blob in membrane zone */
.blob-pullquote {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(60vw, 720px);
    padding: 6vh 5vw;
    z-index: 3;
    text-align: center;
}

.blob-terminal {
    position: relative;
    width: min(70vw, 900px);
    min-height: 60vh;
    padding: 8vh 7vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

/* =====================================================
   BREATHING ANIMATIONS (Fibonacci durations: 3s, 5s, 8s, 13s)
   ===================================================== */

@keyframes breathe {
    0%, 100% { transform: scale(1.0); }
    50%      { transform: scale(1.025); }
}

.breathe-3  { animation: breathe 3s  ease-in-out infinite; }
.breathe-5  { animation: breathe 5s  ease-in-out infinite; }
.breathe-8  { animation: breathe 8s  ease-in-out infinite; }
.breathe-13 { animation: breathe 13s ease-in-out infinite; }

/* Hero blob also slowly morphs its border-radius */
@keyframes morph-shape {
    0%   { border-radius: 62% 38% 46% 54% / 54% 60% 40% 46%; }
    14%  { border-radius: 56% 44% 60% 40% / 38% 62% 44% 56%; }
    28%  { border-radius: 42% 58% 38% 62% / 60% 40% 56% 44%; }
    42%  { border-radius: 64% 36% 52% 48% / 50% 64% 36% 60%; }
    57%  { border-radius: 38% 62% 64% 36% / 56% 44% 60% 40%; }
    71%  { border-radius: 60% 40% 36% 64% / 42% 58% 50% 50%; }
    85%  { border-radius: 48% 52% 58% 42% / 62% 38% 46% 54%; }
    100% { border-radius: 62% 38% 46% 54% / 54% 60% 40% 46%; }
}

.blob-hero {
    animation:
        breathe 13s ease-in-out infinite,
        morph-shape 12s ease-in-out infinite;
}

/* =====================================================
   TYPOGRAPHY
   ===================================================== */

.display-headline {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(28px, 4.4vw, 56px);
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0 0 24px;
    letter-spacing: -0.01em;
}

.display-sub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 28px;
    max-width: 56ch;
}

.organ-h {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.2;
    color: var(--text-primary);
    margin: 8px 0 12px;
    letter-spacing: -0.005em;
}

.organ-p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}

.micro {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 6px 0 0;
}

.annotation {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--accent-green);
    letter-spacing: 0.04em;
    text-transform: lowercase;
}

.meta-line {
    display: block;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 11px;
    color: var(--accent-green);
    margin-top: 18px;
    letter-spacing: 0.05em;
}

.pull-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-variation-settings: "opsz" 72;
    font-size: clamp(24px, 3.2vw, 42px);
    line-height: 1.25;
    color: var(--accent-pink);
    margin: 0 0 16px;
}

.pull-quote em {
    font-style: italic;
    color: var(--text-primary);
    background: linear-gradient(120deg, var(--glow-blue) 0%, var(--accent-pink) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.terminal-text {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-variation-settings: "opsz" 72;
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0;
}

.terminal-sub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 52ch;
    margin: 0 auto;
}

/* =====================================================
   ORGANELLE CLUSTER — NUCLEUS VOID (centerpiece)
   ===================================================== */

.nucleus-void {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(220px, 22vw, 320px);
    height: clamp(220px, 22vw, 320px);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.nucleus-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(122, 158, 138, 0.4);
    background: radial-gradient(circle at center,
        rgba(184, 212, 232, 0.18) 0%,
        rgba(228, 223, 240, 0.10) 60%,
        transparent 80%);
    animation: nucleus-rotate 60s linear infinite, breathe 8s ease-in-out infinite;
}

.nucleus-ring-2 {
    inset: -28px;
    border-style: dotted;
    border-color: rgba(158, 122, 138, 0.30);
    animation: nucleus-rotate 90s linear infinite reverse, breathe 13s ease-in-out infinite;
    background: none;
}

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

.nucleus-text {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent-pink);
    letter-spacing: 0.18em;
    text-transform: lowercase;
    z-index: 2;
}

/* =====================================================
   MEMBRANE ZONE (sine-wave)
   ===================================================== */

.zone-membrane {
    display: block;
    padding: 12vh 0 6vh;
}

.sine-wave {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 60vh;
    z-index: 1;
    pointer-events: none;
}

.sine-path-bg {
    stroke: rgba(200, 192, 216, 0.45);
    stroke-width: 14;
    stroke-linecap: round;
    filter: blur(6px);
}

.sine-path {
    stroke: url(#wave-gradient);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 6 14;
    animation: dash-flow 24s linear infinite;
}

@keyframes dash-flow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -800; }
}

.membrane-line {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.membrane-node {
    position: absolute;
    transform: translate(-50%, -50%);
}

/* Each node placed along the sine-wave path */
.membrane-node-1 { top: 32%; left: 12%; }
.membrane-node-2 { top: 70%; left: 30%; }
.membrane-node-3 { top: 32%; left: 50%; }
.membrane-node-4 { top: 70%; left: 70%; }
.membrane-node-5 { top: 32%; left: 88%; }

/* =====================================================
   DUST PARTICLES (cellular debris)
   ===================================================== */

.dust {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 212, 232, 0.6) 0%, rgba(184, 212, 232, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

.dust-1 { width: 14px; height: 14px; top: 22%; left: 32%; animation: dust-float 14s ease-in-out infinite; }
.dust-2 { width: 8px;  height: 8px;  top: 64%; left: 24%; animation: dust-float 19s ease-in-out infinite -3s; }
.dust-3 { width: 20px; height: 20px; top: 40%; right: 18%; animation: dust-float 22s ease-in-out infinite -7s; background: radial-gradient(circle, rgba(158, 122, 138, 0.45) 0%, transparent 70%); }
.dust-4 { width: 12px; height: 12px; top: 80%; right: 38%; animation: dust-float 16s ease-in-out infinite -2s; background: radial-gradient(circle, rgba(122, 158, 138, 0.50) 0%, transparent 70%); }
.dust-5 { width: 6px;  height: 6px;  top: 14%; left: 52%; animation: dust-float 11s ease-in-out infinite -5s; }
.dust-6 { width: 10px; height: 10px; top: 30%; left: 50%; animation: dust-float 18s ease-in-out infinite -1s; }
.dust-7 { width: 16px; height: 16px; bottom: 24%; left: 20%; animation: dust-float 21s ease-in-out infinite -4s; background: radial-gradient(circle, rgba(228, 223, 240, 0.7) 0%, transparent 70%); }
.dust-8 { width: 9px;  height: 9px;  bottom: 36%; right: 22%; animation: dust-float 13s ease-in-out infinite -6s; }

@keyframes dust-float {
    0%   { transform: translate(0, 0); opacity: 0.4; }
    25%  { transform: translate(20px, -28px); opacity: 0.85; }
    50%  { transform: translate(-12px, -56px); opacity: 0.6; }
    75%  { transform: translate(-26px, -22px); opacity: 0.9; }
    100% { transform: translate(0, 0); opacity: 0.4; }
}

/* =====================================================
   CELL NAVIGATION (floating cluster of dots)
   ===================================================== */

.cell-nav {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 200px;
    height: 240px;
    z-index: 50;
    pointer-events: none;
}

.nav-connector {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.nav-curve {
    stroke: rgba(122, 158, 138, 0.55);
    stroke-width: 1.5;
    stroke-dasharray: 3 5;
    animation: dash-flow 20s linear infinite reverse;
    fill: none;
}

.nav-dot {
    position: absolute;
    width: 38px;
    height: 38px;
    border: none;
    background: var(--surface);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow:
        6px 6px 14px var(--shadow-cast),
        -6px -6px 14px #FFFFFF;
    transition: transform 400ms ease-out, box-shadow 400ms ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.nav-dot:hover {
    transform: translateY(-4px);
    box-shadow:
        10px 10px 22px var(--shadow-cast),
        -10px -10px 22px #FFFFFF;
}

.nav-dot:active,
.nav-dot.is-active {
    box-shadow:
        inset 4px 4px 10px var(--shadow-cast),
        inset -4px -4px 10px #FFFFFF;
}

.nav-dot.is-active .nav-pulse {
    background: var(--accent-pink);
}

.nav-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--glow-blue);
    box-shadow: 0 0 10px var(--glow-blue);
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.25); opacity: 1; }
}

.nav-tooltip {
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-secondary);
    background: var(--surface);
    padding: 4px 10px;
    border-radius: 12px;
    box-shadow:
        4px 4px 10px var(--shadow-cast),
        -4px -4px 10px #FFFFFF;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease-out, transform 250ms ease-out;
    white-space: nowrap;
    letter-spacing: 0.06em;
}

.nav-dot:hover .nav-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(-4px);
}

/* Position nav dots in a clustered arrangement */
.nav-dot-1 { top: 14px; left: 14px; }
.nav-dot-2 { top: 72px; left: 50px; }
.nav-dot-3 { top: 110px; left: 6px; }
.nav-dot-4 { top: 162px; left: 38px; }
.nav-dot-5 { top: 188px; left: 110px; }

/* =====================================================
   SCROLL DRIFT (lateral translation by scroll)
   ===================================================== */

.blob[data-drift] {
    transform: translateX(calc(var(--scroll-offset, 0) * var(--drift-factor, 0) * 1px));
}

/* =====================================================
   RESPONSIVE — Mobile collapse to circles
   ===================================================== */

@media (max-width: 768px) {
    .blob,
    .blob[class*="blob-shape-"] {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 88% !important;
        margin: 24px auto;
        border-radius: 50% / 38%;
        min-height: auto;
        padding: 32px 28px;
    }

    .blob-hero,
    .blob-organelle,
    .blob-disperse,
    .blob-satellite,
    .blob-mini,
    .blob-pullquote,
    .blob-terminal {
        width: 90% !important;
    }

    .zone-hero,
    .zone-organelle,
    .zone-membrane,
    .zone-extracellular,
    .zone-terminal {
        min-height: auto;
        padding: 8vh 4vw;
    }

    .zone-organelle .nucleus-void { display: none; }
    .sine-wave { display: none; }
    .membrane-line {
        position: relative;
        inset: auto;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .membrane-node {
        position: relative;
        top: auto !important;
        left: auto !important;
        transform: none;
    }
    .blob-pullquote {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 32px auto;
    }

    .cell-nav {
        bottom: 12px;
        right: 12px;
        width: 130px;
        height: 160px;
        transform: scale(0.78);
        transform-origin: bottom right;
    }

    .display-headline { font-size: 30px; }
    .pull-quote { font-size: 24px; }
    .terminal-text { font-size: 36px; }
}

/* =====================================================
   PROGRESSIVE REVEAL ON SCROLL (set by JS)
   ===================================================== */

.blob {
    opacity: 0;
    transition:
        opacity 900ms ease-out,
        box-shadow 400ms ease-out,
        transform 400ms ease-out;
}

.blob.is-revealed {
    opacity: 1;
}

/* Hero blob is visible immediately */
.blob-hero { opacity: 1; }

/* Organelle drift toward nucleus on intersection */
.blob-organelle {
    transition:
        opacity 900ms ease-out,
        transform 1200ms cubic-bezier(.2, .7, .2, 1),
        box-shadow 400ms ease-out;
}

.zone-organelle.is-condensing .blob-organelle[data-orbit="0"] { transform: translate(40px, 30px); }
.zone-organelle.is-condensing .blob-organelle[data-orbit="1"] { transform: translate(-44px, 26px); }
.zone-organelle.is-condensing .blob-organelle[data-orbit="2"] { transform: translate(60px, -10px); }
.zone-organelle.is-condensing .blob-organelle[data-orbit="3"] { transform: translate(-58px, -14px); }
.zone-organelle.is-condensing .blob-organelle[data-orbit="4"] { transform: translate(36px, -36px); }
.zone-organelle.is-condensing .blob-organelle[data-orbit="5"] { transform: translate(-40px, -32px); }
.zone-organelle.is-condensing .blob-organelle[data-orbit="6"] { transform: translate(0, 0) scale(0.85); }