/* okurairi.net - Blobitecture Dreamscape */
/* Colors: #ff6b9d #ffd93d #6bcbff #1a1a2e #b467ff #4aeabc #fff0f5 #fefcf8 #2d2d44 */

:root {
    --pink: #ff6b9d;
    --yellow: #ffd93d;
    --blue: #6bcbff;
    --dark: #1a1a2e;
    --violet: #b467ff;
    --mint: #4aeabc;
    --cotton-candy: #fff0f5;
    --cream: #fefcf8;
    --muted: #2d2d44;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    color: var(--muted);
    background: var(--cotton-candy);
    overflow-x: hidden;
    line-height: 1.75;
    letter-spacing: 0.01em;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
}

/* ============================================
   BACKGROUND AMBIENT LAYER
   ============================================ */
#bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.25;
    will-change: transform;
}

.bg-blob-1 {
    width: 70vw;
    height: 70vw;
    background: radial-gradient(ellipse at 30% 40%, #ff6b9d33, #ff6b9d22, transparent);
    background-color: var(--pink);
    top: -20%;
    left: -10%;
    animation: drift-1 20s ease-in-out infinite;
}

.bg-blob-2 {
    width: 60vw;
    height: 60vw;
    background: radial-gradient(ellipse at 60% 50%, #ffd93d33, #ffd93d22, transparent);
    background-color: var(--yellow);
    top: 30%;
    right: -15%;
    animation: drift-2 25s ease-in-out infinite;
}

.bg-blob-3 {
    width: 65vw;
    height: 65vw;
    background: radial-gradient(ellipse at 40% 60%, #6bcbff33, #6bcbff22, transparent);
    background-color: var(--blue);
    bottom: -25%;
    left: 20%;
    animation: drift-3 22s ease-in-out infinite;
}

@keyframes drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    25% { transform: translate(5vw, 3vh) scale(1.05); opacity: 0.3; }
    50% { transform: translate(-3vw, 8vh) scale(1.02); opacity: 0.35; }
    75% { transform: translate(4vw, -2vh) scale(0.98); opacity: 0.25; }
}

@keyframes drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
    33% { transform: translate(-6vw, -4vh) scale(1.04); opacity: 0.3; }
    66% { transform: translate(3vw, 5vh) scale(0.97); opacity: 0.35; }
}

@keyframes drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.22; }
    40% { transform: translate(4vw, -6vh) scale(1.06); opacity: 0.32; }
    80% { transform: translate(-5vw, 3vh) scale(0.95); opacity: 0.28; }
}

/* ============================================
   LENS FLARE LAYER
   ============================================ */
#flare-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}

.flare {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

.flare-1 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at center, #ffffff88, #ff6b9d44, transparent 70%);
    top: 15%;
    right: 20%;
    animation: flare-drift-1 12s ease-in-out infinite;
    opacity: 0.6;
}

.flare-2 {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at center, #ffffff66, #ffd93d44, transparent 70%);
    top: 25%;
    right: 30%;
    animation: flare-drift-2 15s ease-in-out infinite;
    opacity: 0.5;
}

.flare-3 {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at center, #ffffff88, #6bcbff44, transparent 70%);
    top: 10%;
    right: 15%;
    animation: flare-drift-3 10s ease-in-out infinite;
    opacity: 0.7;
}

