/* alth.ing - Biophotonic Chronobiological Descent */

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

:root{
    --cell-black:#050A0E;
    --tissue-dark:#0B1A1F;
    --dermal:#112B33;
    --teal:#00BFA5;
    --violet:#7C4DFF;
    --amber:#FF6D00;
    --frost:#E0F2F1;
    --muted-teal:#B2DFDB;
    --soft-teal:#80CBC4;
    --arterial:#FF1744;
    --indigo:#1A237E;
    --abyss:#004D40;
}

html{scroll-behavior:smooth}

body{
    background:var(--cell-black);
    color:var(--muted-teal);
    font-family:'Newsreader',serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.25rem);
    line-height:1.72;
    overflow-x:hidden;
}

/* HUD Overlay */
.hud{
    position:fixed;
    top:16px;right:16px;
    z-index:50;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    opacity:0.8;
    transition:opacity 300ms ease;
}

.hud:hover{
    opacity:1;
}

.hud-depth{
    font-family:'DM Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--teal);
}

.hud-wave{
    width:120px;
    height:30px;
    overflow:hidden;
}

.wave-path{
    animation:waveScroll 2s linear infinite;
}

@keyframes waveScroll{
    from{transform:translateX(0)}
    to{transform:translateX(-40px)}
}

.hud-section{
    font-family:'DM Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--abyss);
}

.hud-nav{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
    margin-top:8px;
}

.hud-link{
    font-family:'DM Mono',monospace;
    font-size:0.65rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--abyss);
    text-decoration:none;
    transition:color 200ms ease;
}

.hud-link.active{
    color:var(--teal);
}

.hud-link:hover{
    color:var(--frost);
}

/* Timeline spine */
.timeline-spine{
    position:fixed;
    left:50%;
    top:0;bottom:0;
    width:2px;
    transform:translateX(-1px);
    z-index:5;
    pointer-events:none;
}

.spine-svg{
    width:100%;
    height:100%;
}

.spine-pulse{
    position:absolute;
    left:-4px;
    width:10px;height:10px;
    border-radius:50%;
    background:var(--teal);
    top:0;
    opacity:0.6;
    transition:top 100ms linear;
    box-shadow:0 0 12px var(--teal);
    animation:spinePulse 1s ease-in-out infinite;
}

@keyframes spinePulse{
    0%,100%{opacity:0.4;transform:scale(0.8)}
    50%{opacity:0.8;transform:scale(1.2)}
}

/* Depth fog vignette */
.depth-fog{
    position:fixed;
    inset:0;
    z-index:4;
    pointer-events:none;
    background:radial-gradient(ellipse at center,transparent 50%,var(--cell-black) 100%);
    transition:background 300ms ease;
}

/* Cell field canvas */
.cell-canvas{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
}

/* Main content */
main{
    position:relative;
    z-index:3;
}

/* Act base */
.act{
    min-height:120vh;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    padding:clamp(60px,10vh,120px) clamp(20px,4vw,60px);
    position:relative;
}

.act-content{
    position:relative;
    z-index:2;
}

.act-center{
    text-align:center;
    max-width:700px;
    margin:0 auto;
}

.act-left{
    max-width:38ch;
    margin-right:auto;
    margin-left:clamp(60px,10vw,200px);
}

.act-right{
    max-width:38ch;
    margin-left:auto;
    margin-right:clamp(60px,10vw,200px);
}

.act-wide{
    max-width:60ch;
}

.act-narrow{
    max-width:34ch;
}

/* Background waveform */
.bg-waveform{
    position:absolute;
    left:10%;
    width:80%;
    height:10vh;
    top:50%;
    transform:translateY(-50%);
    z-index:0;
    pointer-events:none;
}

/* Hero */
.hero-title{
    font-family:'Anybody',sans-serif;
    font-weight:700;
    font-size:clamp(2.5rem,7vw,8rem);
    color:var(--amber);
    letter-spacing:0.02em;
    line-height:1.1;
    margin-bottom:2rem;
    font-stretch:150%;
    animation:heroCompress 2s ease-out 0.5s forwards;
}

@keyframes heroCompress{
    from{font-stretch:150%;opacity:0.6;filter:blur(2px)}
    to{font-stretch:100%;opacity:1;filter:blur(0)}
}

