/* Design typography and interaction tokens: IBM Plex Mono' (400 (Google Fonts Interaction: Interaction:* Interaction:** Intersection Observer (threshold: triggers that transitions full length Roboto Slab (300 */

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

html {
    scroll-behavior: smooth;
}

body {
    background: #0a0612;
    color: #a89cc8;
    overflow-x: hidden;
    font-family: "Roboto Slab", Georgia, serif;
    font-weight: 300;
    font-size: clamp(1rem, 2vw, 1.35rem);
    line-height: 1.85;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0 44%, rgba(224, 212, 255, 0.025) 45%, transparent 46% 100%), repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 38px);
    mix-blend-mode: screen;
}

.scroll-container {
    scroll-snap-type: y proximity;
    background: #0a0612;
}

section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    scroll-snap-align: start;
}

.membrane {
    min-height: 100vh;
    background: radial-gradient(ellipse at 50% 55%, rgba(42, 8, 69, 0.62) 0%, rgba(10, 6, 18, 0) 44%), #0a0612;
}

.membrane-haze {
    position: absolute;
    width: min(82vw, 780px);
    height: min(82vw, 780px);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%, rgba(0,229,255,0.08) 0%, transparent 70%);
    filter: blur(24px);
    opacity: 0.8;
    animation: hazePulse 7s ease-in-out infinite;
}

.hero-wordmark {
    position: absolute;
    z-index: 3;
    font-family: "Zilla Slab", Rockwell, Georgia, serif;
    font-weight: 700;
    font-size: clamp(5rem, 12vw, 10rem);
    letter-spacing: -0.02em;
    line-height: 0.85;
    color: #e0d4ff;
    mix-blend-mode: difference;
    pointer-events: none;
    user-select: none;
}

.sphere {
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #b44aff 0%, #6a1b9a 40%, #2a0845 80%, #0a0612 100%);
    box-shadow: 0 0 60px rgba(180,74,255,0.3), 0 0 130px rgba(0,229,255,0.07), inset 0 -20px 40px rgba(10,6,18,0.6), inset 18px 16px 38px rgba(224,212,255,0.14);
    animation: breathe 4s ease-in-out infinite;
    will-change: transform;
}

.hero-sphere {
    width: clamp(200px, 40vw, 450px);
    height: clamp(200px, 40vw, 450px);
    z-index: 2;
}

.chamber {
    min-height: 150vh;
    isolation: isolate;
}