.flare-4 {
    width: 160px;
    height: 160px;
    background: radial-gradient(circle at center, #ffffff55, #b467ff33, transparent 70%);
    top: 35%;
    right: 25%;
    animation: flare-drift-4 18s ease-in-out infinite;
    opacity: 0.4;
}

.flare-5 {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at center, #ffffff99, #ff6b9d55, transparent 70%);
    top: 20%;
    right: 35%;
    animation: flare-drift-5 8s ease-in-out infinite;
    opacity: 0.65;
}

.flare-6 {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle at center, #ffffff33, #ffd93d22, transparent 70%);
    top: 5%;
    right: 10%;
    animation: flare-drift-6 20s ease-in-out infinite;
    opacity: 0.3;
}

.flare-7 {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at center, #ffffff77, #4aeabc44, transparent 70%);
    bottom: 30%;
    left: 15%;
    animation: flare-drift-7 14s ease-in-out infinite;
    opacity: 0.45;
}

.flare-8 {
    width: 140px;
    height: 140px;
    background: radial-gradient(circle at center, #ffffff55, #ff6b9d33, transparent 70%);
    bottom: 20%;
    right: 40%;
    animation: flare-drift-8 16s ease-in-out infinite;
    opacity: 0.35;
}

@keyframes flare-drift-1 { 0%,100%{transform:translate(0,0);opacity:0.6} 50%{transform:translate(-30px,20px);opacity:0.8} }
@keyframes flare-drift-2 { 0%,100%{transform:translate(0,0);opacity:0.5} 50%{transform:translate(20px,-15px);opacity:0.7} }
@keyframes flare-drift-3 { 0%,100%{transform:translate(0,0);opacity:0.7} 50%{transform:translate(-15px,25px);opacity:0.5} }
@keyframes flare-drift-4 { 0%,100%{transform:translate(0,0);opacity:0.4} 50%{transform:translate(25px,10px);opacity:0.6} }
@keyframes flare-drift-5 { 0%,100%{transform:translate(0,0);opacity:0.65} 50%{transform:translate(-10px,-20px);opacity:0.8} }
@keyframes flare-drift-6 { 0%,100%{transform:translate(0,0);opacity:0.3} 50%{transform:translate(15px,30px);opacity:0.5} }
@keyframes flare-drift-7 { 0%,100%{transform:translate(0,0);opacity:0.45} 50%{transform:translate(20px,-10px);opacity:0.6} }
@keyframes flare-drift-8 { 0%,100%{transform:translate(0,0);opacity:0.35} 50%{transform:translate(-25px,15px);opacity:0.55} }

/* ============================================
   PARTICLES LAYER - Decorative Circles
   ============================================ */
#particles-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

.particle-1 { width:12px;height:12px;background:var(--pink);top:15%;left:8%;animation:particle-float-1 15s linear infinite;opacity:0.6 }
.particle-2 { width:8px;height:8px;background:var(--yellow);top:25%;left:80%;animation:particle-float-2 18s linear infinite;opacity:0.5 }
.particle-3 { width:16px;height:16px;background:var(--blue);top:60%;left:12%;animation:particle-float-3 20s linear infinite;opacity:0.4 }
.particle-4 { width:10px;height:10px;background:var(--violet);top:40%;left:90%;animation:particle-float-4 12s linear infinite;opacity:0.55 }
.particle-5 { width:14px;height:14px;background:var(--mint);top:75%;left:55%;animation:particle-float-5 16s linear infinite;opacity:0.45 }
.particle-6 { width:8px;height:8px;background:var(--pink);top:85%;left:25%;animation:particle-float-6 22s linear infinite;opacity:0.5 }
.particle-7 { width:18px;height:18px;background:var(--yellow);top:10%;left:45%;animation:particle-float-7 14s linear infinite;opacity:0.35 }
.particle-8 { width:10px;height:10px;background:var(--blue);top:50%;left:70%;animation:particle-float-8 19s linear infinite;opacity:0.5 }
.particle-9 { width:12px;height:12px;background:var(--violet);top:30%;left:35%;animation:particle-float-9 17s linear infinite;opacity:0.4 }
.particle-10 { width:8px;height:8px;background:var(--mint);top:65%;left:85%;animation:particle-float-10 21s linear infinite;opacity:0.55 }
.particle-11 { width:14px;height:14px;background:var(--pink);top:90%;left:60%;animation:particle-float-11 13s linear infinite;opacity:0.45 }
.particle-12 { width:10px;height:10px;background:var(--yellow);top:5%;left:70%;animation:particle-float-12 16s linear infinite;opacity:0.5 }

@keyframes particle-float-1 { 0%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(30px,-40px) rotate(180deg)} 100%{transform:translate(0,0) rotate(360deg)} }
@keyframes particle-float-2 { 0%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(-25px,35px) rotate(180deg)} 100%{transform:translate(0,0) rotate(360deg)} }
@keyframes particle-float-3 { 0%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(40px,20px) rotate(180deg)} 100%{transform:translate(0,0) rotate(360deg)} }
@keyframes particle-float-4 { 0%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(-35px,-30px) rotate(180deg)} 100%{transform:translate(0,0) rotate(360deg)} }
@keyframes particle-float-5 { 0%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(20px,45px) rotate(180deg)} 100%{transform:translate(0,0) rotate(360deg)} }
@keyframes particle-float-6 { 0%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(-15px,-25px) rotate(180deg)} 100%{transform:translate(0,0) rotate(360deg)} }
@keyframes particle-float-7 { 0%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(25px,30px) rotate(180deg)} 100%{transform:translate(0,0) rotate(360deg)} }
@keyframes particle-float-8 { 0%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(-30px,20px) rotate(180deg)} 100%{transform:translate(0,0) rotate(360deg)} }
@keyframes particle-float-9 { 0%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(35px,-35px) rotate(180deg)} 100%{transform:translate(0,0) rotate(360deg)} }
@keyframes particle-float-10 { 0%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(-20px,40px) rotate(180deg)} 100%{transform:translate(0,0) rotate(360deg)} }
@keyframes particle-float-11 { 0%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(15px,-20px) rotate(180deg)} 100%{transform:translate(0,0) rotate(360deg)} }
@keyframes particle-float-12 { 0%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(-40px,-15px) rotate(180deg)} 100%{transform:translate(0,0) rotate(360deg)} }


