/* continua.club - Liquid Topology */

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

:root{
    --obsidian:#1B1018;
    --dark-amber:#2D1A0E;
    --copper:#B8652A;
    --nectar:#E8A84C;
    --cream:#F0E6D3;
    --umber:#A69480;
    --burgundy:#3D0F1E;
    --rose:#C4506A;
}

html{scroll-behavior:smooth}

body{
    background:var(--obsidian);
    color:var(--cream);
    font-family:'Source Serif 4',serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.25rem);
    line-height:1.7;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Noise overlay */
.noise-overlay{
    position:fixed;
    inset:0;
    width:100%;height:100%;
    z-index:100;
    pointer-events:none;
    mix-blend-mode:overlay;
    opacity:0.03;
}

/* Manifold Bezier curves */
.manifold-layer{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:800vh;
    z-index:1;
    pointer-events:none;
}

.bezier-curve{
    fill:none;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-dasharray:600;
    stroke-dashoffset:600;
    animation:flowMercury 8s ease-in-out infinite alternate;
}

.bc1,.bc3,.bc5{stroke:var(--rose)}
.bc2,.bc4,.bc6{stroke:var(--copper)}

@keyframes flowMercury{
    0%{stroke-dashoffset:600}
    100%{stroke-dashoffset:-600}
}

.bc2{animation-delay:-2s;animation-duration:10s}
.bc3{animation-delay:-4s;animation-duration:12s}
.bc4{animation-delay:-1s;animation-duration:9s}
.bc5{animation-delay:-6s;animation-duration:11s}
.bc6{animation-delay:-3s;animation-duration:7s}

/* Navigation dots */
.topo-nav{
    position:fixed;
    right:clamp(16px,2vw,32px);
    top:50%;
    transform:translateY(-50%);
    z-index:50;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
}

.nav-thread{
    position:absolute;
    top:0;bottom:0;
    width:1px;
    background:var(--umber);
    opacity:0.3;
    z-index:-1;
}

.nav-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:var(--umber);
    border:none;
    cursor:pointer;
    transition:transform 300ms cubic-bezier(0.25,0.1,0.25,1),
               background 300ms cubic-bezier(0.25,0.1,0.25,1),
               box-shadow 300ms cubic-bezier(0.25,0.1,0.25,1);
}

.nav-dot:hover{
    transform:scale(1.6);
    background:var(--copper);
}

.nav-dot.active{
    width:12px;height:12px;
    background:var(--copper);
    box-shadow:0 0 12px rgba(184,101,42,0.5);
    animation:dotPulse 2.5s ease-in-out infinite;
}

@keyframes dotPulse{
    0%,100%{box-shadow:0 0 12px rgba(184,101,42,0.5)}
    50%{box-shadow:0 0 24px rgba(184,101,42,0.3)}
}

/* Surface main */
.surface{
    position:relative;
    z-index:5;
}

/* Regions */
.region{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(24px,5vw,80px);
}

/* Region 0: Hero */
.region-0{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:radial-gradient(ellipse 80% 60% at 30% 40%,rgba(61,15,30,0.4),transparent),
               radial-gradient(ellipse 60% 50% at 70% 70%,rgba(45,26,14,0.5),transparent),
               var(--obsidian);
}

.hero-mobius{
    width:clamp(280px,60vw,700px);
    margin-bottom:3rem;
    opacity:0;
    animation:fadeInSlow 3s cubic-bezier(0.25,0.1,0.25,1) 0.5s forwards;
}

@keyframes fadeInSlow{
    to{opacity:1}
}

.mobius-svg{
    width:100%;
    height:auto;
    animation:mobiusRotate 45s linear infinite;
}

@keyframes mobiusRotate{
    to{transform:rotate(360deg)}
}

.hero-text{
    text-align:center;
}

.domain-name{
    font-family:'Outfit',sans-serif;
    font-weight:300;
    font-size:clamp(3rem,8vw,9rem);
    letter-spacing:0.02em;
    line-height:1.1;
    color:var(--cream);
}

.domain-name .char{
    display:inline-block;
    opacity:0;
    transform:scale(0.95);
}

.domain-name .char.show{
    opacity:1;
    transform:scale(1);
    transition:opacity 400ms cubic-bezier(0.25,0.1,0.25,1),
               transform 400ms cubic-bezier(0.25,0.1,0.25,1);
}

.tagline{
    display:block;
    font-family:'Caveat',cursive;
    font-size:clamp(0.9rem,1.5vw,1.3rem);
    color:var(--umber);
    margin-top:0.5rem;
    opacity:0;
    animation:fadeInSlow 2s cubic-bezier(0.25,0.1,0.25,1) 2.5s forwards;
}

/* Region 1: First Fold */
.region-1{
    min-height:200vh;
    background:radial-gradient(ellipse 70% 50% at 60% 30%,rgba(45,26,14,0.3),transparent),
               radial-gradient(ellipse 50% 40% at 20% 80%,rgba(61,15,30,0.25),transparent);
}

