/* ============================================
   blockchain.day - Cyberpunk Data-Viz Chronicle
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --void-black: #0a0a0f;
    --graphite-abyss: #14141f;
    --neon-mint: #00ff9f;
    --electric-magenta: #ff2d7b;
    --plasma-violet: #7b2dff;
    --terminal-silver: #b8c4d0;
    --ghost-white: #e8eaf0;
    --reactor-amber: #ffb627;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: var(--void-black);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--void-black);
    color: var(--ghost-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- Noise Texture Overlay --- */
#noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    transition: opacity 800ms ease-in;
}

#noise-overlay.visible {
    opacity: 0.03;
}

/* --- Navigation Rail --- */
#nav-rail {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.nav-dot.active {
    background: var(--neon-mint);
    opacity: 1;
    box-shadow: 0 0 8px var(--neon-mint), 0 0 20px rgba(0, 255, 159, 0.3);
}

.nav-dot:hover {
    opacity: 0.8;
}

/* --- Hero Section --- */
#hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--void-black);
}

/* Rain Particles */
#rain-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.rain {
    position: absolute;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(232, 234, 240, 0.05));
    opacity: 0;
    animation: rainFall linear infinite;
}

@keyframes rainFall {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* Node Network */
#node-network {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

#node-network.receded {
    opacity: 0.08;
    transform: scale(0.95);
}

.network-node {
    fill: transparent;
    stroke: var(--neon-mint);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 4px rgba(0, 255, 159, 0.4));
    transform-origin: center;
    animation: nodePulse ease-in-out infinite;
}

.network-line {
    stroke: var(--terminal-silver);
    stroke-opacity: 0.15;
    stroke-width: 1;
}

.network-line.flash {
    stroke-opacity: 0.8;
    transition: stroke-opacity 0.2s ease;
}

@keyframes nodePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* Hero Content */
#hero-content {
    position: relative;
    z-index: 5;
    text-align: center;
    opacity: 0;
    transition: opacity 50ms ease;
}

#hero-content.visible {
    opacity: 1;
}

#hero-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: clamp(4rem, 12vw, 11rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ghost-white);
    text-shadow:
        0 0 20px rgba(0, 255, 159, 0.4),
        0 0 60px rgba(0, 255, 159, 0.15);
    position: relative;
    line-height: 1.1;
}

/* Glitch Effect */
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    pointer-events: none;
}

.glitch::before {
    color: var(--electric-magenta);
    z-index: -1;
    animation: glitchBefore 3s infinite linear alternate-reverse;
}

.glitch::after {
    color: var(--plasma-violet);
    z-index: -2;
    animation: glitchAfter 3s infinite linear alternate-reverse;
}

@keyframes glitchBefore {
    0% { clip-path: inset(0 0 85% 0); transform: translate(2px, -1px); }
    5% { clip-path: inset(30% 0 50% 0); transform: translate(-2px, 1px); }
    10% { clip-path: inset(60% 0 20% 0); transform: translate(1px, 2px); }
    15% { clip-path: inset(0 0 85% 0); transform: translate(0); }
    20% { clip-path: inset(45% 0 35% 0); transform: translate(-1px, -2px); }
    25% { clip-path: inset(0 0 100% 0); transform: translate(0); }
    100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
}

@keyframes glitchAfter {
    0% { clip-path: inset(80% 0 0 0); transform: translate(-2px, 1px); }
    5% { clip-path: inset(10% 0 70% 0); transform: translate(2px, -1px); }
    10% { clip-path: inset(50% 0 30% 0); transform: translate(-1px, -2px); }
    15% { clip-path: inset(80% 0 0 0); transform: translate(0); }
    20% { clip-path: inset(20% 0 60% 0); transform: translate(1px, 2px); }
    25% { clip-path: inset(0 0 100% 0); transform: translate(0); }
    100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
}

/* Initial glitch burst */
.glitch.burst::before {
    animation: glitchBurstBefore 0.4s steps(4) forwards;
}

.glitch.burst::after {
    animation: glitchBurstAfter 0.4s steps(4) forwards;
}

@keyframes glitchBurstBefore {
    0% { clip-path: inset(0 0 0 0); transform: translate(4px, -2px); }
    25% { clip-path: inset(20% 0 40% 0); transform: translate(-3px, 1px); }
    50% { clip-path: inset(50% 0 10% 0); transform: translate(2px, 3px); }
    75% { clip-path: inset(10% 0 60% 0); transform: translate(-4px, -1px); }
    100% { clip-path: inset(0 0 85% 0); transform: translate(2px, -1px); }
}