.hero-sub{
    color:var(--soft-teal);
    font-style:italic;
}

/* Section headings */
.section-heading{
    font-family:'Anybody',sans-serif;
    font-weight:700;
    font-size:clamp(1.8rem,4vw,3.5rem);
    color:var(--frost);
    letter-spacing:0.02em;
    line-height:1.1;
    margin-bottom:1.5rem;
}

/* Body text */
.body-text{
    font-family:'Newsreader',serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.25rem);
    line-height:1.72;
    color:var(--muted-teal);
    margin-bottom:1rem;
    max-width:38ch;
}

.body-wide{
    max-width:60ch;
}

/* Fade in animation */
.fade-in{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 600ms ease,transform 600ms ease;
}

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

/* Act backgrounds */
.act-dawn{
    background:linear-gradient(180deg,var(--cell-black) 0%,rgba(255,109,0,0.06) 50%,var(--cell-black) 100%);
}

.act-circ{
    background:var(--tissue-dark);
}

.act-meta{
    background:var(--dermal);
}

.act-neural{
    background:var(--tissue-dark);
}

.act-immune{
    background:linear-gradient(180deg,var(--tissue-dark),var(--cell-black));
}

.act-repair{
    background:var(--cell-black);
}

/* Vascular branching */
.vascular-svg{
    width:clamp(200px,30vw,400px);
    height:auto;
}

.branch-path{
    stroke-dasharray:500;
    stroke-dashoffset:500;
    transition:stroke-dashoffset 3000ms cubic-bezier(0.4,0,0.2,1);
}

.branch-tree.visible .branch-path{
    stroke-dashoffset:0;
}

.bp-1{transition-delay:0ms}
.bp-2{transition-delay:200ms}
.bp-3{transition-delay:600ms}
.bp-4{transition-delay:800ms}
.bp-5{transition-delay:1200ms}
.bp-6{transition-delay:1400ms}
.bp-7{transition-delay:1800ms}
.bp-8{transition-delay:2000ms}

/* Metabolism stats */
.meta-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    max-width:260px;
}

.stat-cell{
    background:rgba(0,191,165,0.05);
    border:1px solid rgba(0,191,165,0.15);
    padding:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
}

.stat-num{
    font-family:'DM Mono',monospace;
    font-size:1.4rem;
    color:var(--teal);
    letter-spacing:0.04em;
}

.stat-label{
    font-family:'DM Mono',monospace;
    font-size:0.65rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--abyss);
}

/* Axon field */
.axon-field{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.axon{
    position:absolute;
    height:1px;
    background:var(--frost);
    opacity:0.08;
    transform-origin:left center;
}

.a1{width:200px;top:20%;left:5%;transform:rotate(15deg)}
.a2{width:150px;top:35%;right:10%;transform:rotate(-20deg)}
.a3{width:180px;top:50%;left:15%;transform:rotate(8deg)}
.a4{width:120px;top:65%;right:5%;transform:rotate(-12deg)}
.a5{width:250px;top:25%;left:40%;transform:rotate(30deg)}
.a6{width:100px;top:75%;left:25%;transform:rotate(-25deg)}
.a7{width:160px;top:45%;right:20%;transform:rotate(18deg)}
.a8{width:90px;top:80%;left:60%;transform:rotate(-8deg)}

.axon.flash{
    animation:axonFlash 200ms ease forwards;
}

@keyframes axonFlash{
    0%{opacity:0.08}
    50%{opacity:0.4}
    100%{opacity:0.08}
}

/* Final heading */
.final-heading{
    font-family:'Anybody',sans-serif;
    font-weight:700;
    font-size:clamp(2rem,5vw,5rem);
    color:var(--indigo);
    letter-spacing:0.02em;
    line-height:1.1;
    text-align:center;
    margin-bottom:2rem;
    font-stretch:150%;
}

/* Responsive */
@media(max-width:768px){
    .timeline-spine{
        left:24px;
        transform:none;
    }
    .act-left,.act-right{
        margin-left:48px;
        margin-right:20px;
        max-width:none;
    }
    .act-wide{
        max-width:none;
    }
    .hud{
        top:8px;right:8px;
    }
    .hud-nav{
        display:none;
    }
    .hud-section{
        font-size:0.6rem;
    }
    .vascular-svg{
        width:80vw;
    }
}