/* monopole.bar -- Cyberpunk bento-box control panel */
/* Palette: #0A0A10 (Void Black), #00FFC8 (Neon Mint), #FF00AA (Electric Magenta), #4AE8B0 (Phosphor Green), #0D1520 (Deep Navy), #FFA030 (Warning Amber) */

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

:root{
    --void:#0A0A10;
    --mint:#00FFC8;
    --magenta:#FF00AA;
    --phosphor:#4AE8B0;
    --navy:#0D1520;
    --amber:#FFA030;
    --grid-line:rgba(0,255,200,0.08);
    --grid-border:rgba(0,255,200,0.15);
    --ghost:rgba(176,240,224,0.5);
}

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

body{
    background:var(--void);
    color:var(--phosphor);
    font-family:'Fira Code','Courier New',monospace;
    font-weight:400;
    font-size:0.875rem;
    line-height:1.7;
    overflow-x:hidden;
}

/* Bento Grid */
.bento-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:0.5rem;
    max-width:1200px;
    margin:0 auto;
    padding:0.5rem;
}

/* Bento Panel */
.bento-panel{
    position:relative;
    background:var(--navy);
    border:1px solid var(--grid-border);
    padding:clamp(1rem,2vw,1.5rem);
    overflow:hidden;
    opacity:0;
    transition:opacity 400ms ease,border-color 300ms ease;
}

.bento-panel.revealed{opacity:1}

.bento-panel:hover{border-color:rgba(0,255,200,0.4)}

.panel-label{
    font-family:'Fira Code',monospace;
    font-weight:300;
    font-size:0.75rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--phosphor);
    display:block;
    margin-bottom:0.75rem;
    opacity:0.7;
}

.panel-heading{
    font-family:'Share Tech Mono',monospace;
    font-weight:400;
    font-size:clamp(1rem,2vw,1.5rem);
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--mint);
    margin-bottom:0.75rem;
}

.panel-text{
    font-family:'Fira Code',monospace;
    font-size:0.875rem;
    line-height:1.7;
    color:rgba(176,240,224,0.5);
    min-height:3rem;
}

/* Circuit traces */
.circuit-trace{
    position:absolute;
    background:var(--grid-line);
    pointer-events:none;
}

.circuit-h{
    height:1px;
    width:0;
    top:50%;
    left:0;
    transition:width 1.5s ease;
}

.bento-panel.revealed .circuit-h{width:100%}

.circuit-v{
    width:1px;
    height:0;
    top:0;
    right:2rem;
    transition:height 1.5s ease;
}

.bento-panel.revealed .circuit-v{height:100%}

/* Panel Array Sections */
.panel-array{
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem 0;
}

/* Hero Grid */
.hero-grid .panel-main{
    grid-column:1/5;
    grid-row:1/3;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:50vh;
}

.hero-domain{
    font-family:'Share Tech Mono',monospace;
    font-weight:400;
    font-size:clamp(2.5rem,7vw,6rem);
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--mint);
    text-align:center;
}

.hero-grid .panel-counter{grid-column:5/7;grid-row:1}
.hero-grid .panel-wave{grid-column:5/7;grid-row:2}
.hero-grid .panel-status{grid-column:1/3;grid-row:3}
.hero-grid .panel-temp{grid-column:3/5;grid-row:3}
.hero-grid .panel-event{grid-column:5/7;grid-row:3}

/* Counter values */
.counter-value{
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--mint);
    display:block;
    margin-top:0.5rem;
}

/* Status dot */
.status-dot{
    display:inline-block;
    width:8px;height:8px;
    border-radius:50%;
    background:var(--phosphor);
    margin-right:0.5rem;
    animation:blink 2s ease-in-out infinite;
}

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

.status-text{
    font-family:'Fira Code',monospace;
    font-size:0.875rem;
    color:var(--phosphor);
}

/* Wave animation */
.wave-svg{width:100%;height:60px}