/* ============================================
   NAVIGATION BLOB
   ============================================ */
.nav-blob {
    position: fixed;
    top: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    background: var(--pink);
    border-radius: 30% 70% 60% 40% / 50% 60% 30% 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: border-radius 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
    box-shadow: 0 8px 30px -8px rgba(255, 107, 157, 0.4);
    animation: nav-blob-morph 8s ease-in-out infinite;
}

.nav-blob:hover {
    border-radius: 60% 40% 50% 50% / 40% 50% 70% 30%;
    transform: scale(1.1);
    box-shadow: 0 12px 40px -5px rgba(255, 107, 157, 0.5);
}

.nav-label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: 'wght' 300;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ffffff;
    pointer-events: none;
}

@keyframes nav-blob-morph {
    0%, 100% { border-radius: 30% 70% 60% 40% / 50% 60% 30% 70%; }
    25% { border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%; }
    50% { border-radius: 60% 40% 50% 50% / 40% 50% 70% 30%; }
    75% { border-radius: 40% 60% 70% 30% / 50% 30% 60% 40%; }
}

.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(26, 26, 46, 0.95);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.nav-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 2.5rem;
    color: #ffffff;
    cursor: pointer;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.nav-close:hover {
    transform: rotate(90deg);
}

.nav-item {
    position: absolute;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: 'wght' 800;
    font-size: clamp(2rem, 5vw, 4rem);
    color: #ffffff;
    text-decoration: none;
    letter-spacing: -0.03em;
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: translateY(30px);
}

.nav-overlay.active .nav-item {
    opacity: 1;
    transform: translateY(0);
}

.nav-overlay.active .nav-item:nth-child(2) { transition-delay: 0.1s; }
.nav-overlay.active .nav-item:nth-child(3) { transition-delay: 0.2s; }
.nav-overlay.active .nav-item:nth-child(4) { transition-delay: 0.3s; }
.nav-overlay.active .nav-item:nth-child(5) { transition-delay: 0.4s; }
.nav-overlay.active .nav-item:nth-child(6) { transition-delay: 0.5s; }

.nav-item:hover {
    color: var(--pink);
    transform: scale(1.05);
}

/* ============================================
   CHAMBERS - General
   ============================================ */
.chamber {
    position: relative;
    min-height: 100vh;
    z-index: 1;
    overflow: hidden;
    perspective: 1200px;
}

/* Blur-Focus Reveal Animation */
.blur-reveal {
    filter: blur(8px);
    opacity: 0;
    transform: translateY(30px);
    transition: filter 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--delay, 0ms);
}

