@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    background: #0a0a1a;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 60%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 10% 90%, rgba(30, 58, 138, 0.1) 0%, transparent 40%);
}

#kutns_button {
    border: none;
    background: none;
    padding: 0;
    appearance: none;
    background-image: url('../images/button_frames/0.png');
    background-size: cover;
    background-position: center;
    width: 50vw;
    height: auto;
    max-width: 831px;
    max-height: 520px;
    aspect-ratio: 831 / 520;
    display: block;
    filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.2));
    transition: filter 0.15s ease;
}

#kutns_button:hover {
    filter: drop-shadow(0 0 35px rgba(212, 175, 55, 0.35));
}

#kutns_button:active {
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.4));
}

@keyframes animateButton {
    0% { background-image: url('../images/button_frames/0.png'); }
    5.88% { background-image: url('../images/button_frames/1.png'); }
    11.76% { background-image: url('../images/button_frames/2.png'); }
    17.65% { background-image: url('../images/button_frames/3.png'); }
    23.53% { background-image: url('../images/button_frames/4.png'); }
    29.41% { background-image: url('../images/button_frames/5.png'); }
    35.29% { background-image: url('../images/button_frames/6.png'); }
    41.18% { background-image: url('../images/button_frames/7.png'); }
    47.06% { background-image: url('../images/button_frames/8.png'); }
    52.94% { background-image: url('../images/button_frames/9.png'); }
    58.82% { background-image: url('../images/button_frames/10.png'); }
    64.71% { background-image: url('../images/button_frames/11.png'); }
    70.59% { background-image: url('../images/button_frames/12.png'); }
    76.47% { background-image: url('../images/button_frames/13.png'); }
    82.35% { background-image: url('../images/button_frames/14.png'); }
    88.24% { background-image: url('../images/button_frames/15.png'); }
    94.12% { background-image: url('../images/button_frames/16.png'); }
}

.animate {
    animation: animateButton 708ms steps(17) forwards;
}

.map-section {
    background: linear-gradient(180deg, transparent 0%, rgba(59, 130, 246, 0.03) 30%, rgba(59, 130, 246, 0.05) 50%, rgba(59, 130, 246, 0.03) 70%, transparent 100%);
}

.leaflet-container {
    background: #0a0a1a;
}

.leaflet-container img {
    display: inline;
    max-width: none;
}

.leaflet-container canvas {
    display: inline;
}

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
}

@keyframes numberPop {
    0% { color: #22c55e; transform: scale(1.3); }
    100% { color: inherit; transform: scale(1); }
}

#clickCount.pop {
    display: inline-block;
    animation: numberPop 0.6s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}