/* blockchain.day - Deep-Space Blockchain Control Room */

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

:root{
    --void:#050d1a;
    --midnight:#0a1628;
    --cyan:#00f0ff;
    --magenta:#ff00c8;
    --green:#39ff14;
    --white:#e0e8f0;
    --gray:#5a6a7a;
    --amber:#ffaa00;
}

html{scroll-behavior:smooth}

body{
    background:var(--void);
    color:var(--white);
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(0.85rem,1.2vw,1rem);
    line-height:1.7;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Wireframe mesh background */
.wire-mesh{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        repeating-linear-gradient(0deg,transparent,transparent 59px,rgba(10,22,40,0.6) 59px,rgba(10,22,40,0.6) 60px),
        repeating-linear-gradient(90deg,transparent,transparent 59px,rgba(10,22,40,0.6) 59px,rgba(10,22,40,0.6) 60px);
    transform:perspective(800px) rotateX(2deg);
    animation:meshDrift 120s linear infinite;
}

@keyframes meshDrift{
    from{background-position:0 0}
    to{background-position:60px 60px}
}

/* Acts */
.act{
    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,4vw,60px);
}

.act-heading{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.2rem,2.5vw,2rem);
    letter-spacing:0.02em;
    color:var(--cyan);
    margin-bottom:clamp(20px,4vh,40px);
    text-align:center;
}

/* Cell reveal */
.cell-reveal{
    opacity:0;
    transform:translateY(16px) scale(0.98);
    transition:opacity 600ms cubic-bezier(0.22,1,0.36,1),transform 600ms cubic-bezier(0.22,1,0.36,1);
}

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

/* Act 1: Genesis */
.act-genesis{
    background:var(--void);
}

.genesis-title{
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    font-size:clamp(2rem,5vw,5rem);
    letter-spacing:0.08em;
    color:var(--cyan);
    text-shadow:0 0 30px rgba(0,240,255,0.3);
    white-space:nowrap;
    overflow:hidden;
    min-height:1.2em;
}

.genesis-title .typed-char{
    opacity:0;
    display:inline-block;
}

.genesis-title .typed-char.show{
    opacity:1;
    animation:charFlash 200ms steps(2);
}

@keyframes charFlash{
    0%{color:var(--white)}
    50%{color:var(--cyan)}
    100%{color:var(--cyan)}
}

/* Act 2: The Ledger - Bento Grid */
.bento-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:2px;
    max-width:1200px;
    width:100%;
}

.bento-cell{
    background:var(--midnight);
    border:1px solid rgba(0,240,255,0.12);
    padding:clamp(16px,2vw,24px);
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
    transition:transform 300ms cubic-bezier(0.34,1.56,0.64,1),border-color 300ms ease;
    contain:layout style paint;
}

.bento-cell:hover{
    transform:scale(1);
    border-color:rgba(0,240,255,0.4);
}

.cell-6x2{grid-column:span 6;grid-row:span 2}
.cell-4x1{grid-column:span 4}
.cell-3x1{grid-column:span 3}
.cell-2x1{grid-column:span 2}

.hash-vis{
    width:48px;height:48px;
    margin-bottom:12px;
}

.cell-heading{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.2rem,2.5vw,2rem);
    letter-spacing:0.02em;
    color:var(--white);
    margin-bottom:8px;
}

.cell-body{
    color:var(--white);
    opacity:0.85;
    max-width:50ch;
}

.cell-stat-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.65rem;
    letter-spacing:0.08em;
    color:var(--gray);
    text-transform:uppercase;
    margin-bottom:4px;
}

.cell-stat{
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    letter-spacing:0.08em;
    color:var(--cyan);
}

/* Act 3: The Chain */
.act-chain{
    background:rgba(5,13,26,0.9);
}

.chain-scroll{
    width:100%;
    max-width:1200px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:20px 0;
}

.chain-track{
    display:flex;
    align-items:center;
    gap:0;
    width:max-content;
    padding:0 40px;
}

.chain-block{
    flex:0 0 280px;
    height:200px;
    background:var(--midnight);
    border:1px solid rgba(0,240,255,0.2);
    border-radius:4px;
    padding:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    scroll-snap-align:center;
    box-shadow:inset 0 0 20px rgba(0,240,255,0.05);
    transition:transform 300ms ease,box-shadow 300ms ease;
    position:relative;
}

