/* freedom.compare — blobitecture liquid laboratory
   Palette "Aqueous Membrane":
     Lymph Cream    #F4EFE6
     Membrane Pink  #F7C8C0
     Periwinkle     #A9B8E0
     Bruise Plum    #9C7E94 (emergent)
     Inner Gel      #FBE8DC
     Mercury Black  #2A2530
     Highlight Sheen#FFFFFFCC
     Shadow Sigh    #3B2D34 @12%
*/

:root {
    --lymph-cream: #F4EFE6;
    --membrane-pink: #F7C8C0;
    --membrane-peri: #A9B8E0;
    --bruise-plum: #9C7E94;
    --inner-gel: #FBE8DC;
    --mercury-black: #2A2530;
    --shadow-sigh: #3B2D34;
    --highlight-sheen: rgba(255, 255, 255, 0.8);
}

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

html, body {
    background: var(--lymph-cream);
    color: var(--mercury-black);
    font-family: "Quicksand", sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
    min-height: 100%;
    cursor: none;
}

body {
    position: relative;
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    line-height: 1.65;
    letter-spacing: 0.005em;
}

.goo-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ============ OPENING OVERLAY ============ */
.overlay {
    position: fixed;
    inset: 0;
    background: var(--lymph-cream);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 1.2s ease;
}
.overlay.gone {
    opacity: 0;
    visibility: hidden;
}

.opening-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drop {
    position: absolute;
    left: 50%;
    top: -80px;
    width: 28px;
    height: 28px;
    margin-left: -14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #6A5C68 0%, var(--mercury-black) 60%);
    box-shadow:
        0 30px 60px rgba(59, 45, 52, 0.25),
        inset 4px -3px 8px rgba(255, 255, 255, 0.2);
    opacity: 0;
}
.drop.active {
    animation: drop-fall 2.6s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
@keyframes drop-fall {
    0%   { top: -80px; opacity: 0; transform: scale(1,1); }
    8%   { opacity: 1; }
    20%  { top: calc(50vh - 14px); transform: scale(1.1, 0.85); }
    28%  { top: calc(35vh - 14px); transform: scale(0.95, 1.08); }
    40%  { top: calc(50vh - 14px); transform: scale(1.06, 0.9); }
    48%  { top: calc(42vh - 14px); transform: scale(0.97, 1.04); }
    60%  { top: calc(50vh - 14px); transform: scale(1.03, 0.95); }
    70%  { top: calc(46vh - 14px); transform: scale(0.99, 1.01); }
    82%  { top: calc(50vh - 14px); transform: scale(1.0, 1.0); opacity: 1; }
    100% { top: calc(50vh - 14px); transform: scale(8, 8); opacity: 0; }
}

.wordmark {
    font-family: "Fraunces", serif;
    font-weight: 300;
    font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 300;
    font-size: clamp(3rem, 9vw, 9rem);
    letter-spacing: -0.04em;
    line-height: 0.88;
    color: var(--mercury-black);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wordmark.inflated {
    opacity: 1;
    transform: scale(1);
}

/* ============ MOTES (drift plankton) ============ */
.motes {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.mote {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.55;
}
.mote-pink { background: var(--membrane-pink); }
.mote-peri { background: var(--membrane-peri); }
.m1 { left: 12%; top: 18%; animation: drift-a 95s linear infinite; }
.m2 { left: 78%; top: 25%; animation: drift-b 110s linear infinite; }
.m3 { left: 36%; top: 60%; animation: drift-c 85s linear infinite; width: 4px; height: 4px; }
.m4 { left: 88%; top: 72%; animation: drift-d 120s linear infinite; width: 8px; height: 8px; }
.m5 { left: 25%; top: 88%; animation: drift-e 100s linear infinite; }
.m6 { left: 65%; top: 14%; animation: drift-f 105s linear infinite; }
.m7 { left: 8%; top: 48%; animation: drift-a 90s linear infinite reverse; width: 5px; height: 5px; }
.m8 { left: 52%; top: 35%; animation: drift-b 115s linear infinite reverse; }
.m9 { left: 72%; top: 80%; animation: drift-c 95s linear infinite reverse; width: 7px; height: 7px; }

@keyframes drift-a { 0% { transform: translate(0,0); } 100% { transform: translate(40vw, -30vh); } }
@keyframes drift-b { 0% { transform: translate(0,0); } 100% { transform: translate(-50vw, 25vh); } }
@keyframes drift-c { 0% { transform: translate(0,0); } 100% { transform: translate(30vw, 35vh); } }
@keyframes drift-d { 0% { transform: translate(0,0); } 100% { transform: translate(-35vw, -45vh); } }
@keyframes drift-e { 0% { transform: translate(0,0); } 100% { transform: translate(45vw, -20vh); } }
@keyframes drift-f { 0% { transform: translate(0,0); } 100% { transform: translate(-40vw, 30vh); } }

.motes.idle .mote {
    animation-duration: 50s !important;
}

/* ============ MOONS (distant ghosted blobs) ============ */
.moons {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.moon {
    position: absolute;
    width: 65vw;
    height: 65vw;
    border-radius: 50%;
    opacity: 0.18;
    filter: blur(60px);
}
.moon-pink {
    background: var(--membrane-pink);
    left: -25vw;
    top: 10vh;
    animation: moon-drift-1 180s ease-in-out infinite alternate;
}
.moon-peri {
    background: var(--membrane-peri);
    right: -25vw;
    top: 40vh;
    animation: moon-drift-2 220s ease-in-out infinite alternate;
}
@keyframes moon-drift-1 {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(20vw, 30vh); }
}
@keyframes moon-drift-2 {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-25vw, -20vh); }
}

/* ============ CURSOR BEAD ============ */
.cursor-bead {
    position: fixed;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 35%),
        var(--membrane-pink);
    box-shadow:
        0 8px 24px rgba(59, 45, 52, 0.18),
        inset -2px -3px 6px rgba(156, 126, 148, 0.35);
    pointer-events: none;
    z-index: 999;
    transform: translate(-50%, -50%);
    transition: transform 0.18s ease-out, opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
    left: -50px;
    top: -50px;
}
.cursor-bead.merged {
    width: 8px;
    height: 8px;
    opacity: 0.5;
}

