/* weather-anim.css — Анимирани временски сцени за модалот */

.wa-stage {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    overflow: visible;
}

.wa-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

/* ══════════════════════════════════════
   СОНЦЕ (ден, ведро/претежно ведро)
══════════════════════════════════════ */
.wa-sun {
    position: absolute;
    top: 50%; left: 50%;
    width: 38px; height: 38px;
    margin: -19px 0 0 -19px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFE082, #FFB300);
    box-shadow: 0 0 14px 4px rgba(255,179,0,0.55);
    z-index: 2;
}

.wa-rays {
    position: absolute;
    top: 50%; left: 50%;
    width: 64px; height: 64px;
    margin: -32px 0 0 -32px;
    animation: wa-rotate 14s linear infinite;
    z-index: 1;
}

.wa-rays::before, .wa-rays::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 2.5px; height: 64px;
    margin: -32px 0 0 -1.25px;
    background: linear-gradient(to bottom, transparent 8%, rgba(255,193,7,0.55) 20%, transparent 32%, transparent 68%, rgba(255,193,7,0.55) 80%, transparent 92%);
}
.wa-rays::after { transform: rotate(45deg); }

@keyframes wa-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ══════════════════════════════════════
   МЕСЕЧИНА (ноќ, ведро)
══════════════════════════════════════ */
.wa-moon {
    position: absolute;
    top: 50%; left: 50%;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #FAFAFA, #CFD8DC 70%);
    box-shadow: 0 0 10px 2px rgba(207,216,220,0.4);
    z-index: 2;
}
.wa-moon::before {
    content: '';
    position: absolute;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #0B1F35;
    top: -4px; left: 9px;
    opacity: .88;
}

.wa-stars {
    position: absolute; inset: 0;
    z-index: 1;
}
.wa-star {
    position: absolute;
    width: 3px; height: 3px;
    background: #fff;
    border-radius: 50%;
    animation: wa-twinkle 2.2s ease-in-out infinite;
}
.wa-star:nth-child(1) { top: 6px;  left: 8px;  animation-delay: 0s; }
.wa-star:nth-child(2) { top: 14px; left: 52px; animation-delay: .5s; }
.wa-star:nth-child(3) { top: 48px; left: 10px; animation-delay: 1s; }
.wa-star:nth-child(4) { top: 54px; left: 46px; animation-delay: 1.5s; }

@keyframes wa-twinkle {
    0%, 100% { opacity: .25; transform: scale(.8); }
    50%      { opacity: 1;   transform: scale(1.2); }
}

/* ══════════════════════════════════════
   ОБЛАЦИ
══════════════════════════════════════ */
.wa-cloud {
    position: absolute;
    background: #ECEFF1;
    border-radius: 50px;
}
.wa-cloud::before, .wa-cloud::after {
    content: '';
    position: absolute;
    background: #ECEFF1;
    border-radius: 50%;
}

.wa-cloud-1 {
    width: 34px; height: 14px;
    top: 28px; left: 4px;
    animation: wa-drift 7s ease-in-out infinite;
    z-index: 3;
}
.wa-cloud-1::before { width: 16px; height: 16px; top: -8px; left: 4px; }
.wa-cloud-1::after  { width: 20px; height: 20px; top: -11px; left: 16px; }

.wa-cloud-2 {
    width: 26px; height: 11px;
    top: 14px; left: 28px;
    opacity: .8;
    animation: wa-drift 9s ease-in-out infinite reverse;
    z-index: 2;
}
.wa-cloud-2::before { width: 13px; height: 13px; top: -6px; left: 3px; }
.wa-cloud-2::after  { width: 15px; height: 15px; top: -8px; left: 12px; }

@keyframes wa-drift {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(5px); }
}

/* Целосно облачно — потемна боја */
.wa-overcast .wa-cloud,
.wa-overcast .wa-cloud::before,
.wa-overcast .wa-cloud::after {
    background: #90A4AE;
}

/* ══════════════════════════════════════
   ДОЖД
══════════════════════════════════════ */
.wa-rain-drop {
    position: absolute;
    width: 2px; height: 9px;
    background: linear-gradient(to bottom, transparent, #4FC3F7);
    border-radius: 2px;
    top: 38px;
    animation: wa-fall 0.9s linear infinite;
}
.wa-rain-drop:nth-child(1) { left: 12px; animation-delay: 0s; }
.wa-rain-drop:nth-child(2) { left: 24px; animation-delay: .25s; }
.wa-rain-drop:nth-child(3) { left: 36px; animation-delay: .12s; }
.wa-rain-drop:nth-child(4) { left: 46px; animation-delay: .4s; }
.wa-rain-drop:nth-child(5) { left: 18px; animation-delay: .55s; }
.wa-rain-drop:nth-child(6) { left: 42px; animation-delay: .7s; }

@keyframes wa-fall {
    0%   { transform: translateY(0);    opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateY(22px); opacity: 0; }
}

/* ══════════════════════════════════════
   СНЕГ
══════════════════════════════════════ */
.wa-snow-flake {
    position: absolute;
    width: 4px; height: 4px;
    background: #fff;
    border-radius: 50%;
    top: 36px;
    box-shadow: 0 0 2px rgba(255,255,255,.8);
    animation: wa-snowfall 3.2s linear infinite;
}
.wa-snow-flake:nth-child(1) { left: 10px; animation-delay: 0s; }
.wa-snow-flake:nth-child(2) { left: 24px; animation-delay: .8s; }
.wa-snow-flake:nth-child(3) { left: 38px; animation-delay: .4s; }
.wa-snow-flake:nth-child(4) { left: 48px; animation-delay: 1.6s; }
.wa-snow-flake:nth-child(5) { left: 16px; animation-delay: 2.1s; }

@keyframes wa-snowfall {
    0%   { transform: translate(0, 0) rotate(0deg);     opacity: 1; }
    100% { transform: translate(6px, 26px) rotate(180deg); opacity: 0; }
}

/* ══════════════════════════════════════
   МАГЛА
══════════════════════════════════════ */
.wa-fog-band {
    position: absolute;
    height: 6px;
    background: rgba(236,239,241,0.75);
    border-radius: 6px;
    animation: wa-fog-move 4s ease-in-out infinite;
}
.wa-fog-band:nth-child(1) { width: 44px; top: 22px; left: 6px;  animation-delay: 0s; }
.wa-fog-band:nth-child(2) { width: 34px; top: 32px; left: 16px; animation-delay: .6s; }
.wa-fog-band:nth-child(3) { width: 40px; top: 42px; left: 8px;  animation-delay: 1.2s; }

@keyframes wa-fog-move {
    0%, 100% { transform: translateX(0);   opacity: .7; }
    50%      { transform: translateX(6px); opacity: 1; }
}

/* ══════════════════════════════════════
   ГРМОТЕВИЦИ
══════════════════════════════════════ */
.wa-bolt {
    position: absolute;
    top: 34px; left: 27px;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 14px solid #FFD600;
    animation: wa-flash 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(255,214,0,0.8));
}
.wa-bolt::after {
    content: '';
    position: absolute;
    top: 14px; left: -3px;
    width: 0; height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 9px solid #FFD600;
}

@keyframes wa-flash {
    0%, 40%, 100% { opacity: 0; transform: scale(.9); }
    45%, 55%      { opacity: 1; transform: scale(1.05); }
    60%           { opacity: .3; }
    65%           { opacity: 1; }
}