/* genpatsu.io - Nuclear Control Room Monitoring Interface */

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

:root{
    --reactor-dark:#0A0E14;
    --containment-gray:#0D1117;
    --grid-trace:#1B3A2E;
    --cerenkov-blue:#2E8BC0;
    --amber-phosphor:#D4A843;
    --control-rod-red:#C0392B;
    --graphite-neutral:#3B4252;
    --coolant-steam:#A8B5C2;
}

html{scroll-behavior:smooth}

body{
    background:var(--reactor-dark);
    color:var(--coolant-steam);
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:300;
    line-height:1.72;
    letter-spacing:0.01em;
    overflow-x:hidden;
    background-image:
        repeating-linear-gradient(0deg,transparent,transparent 39.5px,rgba(27,58,46,0.04) 39.5px,rgba(27,58,46,0.04) 40px),
        repeating-linear-gradient(90deg,transparent,transparent 39.5px,rgba(27,58,46,0.04) 39.5px,rgba(27,58,46,0.04) 40px);
}

/* Sidebar Navigation */
.sidebar{
    position:fixed;
    left:0;top:0;
    width:48px;height:100vh;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:16px;
    z-index:100;
    background:rgba(10,14,20,0.85);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.sidebar-indicator{
    width:12px;height:12px;
    background:var(--graphite-neutral);
    border-radius:2px;
    transition:background 0.3s,box-shadow 0.3s;
    cursor:pointer;
}

.sidebar-indicator.active{
    background:var(--cerenkov-blue);
    box-shadow:0 0 8px var(--cerenkov-blue);
}

/* Band common */
.band{
    min-height:100vh;
    padding:60px 80px 60px 100px;
    position:relative;
    display:flex;flex-direction:column;
    justify-content:center;
}

.band-heading{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(1.2rem,2.5vw,2rem);
    font-weight:400;
    letter-spacing:0.08em;
    color:var(--amber-phosphor);
    margin-bottom:40px;
    text-transform:uppercase;
}

/* Band 1 - Reactor Status Overview */
.band-1{
    display:flex;align-items:center;justify-content:center;
    padding:0;
    overflow:hidden;
    opacity:0;
    animation:controlRoomFadeIn 2s ease-out 0.5s forwards;
}

@keyframes controlRoomFadeIn{
    from{opacity:0}
    to{opacity:1}
}

.containment-vessel{
    position:relative;
    width:min(600px,80vw);height:min(600px,80vw);
    display:flex;align-items:center;justify-content:center;
}

.vessel-svg{
    position:absolute;
    width:100%;height:100%;
}

.ring{
    fill:none;
    stroke:var(--grid-trace);
    stroke-width:1;
    stroke-dasharray:1760;
    stroke-dashoffset:1760;
    animation:drawRing 3s ease-out forwards;
}

.ring-exclusion{animation-delay:0.5s}
.ring-containment{animation-delay:1s;stroke:var(--cerenkov-blue);stroke-width:0.5}
.ring-vessel{animation-delay:1.5s;stroke:var(--amber-phosphor);stroke-width:1.5}
.ring-core{animation-delay:2s;stroke:var(--control-rod-red);stroke-width:1}

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

.gauge-arc{
    fill:none;
    stroke:var(--cerenkov-blue);
    stroke-width:3;
    stroke-linecap:round;
    stroke-dasharray:380;
    stroke-dashoffset:380;
    animation:fillArc 2s cubic-bezier(0.68,-0.55,0.265,1.55) forwards;
}
.gauge-arc-1{animation-delay:2s}
.gauge-arc-2{animation-delay:2.3s;stroke:var(--amber-phosphor)}
.gauge-arc-3{animation-delay:2.6s}

@keyframes fillArc{
    to{stroke-dashoffset:80}
}

.hero-text{
    position:relative;z-index:2;
    text-align:center;
}

.domain-name{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(3rem,8vw,7rem);
    font-weight:400;
    letter-spacing:0.08em;
    color:var(--amber-phosphor);
}

.cursor{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(3rem,8vw,7rem);
    color:var(--amber-phosphor);
    animation:blink 0.6s step-end infinite;
}

.cursor.hidden{display:none}

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

.hero-subtitle{
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:300;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    color:var(--coolant-steam);
    text-align:center;
    margin-top:20px;
    opacity:0;
    transition:opacity 0.5s ease;
}

.hero-subtitle.visible{opacity:1}

.grid-overlay{
    position:absolute;inset:0;
    pointer-events:none;
    opacity:0.03;
    background-image:
        repeating-linear-gradient(0deg,var(--grid-trace) 0,var(--grid-trace) 1px,transparent 1px,transparent 40px),
        repeating-linear-gradient(90deg,var(--grid-trace) 0,var(--grid-trace) 1px,transparent 1px,transparent 40px);
}

/* Fuel Rod Dividers */
.fuel-rod-divider{
    display:flex;justify-content:center;
    gap:8px;
    padding:20px 0;
}

.fuel-rod-divider span{
    width:3px;height:60px;
    background:linear-gradient(to bottom,var(--graphite-neutral),var(--cerenkov-blue));
    opacity:0;
    transition:opacity 0.3s ease;
}

.fuel-rod-divider.visible span{opacity:1}

/* Band 2 - Core Data Array */
.band-2{
    padding-top:80px;
}

.instrument-grid{
    display:grid;
    grid-template-columns:1fr 1.5fr 1fr;
    gap:20px;
}

.instrument-panel{
    background:var(--containment-gray);
    border:1px solid var(--grid-trace);
    border-radius:4px;
    padding:24px;
    text-align:center;
    position:relative;
    overflow:hidden;
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

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

.panel-label{
    font-family:'Share Tech Mono',monospace;
    font-size:0.85rem;
    letter-spacing:0.08em;
    color:var(--cerenkov-blue);
    margin-bottom:16px;
    text-transform:uppercase;
}

.gauge-circle{
    width:120px;height:120px;
    margin:0 auto 12px;
    display:block;
}

.gauge-bg{
    fill:none;
    stroke:var(--graphite-neutral);
    stroke-width:6;
}

.gauge-fill{
    fill:none;
    stroke-width:6;
    stroke-linecap:round;
    stroke-dasharray:314;
    stroke-dashoffset:314;
    transform:rotate(-90deg);
    transform-origin:center;
    transition:stroke-dashoffset 1.5s ease-out;
}

.gauge-fill-blue{stroke:var(--cerenkov-blue)}
.gauge-fill-amber{stroke:var(--amber-phosphor)}

.gauge-value{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(1rem,2vw,1.8rem);
    font-weight:700;
    letter-spacing:0.12em;
    color:var(--amber-phosphor);
}

.gauge-unit{
    font-family:'Share Tech Mono',monospace;
    font-size:0.75rem;
    color:var(--graphite-neutral);
    letter-spacing:0.05em;
}

.waveform-bg{
    position:absolute;
    bottom:0;left:0;right:0;
    height:40px;
    opacity:0.15;
    background:repeating-linear-gradient(
        90deg,
        transparent,transparent 4px,
        var(--grid-trace) 4px,var(--grid-trace) 5px
    );
}

/* Band 3 - Timeline */
.band-3{
    padding-top:80px;
    overflow:hidden;
}

.timeline-container{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:60px 0;
    scrollbar-width:thin;
    scrollbar-color:var(--graphite-neutral) var(--containment-gray);
}

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

.timeline-line{
    position:absolute;
    top:50%;left:0;right:0;
    height:1px;
    background:var(--graphite-neutral);
    transform:translateY(-50%);
}

.timeline-node{
    flex-shrink:0;
    width:200px;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    scroll-snap-align:center;
    cursor:pointer;
}

.node-dot{
    width:12px;height:12px;
    border-radius:50%;
    background:var(--cerenkov-blue);
    position:relative;
    z-index:2;
    animation:pulseAttention 0.8s ease-in-out infinite alternate;
}

[data-color="red"] .node-dot{
    background:var(--control-rod-red);
    animation-duration:4s;
}

@keyframes pulseAttention{
    from{transform:scale(1);box-shadow:0 0 0 0 rgba(46,139,192,0.4)}
    to{transform:scale(1.15);box-shadow:0 0 12px 4px rgba(46,139,192,0.1)}
}

[data-color="red"] .node-dot{
    animation-name:pulseRed;
}

@keyframes pulseRed{
    from{transform:scale(1);box-shadow:0 0 0 0 rgba(192,57,43,0.4)}
    to{transform:scale(1.15);box-shadow:0 0 12px 4px rgba(192,57,43,0.1)}
}

.node-card{
    position:absolute;
    top:30px;
    background:var(--containment-gray);
    border:1px solid var(--grid-trace);
    border-radius:4px;
    padding:16px;
    width:180px;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.4s ease,transform 0.4s cubic-bezier(0.22,1,0.36,1);
    pointer-events:none;
}

.timeline-node:hover .node-card,
.timeline-node.active .node-card{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.node-year{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(1.2rem,2vw,1.6rem);
    font-weight:700;
    letter-spacing:0.12em;
    color:var(--cerenkov-blue);
    display:block;
    margin-bottom:4px;
}

[data-color="red"] .node-year{
    color:var(--control-rod-red);
}

.node-title{
    font-family:'Share Tech Mono',monospace;
    font-size:0.85rem;
    letter-spacing:0.05em;
    color:var(--amber-phosphor);
    display:block;
    margin-bottom:8px;
}

.node-card p{
    font-size:clamp(0.8rem,1vw,0.95rem);
    color:var(--coolant-steam);
    line-height:1.5;
}

.timeline-hint{
    font-family:'Share Tech Mono',monospace;
    font-size:0.75rem;
    color:var(--graphite-neutral);
    text-align:center;
    letter-spacing:0.05em;
    margin-top:12px;
}

/* Band 4 - Containment Narrative */
.band-4{
    padding:0;
    min-height:150vh;
}

.band4-split{
    display:flex;
    min-height:150vh;
}

.logbook-column{
    width:40%;
    padding:80px 40px 80px 100px;
}

.logbook-entry p{
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:300;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    line-height:1.72;
    color:var(--coolant-steam);
    margin-bottom:24px;
}

.diagram-column{
    width:60%;
    position:relative;
    overflow:hidden;
}

.reactor-diagram{
    position:sticky;
    top:10vh;
    width:100%;
    height:80vh;
    padding:20px;
}

.diagram-layer{
    transition:transform 0.1s linear,opacity 0.3s,filter 0.3s;
}

.diagram-layer.separated{
    filter:blur(1px);
    opacity:0.4;
}

.diagram-label{
    font-family:'Share Tech Mono',monospace;
    font-size:11px;
    fill:var(--cerenkov-blue);
    letter-spacing:0.05em;
}

.diagram-label-sm{
    font-family:'Share Tech Mono',monospace;
    font-size:9px;
    fill:var(--coolant-steam);
    letter-spacing:0.03em;
}

/* Band 5 - Global Map */
.band-5{
    padding-top:80px;
    text-align:center;
}

.map-container{
    max-width:900px;
    margin:0 auto;
    padding:0 20px;
}

.global-map{
    width:100%;
    height:auto;
}

.continent-path{
    stroke-dasharray:2000;
    stroke-dashoffset:2000;
    transition:stroke-dashoffset 2s ease-out;
}

.continent-path.drawn{
    stroke-dashoffset:0;
}

.reactor-dot{
    opacity:0;
    transition:opacity 0.3s ease;
}

.reactor-dot.visible{
    opacity:1;
}

.reactor-dot-active{
    fill:var(--cerenkov-blue);
}

.reactor-dot-decommissioned{
    fill:var(--graphite-neutral);
}

.reactor-dot-accident{
    fill:var(--control-rod-red);
}

@keyframes pulseDot{
    0%{r:6;opacity:0.6}
    100%{r:18;opacity:0}
}

.pulse-ring{
    fill:none;
    stroke:var(--cerenkov-blue);
    stroke-width:1;
    animation:pulseDotRing 2s ease-out infinite;
}

.pulse-ring-red{
    stroke:var(--control-rod-red);
    animation-duration:4s;
}

@keyframes pulseDotRing{
    0%{r:6;opacity:0.6;stroke-width:2}
    100%{r:18;opacity:0;stroke-width:0.5}
}

.map-legend{
    display:flex;justify-content:center;
    gap:30px;
    margin-top:30px;
    font-family:'Share Tech Mono',monospace;
    font-size:0.8rem;
    letter-spacing:0.05em;
}

.legend-item{
    display:flex;align-items:center;gap:8px;
}

.legend-dot{
    width:10px;height:10px;
    border-radius:50%;
    display:inline-block;
}

.legend-active{background:var(--cerenkov-blue)}
.legend-decommissioned{background:var(--graphite-neutral)}
.legend-accident{background:var(--control-rod-red)}

.station-signoff{
    font-family:'Share Tech Mono',monospace;
    font-size:0.85rem;
    color:var(--graphite-neutral);
    letter-spacing:0.05em;
    margin-top:60px;
    padding-bottom:60px;
}

/* Responsive */
@media(max-width:768px){
    .sidebar{width:36px}
    .band{padding:40px 20px 40px 56px}
    .instrument-grid{grid-template-columns:1fr 1fr}
    .panel-lg{grid-column:span 2}
    .band4-split{flex-direction:column}
    .logbook-column{width:100%;padding:40px 20px 40px 56px}
    .diagram-column{width:100%;height:60vh}
    .reactor-diagram{position:relative;top:0;height:100%}
    .map-legend{flex-direction:column;align-items:center;gap:12px}
}