.wave-path{
    animation:waveMove 3s linear infinite;
}

@keyframes waveMove{
    0%{d:path('M0 30 Q25 10 50 30 T100 30 T150 30 T200 30')}
    50%{d:path('M0 30 Q25 50 50 30 T100 30 T150 30 T200 30')}
    100%{d:path('M0 30 Q25 10 50 30 T100 30 T150 30 T200 30')}
}

/* Data Grid */
.data-grid .panel-wide{grid-column:1/4;grid-row:1/2}
.data-grid .panel-tall{grid-column:4/7;grid-row:1/3}
.data-grid .panel-sm:nth-child(3){grid-column:1/4;grid-row:2}
.data-grid .panel-sm:nth-child(4){grid-column:1/4;grid-row:3}

/* Signal Grid */
.signal-grid .panel-full{
    grid-column:1/7;
    grid-row:1/3;
    min-height:60vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* Detection rings */
.detection-rings{
    position:relative;
    width:200px;height:200px;
    margin:2rem auto;
}

.ring{
    position:absolute;
    border-radius:50%;
    border:1px solid var(--magenta);
    top:50%;left:50%;
    transform:translate(-50%,-50%) scale(0);
    animation:ringPulse 4s ease-out infinite;
}

.ring-1{width:40px;height:40px;animation-delay:0s}
.ring-2{width:80px;height:80px;animation-delay:0.5s}
.ring-3{width:130px;height:130px;animation-delay:1s}
.ring-4{width:190px;height:190px;animation-delay:1.5s}

@keyframes ringPulse{
    0%{transform:translate(-50%,-50%) scale(0);opacity:0.8}
    100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}

.event-data{
    display:flex;
    flex-direction:column;
    gap:0.25rem;
    margin-top:1rem;
}

.data-line{
    font-family:'Fira Code',monospace;
    font-size:0.75rem;
    color:var(--ghost);
    letter-spacing:0.03em;
}

/* Closing */
.panel-closing{min-height:60vh}

.closing-grid .panel-final{
    grid-column:2/6;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.25rem;
}

.final-message{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(1rem,2vw,1.5rem);
    color:var(--amber);
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.typing-cursor{
    font-family:'Share Tech Mono',monospace;
    color:var(--amber);
    animation:cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink{
    0%,50%{opacity:1}
    51%,100%{opacity:0}
}

/* Glitch effect */
.glitch-active{
    animation:glitch 150ms steps(3) forwards;
}

@keyframes glitch{
    0%{transform:translate(3px,0);filter:hue-rotate(90deg)}
    33%{transform:translate(-3px,1px)}
    66%{transform:translate(1px,-1px);filter:hue-rotate(0deg)}
    100%{transform:translate(0)}
}

/* Responsive */
@media(max-width:768px){
    .bento-grid{grid-template-columns:repeat(2,1fr)}
    .hero-grid .panel-main{grid-column:1/-1;grid-row:auto;min-height:30vh}
    .hero-grid .panel-counter,
    .hero-grid .panel-wave,
    .hero-grid .panel-status,
    .hero-grid .panel-temp,
    .hero-grid .panel-event{grid-column:auto;grid-row:auto}
    .data-grid .panel-wide,
    .data-grid .panel-tall,
    .data-grid .panel-sm{grid-column:1/-1;grid-row:auto}
    .signal-grid .panel-full{grid-column:1/-1}
    .closing-grid .panel-final{grid-column:1/-1}
}

@media(prefers-reduced-motion:reduce){
    .bento-panel{opacity:1;transition:none}
    .ring{animation:none;transform:translate(-50%,-50%) scale(1);opacity:0.3}
    .status-dot{animation:none}
    .wave-path{animation:none}
    .typing-cursor{animation:none;opacity:1}
    .circuit-h{width:100%;transition:none}
    .circuit-v{height:100%;transition:none}
}