/**
 * EpochEarth v2.1 - Styles
 * Interactive Earth Events Visualization
 * Copyright 2025 - Data: USGS, NOAA NCEI
 */

/* ============================================
   FONTS & RESET
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

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

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Rajdhani', sans-serif;
    background: #000;
}

#root {
    width: 100%;
    height: 100%;
    position: relative;
}

/* ============================================
   HUD CORNER BRACKETS
   ============================================ */

.hud-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border-color: rgba(6, 182, 212, 0.6);
}

.hud-corner.top-left {
    top: 0;
    left: 0;
    border-top: 2px solid;
    border-left: 2px solid;
}

.hud-corner.top-right {
    top: 0;
    right: 0;
    border-top: 2px solid;
    border-right: 2px solid;
}

.hud-corner.bottom-left {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid;
    border-left: 2px solid;
}

.hud-corner.bottom-right {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid;
    border-right: 2px solid;
}

/* ============================================
   GLASSMORPHIC PANELS
   ============================================ */

.glass-panel {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(6, 182, 212, 0.3);
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(6, 182, 212, 0.05);
}

/* ============================================
   HEX CUTOUT CORNERS
   ============================================ */

.hex-corner {
    clip-path: polygon(
        0 8px, 8px 0, 
        calc(100% - 8px) 0, 100% 8px,
        100% calc(100% - 8px), calc(100% - 8px) 100%,
        8px 100%, 0 calc(100% - 8px)
    );
}

/* ============================================
   GLOWING TEXT
   ============================================ */

.glow-text {
    text-shadow: 
        0 0 10px rgba(6, 182, 212, 0.8),
        0 0 20px rgba(6, 182, 212, 0.4),
        0 0 30px rgba(6, 182, 212, 0.2);
}

/* ============================================
   SCAN LINE EFFECT
   ============================================ */

@keyframes scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.scanline {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(6, 182, 212, 0.3),
        transparent
    );
    animation: scan 8s linear infinite;
    pointer-events: none;
}

/* ============================================
   PULSE ANIMATION
   ============================================ */

@keyframes pulse-glow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(6, 182, 212, 0.5),
                   0 0 10px rgba(6, 182, 212, 0.3);
    }
    50% { 
        box-shadow: 0 0 20px rgba(6, 182, 212, 0.8),
                   0 0 30px rgba(6, 182, 212, 0.5);
    }
}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #06b6d4, #3b82f6);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #22d3ee, #60a5fa);
}

/* ============================================
   RANGE SLIDER STYLING
   ============================================ */

input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

/* WebKit/Blink */
input[type="range"]::-webkit-slider-track {
    background: linear-gradient(
        90deg,
        rgba(6, 182, 212, 0.2),
        rgba(6, 182, 212, 0.4)
    );
    height: 4px;
    border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #06b6d4;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.8), 0 0 0 2px #0f172a;
    pointer-events: auto;
    position: relative;
    z-index: 10;
    margin-top: -7px;
}

input[type="range"]::-webkit-slider-thumb:hover {
    background: #22d3ee;
    box-shadow: 0 0 15px rgba(34, 211, 238, 1), 0 0 0 2px #0f172a;
    transform: scale(1.1);
}

input[type="range"]::-webkit-slider-thumb:active {
    background: #06b6d4;
    box-shadow: 0 0 20px rgba(6, 182, 212, 1), 0 0 0 3px #0f172a;
}

/* Firefox */
input[type="range"]::-moz-range-track {
    background: linear-gradient(
        90deg,
        rgba(6, 182, 212, 0.2),
        rgba(6, 182, 212, 0.4)
    );
    height: 4px;
    border-radius: 2px;
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #06b6d4;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.8), 0 0 0 2px #0f172a;
    pointer-events: auto;
    border: none;
}

input[type="range"]::-moz-range-thumb:hover {
    background: #22d3ee;
    box-shadow: 0 0 15px rgba(34, 211, 238, 1), 0 0 0 2px #0f172a;
    transform: scale(1.1);
}

input[type="range"]::-moz-range-thumb:active {
    background: #06b6d4;
    box-shadow: 0 0 20px rgba(6, 182, 212, 1), 0 0 0 3px #0f172a;
}

/* ============================================
   BUTTON HOVER EFFECTS
   ============================================ */

.hud-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.hud-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(6, 182, 212, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.hud-button:hover::before {
    width: 300px;
    height: 300px;
}

.hud-button:hover {
    border-color: rgba(6, 182, 212, 0.8);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-up {
    animation: slideUp 0.4s ease-out;
}

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

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 768px) {
    .hud-corner {
        width: 20px;
        height: 20px;
    }
    
    .glass-panel {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    
    .hud-corner {
        display: none;
    }
}

/* ============================================
   SPACE BACKGROUND - PERFORMANT STATIC STARS
   ============================================ */

/* Pure CSS starfield using box-shadow - zero performance impact */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    pointer-events: none;
    box-shadow:
        10vw 20vh 1px 0px rgba(255, 255, 255, 0.1),
        85vw 15vh 1px 0px rgba(255, 255, 255, 0.15),
        30vw 70vh 1px 0px rgba(255, 255, 255, 0.08),
        65vw 45vh 1px 0px rgba(255, 255, 255, 0.12),
        20vw 80vh 1px 0px rgba(255, 255, 255, 0.1),
        90vw 60vh 1px 0px rgba(255, 255, 255, 0.09),
        50vw 30vh 1px 0px rgba(255, 255, 255, 0.11),
        75vw 85vh 1px 0px rgba(255, 255, 255, 0.08),
        15vw 50vh 1px 0px rgba(255, 255, 255, 0.13),
        40vw 10vh 1px 0px rgba(255, 255, 255, 0.1),
        95vw 75vh 1px 0px rgba(255, 255, 255, 0.09),
        25vw 40vh 1px 0px rgba(255, 255, 255, 0.12),
        60vw 90vh 1px 0px rgba(255, 255, 255, 0.08),
        80vw 25vh 1px 0px rgba(255, 255, 255, 0.14),
        35vw 65vh 1px 0px rgba(255, 255, 255, 0.1),
        5vw 55vh 1px 0px rgba(255, 255, 255, 0.09),
        70vw 35vh 1px 0px rgba(255, 255, 255, 0.11),
        45vw 95vh 1px 0px rgba(255, 255, 255, 0.08),
        55vw 5vh 1px 0px rgba(255, 255, 255, 0.13),
        12vw 72vh 1px 0px rgba(255, 255, 255, 0.1);
    z-index: 0;
}