@keyframes glitchBurstAfter {
    0% { clip-path: inset(0 0 0 0); transform: translate(-4px, 2px); }
    25% { clip-path: inset(40% 0 20% 0); transform: translate(3px, -1px); }
    50% { clip-path: inset(10% 0 50% 0); transform: translate(-2px, -3px); }
    75% { clip-path: inset(60% 0 10% 0); transform: translate(4px, 1px); }
    100% { clip-path: inset(80% 0 0 0); transform: translate(-2px, 1px); }
}

#hero-subtitle {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--terminal-silver);
    margin-top: 1rem;
    opacity: 0;
    transition: opacity 600ms ease-in;
}

#hero-subtitle.visible {
    opacity: 1;
}

/* Scroll Chevron */
#scroll-chevron {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    opacity: 0;
    animation: chevronPulse 2s ease-in-out infinite;
    cursor: pointer;
}

#scroll-chevron.visible {
    opacity: 1;
}

@keyframes chevronPulse {
    0%, 100% {
        opacity: 0.3;
        transform: translateX(-50%) translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(5px);
    }
}

/* --- Dashboard Section --- */
#dashboard {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    padding: 4px;
    min-height: 60vh;
}

/* Panel Base Styles */
.panel {
    background: var(--graphite-abyss);
    border: 1px solid rgba(184, 196, 208, 0.1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 400ms ease, transform 400ms ease;
}

.panel.visible {
    opacity: 1;
    transform: translateY(0);
}

.panel-header {
    padding: 16px 20px 8px;
}

.panel-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: var(--terminal-silver);
    opacity: 0.5;
    letter-spacing: 0.15em;
}

.panel-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 4vw, 3rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ghost-white);
    margin-top: 4px;
}

/* Panel A: Genesis Scroll */
.panel-a {
    grid-column: span 8;
    height: 60vh;
}

.timeline-viewport {
    position: relative;
    width: 100%;
    height: calc(100% - 80px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--neon-mint) var(--graphite-abyss);
}

.timeline-viewport::-webkit-scrollbar {
    height: 4px;
}

.timeline-viewport::-webkit-scrollbar-track {
    background: var(--graphite-abyss);
}

.timeline-viewport::-webkit-scrollbar-thumb {
    background: var(--neon-mint);
    border-radius: 2px;
}

.timeline-track {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 60px;
    gap: 0;
    position: relative;
    min-width: max-content;
}

.timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
}

.milestone {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 200px;
    padding: 0 20px;
    position: relative;
    cursor: default;
}

.milestone-node {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--electric-magenta);
    background: var(--void-black);
    box-shadow: 0 0 8px rgba(255, 45, 123, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
}

.milestone.active .milestone-node {
    transform: scale(1.3);
    box-shadow: 0 0 16px rgba(255, 45, 123, 0.7), 0 0 30px rgba(255, 45, 123, 0.3);
    background: var(--electric-magenta);
}

.milestone-annotation {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 16px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    text-align: center;
}

.milestone.active .milestone-annotation {
    opacity: 1;
}

.milestone-date {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    color: var(--reactor-amber);
    letter-spacing: 0.05em;
}

.milestone-text {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--terminal-silver);
    margin-top: 6px;
    max-width: 180px;
    line-height: 1.3;
}

/* Panel B: Consensus Monitor */
.panel-b {
    grid-column: span 4;
    height: 60vh;
}

.consensus-rings {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: calc(100% - 80px);
    padding: 10px 20px 20px;
}

.ring-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ring {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ring-inner {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--graphite-abyss);
}

.ring-pow {
    background: conic-gradient(var(--reactor-amber) var(--ring-fill, 0%), transparent var(--ring-fill, 0%));
    animation: ringFillPow 12s linear infinite;
}

.ring-pos {
    background: conic-gradient(var(--neon-mint) var(--ring-fill, 0%), transparent var(--ring-fill, 0%));
    animation: ringFillPos 6s linear infinite;
}

.ring-dpos {
    background: conic-gradient(var(--plasma-violet) var(--ring-fill, 0%), transparent var(--ring-fill, 0%));
    animation: ringFillDpos 4s linear infinite;
}

@keyframes ringFillPow {
    0% { background: conic-gradient(var(--reactor-amber) 0%, transparent 0%); }
    50% { background: conic-gradient(var(--reactor-amber) 50%, transparent 50%); }
    100% { background: conic-gradient(var(--reactor-amber) 100%, transparent 100%); }
}

@keyframes ringFillPos {
    0% { background: conic-gradient(var(--neon-mint) 0%, transparent 0%); }
    50% { background: conic-gradient(var(--neon-mint) 50%, transparent 50%); }
    100% { background: conic-gradient(var(--neon-mint) 100%, transparent 100%); }
}

