/* kakuritsu.com -- glitch probability data visualization */

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

:root{
    --void:#0d0d2b;
    --deep:#12123a;
    --cyan:#00e5ff;
    --magenta:#ff2d78;
    --noise:#8a8a9e;
    --certainty:#e8eaf6;
    --amber:#ffab00;
    --violet:#3d1a78;
}

html{scroll-behavior:smooth;font-size:16px}

body{
    background:var(--void);
    color:var(--certainty);
    font-family:'Inter',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.4vw,1.15rem);
    line-height:1.7;
    overflow-x:hidden;
}

/* Nav strip */
.nav-strip{
    position:fixed;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:56px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.5rem;
    z-index:100;
    padding:1rem 0;
}

.nav-dot{
    width:10px;height:10px;
    border-radius:50%;
    background:var(--noise);
    cursor:pointer;
    position:relative;
    transition:background 0.3s,box-shadow 0.3s;
}

.nav-dot.active{
    background:var(--cyan);
    box-shadow:0 0 8px var(--cyan);
    animation:dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse{
    0%,100%{box-shadow:0 0 8px var(--cyan)}
    50%{box-shadow:0 0 16px var(--cyan)}
}

.dot-label{
    position:absolute;
    left:20px;top:50%;
    transform:translateY(-50%);
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    letter-spacing:0.04em;
    color:var(--cyan);
    white-space:nowrap;
    opacity:0;
    transition:opacity 0.2s;
    pointer-events:none;
}

.nav-dot:hover .dot-label{opacity:1}

/* Sections */
.section{
    min-height:100vh;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,4vw,4rem);
    padding-left:72px;
}

.section-heading{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.8rem,4vw,3.5rem);
    letter-spacing:-0.03em;
    color:var(--certainty);
    margin-bottom:2rem;
    text-align:center;
}

/* Sample Space (hero) */
.sample-space{
    overflow:hidden;
}

.diagonal-split{
    position:absolute;inset:0;
    display:flex;
}

.split-dark{
    flex:1;
    background:var(--void);
    clip-path:polygon(0 0,70% 0,30% 100%,0 100%);
}

.split-light{
    flex:1;
    background:var(--deep);
    position:relative;
}

.particle-field{
    position:absolute;inset:0;
    overflow:hidden;
}

.hero-text{
    position:relative;
    z-index:2;
    text-align:center;
}

.hero-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(3.5rem,9vw,8rem);
    letter-spacing:-0.03em;
    color:var(--certainty);
    line-height:1;
}

.hero-sub{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.85rem,1.5vw,1.1rem);
    color:var(--cyan);
    letter-spacing:0.04em;
    margin-top:0.75rem;
}

.bell-curve-hero{
    position:absolute;
    bottom:10%;left:50%;
    transform:translateX(-50%);
    width:clamp(300px,60vw,700px);
    z-index:1;
    opacity:0.6;
}

.bell-path{
    stroke-dasharray:900;
    stroke-dashoffset:900;
    animation:drawBell 3s ease-out 1s forwards;
}

@keyframes drawBell{
    to{stroke-dashoffset:0}
}

/* Distribution cards */
.dist-cards{
    display:flex;
    gap:1rem;
    align-items:flex-end;
    justify-content:center;
    flex-wrap:wrap;
    max-width:900px;
}

.dist-card{
    background:var(--deep);
    border:1px solid rgba(0,229,255,0.15);
    padding:1.5rem;
    flex:1;
    min-width:160px;
    max-width:200px;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.dist-card.revealed{
    opacity:1;
    transform:translateY(0);
}

.center-card{
    min-height:280px;
    border-color:var(--cyan);
    box-shadow:0 0 12px rgba(0,229,255,0.1);
}

.mid-card{min-height:220px}
.tail-card{min-height:160px;opacity:0.7}
.tail-card.revealed{opacity:0.7}

.card-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    color:var(--cyan);
    letter-spacing:0.02em;
    display:block;
    margin-bottom:0.75rem;
}

.card-body{
    font-size:0.95rem;
    color:#b8b8d0;
    line-height:1.65;
}

/* Variance */
.variance-rows{
    display:flex;
    flex-direction:column;
    gap:2rem;
    max-width:900px;
    width:100%;
}

.var-row{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.var-row.revealed{opacity:1;transform:translateY(0)}

.var-cell{
    flex:1;
    min-width:140px;
    padding:1.2rem;
}

.row-solid .var-cell{background:var(--deep);border:1px solid rgba(0,229,255,0.1)}
.row-noise .var-cell{
    background:var(--deep);
    border:1px solid rgba(255,45,120,0.15);
    position:relative;
}
.row-gradient .var-cell{
    background:linear-gradient(135deg,var(--violet),var(--deep));
    border:1px solid rgba(255,171,0,0.15);
}

.var-text{
    font-size:0.95rem;
    color:#b8b8d0;
    line-height:1.6;
}

/* Convergence */
.convergence-blocks{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    max-width:600px;
    width:100%;
}

.conv-block{
    background:var(--deep);
    border:1px solid rgba(0,229,255,0.1);
    padding:1.5rem 2rem;
    transform:translateX(var(--offset,0));
    opacity:0;
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.conv-block.revealed{
    opacity:1;
    transform:translateX(0);
}

.conv-text{
    color:#b8b8d0;
    line-height:1.7;
}

/* Entropy */
.entropy-text{
    max-width:500px;
    text-align:center;
}

.entropy-passage{
    font-size:clamp(1rem,1.3vw,1.15rem);
    color:var(--certainty);
    line-height:1.75;
}

.entropy-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    color:var(--magenta);
    letter-spacing:0.06em;
    margin-top:2rem;
}

/* Responsive */
@media(max-width:768px){
    .nav-strip{display:none}
    .section{padding-left:1.5rem}
    .dist-cards{flex-direction:column;align-items:center}
    .dist-card{max-width:100%;min-height:auto}
    .diagonal-split{display:none}
    .sample-space{background:var(--void)}
}

@media(prefers-reduced-motion:reduce){
    .bell-path{stroke-dashoffset:0;animation:none}
    .dist-card,.var-row,.conv-block{opacity:1;transform:none;transition:none}
    .nav-dot.active{animation:none}
}