/* monopole.city -- Futuristic-cutting-edge parallax HUD */
/* Palette: #0C1018 (City Dark), #C0D0E8 (Chrome), #4A5A70 (Steel), #2090FF (Plasma Blue), #F0F4FA (White Light), #060810 (Deep Space) */

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

:root{
    --city:#0C1018;
    --chrome:#C0D0E8;
    --steel:#4A5A70;
    --plasma:#2090FF;
    --white:#F0F4FA;
    --space:#060810;
    --grid-line:rgba(32,144,255,0.08);
    --hologram:rgba(32,144,255,0.15);
}

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

body{
    background:var(--city);
    color:var(--chrome);
    font-family:'Inter',sans-serif;
    font-weight:400;
    font-size:0.9375rem;
    line-height:1.75;
    overflow-x:hidden;
    perspective:2px;
}

/* Chrome atmosphere layer */
.chrome-layer{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        conic-gradient(from 45deg at 30% 40%,var(--space),var(--city),rgba(32,144,255,0.03),var(--city)),
        conic-gradient(from 200deg at 70% 60%,var(--city),rgba(192,208,232,0.02),var(--space));
    animation:chromeShift 60s linear infinite;
}

@keyframes chromeShift{
    from{filter:hue-rotate(0deg)}
    to{filter:hue-rotate(360deg)}
}

/* Grid layer */
.grid-layer{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        repeating-linear-gradient(0deg,transparent,transparent 79px,var(--grid-line) 79px,var(--grid-line) 80px),
        repeating-linear-gradient(90deg,transparent,transparent 79px,var(--grid-line) 79px,var(--grid-line) 80px);
    opacity:0.5;
}

/* Districts */
.district{
    position:relative;
    z-index:2;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,4vw,4rem);
    gap:2rem;
}

/* HUD Panels */
.hud-panel{
    position:relative;
    max-width:700px;
    width:100%;
    padding:clamp(2rem,3vw,3rem);
}

.content-panel{
    background:rgba(18,22,32,0.85);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(32,144,255,0.2);
}

/* HUD Brackets */
.hud-bracket{
    position:absolute;
    width:16px;height:16px;
    opacity:0.6;
    transition:opacity 300ms ease;
}

.bracket-tl{top:-1px;left:-1px}
.bracket-tr{top:-1px;right:-1px}
.bracket-bl{bottom:-1px;left:-1px}
.bracket-br{bottom:-1px;right:-1px}

.hud-panel:hover .hud-bracket{opacity:1}

/* Panel labels */
.panel-label{
    font-family:'Inter',sans-serif;
    font-weight:500;
    font-size:0.6875rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--steel);
    display:block;
    margin-bottom:1rem;
}

/* Hero */
.approach-panel{
    text-align:center;
    background:none;
    border:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.hero-title{
    font-family:'Share Tech Mono',monospace;
    font-weight:400;
    font-size:clamp(3rem,8vw,8rem);
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--white);
    line-height:1;
}

.tracking-line{
    width:0;
    height:1px;
    background:var(--plasma);
    margin:1.5rem auto 0;
    opacity:0.4;
    transition:width 1.5s ease;
}

.approach-panel.active .tracking-line{
    width:100%;
}

/* District headings */
.district-heading{
    font-family:'Share Tech Mono',monospace;
    font-weight:400;
    font-size:clamp(1.25rem,3vw,2rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--white);
    margin-bottom:1rem;
}

.district-body{
    font-family:'Inter',sans-serif;
    font-weight:400;
    font-size:0.9375rem;
    line-height:1.75;
    color:var(--chrome);
    max-width:50ch;
}

/* Status indicators */
.status-indicators{
    display:flex;
    gap:1.5rem;
    position:relative;
    z-index:3;
}

.status-pip{
    width:4px;height:4px;
    border-radius:50%;
    background:var(--plasma);
    opacity:0.3;
    animation:pipPulse 3s ease-in-out infinite;
}

.status-pip:nth-child(2){animation-delay:0.5s}
.status-pip:nth-child(3){animation-delay:1s}
.status-pip:nth-child(4){animation-delay:1.5s}
.status-pip:nth-child(5){animation-delay:2s}

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

/* Grid visible section */
.grid-visible{
    position:absolute;
    inset:0;
    background:
        repeating-linear-gradient(0deg,transparent,transparent 59px,rgba(32,144,255,0.04) 59px,rgba(32,144,255,0.04) 60px),
        repeating-linear-gradient(90deg,transparent,transparent 59px,rgba(32,144,255,0.04) 59px,rgba(32,144,255,0.04) 60px);
    pointer-events:none;
}

/* Scale-hover */
.content-panel{
    transition:transform 300ms ease,box-shadow 300ms ease;
}

.content-panel:hover{
    transform:scale(1.03);
    box-shadow:0 0 30px rgba(180,200,220,0.08);
}

/* Horizon fading to deep space */
.district-horizon{
    background:linear-gradient(to bottom,transparent 0%,var(--space) 100%);
}

/* Reveal animation */
[data-reveal]{
    opacity:0;
    transform:translateY(16px);
    transition:opacity 600ms ease,transform 600ms ease;
}

[data-reveal].revealed{
    opacity:1;
    transform:translateY(0);
}

/* Responsive */
@media(max-width:768px){
    .hero-title{letter-spacing:0.02em}
    .hud-panel{padding:1.5rem}
    .grid-layer{display:none}
}

@media(prefers-reduced-motion:reduce){
    [data-reveal]{opacity:1;transform:none;transition:none}
    .chrome-layer{animation:none}
    .status-pip{animation:none;opacity:0.5}
    .tracking-line{width:100%;transition:none}
    .content-panel{transition:none}
}