/* ============================================================
   gabs.ai — the liquid talk-aquarium
   Sea-foam Aspic palette, blobitecture organic-flow, no rectangles
   ============================================================ */

/* ----- Houdini registered properties (variable-axis breathing) ----- */
@property --opsz {
    syntax: '<number>';
    inherits: true;
    initial-value: 9;
}
@property --wonk {
    syntax: '<number>';
    inherits: true;
    initial-value: 0.6;
}

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

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

html {
    cursor: none;
}

body {
    font-family: 'Recursive', system-ui, -apple-system, sans-serif;
    font-variation-settings: 'MONO' 0.3, 'CASL' 0.6, 'slnt' -3, 'CRSV' 0;
    color: #5B4FB7;
    background:
        radial-gradient(circle at 30% 20%, #D9F0FF 0%, transparent 45%),
        radial-gradient(circle at 80% 60%, #A8E6D4 0%, transparent 55%),
        radial-gradient(circle at 50% 90%, #F7C9DD 0%, transparent 50%),
        #E9F4F1;
    background-attachment: fixed;
    min-height: 100vh;
    line-height: 1.55;
    overflow-x: hidden;
}

/* ----- SVG defs container, off-screen ----- */
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ----- Iridescence overlay ----- */
.iridescence {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    background: conic-gradient(
        from 0deg at 50% 50%,
        #F7C9DD,
        #A8E6D4,
        #D9F0FF,
        #FFEE7A,
        #F7C9DD
    );
    opacity: 0.09;
    mix-blend-mode: overlay;
    animation: irid-rotate 90s linear infinite;
}

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

/* ============================================================
   Meniscus top bar — wobbling SVG path, wordmark submerged
   ============================================================ */
.meniscus {
    position: relative;
    width: 100%;
    height: 22vh;
    min-height: 200px;
    overflow: visible;
    z-index: 10;
}

.meniscus-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.meniscus-svg path {
    transition: fill 1.2s ease;
}

.wordmark-submerged {
    position: absolute;
    top: 6vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: -0.04em;
    color: #5B4FB7;
    backdrop-filter: blur(2px) saturate(1.4);
    -webkit-backdrop-filter: blur(2px) saturate(1.4);
    text-shadow: 0 2px 12px rgba(217, 240, 255, 0.5);
    opacity: 0.85;
    pointer-events: none;
    user-select: none;
    animation: wordmark-breath 12s ease-in-out infinite;
}

.wordmark-submerged .wm-italic {
    font-style: italic;
}
.wordmark-submerged .wm-dot {
    color: #F7C9DD;
    font-style: normal;
    margin: 0 0.04em;
}
.wordmark-submerged .wm-ai {
    font-style: italic;
    color: #5B4FB7;
}

@keyframes wordmark-breath {
    0%, 100% {
        transform: translateX(-50%) translateY(0) scaleY(1);
        filter: blur(0.4px);
    }
    50% {
        transform: translateX(-50%) translateY(2px) scaleY(1.04);
        filter: blur(0.8px);
    }
}

.station-tag {
    position: absolute;
    bottom: 1vh;
    left: 2vw;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    font-family: 'Redacted Script', 'Courier New', monospace;
    font-size: 12px;
    color: #5B4FB7;
    opacity: 0.65;
    letter-spacing: 0.04em;
    pointer-events: none;
}

.station-tag .station-pump {
    font-size: 11px;
    opacity: 0.7;
}

/* ============================================================
   Drift chamber — eleven blob-cells with metaball blending
   ============================================================ */
.drift-chamber {
    position: relative;
    width: 100%;
    padding: 4vh 0 14vh 0;
    overflow: visible;
}

.metaball-group {
    position: relative;
    width: 100%;
    filter: url(#goo);
}

.blob-cell {
    position: relative;
    width: clamp(420px, 62vw, 880px);
    height: clamp(380px, 56vw, 620px);
    margin: -8vh auto;
    overflow: visible;
    isolation: isolate;
    transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: none;
}

.blob-cell.dimple {
    transform: scale(0.97);
}

/* Stagger horizontally for parallax */
.cell-1  { margin-left: calc(50% - clamp(210px, 31vw, 440px) - 4vw); }
.cell-2  { margin-left: calc(50% - clamp(210px, 31vw, 440px) + 6vw); }
.cell-3  { margin-left: calc(50% - clamp(210px, 31vw, 440px) - 8vw); }
.cell-4  { margin-left: calc(50% - clamp(210px, 31vw, 440px) + 4vw); }
.cell-5  { margin-left: calc(50% - clamp(210px, 31vw, 440px) - 5vw); }
.cell-6  { margin-left: calc(50% - clamp(210px, 31vw, 440px) + 7vw); }
.cell-7  { margin-left: calc(50% - clamp(210px, 31vw, 440px) - 6vw); }
.cell-8  { margin-left: calc(50% - clamp(210px, 31vw, 440px) + 5vw); }
.cell-9  { margin-left: calc(50% - clamp(210px, 31vw, 440px) - 7vw); }
.cell-10 { margin-left: calc(50% - clamp(210px, 31vw, 440px) + 3vw); }
.cell-11 { margin-left: calc(50% - clamp(210px, 31vw, 440px) - 2vw); }

.blob-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
}

.blob-path {
    transition: d 1.6s ease-in-out;
}

.blob-content {
    position: relative;
    z-index: 3;
    width: 70%;
    margin: 18% auto 0;
    padding: 0 6%;
    text-align: left;
}

.blob-meta {
    font-family: 'Redacted Script', 'Courier New', monospace;
    font-size: 11px;
    color: #5B4FB7;
    opacity: 0.6;
    letter-spacing: 0.06em;
    margin-bottom: 1em;
    text-transform: lowercase;
}

.blob-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' var(--opsz, 9), 'SOFT' 100, 'WONK' var(--wonk, 1);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2.2rem, 6vw, 4.4rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: #5B4FB7;
    text-transform: lowercase;
    margin-bottom: 0.5em;
    animation: title-breath 18s ease-in-out infinite;
}

@keyframes title-breath {
    0%, 100% {
        --opsz: 9;
        --wonk: 0.4;
        font-variation-settings: 'opsz' 9, 'SOFT' 100, 'WONK' 1;
        letter-spacing: -0.025em;
    }
    50% {
        --opsz: 144;
        --wonk: 1;
        font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
        letter-spacing: -0.04em;
    }
}

.blob-body {
    font-family: 'Recursive', system-ui, sans-serif;
    font-variation-settings: 'MONO' 0.3, 'CASL' 0.6, 'slnt' -3, 'CRSV' 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: #5B4FB7;
    max-width: 36em;
}

.blob-body em {
    font-variation-settings: 'MONO' 0.3, 'CASL' 0.9, 'slnt' -8, 'CRSV' 1;
    font-style: italic;
    color: #5B4FB7;
}

.small-body {
    font-size: 0.95rem;
    opacity: 0.8;
}

/* ----- Specimens (oversized punctuation, drifting) ----- */
.specimen {
    position: absolute;
    z-index: 2;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 9, 'SOFT' 100, 'WONK' 1;
    font-style: italic;
    color: #5B4FB7;
    opacity: 0.22;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    animation: specimen-drift 14s ease-in-out infinite;
}

.specimen-pilcrow {
    top: 6%;
    right: 8%;
    font-size: clamp(180px, 26vw, 320px);
    transform-origin: center;
}
.specimen-section {
    top: 8%;
    left: 5%;
    font-size: clamp(200px, 28vw, 340px);
    animation-duration: 19s;
}
.specimen-interrobang {
    top: 5%;
    right: 6%;
    font-size: clamp(180px, 26vw, 320px);
    transform: rotate(180deg);
    animation-duration: 22s;
}
.specimen-amp {
    top: 7%;
    left: 4%;
    font-size: clamp(220px, 30vw, 380px);
    animation-duration: 17s;
}
.specimen-emdash {
    top: 30%;
    right: 4%;
    font-size: clamp(220px, 32vw, 380px);
    animation-duration: 20s;
}
.specimen-nbsp {
    top: 12%;
    right: 8%;
    font-size: clamp(140px, 22vw, 260px);
    opacity: 0.18;
    animation-duration: 24s;
}
.specimen-bullet {
    top: 14%;
    left: 6%;
    font-size: clamp(180px, 26vw, 320px);
    animation-duration: 16s;
}
.specimen-at {
    top: 6%;
    right: 6%;
    font-size: clamp(180px, 26vw, 320px);
    animation-duration: 23s;
}
.specimen-degree {
    top: 8%;
    left: 8%;
    font-size: clamp(180px, 26vw, 320px);
    animation-duration: 18s;
}
.specimen-pilcrow-big {
    top: 4%;
    right: 4%;
    font-size: clamp(240px, 34vw, 420px);
    opacity: 0.26;
    animation-duration: 25s;
}
.specimen-final {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
    font-style: italic;
    font-size: clamp(2.6rem, 7vw, 5rem);
    color: #5B4FB7;
    opacity: 0.6;
    z-index: 4;
    pointer-events: none;
    letter-spacing: -0.04em;
}
.specimen-final .dot-final {
    color: #F7C9DD;
}

@keyframes specimen-drift {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(8px, -6px) rotate(2deg) scale(1.02);
    }
    50% {
        transform: translate(-4px, 8px) rotate(-1.5deg) scale(0.98);
    }
    75% {
        transform: translate(6px, 4px) rotate(1deg) scale(1.01);
    }
}

/* Specimen-interrobang preserves its 180deg base rotation */
.specimen-interrobang { animation-name: specimen-drift-rot; }
@keyframes specimen-drift-rot {
    0%, 100% {
        transform: rotate(180deg) translate(0, 0) scale(1);
    }
    50% {
        transform: rotate(178deg) translate(-6px, 4px) scale(0.98);
    }
}

/* ----- Cytoplasm: faint typeset whispers as background texture ----- */
.cytoplasm {
    position: absolute;
    z-index: 1;
    inset: 18% 12% 18% 12%;
    font-family: 'Recursive', system-ui, sans-serif;
    font-variation-settings: 'MONO' 0.3, 'CASL' 0.6, 'slnt' -3;
    font-size: 9px;
    line-height: 1.4;
    color: #5B4FB7;
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    word-spacing: 0.1em;
    animation: cytoplasm-drift 60s linear infinite;
}

@keyframes cytoplasm-drift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-20%, -20%); }
}

