/* historical.day - Retrofuturist Signal Archaeology */

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

:root{
    --void:#08080F;
    --abyss:#0D0D24;
    --cyan:#00E5FF;
    --magenta:#E040A0;
    --violet:#7B2FBE;
    --data-white:#E8EDF5;
    --ghost:#6B7A99;
    --gold:#F0C040;
}

html{scroll-behavior:smooth}

body{
    background:linear-gradient(180deg,var(--void) 0%,var(--abyss) 40%,#120828 70%,#1A0520 100%);
    color:var(--data-white);
    font-family:'Quicksand',sans-serif;
    font-weight:500;
    font-size:clamp(0.95rem,1.1vw,1.15rem);
    line-height:1.7;
    overflow-x:hidden;
    min-height:100vh;
}

/* Ambient radial light */
body::before{
    content:'';
    position:fixed;
    inset:0;
    background:radial-gradient(ellipse at 20% 30%,rgba(0,229,255,0.03),transparent 50%);
    pointer-events:none;
    z-index:0;
}

/* Signal noise overlay */
.signal-noise{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9998;
    opacity:0.03;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:200px 200px;
}

/* Particle canvas */
#particle-field{
    position:fixed;
    inset:0;
    width:100%;height:100%;
    pointer-events:none;
    z-index:1;
}

/* Signal Bar (header) */
.signal-bar{
    position:fixed;
    top:0;left:0;right:0;
    height:48px;
    z-index:100;
    display:flex;
    align-items:center;
    padding:0 24px;
    gap:16px;
    background:rgba(8,8,15,0.9);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--cyan);
    box-shadow:0 0 8px rgba(0,229,255,0.15);
}

.signal-domain{
    font-family:'Nunito',sans-serif;
    font-weight:700;
    font-size:0.9rem;
    color:var(--cyan);
    letter-spacing:0.02em;
    white-space:nowrap;
}

.signal-strength{
    display:flex;
    align-items:flex-end;
    gap:2px;
    height:20px;
}

.signal-strength .bar{
    width:4px;
    background:var(--cyan);
    border-radius:1px;
    animation:signalPulse 3s ease-in-out infinite;
}

.b1{height:4px;animation-delay:0s}
.b2{height:8px;animation-delay:0.2s}
.b3{height:12px;animation-delay:0.4s}
.b4{height:16px;animation-delay:0.6s}
.b5{height:20px;animation-delay:0.8s}

@keyframes signalPulse{
    0%,100%{opacity:0.3}
    50%{opacity:1}
}

.timeline-scrubber{
    flex:1;
    position:relative;
    padding:0 48px;
}

.scrubber-track{
    height:3px;
    background:var(--abyss);
    border-radius:2px;
    position:relative;
    overflow:visible;
}

.scrubber-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,var(--cyan),var(--magenta));
    border-radius:2px;
    transition:width 100ms linear;
}

.scrubber-dot{
    position:absolute;
    top:50%;
    left:0%;
    width:8px;height:8px;
    background:var(--cyan);
    border-radius:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 6px var(--cyan);
    transition:left 100ms linear;
}

.scrubber-label{
    position:absolute;
    top:8px;
    font-family:'Space Mono',monospace;
    font-size:0.6rem;
    color:var(--ghost);
    letter-spacing:0.05em;
}

.scrubber-label.left{left:48px}
.scrubber-label.right{right:48px}

/* Page layout */
.page-layout{
    display:flex;
    min-height:100vh;
    padding-top:48px;
    position:relative;
    z-index:2;
}

