/* meltdown.quest - Nuclear reactor monitoring glitch experience */

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

:root{
    --reactor:#0A0A0F;
    --graphite:#1A1A24;
    --amber:#D4A017;
    --cherenkov:#0077B6;
    --core-red:#B81A1A;
    --ash:#E0DDD5;
    --fallout:#8A8A7A;
    --isotope:#39FF14;
}

html{font-size:16px;scroll-behavior:smooth}

body{
    background:var(--reactor);
    color:var(--ash);
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:clamp(1rem,1.5vw,1.25rem);
    line-height:1.75;
    overflow-x:hidden;
}

/* Scan lines */
body::after{
    content:'';
    position:fixed;inset:0;
    z-index:9999;pointer-events:none;
    background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(10,10,15,0.15) 2px,rgba(10,10,15,0.15) 4px);
}

/* HUD Nav */
.hud-nav{
    position:fixed;top:16px;right:16px;
    z-index:200;
    display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}

.geiger-readout{
    font-family:'VT323',monospace;
    font-size:clamp(0.8rem,1.3vw,1.1rem);
    color:var(--amber);
    letter-spacing:0.05em;
}

.station-dots{display:flex;gap:6px}

.station-dot{
    width:8px;height:8px;
    border-radius:50%;
    border:1px solid var(--amber);
    background:transparent;
    transition:background 0.3s;
}

.station-dot.active{
    background:var(--amber);
    box-shadow:0 0 6px var(--amber);
}

/* Stations */
.station{
    min-height:100vh;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    padding:80px 24px;
    position:relative;
}

/* Alpha */
.station-alpha{gap:2rem}

.trefoil-container{width:clamp(200px,40vw,400px)}

.trefoil{
    width:100%;height:auto;
    animation:trefoil-rotate 720s linear infinite;
}

@keyframes trefoil-rotate{to{transform:rotate(360deg)}}

.trefoil-lobe{
    stroke-dasharray:300;
    stroke-dashoffset:300;
    animation:draw-lobe 2s ease-out forwards;
}

@keyframes draw-lobe{to{stroke-dashoffset:0}}

.hero-domain{
    font-family:'Share Tech Mono',monospace;
    font-weight:400;
    font-size:clamp(3rem,8vw,7rem);
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--amber);
    text-shadow:0 0 8px rgba(212,160,23,0.4);
}

.status-readouts{
    display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;
}

.readout{
    text-align:center;
    display:flex;flex-direction:column;
}

.readout-label{
    font-family:'Share Tech Mono',monospace;
    font-size:0.8rem;
    letter-spacing:0.15em;
    color:var(--fallout);
    text-transform:uppercase;
}

.readout-value{
    font-family:'VT323',monospace;
    font-size:clamp(1.5rem,2.5vw,2rem);
    color:var(--amber);
    transition:color 0.3s;
}

.readout-value.danger{color:var(--core-red)}

.readout-unit{
    font-family:'VT323',monospace;
    font-size:0.9rem;
    color:var(--fallout);
}

/* Glitch bars */
.glitch-bar{
    width:100%;height:8px;
    background:repeating-linear-gradient(90deg,var(--amber) 0px,transparent 2px,transparent 4px,var(--amber) 6px,transparent 8px,transparent 14px,var(--core-red) 16px,transparent 18px);
    animation:glitch-shift 0.2s steps(3) infinite;
}

@keyframes glitch-shift{
    0%{transform:translateX(0)}
    33%{transform:translateX(-12px)}
    66%{transform:translateX(18px)}
    100%{transform:translateX(-5px)}
}

.gb-2{height:6px;animation-duration:0.3s}
.gb-3{height:10px}

/* Monitor panels */
.monitor-panel{
    background:var(--graphite);
    border:1px solid rgba(212,160,23,0.4);
    box-shadow:inset 0 0 20px rgba(212,160,23,0.05);
    padding:2rem;
    position:relative;
    transition:border-color 0.3s;
}

.monitor-panel:hover{border-color:var(--amber)}

.corner-mark{
    position:absolute;
    width:6px;height:6px;
    background:var(--amber);
}
.cm-tl{top:-3px;left:-3px}
.cm-tr{top:-3px;right:-3px}
.cm-bl{bottom:-3px;left:-3px}
.cm-br{bottom:-3px;right:-3px}

.station-label{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(0.8rem,1.2vw,1rem);
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--amber);
    display:block;
    margin-bottom:1.5rem;
}

/* Beta */
.station-beta{padding:60px 24px}

.monitor-grid{
    display:grid;
    grid-template-columns:1fr 8px 1fr;
    gap:24px;
    max-width:1000px;width:100%;
    align-items:start;
}

.glitch-divider{
    align-self:stretch;
    background:repeating-linear-gradient(0deg,var(--amber) 0px,transparent 2px,transparent 4px,var(--amber) 6px);
    animation:divider-pulse 2s ease-in-out infinite;
}

