/* bada.systems - Deep Ocean Cyberpunk Sonar Dashboard */

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

:root{
    --abyss:#020B14;
    --midnight:#0A1628;
    --cyan:#00E5FF;
    --teal:#00BFA5;
    --white:#E0E8F0;
    --steel:#7B8FA3;
    --amber:#FFB300;
    --crimson:#FF1744;
}

html{scroll-behavior:smooth}

body{
    background:var(--abyss);
    color:var(--white);
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:300;
    font-size:clamp(0.95rem,1.8vw,1.15rem);
    line-height:1.65;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Depth progress bar */
.depth-bar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:8px;
    z-index:100;
    background:var(--midnight);
}

.depth-bar::before{
    content:'';
    position:absolute;
    top:0;left:0;
    height:100%;
    width:var(--bar-width,0%);
    background:linear-gradient(90deg,#001F3F,var(--cyan));
    transition:width 100ms linear;
}

.depth-label{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    font-family:'Share Tech Mono',monospace;
    font-size:0.6rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--steel);
}

/* Topology grid */
.topo-grid{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(0,229,255,0.04) 39px,rgba(0,229,255,0.04) 40px),
        repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(0,229,255,0.04) 39px,rgba(0,229,255,0.04) 40px);
    animation:gridDrift 80s linear infinite;
}

@keyframes gridDrift{
    from{background-position:0 0}
    to{background-position:40px 40px}
}

/* Marine snow canvas */
.snow-canvas{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
}

/* Hero horizontal scroll */
.hero-scroll{
    height:100vh;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    position:relative;
    z-index:5;
}

.sonar-track{
    display:flex;
    height:100vh;
    width:500vw;
}

.sonar-frame{
    flex:0 0 100vw;
    height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    scroll-snap-align:start;
    position:relative;
    overflow:hidden;
}

.sonar-radial{
    width:clamp(200px,40vmin,300px);
    height:clamp(200px,40vmin,300px);
}

.ping-ring{
    opacity:0;
    animation:pingExpand 3s ease-out infinite;
}

.pr-1{animation-delay:0s}
.pr-2{animation-delay:0.6s}
.pr-3{animation-delay:1.2s}
.pr-4{animation-delay:1.8s}
.pr-5{animation-delay:2.4s}

@keyframes pingExpand{
    0%{opacity:0.8;r:10}
    100%{opacity:0}
}

.ping-label{
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    font-size:clamp(1rem,2vw,1.5rem);
    letter-spacing:0.2em;
    color:var(--cyan);
    margin-top:2rem;
}

.ping-data{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(0.65rem,1vw,0.85rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--steel);
    margin-top:0.5rem;
}

.hero-lockup{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--cyan);
    line-height:1.1;
    text-shadow:0 0 30px rgba(0,229,255,0.3);
}

/* Depth sections */
.depth-section{
    min-height:100vh;
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(40px,8vh,80px) clamp(24px,4vw,60px);
}

.sec-meso{background:rgba(10,22,40,0.5)}
.sec-bathy{background:rgba(5,12,22,0.7)}
.sec-hadal{background:rgba(2,5,10,0.9)}

/* Panel frame with border-draw */
.panel-frame{
    border:1px solid rgba(0,229,255,0.15);
    padding:clamp(24px,4vw,48px);
    max-width:1100px;
    width:100%;
    position:relative;
    opacity:0;
    transition:opacity 400ms ease 1.2s;
    animation:borderPulse 4s ease-in-out infinite;
}

.panel-frame.revealed{
    opacity:1;
}

@keyframes borderPulse{
    0%,100%{border-color:rgba(0,229,255,0.2)}
    50%{border-color:rgba(0,229,255,0.4)}
}

/* Rivets */
.rivet{
    position:absolute;
    width:6px;height:6px;
    border-radius:50%;
    background:var(--midnight);
    border:1px solid var(--steel);
}

.rivet-tl{top:-3px;left:-3px}
.rivet-tr{top:-3px;right:-3px}
.rivet-bl{bottom:-3px;left:-3px}
.rivet-br{bottom:-3px;right:-3px}

/* Panel grid (Z-pattern) */
.panel-grid{
    display:grid;
    grid-template-columns:65% 35%;
    gap:clamp(16px,3vw,32px);
}

.depth-level{
    display:block;
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    font-size:clamp(0.7rem,1vw,0.85rem);
    letter-spacing:0.2em;
    color:var(--cyan);
    margin-bottom:1rem;
}

.panel-heading{
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:500;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--white);
    margin-bottom:1rem;
    letter-spacing:0.01em;
}

.panel-body{
    color:rgba(176,196,222,0.85);
    max-width:55ch;
}

/* Sidebar readouts */
.panel-sidebar{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding-left:clamp(12px,2vw,24px);
    border-left:1px solid rgba(0,229,255,0.15);
}

.stat-readout{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.stat-label{
    font-family:'Share Tech Mono',monospace;
    font-size:0.65rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--steel);
}

.stat-value{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(0.8rem,1.2vw,1rem);
    letter-spacing:0.08em;
    color:var(--cyan);
}

.stat-value.warn{
    color:var(--amber);
    text-shadow:0 0 8px rgba(255,179,0,0.3);
}

.stat-value.crit{
    color:var(--crimson);
    text-shadow:0 0 8px rgba(255,23,68,0.3);
}

.status-ok{
    color:var(--teal);
}

/* Counter glow when animating */
.counter.counting{
    text-shadow:0 0 8px rgba(255,179,0,0.4);
    color:var(--amber);
}

/* Telemetry ticker */
.ticker{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:28px;
    z-index:50;
    background:var(--midnight);
    border-top:1px solid rgba(0,229,255,0.15);
    overflow:hidden;
    display:flex;
    align-items:center;
}

.ticker-track{
    display:flex;
    white-space:nowrap;
    animation:tickerScroll 40s linear infinite;
    font-family:'Share Tech Mono',monospace;
    font-size:0.7rem;
    letter-spacing:0.08em;
    color:var(--steel);
}

.tick-warn{
    color:var(--amber);
}

@keyframes tickerScroll{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

/* Responsive */
@media(max-width:768px){
    .panel-grid{
        grid-template-columns:1fr;
    }

    .panel-sidebar{
        border-left:none;
        border-top:1px solid rgba(0,229,255,0.15);
        padding-left:0;
        padding-top:16px;
        flex-direction:row;
        flex-wrap:wrap;
        gap:16px;
    }

    .hero-lockup{
        font-size:clamp(2rem,6vw,4rem);
    }

    .sonar-track{
        width:300vw;
    }

    .sonar-frame:nth-child(2),
    .sonar-frame:nth-child(4){
        display:none;
    }
}