/* kab-weather-icons.css — motion for the hand-drawn SVG weather icons
   (kab-weather-icons.js). Web port of the app's kabicons set; keep timings
   in sync with kabdalisapp/app/components/weather/kabicons.

   Degradation ladder:
   - all animation assignments live inside @supports (transform-box: fill-box)
     — browsers without it (old Safari/IE) get a clean STATIC icon instead of
     transforms spinning around the wrong origin;
   - prefers-reduced-motion collapses to the same static frame;
   - if the JS failed entirely the widgets keep their FontAwesome <i>. */

.kwi {
    display: inline-block;
    line-height: 0;
    flex: 0 0 auto;
}
.kwi svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Static frame: one-shot accents are hidden when not animating. */
.kwi:not(.kwi--anim) .kwi-glint,
.kwi:not(.kwi--anim) .kwi-sparkle {
    opacity: 0;
}

@supports (transform-box: fill-box) {
    .kwi [class^="kwi-"],
    .kwi [class*=" kwi-"] {
        transform-box: fill-box;
        transform-origin: center;
    }

    .kwi--anim .kwi-rays     { animation: kwiSpin 60s linear infinite; }
    .kwi--anim .kwi-core     { animation: kwiBreathe 3.6s ease-in-out infinite alternate; }
    .kwi--anim .kwi-halo     { animation: kwiGlowPulse 3.6s ease-in-out infinite alternate; }
    .kwi--anim .kwi-glow     { animation: kwiGlowPulse 5.2s ease-in-out infinite alternate; }
    .kwi--anim .kwi-moon     { animation: kwiRock 8s ease-in-out infinite alternate; }
    .kwi--anim .kwi-star     { animation: kwiStar 4.6s ease-in-out infinite; }
    .kwi--anim .kwi-cloud    { animation: kwiDriftR 5.2s ease-in-out infinite alternate; }
    .kwi--anim .kwi-cloudback{ animation: kwiDriftL 6s ease-in-out infinite alternate; }
    .kwi--anim .kwi-fogbar   { animation: kwiFog 6.4s ease-in-out infinite alternate; }
    .kwi--anim .kwi-drop     { animation: kwiDrop 1.6s linear infinite; }
    .kwi--anim .kwi-flake    { animation: kwiFall 4.6s linear infinite; }
    .kwi--anim .kwi-sparkle  { animation: kwiGlint 3.8s linear infinite; }
    .kwi--anim .kwi-glint    { animation: kwiGlint 5.2s linear infinite; }
}

@keyframes kwiSpin {
    to { transform: rotate(360deg); }
}
@keyframes kwiBreathe {
    from { transform: scale(1); }
    to   { transform: scale(1.045); }
}
@keyframes kwiGlowPulse {
    from { opacity: 0.55; transform: scale(1); }
    to   { opacity: 0.9;  transform: scale(1.06); }
}
@keyframes kwiRock {
    from { transform: rotate(-5deg); }
    to   { transform: rotate(5deg); }
}
@keyframes kwiStar {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.9; }
}
@keyframes kwiDriftR {
    from { transform: translateX(-1.7px); }
    to   { transform: translateX(1.7px); }
}
@keyframes kwiDriftL {
    from { transform: translateX(2.4px); }
    to   { transform: translateX(-2.4px); }
}
@keyframes kwiFog {
    from { transform: translateX(-4.5px); opacity: 0.6; }
    to   { transform: translateX(4.5px);  opacity: 0.9; }
}
@keyframes kwiDrop {
    0%   { opacity: 0;   transform: translate(0, 0); }
    15%  { opacity: 0.9; }
    80%  { opacity: 0.9; }
    100% { opacity: 0;   transform: translate(-5.5px, 39px); }
}
@keyframes kwiFall {
    0%   { opacity: 0;    transform: translateY(0) rotate(-18deg); }
    12%  { opacity: 0.95; }
    82%  { opacity: 0.95; }
    100% { opacity: 0;    transform: translateY(44px) rotate(18deg); }
}
@keyframes kwiGlint {
    0%, 76%, 100% { opacity: 0;    transform: scale(0.45); }
    84%           { opacity: 0.95; transform: scale(1) rotate(30deg); }
    92%           { opacity: 0;    transform: scale(0.5); }
}

@media (prefers-reduced-motion: reduce) {
    .kwi--anim [class^="kwi-"],
    .kwi--anim [class*=" kwi-"] {
        animation: none !important;
    }
    .kwi--anim .kwi-glint,
    .kwi--anim .kwi-sparkle {
        opacity: 0;
    }
}

/* Widget integration: the v3 forecast chip keeps its round accent halo but
   the multi-colour SVG replaces the accent-tinted glyph. */
.weather-v3-forecast-icon .kwi {
    display: block;
}
/* Chart overlay icons are absolutely positioned by the forecast widget JS. */
.weather-symbols-overlay .kwi {
    position: absolute;
    pointer-events: none;
}