.chain-block:hover{
    transform:scale(1.05);
    box-shadow:inset 0 0 30px rgba(0,240,255,0.1),0 0 20px rgba(0,240,255,0.1);
}

.block-number{
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    font-size:0.75rem;
    letter-spacing:0.08em;
    color:var(--cyan);
    margin-bottom:8px;
}

.block-mosaic{
    width:64px;height:64px;
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:1px;
    margin-bottom:8px;
}

.block-mosaic .mosaic-pixel{
    background:var(--midnight);
}

.block-time{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.6rem;
    color:var(--gray);
    margin-bottom:4px;
}

.block-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    color:var(--white);
    opacity:0.7;
}

.chain-link{
    flex:0 0 60px;
    height:4px;
}

.chain-link svg{
    width:60px;height:4px;
}

.flow-line{
    animation:flowDash 2s linear infinite;
}

@keyframes flowDash{
    from{stroke-dashoffset:24}
    to{stroke-dashoffset:0}
}

/* Act 4: The Network */
.act-network{
    position:relative;
    background:var(--void);
}

.network-canvas{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    z-index:0;
}

.network-overlay{
    position:relative;
    z-index:2;
    max-width:600px;
    text-align:center;
    background:rgba(5,13,26,0.85);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    padding:clamp(24px,4vw,48px);
    border:1px solid rgba(0,240,255,0.1);
}

.network-text{
    color:var(--white);
    opacity:0.85;
}

/* Act 5: The Proof */
.act-proof{
    background:var(--void);
}

.proof-block{
    max-width:700px;
    text-align:center;
    padding:clamp(32px,5vw,60px);
    border:1px solid rgba(0,240,255,0.15);
    animation:proofPulse 4s ease-in-out infinite;
}

@keyframes proofPulse{
    0%,100%{transform:scale(1);border-color:rgba(0,240,255,0.15)}
    50%{transform:scale(1.01);border-color:rgba(0,240,255,0.3)}
}

.proof-hash-vis{
    width:120px;height:120px;
    margin:0 auto 24px;
}

.proof-heading{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--white);
    margin-bottom:16px;
}

.proof-body{
    color:var(--white);
    opacity:0.85;
    max-width:50ch;
    margin:0 auto;
}

/* Act 6: The Terminal */
.act-terminal{
    background:var(--void);
    padding:clamp(40px,8vh,80px) clamp(24px,4vw,60px);
}

.terminal-frame{
    max-width:800px;
    width:100%;
    border:1px solid rgba(26,42,58,0.8);
    background:rgba(5,13,26,0.95);
    overflow:hidden;
}

.terminal-bar{
    display:flex;
    gap:6px;
    padding:8px 12px;
    background:rgba(10,22,40,0.8);
    border-bottom:1px solid rgba(26,42,58,0.5);
}

.term-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:var(--gray);
}

.terminal-body{
    padding:20px;
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.75rem,1vw,0.9rem);
    line-height:1.8;
    color:var(--green);
    min-height:200px;
    white-space:pre-wrap;
}

.terminal-body .cursor{
    display:inline-block;
    width:8px;height:1.2em;
    background:var(--green);
    animation:blink 530ms steps(2) infinite;
    vertical-align:text-bottom;
}

@keyframes blink{
    0%{opacity:1}
    50%{opacity:0}
}

/* Pulse ring on hover */
.bento-cell .pulse-ring{
    position:absolute;
    border-radius:50%;
    border:1px solid var(--cyan);
    opacity:0;
    transform:scale(0);
    animation:pulseExpand 800ms cubic-bezier(0.22,1,0.36,1) forwards;
    pointer-events:none;
}

@keyframes pulseExpand{
    to{transform:scale(3);opacity:0}
}

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

    .cell-6x2{grid-column:span 6;grid-row:span 1}
    .cell-4x1{grid-column:span 6}
    .cell-3x1{grid-column:span 3}
    .cell-2x1{grid-column:span 3}

    .chain-block{
        flex:0 0 240px;
        height:180px;
    }
}

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

    .cell-6x2,.cell-4x1,.cell-3x1,.cell-2x1{
        grid-column:1/-1;
        grid-row:span 1;
    }
}