/* ----- Dialogue pools (concave kidney wells with bubbling lines) ----- */
.dialogue-pool .pool-content {
    width: 75%;
    margin-top: 16%;
}

.pool-stream {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.4em;
    max-height: 60%;
    overflow: hidden;
    padding-bottom: 1em;
}

.pool-line {
    font-family: 'Recursive', system-ui, sans-serif;
    font-variation-settings: 'MONO' 0.3, 'CASL' 0.6, 'slnt' -3;
    font-size: 1.05rem;
    color: #5B4FB7;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    line-height: 1.4;
}

.pool-line.bubbled-in {
    opacity: 1;
    transform: translateY(0);
}

.pool-line.evaporating {
    opacity: 0;
    transform: translateY(-30px);
}

/* ============================================================
   Bubble-cursor trail (object pool, fixed circles)
   ============================================================ */
.cursor-trail {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10000;
    overflow: visible;
}

.cursor-dot {
    transition: r 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bubble {
    opacity: 0.18;
    transition: opacity 0.2s ease;
}

/* ============================================================
   Pop droplets at final blob
   ============================================================ */
.pop-droplets {
    position: absolute;
    bottom: 8vh;
    left: 0;
    width: 100%;
    height: 60vh;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
}

.droplet {
    transition: cx 0.48s cubic-bezier(0.34, 1.56, 0.64, 1),
                cy 0.48s cubic-bezier(0.34, 1.56, 0.64, 1),
                r 0.48s ease,
                opacity 0.6s ease;
}

#final-blob.popped .blob-svg .blob-path {
    transform-origin: center;
    transform: scale(1.3);
    opacity: 0;
    transition: transform 0.48s ease, opacity 0.48s ease;
}