.blur-reveal.revealed {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   THRESHOLD SECTION
   ============================================ */
.threshold {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 35vh;
    padding-left: 12%;
    background: var(--cotton-candy);
}

.threshold::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 30% 40%, #ff6b9d18, transparent 60%),
        radial-gradient(ellipse at 70% 60%, #ffd93d15, transparent 60%),
        radial-gradient(ellipse at 50% 80%, #6bcbff12, transparent 60%);
    pointer-events: none;
}

.site-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: 'wght' 800;
    font-size: clamp(4rem, 12vw, 10rem);
    color: var(--dark);
    letter-spacing: -0.03em;
    line-height: 0.95;
    position: relative;
    z-index: 2;
    transition: font-variation-settings 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-title:hover {
    font-variation-settings: 'wght' 200;
}

.site-tagline {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--pink);
    margin-top: 1.5rem;
    position: relative;
    z-index: 2;
}

.threshold-flare-cluster {
    position: absolute;
    top: 10%;
    right: 5%;
    width: 50%;
    height: 60%;
    pointer-events: none;
}

.flare-cluster-item {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
}

.fc-1 { width:180px;height:180px;background:radial-gradient(circle,#ffffff88,#ff6b9d44,transparent 70%);top:10%;right:15%;animation:fc-drift-1 10s ease-in-out infinite;opacity:0.6 }
.fc-2 { width:120px;height:120px;background:radial-gradient(circle,#ffffff66,#ffd93d44,transparent 70%);top:30%;right:35%;animation:fc-drift-2 13s ease-in-out infinite;opacity:0.5 }
.fc-3 { width:90px;height:90px;background:radial-gradient(circle,#ffffff77,#6bcbff44,transparent 70%);top:5%;right:40%;animation:fc-drift-3 8s ease-in-out infinite;opacity:0.65 }
.fc-4 { width:60px;height:60px;background:radial-gradient(circle,#ffffff99,#b467ff55,transparent 70%);top:45%;right:20%;animation:fc-drift-4 11s ease-in-out infinite;opacity:0.55 }
.fc-5 { width:150px;height:150px;background:radial-gradient(circle,#ffffff44,#ff6b9d33,transparent 70%);top:15%;right:5%;animation:fc-drift-5 15s ease-in-out infinite;opacity:0.35 }
.fc-6 { width:70px;height:70px;background:radial-gradient(circle,#ffffff88,#4aeabc55,transparent 70%);top:50%;right:45%;animation:fc-drift-6 9s ease-in-out infinite;opacity:0.6 }

@keyframes fc-drift-1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-20px,15px)} }
@keyframes fc-drift-2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(15px,-20px)} }
@keyframes fc-drift-3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-10px,25px)} }
@keyframes fc-drift-4 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,10px)} }
@keyframes fc-drift-5 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-15px,-15px)} }
@keyframes fc-drift-6 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(10px,20px)} }


/* ============================================
   CHAMBER 1 - First Chamber
   ============================================ */
.chamber-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10vh 5%;
    min-height: 100vh;
    background: transparent;
}

.chamber-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 20% 30%, #b467ff15, transparent 55%),
        radial-gradient(ellipse at 80% 70%, #4aeabc12, transparent 55%),
        radial-gradient(ellipse at 50% 50%, #ffd93d10, transparent 60%);
    pointer-events: none;
}

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

.blob-left {
    width: 55%;
    background: var(--cream);
    border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
    padding: clamp(2rem, 5vw, 4rem);
    box-shadow: 0 20px 60px -15px rgba(255, 107, 157, 0.3);
    transition: border-radius 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
}

.blob-left:hover {
    border-radius: 55% 45% 40% 60% / 45% 55% 50% 50%;
    box-shadow: 0 25px 70px -10px rgba(255, 107, 157, 0.4);
}

.blob-right {
    width: 40%;
    background: var(--cream);
    border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%;
    padding: clamp(2rem, 4vw, 3.5rem);
    box-shadow: 0 20px 60px -15px rgba(107, 203, 255, 0.3);
    margin-top: 8vh;
    margin-left: -8%;
    z-index: 3;
    transition: border-radius 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
}

.blob-right:hover {
    border-radius: 45% 55% 55% 45% / 55% 45% 50% 50%;
    box-shadow: 0 25px 70px -10px rgba(107, 203, 255, 0.4);
}

.section-heading {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: 'wght' 800;
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--dark);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    transition: font-variation-settings 0.5s ease;
}

.section-heading:hover {
    font-variation-settings: 'wght' 400;
}

.section-body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.75;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    max-width: 45ch;
}

.blob-label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: 'wght' 300;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pink);
    display: block;
    margin-bottom: 0.75rem;
}

.blob-label.light {
    color: var(--yellow);
}

.blob-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: clamp(1.2rem, 3vw, 2rem);
    color: var(--dark);
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
}

.blob-title.light {
    color: #ffffff;
}

.blob-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.75;
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
}