.chamber-one { background: linear-gradient(180deg, #0a0612 0%, #0f0a1a 100%); }
.chamber-two { background: radial-gradient(ellipse at 70% 45%, rgba(180,74,255,0.07), transparent 45%), #0f0a1a; }
.chamber-three { background: linear-gradient(180deg, #0f0a1a 0%, #0a0612 42%, #0f0a1a 100%); }

.chamber-content, .convergence-content {
    position: relative;
    z-index: 2;
    max-width: 38ch;
    padding: 2rem;
    margin: 0 8vw 0 auto;
}

.chamber-content-offset {
    margin: 0 auto 0 10vw;
}

.chamber-content p, .convergence-content p {
    color: #a89cc8;
    text-shadow: 0 0 28px rgba(168, 156, 200, 0.11);
}

.section-label {
    display: block;
    margin-bottom: 1.5rem;
    color: #ff2d6b;
    font-family: "IBM Plex Mono", "Courier New", monospace;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.reveal {
    opacity: 0;
    transform: translateY(20vh);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.bokeh-field {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.bokeh-node, .bokeh-node::before, .bokeh-node::after {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(40px);
    will-change: transform;
}

.bokeh-node::before, .bokeh-node::after { content: ""; }
.node-a { width: 300px; height: 300px; top: 12%; left: 7%; background: rgba(180,74,255,0.08); animation: driftOne 21s ease-in-out infinite alternate; }
.node-a::before { width: 140px; height: 140px; top: 84%; left: 130%; background: rgba(0,229,255,0.07); }
.node-a::after { width: 210px; height: 210px; top: 185%; left: 235%; background: rgba(255,45,107,0.04); }
.node-b { width: 190px; height: 190px; top: 52%; right: 10%; background: rgba(0,229,255,0.08); animation: driftTwo 18s ease-in-out infinite alternate; }
.node-b::before { width: 260px; height: 260px; top: -80%; right: 180%; background: rgba(180,74,255,0.05); }
.node-b::after { width: 90px; height: 90px; top: 210%; right: 85%; background: rgba(255,45,107,0.08); }
.node-c { width: 340px; height: 340px; bottom: 8%; left: 32%; background: rgba(180,74,255,0.05); animation: driftThree 25s ease-in-out infinite alternate; }
.node-c::before { width: 120px; height: 120px; bottom: 110%; left: -20%; background: rgba(0,229,255,0.06); }
.node-c::after { width: 170px; height: 170px; bottom: -10%; right: -85%; background: rgba(255,45,107,0.05); }
.node-d { width: 260px; height: 260px; top: 18%; right: 14%; background: rgba(255,45,107,0.07); animation: driftTwo 23s ease-in-out infinite alternate; }
.node-d::before { width: 160px; height: 160px; top: 220%; left: -85%; background: rgba(180,74,255,0.07); }
.node-d::after { width: 220px; height: 220px; top: 95%; right: 150%; background: rgba(0,229,255,0.05); }
.node-e { width: 310px; height: 310px; top: 48%; left: 4%; background: rgba(0,229,255,0.06); animation: driftThree 20s ease-in-out infinite alternate; }
.node-e::before { width: 120px; height: 120px; top: -45%; left: 210%; background: rgba(255,45,107,0.08); }
.node-e::after { width: 190px; height: 190px; top: 150%; left: 112%; background: rgba(180,74,255,0.06); }
.node-f { width: 180px; height: 180px; bottom: 16%; right: 24%; background: rgba(180,74,255,0.09); animation: driftOne 24s ease-in-out infinite alternate; }
.node-f::before { width: 270px; height: 270px; bottom: 130%; right: -95%; background: rgba(0,229,255,0.04); }
.node-f::after { width: 100px; height: 100px; bottom: -160%; right: 190%; background: rgba(255,45,107,0.06); }
.node-g { width: 330px; height: 330px; top: 10%; left: 30%; background: rgba(0,229,255,0.05); animation: driftOne 22s ease-in-out infinite alternate; }
.node-g::before { width: 200px; height: 200px; top: 125%; left: -70%; background: rgba(180,74,255,0.08); }
.node-g::after { width: 115px; height: 115px; top: 45%; right: -85%; background: rgba(255,45,107,0.06); }
.node-h { width: 210px; height: 210px; top: 61%; right: 8%; background: rgba(255,45,107,0.06); animation: driftTwo 19s ease-in-out infinite alternate; }
.node-h::before { width: 310px; height: 310px; bottom: -70%; right: 135%; background: rgba(180,74,255,0.05); }
.node-h::after { width: 150px; height: 150px; top: -155%; right: 44%; background: rgba(0,229,255,0.08); }
.node-i { width: 270px; height: 270px; bottom: 7%; left: 13%; background: rgba(180,74,255,0.07); animation: driftThree 26s ease-in-out infinite alternate; }
.node-i::before { width: 150px; height: 150px; bottom: 185%; left: 160%; background: rgba(255,45,107,0.05); }
.node-i::after { width: 100px; height: 100px; bottom: -55%; left: 245%; background: rgba(0,229,255,0.06); }

.convergence {
    min-height: 200vh;
    flex-direction: column;
    background: radial-gradient(ellipse at 50% 47%, rgba(0,229,255,0.065) 0%, transparent 35%), #0f0a1a;
}

.flowing-curves {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.curve {
    fill: none;
    stroke: #00e5ff;
    stroke-width: 4;
    opacity: 0.55;
    stroke-dasharray: 2300;
    stroke-dashoffset: 2300;
    transition: stroke-dashoffset 2.5s ease-out;
}

.curve-two { stroke: #b44aff; stroke-width: 5; opacity: 0.44; }
.curve-three { stroke: #ff2d6b; stroke-width: 3; opacity: 0.38; }
.flowing-curves.curves-visible .curve { stroke-dashoffset: 0; }

.curve-text {
    fill: #e0d4ff;
    font-family: "IBM Plex Mono", "Courier New", monospace;
    font-size: 12px;
    letter-spacing: 0.15em;
    opacity: 0;
    text-transform: uppercase;
    transition: opacity 2s ease 0.8s;
}

.flowing-curves.curves-visible .curve-text { opacity: 0.42; }
.curve-text-two { fill: #00e5ff; }
.curve-text-three { fill: #ff2d6b; }

.convergence-core {
    position: relative;
    z-index: 2;
    width: min(88vw, 740px);
    min-height: 310px;
    display: grid;
    place-items: center;
    margin-bottom: 2rem;
}

.convergence-sphere {
    width: clamp(135px, 21vw, 265px);
    height: clamp(135px, 21vw, 265px);
}

.pill-form {
    position: absolute;
    width: clamp(165px, 25vw, 310px);
    height: clamp(58px, 8vw, 96px);
    border-radius: 50vh;
    background: radial-gradient(ellipse at 32% 35%, #b44aff 0%, #6a1b9a 45%, #2a0845 82%, #0a0612 100%);
    box-shadow: 0 0 54px rgba(180,74,255,0.24), inset 0 -18px 34px rgba(10,6,18,0.58);
    opacity: 0.78;
    animation: breathe 4.8s ease-in-out infinite;
}

.pill-one { transform: rotate(-18deg) translate(-185px, -54px); }
.pill-two { transform: rotate(15deg) translate(190px, 68px); animation-delay: -1.7s; }

.convergence-content {
    margin: 0;
    text-align: left;
}

.signal {
    min-height: 100vh;
    background: #0f0a1a;
}

.signal-halo {
    position: absolute;
    width: min(62vw, 540px);
    height: min(62vw, 540px);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%, rgba(0,229,255,0.08) 0%, transparent 70%);
    filter: blur(24px);
    opacity: 0.7;
}

.signal-content {
    position: relative;
    z-index: 2;
    text-align: left;
}

.terminal-line {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.terminal-line.shake { animation: shake 400ms ease-out; }
.terminal-line.hidden { opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
.prompt-char { color: #ff2d6b; font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 1rem; }

.email-input {
    width: clamp(240px, 50vw, 400px);
    padding: 0.5rem 1.2rem 0.5rem 0;
    border: none;
    border-bottom: 2px solid #ff2d6b;
    outline: none;
    background: transparent;
    color: #e0d4ff;
    font-family: "IBM Plex Mono", "Courier New", monospace;
    font-size: 0.875rem;
    transition: border-color 300ms ease, text-shadow 300ms ease;
}

.email-input::placeholder { color: rgba(168,156,200,0.42); }
.email-input:focus { text-shadow: 0 0 16px rgba(224,212,255,0.35); }
.email-input.error { border-color: #ff0040; }

.terminal-line::after {
    content: "";
    position: absolute;
    right: 2.3rem;
    bottom: 0.75rem;
    width: 7px;
    height: 1rem;
    background: #e0d4ff;
    animation: blink 1s steps(2, end) infinite;
}

.pulse-dot {
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 50%;
    background: #ff2d6b;
    box-shadow: 0 0 16px rgba(255,45,107,0.8), 0 0 44px rgba(180,74,255,0.3);
    cursor: pointer;
    animation: dotPulse 2.2s ease-in-out infinite;
}

.confirmation {
    margin-top: 2rem;
    color: #00e5ff;
    font-family: "IBM Plex Mono", "Courier New", monospace;
    font-size: 0.875rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s ease;
}

.confirmation.show { opacity: 1; }

@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes hazePulse { 0%, 100% { transform: scale(0.95); opacity: 0.55; } 50% { transform: scale(1.08); opacity: 0.9; } }
@keyframes driftOne { 0% { transform: translate(0, 0); } 100% { transform: translate(42px, -31px); } }
@keyframes driftTwo { 0% { transform: translate(0, 0); } 100% { transform: translate(-36px, 52px); } }
@keyframes driftThree { 0% { transform: translate(0, 0); } 100% { transform: translate(58px, 27px); } }
@keyframes blink { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes dotPulse { 0%, 100% { transform: scale(0.82); opacity: 0.68; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes shake { 0% { transform: translateX(0); } 15% { transform: translateX(-8px); } 30% { transform: translateX(8px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(4px); } 75% { transform: translateX(-2px); } 100% { transform: translateX(0); } }

@media (max-width: 720px) {
    .chamber-content, .chamber-content-offset, .convergence-content { margin: 0; padding: 1.25rem; }
    .pill-one { transform: rotate(-18deg) translate(-92px, -58px); }
    .pill-two { transform: rotate(15deg) translate(92px, 72px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}