/* continua.st - Kinetic Minimalism on the Real Number Line */

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

:root{
    --void:#0B0E1A;
    --surface:#151B2E;
    --arctic:#7EB8DA;
    --aurora:#A3D5C9;
    --chalk:#E8ECF1;
    --silver:#8A94A6;
    --amber:#D4A843;
}

html{scroll-behavior:auto}

body{
    background:var(--void);
    color:var(--chalk);
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.875rem,1.2vw,1.125rem);
    line-height:1.7;
    letter-spacing:0.01em;
    overflow-x:auto;
    overflow-y:hidden;
    height:100vh;
}

/* Infinite Line */
.infinite-line{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    z-index:2;
    pointer-events:none;
}

.infinite-line line{
    filter:drop-shadow(0 0 6px rgba(126,184,218,0.3));
}

/* Progress bar */
.progress-bar{
    position:fixed;
    bottom:0;left:0;
    width:100%;height:2px;
    z-index:50;
    background:var(--void);
}

.progress-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,var(--void),var(--arctic));
    transition:width 60ms ease;
}

/* Ribbon */
.ribbon{
    display:flex;
    height:100vh;
    width:max-content;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
}

/* Intervals */
.interval{
    position:relative;
    height:100vh;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    scroll-snap-align:start;
}

.interval-0{width:100vw;align-items:center;padding:0 clamp(32px,6vw,80px)}
.interval-1{width:180vw;padding:0 clamp(40px,6vw,100px)}
.interval-2{width:160vw;padding:0 clamp(40px,6vw,100px)}
.interval-3{width:170vw;padding:0 clamp(40px,6vw,100px)}
.interval-4{width:150vw;padding:0 clamp(40px,6vw,100px)}
.interval-5{width:160vw;padding:0 clamp(40px,6vw,100px)}
.interval-6{width:100vw;align-items:center}
.interval-end{width:30vw}

.limit-point{
    width:100vw;
    align-items:center;
    justify-content:center;
}

/* Fibers - positioned relative to the infinite line at 61.8% */
.fiber{
    position:relative;
    max-width:55ch;
}

.fiber-hero{
    text-align:center;
    position:relative;
    top:-8vh;
}

.fiber-above{
    position:absolute;
    top:12%;
}

.fiber-below{
    position:absolute;
    top:66%;
}

.fiber-straddle{
    position:absolute;
    top:30%;
}

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

/* Hero */
.hero-text{
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:clamp(4rem,12vw,14rem);
    letter-spacing:0.02em;
    line-height:1.15;
    color:var(--chalk);
}

.hero-text .hchar{
    display:inline-block;
    opacity:0;
    transform:translateY(-20px);
}

.hero-text .hchar.show{
    opacity:1;
    transform:translateY(0);
    transition:opacity 500ms cubic-bezier(0.34,1.56,0.64,1),
               transform 500ms cubic-bezier(0.34,1.56,0.64,1);
}

.hero-sub{
    margin-top:1.5rem;
    color:var(--silver);
    font-size:clamp(0.875rem,1.2vw,1.125rem);
    opacity:0;
    animation:fadeIn 2s ease 3s forwards;
}

@keyframes fadeIn{to{opacity:1}}

/* Scroll arrow */
.scroll-arrow{
    position:absolute;
    right:clamp(24px,4vw,60px);
    top:61.8%;
    transform:translateY(-50%);
    opacity:0;
    animation:fadeIn 1s ease 5s forwards,arrowPulse 2s ease-in-out 5s infinite;
}

@keyframes arrowPulse{
    0%,100%{transform:translateY(-50%) translateX(0)}
    50%{transform:translateY(-50%) translateX(8px)}
}

/* Display text */
.display-statement{
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:clamp(2rem,6vw,6rem);
    letter-spacing:0.02em;
    line-height:1.15;
    color:var(--chalk);
    margin-bottom:1.5rem;
}

.body-passage{
    max-width:50ch;
    color:var(--silver);
    line-height:1.7;
}

/* Bracket backgrounds */
.bracket-bg{
    position:absolute;
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:30vh;
    color:var(--silver);
    opacity:0.06;
    line-height:1;
    pointer-events:none;
    user-select:none;
}

.bracket-open{left:3%;top:15%}
.bracket-close{right:3%;top:15%}

/* Number sequences */
.num-sequence{
    position:absolute;
    bottom:8%;
    left:5%;
    font-family:'JetBrains Mono',monospace;
    font-weight:300;
    font-size:clamp(0.75rem,1vw,1rem);
    letter-spacing:0.05em;
    color:var(--surface);
    white-space:nowrap;
    pointer-events:none;
    user-select:none;
}

/* Point clouds */
.point-cloud{
    position:relative;
    width:200px;height:200px;
}

.pc-dot{
    position:absolute;
    border-radius:50%;
    background:var(--aurora);
    transition:all 4s cubic-bezier(0.33,1,0.68,1);
}

.pc-dot.converged{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%);
    background:var(--amber);
    opacity:0.8 !important;
}

/* Reveal horizontal */
.reveal-h{
    opacity:0;
    transform:translateX(40px);
    transition:opacity 800ms cubic-bezier(0.25,0.1,0.25,1),
               transform 800ms cubic-bezier(0.25,0.1,0.25,1);
}

.reveal-h.visible{
    opacity:1;
    transform:translateX(0);
}

/* Interval 6: Limit */
.limit-statement{
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    font-size:clamp(2.5rem,8vw,8rem);
    letter-spacing:0.02em;
    line-height:1.15;
    color:var(--chalk);
    margin-bottom:2rem;
}

.counter-sequence{
    font-family:'JetBrains Mono',monospace;
    font-weight:300;
    font-size:clamp(1rem,2vw,1.5rem);
    letter-spacing:0.05em;
    color:var(--arctic);
    margin-bottom:3rem;
    min-height:2em;
}

.counter-val{
    display:inline-block;
    animation:counterFade 1.5s ease-in-out;
}

@keyframes counterFade{
    0%{opacity:0;transform:translateY(10px)}
    20%{opacity:1;transform:translateY(0)}
    80%{opacity:1;transform:translateY(0)}
    100%{opacity:0.3;transform:translateY(-5px)}
}

.amber-mark{
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:clamp(1rem,2vw,1.5rem);
    color:var(--amber);
    letter-spacing:0.02em;
    text-shadow:0 0 20px rgba(212,168,67,0.3);
}

/* Responsive */
@media(max-width:768px){
    body{
        overflow-x:hidden;
        overflow-y:auto;
        height:auto;
    }

    .ribbon{
        flex-direction:column;
        width:100%;
        height:auto;
        scroll-snap-type:y proximity;
    }

    .interval{
        width:100% !important;
        height:auto;
        min-height:100vh;
        padding:clamp(24px,5vw,40px) !important;
        scroll-snap-align:start;
    }

    .limit-point{min-height:50vh}
    .interval-end{min-height:20vh}

    .fiber-above,.fiber-below,.fiber-straddle{
        position:relative;
        top:auto;
        margin-bottom:3rem;
    }

    .infinite-line{display:none}

    .progress-bar{
        left:0;bottom:0;
        width:100%;
    }

    .bracket-bg{font-size:15vh}

    .display-statement{font-size:clamp(1.5rem,5vw,3rem)}
}

@media(prefers-reduced-motion:reduce){
    .hero-text .hchar{opacity:1;transform:none;transition:none}
    .scroll-arrow{animation:fadeIn 1s ease 2s forwards}
    .reveal-h{opacity:1;transform:none;transition:none}
    .counter-val{animation:none;opacity:1}
}