.blob-text.light {
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   CHAMBER 2 - Dark Chamber
   ============================================ */
.dark-chamber {
    background: var(--dark);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 10vh 5%;
    gap: 0;
    position: relative;
}

.dark-chamber::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 30% 20%, #ff6b9d15, transparent 50%),
        radial-gradient(ellipse at 70% 80%, #b467ff12, transparent 50%),
        radial-gradient(ellipse at 50% 50%, #6bcbff10, transparent 55%);
    pointer-events: none;
}

.blob-pod-1 {
    position: absolute;
    top: 10%;
    left: 55%;
    width: 40%;
    background: rgba(255, 107, 157, 0.08);
    border: 1px solid rgba(255, 107, 157, 0.15);
    border-radius: 45% 55% 60% 40% / 50% 40% 60% 50%;
    padding: clamp(2rem, 4vw, 3.5rem);
    box-shadow: 0 0 80px 20px rgba(255, 107, 157, 0.15);
    backdrop-filter: blur(10px);
    transition: border-radius 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
}

.blob-pod-1:hover {
    border-radius: 55% 45% 45% 55% / 40% 60% 50% 50%;
    box-shadow: 0 0 100px 30px rgba(255, 107, 157, 0.25);
}

.blob-pod-2 {
    position: absolute;
    top: 45%;
    left: 5%;
    width: 38%;
    background: rgba(180, 103, 255, 0.08);
    border: 1px solid rgba(180, 103, 255, 0.15);
    border-radius: 55% 45% 40% 60% / 45% 55% 50% 50%;
    padding: clamp(2rem, 4vw, 3.5rem);
    box-shadow: 0 0 80px 20px rgba(180, 103, 255, 0.15);
    backdrop-filter: blur(10px);
    transition: border-radius 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
}

.blob-pod-2:hover {
    border-radius: 40% 60% 55% 45% / 55% 45% 50% 50%;
    box-shadow: 0 0 100px 30px rgba(180, 103, 255, 0.25);
}

.blob-pod-3 {
    position: absolute;
    top: 70%;
    left: 40%;
    width: 42%;
    background: rgba(107, 203, 255, 0.08);
    border: 1px solid rgba(107, 203, 255, 0.15);
    border-radius: 50% 50% 55% 45% / 55% 45% 45% 55%;
    padding: clamp(2rem, 4vw, 3.5rem);
    box-shadow: 0 0 80px 20px rgba(107, 203, 255, 0.15);
    backdrop-filter: blur(10px);
    transition: border-radius 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
}

.blob-pod-3:hover {
    border-radius: 45% 55% 50% 50% / 50% 50% 55% 45%;
    box-shadow: 0 0 100px 30px rgba(107, 203, 255, 0.25);
}


/* ============================================
   CHAMBER 3 - Cascade Words
   ============================================ */
.chamber-3 {
    min-height: 100vh;
    background: var(--cream);
    position: relative;
    padding: 10vh 5%;
}

.chamber-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 25% 35%, #ff6b9d10, transparent 50%),
        radial-gradient(ellipse at 75% 65%, #ffd93d0d, transparent 50%),
        radial-gradient(ellipse at 50% 90%, #4aeabc0a, transparent 50%);
    pointer-events: none;
}

.cascade-blob {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cotton-candy);
    box-shadow: 0 15px 50px -10px rgba(255, 107, 157, 0.2);
    transition: border-radius 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
}

.cascade-blob:hover {
    transform: scale(1.08);
    box-shadow: 0 20px 60px -5px rgba(255, 107, 157, 0.35);
}

.cascade-1 {
    top: 8%;
    left: 10%;
    width: clamp(160px, 20vw, 260px);
    height: clamp(100px, 12vw, 160px);
    border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
    background: linear-gradient(135deg, #fff0f5, #fefcf8);
}

.cascade-2 {
    top: 18%;
    left: 35%;
    width: clamp(180px, 22vw, 280px);
    height: clamp(110px, 13vw, 170px);
    border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%;
    background: linear-gradient(135deg, #fefcf8, #fff0f5);
}

.cascade-3 {
    top: 30%;
    left: 15%;
    width: clamp(170px, 21vw, 270px);
    height: clamp(105px, 12.5vw, 165px);
    border-radius: 50% 50% 45% 55% / 55% 45% 50% 50%;
    background: linear-gradient(135deg, #fff0f5, #fefcf8);
}

.cascade-4 {
    top: 42%;
    left: 50%;
    width: clamp(190px, 23vw, 290px);
    height: clamp(115px, 13.5vw, 175px);
    border-radius: 45% 55% 60% 40% / 50% 40% 60% 50%;
    background: linear-gradient(135deg, #fefcf8, #fff0f5);
}

.cascade-5 {
    top: 55%;
    left: 25%;
    width: clamp(160px, 20vw, 260px);
    height: clamp(100px, 12vw, 160px);
    border-radius: 55% 45% 40% 60% / 45% 55% 50% 50%;
    background: linear-gradient(135deg, #fff0f5, #fefcf8);
}

.cascade-6 {
    top: 67%;
    left: 55%;
    width: clamp(175px, 21.5vw, 275px);
    height: clamp(108px, 12.8vw, 168px);
    border-radius: 50% 50% 55% 45% / 55% 45% 45% 55%;
    background: linear-gradient(135deg, #fefcf8, #fff0f5);
}

.cascade-7 {
    top: 80%;
    left: 35%;
    width: clamp(200px, 24vw, 300px);
    height: clamp(120px, 14vw, 180px);
    border-radius: 40% 60% 50% 50% / 50% 50% 55% 45%;
    background: linear-gradient(135deg, var(--pink), #ff6b9d88);
}

.cascade-7 .cascade-word {
    color: #ffffff;
}

.cascade-word {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: 'wght' 800;
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: var(--dark);
    letter-spacing: -0.02em;
    transition: font-variation-settings 0.4s ease;
}

.cascade-blob:hover .cascade-word {
    font-variation-settings: 'wght' 300;
}

.chamber-3-flares {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mega-flare {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
}

.mega-flare-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #ffffff22, #ff6b9d11, transparent 70%);
    top: 10%;
    left: 60%;
    opacity: 0.15;
    animation: mega-drift-1 25s ease-in-out infinite;
}

.mega-flare-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #ffffff1a, #ffd93d0f, transparent 70%);
    top: 50%;
    left: 5%;
    opacity: 0.12;
    animation: mega-drift-2 22s ease-in-out infinite;
}

.mega-flare-3 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #ffffff15, #6bcbff0d, transparent 70%);
    top: 30%;
    left: 35%;
    opacity: 0.1;
    animation: mega-drift-3 28s ease-in-out infinite;
}

@keyframes mega-drift-1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,30px)} }
@keyframes mega-drift-2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-25px)} }
@keyframes mega-drift-3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-20px,40px)} }

