/* ===== localcop.dev - Neon Precinct Dispatch Terminal ===== */

:root {
    --deep-void: #0B0E17;
    --frost-panel: #141828;
    --frost-edge: #1E2940;
    --cyber-cyan: #00FFD4;
    --siren-pink: #FF2E6C;
    --pale-slate: #C8D6E5;
    --frost-white: #EDF2F7;
    --phantom-violet: #7B61FF;
    --amber-alert: #FFBA33;
    --anim-speed: 1;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--deep-void);
    color: var(--pale-slate);
    font-family: 'Varela Round', sans-serif;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    overflow-x: hidden;
    position: relative;
}

/* ===== Rain Static Overlay ===== */
#rain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            87deg,
            transparent,
            transparent 3px,
            rgba(0, 255, 212, 0.03) 3px,
            rgba(0, 255, 212, 0.03) 4px
        ),
        repeating-linear-gradient(
            92deg,
            transparent,
            transparent 5px,
            rgba(0, 255, 212, 0.02) 5px,
            rgba(0, 255, 212, 0.02) 6px
        );
    background-size: 8px 120px, 12px 160px;
    animation: rainFall 1.5s linear infinite;
}

@keyframes rainFall {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 0 120px, 0 160px; }
}

/* ===== Glitch Interference Band ===== */
#glitch-band {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--cyber-cyan), var(--siren-pink), var(--phantom-violet));
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    animation: glitchSweep 10s ease-in-out infinite;
}

@keyframes glitchSweep {
    0%, 88%, 100% { opacity: 0; top: 0; }
    90% { opacity: 0.8; top: 30%; transform: translateX(-5px); }
    91% { opacity: 0.6; top: 31%; transform: translateX(8px); }
    92% { opacity: 0; top: 32%; transform: translateX(0); }
}

/* ===== Signal Line SVG ===== */
#signal-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5000px;
    z-index: 1;
    pointer-events: none;
}

#patrol-path {
    stroke-dasharray: 6000;
    stroke-dashoffset: 6000;
    transition: stroke-dashoffset 2s ease-out;
}

.route-node {
    opacity: 0;
    animation: nodePulse 3s ease-in-out infinite;
}

@keyframes nodePulse {
    0%, 100% { opacity: 0.4; r: 4; }
    50% { opacity: 1; r: 7; }
}

/* ===== Data Grid Texture (background) ===== */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 255, 212, 0.05) 1px, transparent 1px);
    background-size: 4px 4px;
    z-index: 0;
    pointer-events: none;
}

/* ===== Viewport Sections ===== */
.viewport-section {
    min-height: 85vh;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.content-cluster {
    margin-bottom: 15vh;
}

/* ===== Hero Section ===== */
#hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

#badge-container {
    position: relative;
    opacity: 0;
    transform: scale(0.8);
    animation: badgeFadeIn 600ms ease-out 400ms forwards;
}

@keyframes badgeFadeIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#holographic-badge {
    width: 160px;
    height: 185px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: conic-gradient(from 0deg, var(--cyber-cyan), var(--siren-pink), var(--phantom-violet), var(--cyber-cyan));
    display: flex;
    align-items: center;
    justify-content: center;
    animation: badgeRotate 30s linear infinite;
    position: relative;
}

@keyframes badgeRotate {
    to { filter: hue-rotate(360deg); }
}

.badge-inner {
    width: 148px;
    height: 173px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--deep-void);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.badge-icon {
    font-size: 2rem;
    color: var(--cyber-cyan);
}

.badge-star {
    text-shadow: 0 0 20px rgba(0, 255, 212, 0.6);
}

.badge-text {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--frost-white);
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-shadow: 0 0 20px rgba(0, 255, 212, 0.4);
}

.badge-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 255, 212, 0.15) 0%, transparent 70%);
    animation: glowPulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
}

.hero-tagline {
    text-align: center;
    opacity: 0;
    animation: fadeUp 800ms ease-out 1200ms forwards;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-tagline h1 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    color: var(--frost-white);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    text-shadow: 0 0 20px rgba(0, 255, 212, 0.4);
    line-height: 1.1;
    margin: 1rem 0;
}

.hero-desc {
    font-family: 'Varela Round', sans-serif;
    color: var(--pale-slate);
    max-width: 500px;
    margin: 0 auto;
}

/* ===== Data Labels ===== */
.data-label {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--cyber-cyan);
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 0.5rem;
}

/* ===== Frost Panels ===== */
.frost-panel {
    background: rgba(20, 24, 40, 0.6);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid transparent;
    border-image: linear-gradient(135deg, var(--cyber-cyan), var(--siren-pink)) 1;
    border-radius: 24px 8px 24px 8px;
    padding: 2rem;
    position: relative;
    max-width: 480px;
    width: 100%;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 500ms ease-out, transform 500ms ease-out, backdrop-filter 300ms ease, box-shadow 300ms ease;
}

.frost-panel.visible {
    opacity: 1;
    transform: translateY(0);
}

.frost-panel:hover {
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    box-shadow: 0 0 30px rgba(0, 255, 212, 0.15);
    border-image: linear-gradient(135deg, rgba(0, 255, 212, 0.8), rgba(255, 46, 108, 0.8)) 1;
}

/* Panel classification stripes */
.panel-classification {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cyber-cyan), var(--phantom-violet));
    border-radius: 24px 8px 0 0;
}

.panel-classification.alert {
    background: linear-gradient(90deg, var(--siren-pink), var(--amber-alert));
}