@keyframes divider-pulse{
    0%,100%{opacity:0.4}
    50%{opacity:1}
}

.temp-chart{width:100%;height:auto;margin-top:1rem}

.chart-line{
    stroke-dasharray:600;
    stroke-dashoffset:600;
    transition:stroke-dashoffset 2s ease;
}

.station-beta.active .chart-line{stroke-dashoffset:0}

.terminal-line{
    font-family:'VT323',monospace;
    font-size:clamp(0.8rem,1.3vw,1.1rem);
    color:var(--amber);
    margin-bottom:0.5rem;
}

.body-text{
    margin-top:1rem;
    color:var(--ash);
}

/* Gamma */
.station-gamma{
    transform:rotate(-1.5deg);
    padding:60px 24px;
}

.station-header{margin-bottom:2rem;text-align:center}

.isotope-scroll{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:1rem;
    max-width:100%;
}

.isotope-card{
    min-width:280px;
    scroll-snap-align:start;
    background:var(--graphite);
    border:1px solid rgba(212,160,23,0.3);
    padding:1.5rem;
    flex-shrink:0;
    opacity:0;transform:translateX(40px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.isotope-card.revealed{opacity:1;transform:translateX(0)}

.isotope-name{
    font-family:'Share Tech Mono',monospace;
    font-size:1rem;
    letter-spacing:0.1em;
    color:var(--amber);
    display:block;
    margin-bottom:0.5rem;
}

.iso-bar{
    width:100%;height:6px;
    background:var(--reactor);
    margin-bottom:0.5rem;
}

.iso-fill{height:100%;background:var(--isotope)}
.fill-green{background:var(--isotope)}
.fill-red{background:var(--core-red)}
.fill-amber{background:var(--amber)}
.fill-blue{background:var(--cherenkov)}

.iso-reading{
    font-family:'VT323',monospace;
    font-size:0.9rem;
    color:var(--fallout);
    display:block;
    margin-bottom:0.5rem;
}

.iso-desc{
    font-size:0.9rem;
    color:var(--ash);
    line-height:1.6;
}

/* Delta */
.station-delta{padding:80px 24px}

.timeline-container{
    position:relative;
    max-width:800px;width:100%;
}

.timeline-spine{
    position:absolute;
    left:50%;
    top:0;bottom:0;
    width:4px;
    margin-left:-2px;
}

.spine-line{
    transition:stroke-dashoffset 3s ease;
}

.station-delta.active .spine-line{stroke-dashoffset:0}

.timeline-events{
    display:flex;flex-direction:column;gap:3rem;
    padding:2rem 0;
}

.tl-event{width:45%}
.tl-left{align-self:flex-start}
.tl-right{align-self:flex-end}

.tl-panel{
    opacity:0;transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.tl-panel.revealed,.tl-event.revealed .tl-panel{opacity:1;transform:translateY(0)}

/* Using data-reveal on tl-event */
.tl-event{
    opacity:0;transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}
.tl-event.revealed{opacity:1;transform:translateY(0)}

.tl-time{
    font-family:'VT323',monospace;
    font-size:1.1rem;
    color:var(--core-red);
    display:block;
    margin-bottom:0.5rem;
}

.tl-text{
    font-size:0.95rem;
    line-height:1.6;
}

/* Epsilon */
.station-epsilon{
    background:linear-gradient(180deg,var(--reactor) 0%,#003049 60%,var(--cherenkov) 100%);
}

.aftermath-content{
    text-align:center;
    max-width:600px;
    opacity:0;transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.aftermath-content.revealed{opacity:1;transform:translateY(0)}

.aftermath-text{
    font-size:clamp(1rem,1.5vw,1.25rem);
    line-height:1.75;
    margin-bottom:2rem;
    animation:pulse-text 4s ease-in-out infinite;
}

@keyframes pulse-text{
    0%,100%{opacity:0.8}
    50%{opacity:1}
}

.aftermath-domain{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(1.5rem,3vw,2.5rem);
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--amber);
    text-shadow:0 0 12px rgba(212,160,23,0.5);
}

/* Responsive */
@media(max-width:768px){
    .monitor-grid{grid-template-columns:1fr}
    .glitch-divider{height:8px;width:100%}
    .station-gamma{transform:none}
    .tl-event{width:80%;align-self:center !important}
    .timeline-spine{display:none}
}

@media(prefers-reduced-motion:reduce){
    .trefoil{animation:none}
    .trefoil-lobe{stroke-dashoffset:0;animation:none}
    .glitch-bar{animation:none}
    .glitch-divider{animation:none;opacity:0.7}
    .isotope-card,.tl-event,.aftermath-content{opacity:1;transform:none;transition:none}
    .aftermath-text{animation:none;opacity:1}
    .chart-line{stroke-dashoffset:0;transition:none}
    .spine-line{stroke-dashoffset:0;transition:none}
    body::after{display:none}
}