/* bcd.day - Retro-Futuristic BCD Computing Museum */

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

:root{
    --obsidian:#0A0A0A;
    --charcoal:#1A1714;
    --gold:#D4AF37;
    --bronze:#7A6F5A;
    --parchment:#C8BFA0;
    --signal-red:#8B2500;
    --vacuum:#CC7722;
    --register-blue:#4A6670;
}

html{scroll-behavior:smooth;scroll-snap-type:y proximity}

body{
    background:var(--obsidian);
    color:var(--parchment);
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.15rem);
    line-height:1.65;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* HUD Overlay */
.hud{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    z-index:100;
    pointer-events:none;
}

.hud-clock{
    position:absolute;
    top:16px;right:20px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.08em;
    color:var(--gold);
    opacity:0.5;
}

.hud-scroll-bar{
    position:absolute;
    bottom:0;left:0;right:0;
    height:2px;
    background:rgba(212,175,55,0.12);
}

.hud-scroll-fill{
    height:100%;
    width:0%;
    background:var(--gold);
    transition:width 100ms linear;
}

/* Oscilloscope grid */
.scope-grid{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(212,175,55,0.04) 39px,rgba(212,175,55,0.04) 40px),
        repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(212,175,55,0.04) 39px,rgba(212,175,55,0.04) 40px),
        repeating-linear-gradient(0deg,transparent,transparent 199px,rgba(212,175,55,0.08) 199px,rgba(212,175,55,0.08) 200px),
        repeating-linear-gradient(90deg,transparent,transparent 199px,rgba(212,175,55,0.08) 199px,rgba(212,175,55,0.08) 200px);
}

/* Diagonal sections */
.diag-section{
    min-height:100vh;
    position:relative;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(40px,8vh,80px) clamp(24px,6vw,80px);
    scroll-snap-align:start;
    overflow:hidden;
}

.section-heading{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:clamp(1.8rem,4vw,4rem);
    letter-spacing:0.03em;
    line-height:1.15;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:clamp(24px,4vh,48px);
    text-align:center;
}

/* Reveal animation */
.reveal-el{
    opacity:0;
    transform:translateY(12px);
    transition:opacity 400ms linear,transform 400ms linear;
}

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

/* Section 0: The Diagonal Slash */
.sec-slash{
    background:var(--obsidian);
}

.slash-line{
    position:absolute;
    inset:0;
    width:100%;height:100%;
}

.slash-draw{
    stroke-dasharray:2000;
    stroke-dashoffset:2000;
    animation:drawSlash 1.8s linear forwards;
}

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

.slash-content{
    position:relative;
    z-index:2;
    text-align:center;
    transform:rotate(-7deg);
}

.hero-title{
    font-family:'Chakra Petch',sans-serif;
    font-weight:700;
    font-size:clamp(4rem,12vw,14rem);
    letter-spacing:0.06em;
    line-height:0.92;
    text-transform:uppercase;
    color:var(--parchment);
    opacity:0;
    animation:fadeStep 600ms steps(4) 1.8s forwards;
}

.hero-tagline{
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:300;
    font-size:clamp(0.8rem,1.2vw,1.1rem);
    letter-spacing:0.04em;
    color:var(--bronze);
    margin-top:1rem;
    opacity:0;
    animation:fadeStep 600ms steps(4) 2.4s forwards;
}

@keyframes fadeStep{
    to{opacity:1}
}

/* Section 1: The Conversion */
.sec-conversion{
    background:var(--charcoal);
}

.bento-grid{
    display:grid;
    gap:2px;
    max-width:1000px;
    width:100%;
}

.conversion-grid{
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}

.bento-cell{
    background:rgba(26,23,20,0.9);
    border:1px solid rgba(212,175,55,0.15);
    padding:clamp(16px,2vw,24px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    transition:transform 300ms linear,border-color 300ms linear;
    cursor:default;
    position:relative;
    overflow:hidden;
}

.bento-cell:hover{
    border-color:rgba(212,175,55,0.5);
}

.cell-decimal{
    font-family:'Chakra Petch',sans-serif;
    font-weight:700;
    font-size:clamp(2rem,3vw,3rem);
    color:var(--parchment);
    line-height:1;
}

.cell-binary{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.85rem,1vw,1.05rem);
    letter-spacing:0.08em;
    color:var(--gold);
    margin-top:8px;
}

.cell-featured{
    grid-column:span 2;
    grid-row:span 2;
}

.cell-label{
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:300;
    font-size:0.7rem;
    letter-spacing:0.06em;
    color:var(--bronze);
    text-transform:uppercase;
    margin-bottom:8px;
}

.waterfall{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
}