.panel-classification.violet {
    background: linear-gradient(90deg, var(--phantom-violet), var(--cyber-cyan));
}

.panel-classification.amber {
    background: linear-gradient(90deg, var(--amber-alert), var(--siren-pink));
}

/* ===== Content Cluster Layouts ===== */
.content-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    align-items: flex-start;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.content-cluster .frost-panel:nth-child(2) {
    transition-delay: calc(80ms * var(--anim-speed));
}

.content-cluster .frost-panel:nth-child(3) {
    transition-delay: calc(160ms * var(--anim-speed));
}

.content-cluster .frost-panel:nth-child(4) {
    transition-delay: calc(240ms * var(--anim-speed));
}

/* Stagger panels with offsets for organic feel */
.panel-1 { transform: translate(-20px, 40px); }
.panel-2 { transform: translate(30px, 60px); }
.panel-3 { transform: translate(-10px, 80px); }
.panel-4 { transform: translate(20px, 50px); }
.panel-5 { transform: translate(-30px, 70px); }
.panel-6 { transform: translate(15px, 45px); }
.panel-7 { transform: translate(-25px, 55px); }
.panel-8 { transform: translate(10px, 65px); }
.panel-9 { transform: translate(-15px, 50px); }
.panel-10 { transform: translate(25px, 40px); }
.panel-11 { transform: translate(-5px, 60px); }

.panel-1.visible,
.panel-2.visible,
.panel-3.visible,
.panel-4.visible,
.panel-5.visible,
.panel-6.visible,
.panel-7.visible,
.panel-8.visible,
.panel-9.visible,
.panel-10.visible,
.panel-11.visible {
    transform: translate(0, 0);
}

/* Evidence card stacking */
.evidence-card {
    border-radius: 8px 24px 8px 24px;
}

/* ===== Typography ===== */
h2 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--frost-white);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    text-shadow: 0 0 20px rgba(0, 255, 212, 0.4);
    margin-bottom: 1rem;
    line-height: 1.1;
}

h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    color: var(--frost-white);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    text-shadow: 0 0 15px rgba(0, 255, 212, 0.3);
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

p {
    color: var(--pale-slate);
    margin-bottom: 0.5rem;
}

/* ===== Radial Badge Navigation ===== */
#nav-badge {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9000;
    cursor: pointer;
}

.nav-badge-inner {
    width: 56px;
    height: 56px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, var(--cyber-cyan), var(--phantom-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: transform 300ms ease;
}

.nav-badge-inner:hover {
    transform: scale(1.1);
}

.nav-badge-icon {
    font-size: 1.2rem;
    color: var(--deep-void);
}

.nav-badge-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 255, 212, 0.3), transparent 70%);
    animation: navPulse 4s ease-in-out infinite;
    z-index: 1;
}

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

/* ===== Radial Menu ===== */
.radial-menu {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 220px;
    height: 220px;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 300ms ease, transform 300ms ease;
}

.radial-menu.active {
    pointer-events: auto;
    opacity: 1;
    transform: scale(1);
}

.radial-link {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 200ms ease;
}

.radial-link:hover {
    transform: scale(1.15);
}

.radial-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--cyber-cyan);
    letter-spacing: 0.08em;
    background: rgba(20, 24, 40, 0.85);
    backdrop-filter: blur(8px);
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(0, 255, 212, 0.4);
    border-radius: 4px;
    white-space: nowrap;
}

.radial-link:hover .radial-label {
    color: var(--frost-white);
    border-color: var(--siren-pink);
    box-shadow: 0 0 15px rgba(255, 46, 108, 0.3);
}

/* Position radial links in compass directions */
.radial-link[data-direction="N"]  { bottom: 180px; right: 10px; }
.radial-link[data-direction="NE"] { bottom: 150px; right: -70px; }
.radial-link[data-direction="E"]  { bottom: 90px; right: -80px; }
.radial-link[data-direction="SE"] { bottom: 30px; right: -80px; }
.radial-link[data-direction="S"]  { bottom: -20px; right: -50px; }

/* ===== Text Reveal Animation ===== */
.text-reveal {
    clip-path: inset(0 100% 0 0);
    animation: textReveal 800ms ease-out forwards;
}

@keyframes textReveal {
    to { clip-path: inset(0 0% 0 0); }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    #rain-overlay,
    #glitch-band {
        animation: none;
        display: none;
    }

    .route-node {
        animation: none;
        opacity: 0.6;
    }

    .badge-glow,
    .nav-badge-pulse {
        animation: none;
    }

    #holographic-badge {
        animation: none;
    }

    #badge-container {
        animation: none;
        opacity: 1;
        transform: scale(1);
    }

    .hero-tagline {
        animation: none;
        opacity: 1;
    }

    .frost-panel {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .content-cluster {
        flex-direction: column;
        align-items: center;
        padding: 2rem 1rem;
    }

    .frost-panel {
        max-width: 100%;
    }

    #holographic-badge {
        width: 120px;
        height: 140px;
    }

    .badge-inner {
        width: 108px;
        height: 128px;
    }

    .radial-link[data-direction="NE"],
    .radial-link[data-direction="E"],
    .radial-link[data-direction="SE"],
    .radial-link[data-direction="S"] {
        right: -60px;
    }
}

@media (max-width: 480px) {
    .viewport-section {
        padding: 2rem 1rem;
    }

    h2 {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }

    #nav-badge {
        bottom: 1rem;
        right: 1rem;
    }
}