#final-blob.popped .blob-content {
    opacity: 0;
    transition: opacity 0.4s ease;
}

#final-blob.popped .specimen-final {
    opacity: 0;
    transform: translateX(-50%) scale(1.5);
    transition: transform 0.48s ease, opacity 0.48s ease;
}

/* ============================================================
   Dry footer — single flat surface (the pop reveals this)
   ============================================================ */
.dry-footer {
    position: relative;
    width: 100%;
    height: 8vh;
    min-height: 80px;
    background: #1A1F2E;
    color: #E9F4F1;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.footer-inner {
    width: 96%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'Recursive', 'Courier New', monospace;
    font-variation-settings: 'MONO' 1, 'CASL' 0, 'slnt' 0;
    font-size: 11px;
    color: #E9F4F1;
    letter-spacing: 0.05em;
    text-align: center;
    position: relative;
}

.footer-line {
    opacity: 0.85;
    line-height: 1.4;
}

.gab-toggle {
    position: absolute;
    right: 1vw;
    bottom: 0;
    background: transparent;
    border: 1px solid #E9F4F1;
    color: #E9F4F1;
    font-family: 'Recursive', monospace;
    font-variation-settings: 'MONO' 0.3, 'CASL' 0.6, 'slnt' -3;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 16px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.gab-toggle:hover {
    opacity: 1;
    background: rgba(168, 230, 212, 0.15);
}

/* ============================================================
   Responsive — mobile narrow tank
   ============================================================ */
@media (max-width: 720px) {
    .blob-cell {
        width: 92vw;
        height: 78vw;
        min-height: 360px;
        margin: -3vh auto;
    }
    .cell-1, .cell-2, .cell-3, .cell-4, .cell-5,
    .cell-6, .cell-7, .cell-8, .cell-9, .cell-10, .cell-11 {
        margin-left: 4vw;
        margin-right: 4vw;
    }
    .blob-content {
        width: 86%;
        margin-top: 14%;
    }
    .blob-title {
        font-size: clamp(1.8rem, 9vw, 3rem);
    }
    .specimen {
        font-size: clamp(120px, 32vw, 200px) !important;
    }
    .specimen-pilcrow-big {
        font-size: clamp(160px, 38vw, 240px) !important;
    }
    .footer-inner {
        font-size: 9px;
    }
    .gab-toggle {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 6px;
    }
    html {
        cursor: auto;
    }
    .cursor-trail {
        display: none;
    }
}

/* Reduce motion preference - keep it but tone down */
@media (prefers-reduced-motion: reduce) {
    .iridescence,
    .blob-title,
    .specimen,
    .cytoplasm,
    .wordmark-submerged {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
    }
}