@keyframes ringFillDpos {
    0% { background: conic-gradient(var(--plasma-violet) 0%, transparent 0%); }
    50% { background: conic-gradient(var(--plasma-violet) 50%, transparent 50%); }
    100% { background: conic-gradient(var(--plasma-violet) 100%, transparent 100%); }
}

.ring-label {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ghost-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ring-speed {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: var(--terminal-silver);
    opacity: 0.6;
}

/* Panel C: Hashrate Ribbon */
#hashrate {
    width: 100%;
    height: 40vh;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    padding: 4px;
}

#hashrate .panel-header {
    padding: 16px 20px 8px;
}

#hashrate-svg {
    width: 100%;
    flex: 1;
}

/* Lower Panels Section */
#lower-panels {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    padding: 4px;
    min-height: 50vh;
}

/* Panel D: The Ledger */
.panel-d {
    grid-column: span 6;
    height: 50vh;
}

.ledger-viewport {
    height: calc(100% - 80px);
    overflow-y: hidden;
    padding: 0 20px 20px;
    position: relative;
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

.ledger-viewport:hover {
    overflow-y: auto;
}

.ledger-content {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.75rem, 1.2vw, 1rem);
    color: var(--terminal-silver);
    opacity: 0.85;
    line-height: 1.8;
}

.ledger-line {
    opacity: 0;
    filter: blur(4px);
    transition: opacity 300ms ease, filter 300ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ledger-line.visible {
    opacity: 1;
    filter: blur(0);
}

.ledger-line .tx-hash {
    color: var(--neon-mint);
    opacity: 0.7;
}

.ledger-line .tx-amount {
    color: var(--reactor-amber);
}

.ledger-line .tx-time {
    color: var(--terminal-silver);
    opacity: 0.5;
}

/* Panel E: The Philosophy */
.panel-e {
    grid-column: span 6;
    height: 50vh;
}

.philosophy-content {
    height: calc(100% - 80px);
    overflow-y: auto;
    padding: 0 30px 30px;
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 196, 208, 0.2) transparent;
}

.philosophy-content::-webkit-scrollbar {
    width: 3px;
}

.philosophy-content::-webkit-scrollbar-thumb {
    background: rgba(184, 196, 208, 0.2);
}

.philosophy-content p {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.75;
    color: var(--ghost-white);
    margin-bottom: 1.5em;
}

.philosophy-content p:last-child {
    margin-bottom: 0;
}

/* SVG Dividers */
.svg-divider {
    padding: 20px 4px;
    overflow: hidden;
}

.draw-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 1.5s ease;
}

.svg-divider.drawn .draw-line {
    stroke-dashoffset: 0;
}

/* --- Block Zero Section --- */
#block-zero {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--void-black);
    transition: background 1s ease;
    padding: 40px 20px;
    position: relative;
}

#block-zero.in-view {
    background: var(--graphite-abyss);
}

#block-zero-content {
    text-align: center;
    max-width: 90vw;
}

#genesis-hash-container {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.genesis-hash {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(1rem, 3.5vw, 3rem);
    color: var(--neon-mint);
    letter-spacing: 0.05em;
    word-break: break-all;
    line-height: 1.4;
    text-shadow: 0 0 20px rgba(0, 255, 159, 0.3);
}

#hash-reveal-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent var(--reveal-progress, 0%), var(--void-black) var(--reveal-progress, 0%));
    pointer-events: none;
    transition: none;
}

#block-zero.in-view #hash-reveal-mask {
    background: linear-gradient(to right, transparent var(--reveal-progress, 0%), var(--graphite-abyss) var(--reveal-progress, 0%));
}

#genesis-message {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-size: 1.25rem;
    color: var(--ghost-white);
    margin-top: 40px;
    opacity: 0;
    transition: opacity 1s ease;
    line-height: 1.6;
}

#genesis-message.visible {
    opacity: 1;
}

/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
    #dashboard {
        display: flex;
        flex-direction: column;
    }

    .panel-a,
    .panel-b {
        width: 100%;
        height: 50vh;
    }

    #lower-panels {
        display: flex;
        flex-direction: column;
    }

    .panel-d,
    .panel-e {
        width: 100%;
        height: 50vh;
    }

    #nav-rail {
        left: 10px;
    }

    .ring {
        width: 90px;
        height: 90px;
    }

    .ring-inner {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 600px) {
    #hero-title {
        letter-spacing: 0.05em;
    }

    .milestone {
        min-width: 160px;
    }

    .genesis-hash {
        font-size: clamp(0.7rem, 4vw, 1.5rem);
    }
}