/* ============ POSITION BEAD ============ */
.position-bead {
    position: fixed;
    bottom: 4vh;
    left: 4vw;
    width: 56px;
    height: 56px;
    border: none;
    background: var(--lymph-cream);
    border-radius: 50%;
    z-index: 100;
    cursor: none;
    box-shadow:
        0 12px 28px rgba(59, 45, 52, 0.18),
        inset -3px -4px 10px rgba(156, 126, 148, 0.18),
        inset 2px 3px 6px rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 0;
    transition: transform 0.4s ease;
}
.position-bead:hover {
    transform: scale(1.08);
}
.position-fill {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mercury-black);
    transition: height 0.4s ease, bottom 0.4s ease, background 0.4s ease;
}
.position-label {
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Recursive", monospace;
    font-variation-settings: "MONO" 1, "CASL" 1, "wght" 500;
    font-size: 0.72rem;
    color: var(--mercury-black);
    white-space: nowrap;
    opacity: 0.7;
}
.position-bead.audio-on .position-fill {
    background: var(--bruise-plum);
}

/* ============ COOKIE MEMBRANE ============ */
.cookie-membrane {
    position: fixed;
    bottom: 8vh;
    right: 6vw;
    width: 180px;
    height: 120px;
    background: var(--membrane-pink);
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    box-shadow:
        0 20px 50px rgba(59, 45, 52, 0.18),
        inset 8px 6px 18px rgba(255, 255, 255, 0.55),
        inset -6px -8px 18px rgba(156, 126, 148, 0.22);
    animation: cookie-breathe 5s ease-in-out infinite;
    transition: transform 0.4s ease, opacity 0.6s ease;
    transform: translateY(0) scale(1);
    opacity: 1;
}
.cookie-text {
    font-family: "Quicksand", sans-serif;
    font-size: 0.82rem;
    color: var(--mercury-black);
    opacity: 0.78;
    pointer-events: none;
}
.cookie-membrane.popping {
    animation: cookie-pop 0.6s ease-out forwards;
}
@keyframes cookie-breathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.04) rotate(2deg); }
}
@keyframes cookie-pop {
    0%   { transform: scale(1); opacity: 1; filter: blur(0); }
    40%  { transform: scale(1.4); opacity: 0.9; filter: blur(2px); }
    100% { transform: scale(2.6); opacity: 0; filter: blur(20px); }
}

