/* style.css - 核心进化 3D科技风 */

/* 基础重置与字体设定 */
body {
    background-color: #030303; /* 极深邃的黑 */
    color: #F8FAFC;
}

.font-exo {
    font-family: 'Exo', sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

.font-sans {
    font-family: 'Noto Sans SC', 'Inter', sans-serif;
}

/* 玻璃拟物化面板 (HUD Panels) */
.hud-panel {
    background: rgba(10, 15, 25, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* 科技发光文字 */
.tech-text-shadow {
    text-shadow: 0 0 15px currentColor;
}

/* 渐显动画 */
.fade-in {
    animation: fadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(10px);
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-spin-slow {
    animation: spin 6s linear infinite;
}

/* 自定义滚动条 (针对弹窗和数据列表) */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.6);
    border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.9);
}

.pointer-events-auto {
    pointer-events: auto;
}

/* --- Weather Effect Animations --- */

/* Base Image Filter Transition */
#scene-img {
    transition: filter 1s ease-in-out, transform 0.1s;
}

/* Shake Animations */
@keyframes shake-15 {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes shake-25 {
    0% { transform: translate(2px, 2px) rotate(0deg) scale(1.05); }
    10% { transform: translate(-3px, -4px) rotate(-2deg) scale(1.05); }
    20% { transform: translate(-6px, 0px) rotate(2deg) scale(1.05); }
    30% { transform: translate(6px, 4px) rotate(0deg) scale(1.05); }
    40% { transform: translate(3px, -2px) rotate(2deg) scale(1.05); }
    50% { transform: translate(-3px, 4px) rotate(-2deg) scale(1.05); }
    60% { transform: translate(-6px, 2px) rotate(0deg) scale(1.05); }
    70% { transform: translate(6px, 2px) rotate(-2deg) scale(1.05); }
    80% { transform: translate(-3px, -2px) rotate(2deg) scale(1.05); }
    90% { transform: translate(3px, 4px) rotate(0deg) scale(1.05); }
    100% { transform: translate(3px, -4px) rotate(-2deg) scale(1.05); }
}

/* Level 5 Effects */
.weather-5 #scene-img {
    filter: brightness(1.0) contrast(1.05);
}
.weather-5 #weather-effects {
    background: linear-gradient(to bottom, rgba(100,100,100,0.05), rgba(100,100,100,0));
    animation: rain-fall 0.8s linear infinite;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    background-size: 2px 20px;
    opacity: 0.3;
}

/* Level 15 Effects */
.weather-15 #scene-img {
    filter: brightness(0.8) contrast(1.1) sepia(0.1) hue-rotate(180deg);
    animation: shake-15 0.5s infinite;
}
.weather-15 #weather-effects {
    background-color: rgba(20, 30, 40, 0.2);
    background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    background-size: 3px 40px;
    animation: rain-fall-fast 0.3s linear infinite;
    transform: rotate(20deg) scale(1.5);
    opacity: 0.5;
}

/* Level 25 Effects */
.weather-25 #scene-img {
    filter: brightness(0.6) contrast(1.2) sepia(0.3) hue-rotate(-20deg) saturate(1.2);
    animation: shake-25 0.2s infinite;
}
.weather-25 #weather-effects {
    background-color: rgba(10, 0, 0, 0.4);
    background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    background-size: 5px 60px;
    animation: rain-fall-extreme 0.1s linear infinite;
    transform: rotate(35deg) scale(2);
    opacity: 0.8;
}

/* Lightning flash for level 25 */
.weather-25::after {
    content: '';
    position: absolute;
    inset: 0;
    background: white;
    opacity: 0;
    pointer-events: none;
    animation: lightning 3s infinite;
}

@keyframes rain-fall {
    0% { background-position: 0 0; }
    100% { background-position: -20px 100vh; }
}

@keyframes rain-fall-fast {
    0% { background-position: 0 0; }
    100% { background-position: -50px 100vh; }
}

@keyframes rain-fall-extreme {
    0% { background-position: 0 0; }
    100% { background-position: -150px 100vh; }
}

@keyframes lightning {
    0%, 95%, 98%, 100% { opacity: 0; }
    96%, 99% { opacity: 0.8; }
    97% { opacity: 0.2; }
}