/* Epoch Rail */
.epoch-rail{
    width:280px;
    flex-shrink:0;
    position:sticky;
    top:48px;
    height:calc(100vh - 48px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(24px,4vh,48px);
    padding:48px 0;
    z-index:10;
}

.rail-line{
    position:absolute;
    top:80px;bottom:80px;
    left:50%;
    width:1px;
    background:var(--abyss);
    transform:translateX(-50%);
}

.epoch-marker{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    z-index:2;
    cursor:pointer;
}

.diamond{
    width:12px;height:12px;
    border:1.5px solid var(--abyss);
    transform:rotate(45deg);
    transition:border-color 300ms ease,box-shadow 300ms ease;
    flex-shrink:0;
}

.epoch-marker.active .diamond{
    border-color:var(--cyan);
    box-shadow:0 0 8px var(--cyan);
    animation:diamondPulse 2s ease-in-out infinite;
}

.epoch-marker.passed .diamond{
    border-color:var(--magenta);
    box-shadow:0 0 6px rgba(224,64,160,0.4);
}

@keyframes diamondPulse{
    0%,100%{box-shadow:0 0 8px var(--cyan)}
    50%{box-shadow:0 0 16px var(--cyan),0 0 24px rgba(0,229,255,0.2)}
}

.marker-label{
    font-family:'Space Mono',monospace;
    font-size:0.7rem;
    color:var(--ghost);
    letter-spacing:0.05em;
    white-space:nowrap;
    transition:color 300ms ease;
}

.epoch-marker.active .marker-label{
    color:var(--cyan);
}

.epoch-marker.passed .marker-label{
    color:var(--magenta);
}

/* Data Field */
.data-field{
    flex:1;
    padding:clamp(40px,6vh,80px) clamp(24px,4vw,60px);
    min-width:0;
}

/* Briefing section */
.briefing{
    margin-bottom:clamp(60px,10vh,120px);
}

.briefing-title{
    font-family:'Nunito',sans-serif;
    font-weight:800;
    font-size:clamp(2.8rem,7vw,6rem);
    letter-spacing:-0.02em;
    line-height:1.05;
    color:var(--data-white);
    margin-bottom:1.5rem;
    opacity:0;
    filter:blur(10px);
    transition:opacity 800ms ease,filter 800ms ease;
}

.briefing-title.resolved{
    opacity:1;
    filter:blur(0);
}

.briefing-line{
    font-family:'Quicksand',sans-serif;
    font-weight:500;
    font-size:clamp(1.1rem,1.8vw,1.4rem);
    color:var(--ghost);
    max-width:600px;
    line-height:1.7;
    opacity:0;
    transition:opacity 600ms ease 400ms;
}

.briefing-line.visible{
    opacity:1;
}

/* Data packets */
.data-packet{
    margin-bottom:clamp(40px,6vh,80px);
    border-left:1px solid var(--abyss);
    padding-left:clamp(16px,2vw,32px);
    position:relative;
}

.packet-header{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:12px 20px;
    margin-bottom:0;
    cursor:default;
}

.packet-date{
    font-family:'Space Mono',monospace;
    font-size:clamp(0.7rem,0.8vw,0.8rem);
    color:var(--ghost);
    letter-spacing:0.05em;
    font-variant-numeric:tabular-nums;
}

.packet-title{
    font-family:'Nunito',sans-serif;
    font-weight:800;
    font-size:clamp(1.6rem,3.5vw,2.8rem);
    letter-spacing:-0.02em;
    color:var(--data-white);
    position:relative;
}

.packet-status{
    font-family:'Space Mono',monospace;
    font-size:0.65rem;
    letter-spacing:0.08em;
    color:var(--cyan);
    border:1px solid var(--cyan);
    padding:2px 8px;
    border-radius:2px;
}

/* Packet body - progressive disclosure */
.packet-body{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:scaleY(0);
    transform-origin:top;
    transition:max-height 400ms ease-out,
               opacity 300ms ease 100ms,
               transform 300ms ease-out;
}

.data-packet.expanded .packet-body{
    max-height:800px;
    opacity:1;
    transform:scaleY(1);
    margin-top:1.5rem;
}

/* Epoch illustrations */
.epoch-illustration{
    width:100%;
    max-width:400px;
    height:auto;
    margin-bottom:1.5rem;
    opacity:0;
    transition:opacity 400ms ease 150ms;
}

.data-packet.expanded .epoch-illustration{
    opacity:1;
}

/* SVG path draw */
.draw-path{
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    transition:stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1);
}

.data-packet.expanded .draw-path{
    stroke-dashoffset:0;
}

/* Stagger draw paths */
.data-packet.expanded .draw-path:nth-child(2){transition-delay:80ms}
.data-packet.expanded .draw-path:nth-child(3){transition-delay:160ms}
.data-packet.expanded .draw-path:nth-child(4){transition-delay:240ms}
.data-packet.expanded .draw-path:nth-child(5){transition-delay:320ms}
.data-packet.expanded .draw-path:nth-child(6){transition-delay:400ms}
.data-packet.expanded .draw-path:nth-child(7){transition-delay:480ms}
.data-packet.expanded .draw-path:nth-child(8){transition-delay:560ms}
.data-packet.expanded .draw-path:nth-child(9){transition-delay:640ms}
.data-packet.expanded .draw-path:nth-child(10){transition-delay:720ms}

.packet-text{
    font-family:'Quicksand',sans-serif;
    font-weight:500;
    font-size:clamp(0.95rem,1.1vw,1.15rem);
    line-height:1.7;
    color:var(--data-white);
    max-width:560px;
    margin-bottom:1rem;
    opacity:0;
    transition:opacity 400ms ease 300ms;
}

.data-packet.expanded .packet-text{
    opacity:1;
}

/* Metadata tags */
.metadata-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    opacity:0;
    transition:opacity 400ms ease 450ms;
}

.data-packet.expanded .metadata-tags{
    opacity:1;
}

.meta-tag{
    font-family:'Space Mono',monospace;
    font-size:0.65rem;
    letter-spacing:0.05em;
    color:var(--ghost);
    border:1px solid rgba(107,122,153,0.3);
    padding:2px 8px;
    border-radius:2px;
}

/* Glitch text effect */
.glitch-text{
    position:relative;
}

.glitch-text.glitching::before{
    content:attr(data-text);
    position:absolute;
    inset:0;
    color:var(--cyan);
    clip-path:inset(0 0 0 0);
    animation:glitchDecode 400ms steps(8) forwards;
}

@keyframes glitchDecode{
    0%{opacity:1;clip-path:inset(0 0 0 0)}
    25%{clip-path:inset(20% 0 30% 0)}
    50%{clip-path:inset(50% 0 10% 0)}
    75%{clip-path:inset(10% 0 60% 0)}
    100%{opacity:0;clip-path:inset(0 0 100% 0)}
}

/* Terminal end */
.terminal-end{
    margin-top:clamp(80px,12vh,160px);
    padding:clamp(40px,6vh,80px) 0;
    text-align:center;
}

.terminal-text{
    font-family:'Space Mono',monospace;
    font-size:clamp(0.8rem,1vw,1rem);
    color:var(--cyan);
    letter-spacing:0.08em;
    margin-bottom:0.5rem;
}

.terminal-sub{
    font-family:'Quicksand',sans-serif;
    font-size:clamp(0.8rem,1vw,0.95rem);
    color:var(--ghost);
}

/* Responsive */
@media(max-width:900px){
    .epoch-rail{
        display:none;
    }
    .page-layout{
        display:block;
    }
    .data-field{
        padding:clamp(32px,4vh,60px) 20px;
    }
    .timeline-scrubber{
        display:none;
    }
    .signal-strength{
        margin-left:auto;
    }
}

@media(max-width:480px){
    .signal-bar{
        padding:0 12px;
        gap:8px;
    }
    .packet-header{
        flex-direction:column;
        gap:4px;
    }
}