/* bada.city - Sci-Fi Oceanpunk HUD Descent */

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

:root{
    --abyss:#000E1A;
    --trench:#001B33;
    --midnight:#002244;
    --cyan:#00E5CC;
    --biolum:#39FF8E;
    --magenta:#FF2D78;
    --seafoam:#D6EBE4;
    --silt:#6B8A8E;
}

html{scroll-behavior:smooth}

body{
    background:var(--abyss);
    color:var(--seafoam);
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:300;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    line-height:1.7;
    overflow-x:hidden;
}

/* HUD Frame */
.hud-frame{
    position:fixed;
    inset:24px;
    border:1px solid var(--cyan);
    z-index:20;
    pointer-events:none;
    opacity:0;
    animation:hudFlicker 400ms ease 0.5s forwards;
}

@keyframes hudFlicker{
    0%{opacity:0}
    30%{opacity:0.8}
    40%{opacity:0.2}
    60%{opacity:0.9}
    70%{opacity:0.3}
    100%{opacity:0.5}
}

.hud-corner{
    position:absolute;
    width:20px;height:20px;
    border-color:var(--cyan);
    border-style:solid;
    border-width:0;
}

.hud-tl{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.hud-tr{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.hud-bl{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.hud-br{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}

/* HUD Readouts */
.hud-readouts{
    position:fixed;
    top:32px;left:32px;
    z-index:25;
    display:flex;
    flex-direction:column;
    gap:4px;
    pointer-events:none;
}

.hud-data{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(0.65rem,0.9vw,0.85rem);
    letter-spacing:0.12em;
    color:var(--cyan);
}

.hud-signal{
    color:var(--biolum);
}

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

/* Sonar ping */
.sonar-ping{
    position:fixed;
    top:50%;left:50%;
    width:0;height:0;
    border-radius:50%;
    transform:translate(-50%,-50%);
    z-index:3;
    pointer-events:none;
}

.sonar-ping.active{
    animation:sonarPulse 3s ease-out forwards;
}

@keyframes sonarPulse{
    0%{width:0;height:0;border:2px solid rgba(0,229,204,0.3);opacity:1}
    100%{width:120vmax;height:120vmax;border:2px solid rgba(0,229,204,0);opacity:0}
}

/* Grid overlay */
.grid-overlay{
    position:fixed;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        repeating-linear-gradient(0deg,transparent,transparent 59px,rgba(107,138,142,0.03) 59px,rgba(107,138,142,0.03) 60px),
        repeating-linear-gradient(90deg,transparent,transparent 59px,rgba(107,138,142,0.03) 59px,rgba(107,138,142,0.03) 60px);
}

/* Zones */
.zone{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(60px,10vh,120px) clamp(40px,6vw,80px);
    position:relative;
    overflow:hidden;
}

.zone-1{background:var(--midnight)}
.zone-2{background:var(--trench)}
.zone-3{background:linear-gradient(180deg,var(--trench),var(--abyss))}
.zone-4{background:var(--abyss)}
.zone-5{background:var(--abyss)}
.zone-6{background:var(--abyss)}

.zone-content{
    position:relative;
    z-index:5;
    max-width:1000px;
    width:100%;
}

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

/* F-pattern layout */
.f-pattern{
    display:grid;
    grid-template-columns:60% 35%;
    gap:5%;
    align-items:start;
}

.zone-heading{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:clamp(1.5rem,4vw,3.5rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--cyan);
    line-height:1.1;
    margin-bottom:1.5rem;
}

/* Hero */
.hero-title{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:clamp(2.5rem,6vw,6rem);
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--cyan);
    line-height:1.1;
    opacity:0;
    animation:heroFade 2s ease forwards;
}

@keyframes heroFade{
    from{opacity:0;filter:blur(4px)}
    to{opacity:1;filter:blur(0)}
}

.hero-status{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(0.6rem,0.8vw,0.8rem);
    letter-spacing:0.12em;
    color:var(--biolum);
    margin-top:2rem;
    opacity:0;
    animation:fadeIn 1s ease 2.5s forwards;
}

@keyframes fadeIn{to{opacity:0.8}}

/* Body text */
.body-text{
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:300;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    line-height:1.7;
    color:var(--seafoam);
    margin-bottom:1rem;
}

.body-text.faded{
    opacity:0.85;
}

/* Data panels */
.data-panel{
    background:rgba(0,14,26,0.7);
    border:1px solid var(--cyan);
    padding:12px 16px;
    margin-bottom:12px;
    max-width:200px;
}

.float-panel{
    animation:panelDrift 30s ease-in-out infinite;
}

.fp-1{animation-delay:0s}
.fp-2{animation-delay:-8s}
.fp-3{animation-delay:-15s}
.fp-4{animation-delay:-22s}
.fp-5{animation-delay:-5s}

@keyframes panelDrift{
    0%,100%{transform:translate(0,0)}
    25%{transform:translate(8px,-6px)}
    50%{transform:translate(-4px,10px)}
    75%{transform:translate(6px,4px)}
}

.panel-label{
    display:block;
    font-family:'Share Tech Mono',monospace;
    font-size:0.65rem;
    letter-spacing:0.12em;
    color:var(--silt);
}

.panel-value{
    display:block;
    font-family:'Share Tech Mono',monospace;
    font-size:0.8rem;
    letter-spacing:0.08em;
    color:var(--cyan);
    margin-top:4px;
}

.data-panel.warning{
    border-color:var(--magenta);
}

.data-panel.warning .panel-label{
    color:var(--magenta);
}

.data-panel.warning .panel-value{
    color:var(--magenta);
}

/* Glow text */
.glow-text{
    text-shadow:0 0 20px var(--biolum),0 0 40px rgba(57,255,142,0.3);
    color:var(--biolum);
}

.glow-sub{
    text-shadow:0 0 10px rgba(0,229,204,0.3);
    max-width:50ch;
}

/* Ruin silhouettes */
.ruin-svg{
    position:absolute;
    z-index:0;
    pointer-events:none;
}

.ruin-tower{
    right:0;bottom:10%;
    width:clamp(60px,8vw,100px);
    height:auto;
}

/* Terminal text */
.terminal-text{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(0.8rem,1.2vw,1rem);
    letter-spacing:0.12em;
    color:var(--cyan);
    animation:blink 1s steps(2) infinite;
}

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

/* Zone fade-in */
.zone-content{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 800ms cubic-bezier(0.25,0.1,0.25,1),transform 800ms cubic-bezier(0.25,0.1,0.25,1);
}

.zone-content.visible{
    opacity:1;
    transform:translateY(0);
}

/* HUD flicker for deep zones */
.hud-frame.flickering{
    animation:hudDeepFlicker 3s linear infinite;
}

@keyframes hudDeepFlicker{
    0%,94%,100%{opacity:0.5}
    95%{opacity:0.15}
    97%{opacity:0.4}
}

/* Responsive */
@media(max-width:768px){
    .f-pattern{
        grid-template-columns:1fr;
        gap:24px;
    }
    .hud-frame{
        inset:12px;
    }
    .hud-readouts{
        top:18px;left:18px;
    }
    .hero-title{
        letter-spacing:0.12em;
    }
}