.region-content{
    display:flex;
    flex-direction:column;
    gap:clamp(4rem,8vh,10rem);
}

.text-block{
    max-width:50ch;
}

.tb-left{align-self:flex-start;margin-left:5%}
.tb-right{align-self:flex-end;margin-right:5%}
.tb-center{align-self:center}

.body-text{
    color:var(--cream);
}

.accent-text{
    color:var(--nectar);
    font-weight:600;
}

.annotation{
    font-family:'Caveat',cursive;
    font-size:clamp(0.9rem,1.5vw,1.3rem);
    color:var(--umber);
    display:block;
    margin-top:0.5rem;
}

.section-heading{
    font-family:'Outfit',sans-serif;
    font-weight:500;
    font-size:clamp(1.8rem,3.5vw,3.2rem);
    letter-spacing:0.02em;
    line-height:1.1;
    color:var(--cream);
    margin-bottom:1.5rem;
}

/* Flow-in animation */
.flow-in{
    opacity:0;
    transform:translateY(30px);
    transition:opacity 800ms cubic-bezier(0.25,0.1,0.25,1),
               transform 800ms cubic-bezier(0.25,0.1,0.25,1);
}

.flow-in.visible{
    opacity:1;
    transform:translateY(0);
}

/* Void sections */
.void{
    min-height:60vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.void-a{
    background:radial-gradient(ellipse 80% 70% at 50% 50%,var(--burgundy),var(--obsidian));
}

.void-b{
    background:radial-gradient(ellipse 70% 60% at 40% 50%,rgba(61,15,30,0.6),rgba(45,26,14,0.3),var(--obsidian));
}

.void-c{
    background:radial-gradient(ellipse 60% 50% at 60% 50%,rgba(45,26,14,0.5),rgba(61,15,30,0.3),var(--obsidian));
}

.genus-marker{
    text-align:center;
}

.genus-svg{
    width:120px;
    height:auto;
    opacity:0.6;
}

.genus-rotate{
    animation:genusRotate 60s linear infinite;
}

@keyframes genusRotate{
    to{transform:rotate(360deg)}
}

.genus-label{
    display:block;
    font-family:'Caveat',cursive;
    font-size:1rem;
    color:var(--umber);
    margin-top:1rem;
    opacity:0.6;
}

/* Region 2: Deformation */
.region-2{
    min-height:200vh;
    background:radial-gradient(ellipse 60% 40% at 70% 20%,rgba(45,26,14,0.4),transparent),
               radial-gradient(ellipse 50% 50% at 30% 70%,rgba(61,15,30,0.2),transparent);
}

/* Region 3: Connected Component */
.region-3{
    min-height:180vh;
    background:radial-gradient(ellipse 70% 50% at 50% 40%,rgba(232,168,76,0.08),transparent),
               radial-gradient(ellipse 50% 60% at 30% 60%,rgba(45,26,14,0.3),transparent);
}

/* Region 4: Fixed Point */
.region-4{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.fixed-point{
    text-align:center;
}

.fixed-circle{
    width:clamp(200px,30vw,360px);
    height:clamp(200px,30vw,360px);
    border:1px solid var(--copper);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 3rem;
    position:relative;
}

.fixed-circle::before{
    content:'';
    position:absolute;
    inset:-8px;
    border:1px solid var(--rose);
    border-radius:50%;
    opacity:0.3;
    animation:fixedPulse 3s ease-in-out infinite;
}

@keyframes fixedPulse{
    0%,100%{transform:scale(1);opacity:0.3}
    50%{transform:scale(1.05);opacity:0.15}
}

.fixed-domain{
    font-family:'Outfit',sans-serif;
    font-weight:300;
    font-size:clamp(1.2rem,2.5vw,2rem);
    letter-spacing:0.02em;
    color:var(--nectar);
}

.fixed-theorem{
    max-width:50ch;
    margin:0 auto 2rem;
    font-style:italic;
    color:var(--umber);
}

.fixed-footer{
    display:block;
    color:var(--umber);
    opacity:0.6;
}

/* Responsive */
@media(max-width:768px){
    .topo-nav{
        right:12px;
        gap:14px;
    }

    .tb-left,.tb-right,.tb-center{
        align-self:stretch;
        margin-left:0;
        margin-right:0;
    }

    .region{
        padding:clamp(16px,3vw,40px);
    }

    .void{
        min-height:40vh;
    }
}

@media(prefers-reduced-motion:reduce){
    .mobius-svg,.genus-rotate{animation:none}
    .bezier-curve{animation:none;stroke-dashoffset:0;stroke-dasharray:none}
    .fixed-circle::before{animation:none}
    .nav-dot.active{animation:none}
    .flow-in{transition:opacity 200ms ease}
}