.wf-digit{
    font-family:'Chakra Petch',sans-serif;
    font-weight:700;
    font-size:1.5rem;
    color:var(--parchment);
    opacity:0;
}

.wf-bits{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.9rem;
    color:var(--gold);
    letter-spacing:0.08em;
    opacity:0;
}

.wf-digit.show,.wf-bits.show{
    animation:stepReveal 400ms steps(4) forwards;
}

@keyframes stepReveal{
    to{opacity:1}
}

/* Section 2: The Machine Room */
.sec-machine{
    background:var(--obsidian);
}

.machine-columns{
    display:grid;
    grid-template-columns:1fr 40px 1fr;
    gap:0;
    max-width:1000px;
    width:100%;
}

.col-human p{
    margin-bottom:1.2rem;
    color:var(--parchment);
}

.col-trace{
    display:flex;
    justify-content:center;
}

.col-trace svg{
    width:2px;
    height:100%;
}

.col-machine p{
    margin-bottom:1.2rem;
    color:var(--parchment);
}

.mono-gold{
    font-family:'IBM Plex Mono',monospace;
    color:var(--gold);
    letter-spacing:0.04em;
}

/* Section 3: The Register */
.sec-register{
    background:var(--charcoal);
}

.register-grid{
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}

.reg-name{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:clamp(1rem,1.5vw,1.3rem);
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:var(--parchment);
    margin-bottom:6px;
}

.reg-example{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.85rem;
    letter-spacing:0.04em;
    color:var(--gold);
    margin-bottom:8px;
    display:block;
}

.reg-desc{
    font-size:0.85rem;
    color:var(--bronze);
    line-height:1.5;
}

/* Ripple effect */
.ripple-cell .ripple{
    position:absolute;
    border-radius:50%;
    background:rgba(212,175,55,0.25);
    transform:scale(0);
    animation:rippleExpand 600ms linear forwards;
    pointer-events:none;
}

@keyframes rippleExpand{
    to{transform:scale(4);opacity:0}
}

/* Section 4: The Legacy */
.sec-legacy{
    background:var(--obsidian);
}

.timeline{
    max-width:700px;
    width:100%;
    position:relative;
    padding-left:60px;
}

.timeline-line{
    position:absolute;
    left:24px;top:0;bottom:0;
    width:1px;
    background:var(--gold);
}

.timeline-entry{
    position:relative;
    margin-bottom:clamp(24px,4vh,40px);
    padding-left:24px;
}

.timeline-entry::before{
    content:'';
    position:absolute;
    left:-40px;top:6px;
    width:8px;height:8px;
    border:1px solid var(--register-blue);
    transform:rotate(45deg);
}

.timeline-year{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:clamp(1rem,1.5vw,1.3rem);
    letter-spacing:0.06em;
    color:var(--register-blue);
    display:block;
    margin-bottom:6px;
}

.timeline-content p{
    color:var(--parchment);
    max-width:50ch;
}

/* Section 5: The Signal */
.sec-signal{
    background:linear-gradient(to bottom,var(--obsidian),#000);
    min-height:80vh;
}

.signal-content{
    text-align:center;
}

.signal-date{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(1.5rem,4vw,3.5rem);
    letter-spacing:0.08em;
    color:var(--gold);
    margin-bottom:2rem;
    text-shadow:
        0 0 4px rgba(204,119,34,0.3),
        0 0 12px rgba(204,119,34,0.15),
        0 0 24px rgba(204,119,34,0.05);
    animation:vacuumPulse 2.5s ease-in-out infinite;
}

@keyframes vacuumPulse{
    0%,100%{opacity:0.85;text-shadow:0 0 4px rgba(204,119,34,0.3),0 0 12px rgba(204,119,34,0.15),0 0 24px rgba(204,119,34,0.05)}
    50%{opacity:1;text-shadow:0 0 8px rgba(204,119,34,0.5),0 0 20px rgba(204,119,34,0.25),0 0 40px rgba(204,119,34,0.1)}
}

.signal-domain{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:clamp(0.9rem,1.5vw,1.2rem);
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--bronze);
}

/* Responsive */
@media(max-width:768px){
    .machine-columns{
        grid-template-columns:1fr;
    }

    .col-trace{
        display:none;
    }

    .conversion-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .cell-featured{
        grid-column:span 3;
        grid-row:span 1;
    }

    .register-grid{
        grid-template-columns:1fr 1fr;
    }

    .timeline{
        padding-left:40px;
    }

    .timeline-line{
        left:12px;
    }

    .timeline-entry::before{
        left:-32px;
    }
}

@media(max-width:480px){
    .conversion-grid{
        grid-template-columns:1fr 1fr;
    }

    .cell-featured{
        grid-column:span 2;
    }

    .register-grid{
        grid-template-columns:1fr;
    }
}