/* ============ CANVAS / STAGES ============ */
.canvas {
    position: relative;
    width: 100%;
    min-height: 480vh;
    z-index: 2;
}

.stage {
    position: relative;
    width: 100%;
    padding: 0 8vw;
    overflow: hidden;
}

.stage-surface  { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stage-descent  { height: 80vh; }
.stage-meeting  { height: 100vh; }
.stage-pool     { height: 100vh; }
.stage-settling { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.stage-wordmark {
    font-family: "Fraunces", serif;
    font-weight: 300;
    font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 300;
    font-size: clamp(4.5rem, 13vw, 13rem);
    letter-spacing: -0.04em;
    line-height: 0.88;
    color: var(--mercury-black);
    text-align: center;
    margin-bottom: 2vh;
}

.stage-whisper {
    font-family: "Quicksand", sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    color: var(--mercury-black);
    opacity: 0.55;
    text-align: center;
    position: absolute;
    bottom: 6vh;
    left: 0;
    right: 0;
    letter-spacing: 0.02em;
}

/* ============ DESCENT (Stage 2) ============ */
.descent-field {
    position: relative;
    width: 100%;
    height: 100%;
    filter: url(#membrane-goo-soft);
}
.membrane-group {
    position: relative;
    width: 100%;
    height: 100%;
}

.membrane {
    position: absolute;
    width: clamp(280px, 32vw, 480px);
    height: clamp(280px, 32vw, 480px);
    transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1);
    will-change: transform;
}
.membrane svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mem-a {
    left: -8vw;
    top: 8vh;
    animation: breathe-a 5.4s ease-in-out infinite;
    filter: drop-shadow(0 30px 60px rgba(59, 45, 52, 0.12));
}
.mem-b {
    right: -8vw;
    top: 18vh;
    animation: breathe-b 6.2s ease-in-out infinite;
    filter: drop-shadow(0 30px 60px rgba(59, 45, 52, 0.12));
}

.membrane-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Fraunces", serif;
    font-weight: 300;
    font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 300;
    font-size: clamp(1.4rem, 2.2vw, 2.6rem);
    letter-spacing: -0.04em;
    color: var(--mercury-black);
    pointer-events: none;
}

@keyframes breathe-a {
    0%, 100% { transform: scale(1) translateY(0); }
    50%      { transform: scale(1.03) translateY(-6px); }
}
@keyframes breathe-b {
    0%, 100% { transform: scale(1) translateY(0); }
    50%      { transform: scale(1.03) translateY(6px); }
}

body.idle .mem-a { animation: breathe-a-deep 5.4s ease-in-out infinite; }
body.idle .mem-b { animation: breathe-b-deep 6.2s ease-in-out infinite; }
@keyframes breathe-a-deep {
    0%, 100% { transform: scale(1) translateY(0); }
    50%      { transform: scale(1.06) translateY(-10px); }
}
@keyframes breathe-b-deep {
    0%, 100% { transform: scale(1) translateY(0); }
    50%      { transform: scale(1.06) translateY(10px); }
}

/* ============ MEETING CHAMBER (Stage 3) ============ */
.meeting-field {
    position: relative;
    width: 100%;
    height: 100%;
    filter: url(#membrane-goo);
    mix-blend-mode: multiply;
}

.meeting-group {
    position: relative;
    width: 100%;
    height: 100%;
}

.mem-a-meet {
    position: absolute;
    width: clamp(300px, 38vw, 540px);
    height: clamp(300px, 38vw, 540px);
    left: 8vw;
    top: 16vh;
    animation: float-a 8s ease-in-out infinite;
}
.mem-b-meet {
    position: absolute;
    width: clamp(300px, 38vw, 540px);
    height: clamp(300px, 38vw, 540px);
    right: 8vw;
    top: 22vh;
    animation: float-b 9s ease-in-out infinite;
}
.mem-a-meet svg, .mem-b-meet svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

@keyframes float-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(8vw, 4vh) scale(1.04); }
}
@keyframes float-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-8vw, -4vh) scale(1.04); }
}