/* ============================================
   MEMBRANE EXIT
   ============================================ */
.membrane-exit {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--cotton-candy);
    overflow: hidden;
}

.membrane-exit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 40% 50%, #ff6b9d15, transparent 40%),
        radial-gradient(ellipse at 60% 50%, #ffd93d12, transparent 40%),
        radial-gradient(ellipse at 50% 50%, #6bcbff10, transparent 40%);
    pointer-events: none;
}

.exit-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: 'wght' 200;
    font-size: clamp(5rem, 15vw, 14rem);
    color: var(--dark);
    opacity: 0.04;
    letter-spacing: -0.03em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.exit-blob {
    position: relative;
    z-index: 2;
    width: min(80vw, 900px);
    background: var(--cream);
    border-radius: 45% 55% 50% 50% / 50% 50% 55% 45%;
    padding: clamp(3rem, 6vw, 5rem);
    box-shadow: 0 30px 80px -20px rgba(255, 107, 157, 0.25);
    text-align: center;
    transition: border-radius 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.exit-blob:hover {
    border-radius: 50% 50% 45% 55% / 55% 45% 50% 50%;
}

.exit-heading {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: 'wght' 800;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--dark);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 1.5rem 0;
}

.exit-body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.75;
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    max-width: 55ch;
    margin: 0 auto 2rem;
}

.exit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.exit-meta-item {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: 'wght' 300;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pink);
    padding: 0.5rem 1.2rem;
    border: 1px solid rgba(255, 107, 157, 0.3);
    border-radius: 30% 70% 60% 40% / 50% 60% 30% 70%;
    transition: border-radius 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease;
}

.exit-meta-item:hover {
    border-radius: 60% 40% 50% 50% / 40% 50% 70% 30%;
    background: rgba(255, 107, 157, 0.05);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .threshold {
        padding-top: 25vh;
        padding-left: 8%;
    }

    .chamber-1 {
        flex-direction: column;
        padding: 8vh 5%;
    }

    .blob-left,
    .blob-right {
        width: 90%;
        margin-left: 0;
        margin-top: 3vh;
    }

    .blob-pod-1,
    .blob-pod-2,
    .blob-pod-3 {
        position: relative;
        top: auto;
        left: auto;
        width: 90%;
        margin: 2vh auto;
    }

    .dark-chamber {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cascade-blob {
        position: relative;
        top: auto !important;
        left: auto !important;
        margin: 1.5vh auto;
        width: 80% !important;
    }

    .nav-item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: block;
        text-align: center;
        margin: 1.5rem 0;
    }

    .nav-overlay {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 4rem;
    }

    .exit-blob {
        width: 92vw;
        padding: 2rem;
    }

    .exit-meta {
        flex-direction: column;
        align-items: center;
    }
}