.satellites {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}
.satellite {
    position: absolute;
    width: clamp(70px, 8vw, 110px);
    height: clamp(70px, 8vw, 110px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 40%), var(--lymph-cream);
    box-shadow:
        0 20px 40px rgba(59, 45, 52, 0.1),
        inset -3px -4px 10px rgba(156, 126, 148, 0.18),
        inset 3px 4px 8px rgba(255, 255, 255, 0.6);
    color: var(--mercury-black);
    font-family: "Recursive", monospace;
    font-variation-settings: "MONO" 1, "CASL" 1, "wght" 500;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}
.sat-1 { left: 12%; top: 8%;  animation: orbit-1 18s ease-in-out infinite; }
.sat-2 { left: 82%; top: 12%; animation: orbit-2 21s ease-in-out infinite; }
.sat-3 { left: 6%;  top: 60%; animation: orbit-3 19s ease-in-out infinite; }
.sat-4 { left: 88%; top: 64%; animation: orbit-4 22s ease-in-out infinite; }
.sat-5 { left: 30%; top: 82%; animation: orbit-5 17s ease-in-out infinite; }
.sat-6 { left: 64%; top: 84%; animation: orbit-6 20s ease-in-out infinite; }

@keyframes orbit-1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(2vw,3vh) scale(1.05);} }
@keyframes orbit-2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-2vw,2vh) scale(1.05);} }
@keyframes orbit-3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(3vw,-2vh) scale(1.05);} }
@keyframes orbit-4 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-3vw,-3vh) scale(1.05);} }
@keyframes orbit-5 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(2vw,-3vh) scale(1.05);} }
@keyframes orbit-6 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-2vw,-2vh) scale(1.05);} }

/* ============ POOL (Stage 4) ============ */
.pool-shape {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 40px 80px rgba(59, 45, 52, 0.12));
}
.pool-svg {
    position: absolute;
    width: 84vw;
    height: 75vh;
    top: 12vh;
    left: 8vw;
    animation: pool-breathe 7s ease-in-out infinite;
}
@keyframes pool-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
}

.pool-text {
    position: relative;
    z-index: 3;
    width: clamp(280px, 56vw, 720px);
    padding: 0 4vw;
    text-align: center;
}
.pool-text p {
    font-family: "Quicksand", sans-serif;
    font-weight: 500;
    font-size: clamp(1.05rem, 1.5vw, 1.4rem);
    line-height: 1.7;
    margin-bottom: 1.2em;
    color: transparent;
    background: linear-gradient(180deg, #BFA9A9 0%, #8C7385 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter:
        drop-shadow(0 -1px 0 #FFFFFF)
        drop-shadow(0 1px 0 rgba(59, 45, 52, 0.18))
        drop-shadow(0 2px 1px rgba(59, 45, 52, 0.08));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.pool-text p.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ============ SETTLING (Stage 5) ============ */
.settling-shape {
    position: relative;
    width: 100%;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.final-bead {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 40%),
        var(--bruise-plum);
    box-shadow:
        0 12px 30px rgba(59, 45, 52, 0.22),
        inset -1px -2px 4px rgba(59, 45, 52, 0.3);
    animation: final-pulse 4s ease-in-out infinite;
    transform: scale(1);
}
@keyframes final-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

.signature {
    margin-top: 4vh;
    font-family: "Recursive", monospace;
    font-variation-settings: "MONO" 1, "CASL" 1, "wght" 500;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--mercury-black);
    opacity: 0.55;
    text-align: center;
}

/* ============ NO REDUCED MOTION OVERRIDES (per spec, immersive only) ============ */