/* Darthost Simple Weather v2.6.0 — animated weather FX */
.dh-sw-bar{
    --pad: 10px;
    --radius: 10px;
    --fs: clamp(12px, 2.2vw, 16px);
    --fg: #fff;
    color: var(--fg);
    padding: var(--pad);
    border-radius: var(--radius);
    font-weight: 600;
    line-height: 1.25;
    display: block;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    position: relative;          /* anchor for FX layer */
    isolation: isolate;          /* keep blend-modes contained */
}
.dh-sw-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: var(--fs);
    text-align: center;
    position: relative;
    z-index: 2;                  /* text always above FX */
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.dh-sw-line{
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Day/Night base */
.dh-sw-day{ box-shadow: inset 0 -2px 0 0 rgba(0,0,0,.08); }
.dh-sw-night{ box-shadow: inset 0 -2px 0 0 rgba(255,255,255,.12); }

/* Backgrounds by category */
.dh-sw-clear.dh-sw-day{ background: linear-gradient(90deg,#FDB813,#FD8D32); }
.dh-sw-clear.dh-sw-night{ background: linear-gradient(90deg,#0f172a,#1e293b); }
.dh-sw-clouds.dh-sw-day{ background: linear-gradient(90deg,#6b7280,#9ca3af); }
.dh-sw-clouds.dh-sw-night{ background: linear-gradient(90deg,#374151,#4b5563); }
.dh-sw-rain{ background: linear-gradient(90deg,#2563eb,#1d4ed8); }
.dh-sw-drizzle{ background: linear-gradient(90deg,#60a5fa,#3b82f6); }
.dh-sw-thunder{ background: linear-gradient(90deg,#111827,#334155); border: 1px solid rgba(255,255,255,.12); }
.dh-sw-snow{ background: linear-gradient(90deg,#60a5fa,#93c5fd); }
.dh-sw-mist{ background: linear-gradient(90deg,#64748b,#94a3b8); }
.dh-sw-cold{ background: linear-gradient(90deg,#06b6d4,#3b82f6); }

/* ============================================================
   ANIMATED FX LAYER
   Injected by script.js as: .dh-sw-fx > particles
   ============================================================ */
.dh-sw-fx{
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
}
.dh-sw-fx > *{
    position: absolute;
    will-change: transform, opacity, top, left;
}

/* ---- Rain & Drizzle ---- */
.dh-sw-drop{
    top: 0;
    width: 1.6px;
    height: 13px;
    border-radius: 2px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.75));
    transform: rotate(14deg);
    animation: dh-rain-fall linear infinite;
}
.dh-sw-drop.is-light{
    height: 9px;
    opacity: .7;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.55));
}
@keyframes dh-rain-fall{
    0%   { top: -35%; opacity: 0; }
    18%  { opacity: .95; }
    100% { top: 120%; opacity: .15; }
}

/* ---- Clouds (drift across the bar) ---- */
.dh-sw-cloud{
    left: -25%;
    height: 16px;
    width: 56px;
    background: rgba(255,255,255,.20);
    border-radius: 999px;
    filter: blur(2px);
    animation: dh-cloud-drift linear infinite;
}
.dh-sw-cloud::before,
.dh-sw-cloud::after{
    content: "";
    position: absolute;
    background: inherit;
    border-radius: 50%;
}
.dh-sw-cloud::before{ width: 24px; height: 24px; top: -11px; left: 9px; }
.dh-sw-cloud::after{  width: 18px; height: 18px; top: -8px;  right: 11px; }
@keyframes dh-cloud-drift{
    from{ left: -30%; }
    to  { left: 120%; }
}

/* ---- Snow ---- */
.dh-sw-flake{
    top: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 3px rgba(255,255,255,.8);
    animation: dh-snow-fall linear infinite, dh-snow-sway ease-in-out infinite;
}
@keyframes dh-snow-fall{
    0%   { top: -20%; opacity: 0; }
    12%  { opacity: 1; }
    100% { top: 118%; opacity: .35; }
}
@keyframes dh-snow-sway{
    0%   { transform: translateX(-6px); }
    50%  { transform: translateX(6px); }
    100% { transform: translateX(-6px); }
}

/* ---- Thunder flash ---- */
.dh-sw-flash{
    inset: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(120% 140% at 70% -20%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%);
    opacity: 0;
    mix-blend-mode: screen;
    animation: dh-flash 7s ease-in-out infinite;
}
@keyframes dh-flash{
    0%, 88%, 100% { opacity: 0; }
    89% { opacity: .65; }
    90% { opacity: .1; }
    91% { opacity: .55; }
    93% { opacity: 0; }
}

/* ---- Clear DAY: sun glow + rotating rays ---- */
.dh-sw-rays{
    top: 50%;
    right: 2%;
    left: auto;
    width: 110px;
    height: 110px;
    transform: translateY(-50%);
    background: repeating-conic-gradient(from 0deg,
        rgba(255,255,255,.22) 0deg 5deg, transparent 5deg 16deg);
    border-radius: 50%;
    -webkit-mask: radial-gradient(circle, #000 26%, transparent 60%);
            mask: radial-gradient(circle, #000 26%, transparent 60%);
    mix-blend-mode: screen;
    animation: dh-rotate 22s linear infinite;
}
.dh-sw-sun{
    top: 50%;
    right: 4%;
    left: auto;
    width: 70px;
    height: 70px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.6), rgba(255,255,255,0) 62%);
    animation: dh-sun-pulse 4.5s ease-in-out infinite;
}
@keyframes dh-rotate{
    from{ transform: translateY(-50%) rotate(0); }
    to  { transform: translateY(-50%) rotate(360deg); }
}
@keyframes dh-sun-pulse{
    0%,100%{ transform: translateY(-50%) scale(.92); opacity:.75; }
    50%    { transform: translateY(-50%) scale(1.06); opacity:1; }
}

/* ---- Clear NIGHT: moon glow + twinkling stars ---- */
.dh-sw-moon{
    top: 50%;
    right: 5%;
    left: auto;
    width: 60px;
    height: 60px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(226,232,240,.55), rgba(226,232,240,0) 62%);
    animation: dh-sun-pulse 6s ease-in-out infinite;
}
.dh-sw-star{
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #fff;
    animation: dh-twinkle ease-in-out infinite;
}
@keyframes dh-twinkle{
    0%,100%{ opacity: .15; transform: scale(.6); }
    50%    { opacity: 1;   transform: scale(1.2); }
}

/* ---- Mist / Fog bands ---- */
.dh-sw-fog{
    left: -60%;
    height: 60%;
    width: 70%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    filter: blur(5px);
    animation: dh-fog-drift linear infinite, dh-fog-fade ease-in-out infinite;
}
@keyframes dh-fog-drift{
    from{ left: -70%; }
    to  { left: 120%; }
}
@keyframes dh-fog-fade{
    0%,100%{ opacity: .25; }
    50%    { opacity: .65; }
}

/* ---- Cold / Frost shimmer sweep ---- */
.dh-sw-frost{
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.30) 50%, transparent 62%);
    background-size: 260% 100%;
    mix-blend-mode: screen;
    animation: dh-shimmer 5s linear infinite;
}
@keyframes dh-shimmer{
    from{ background-position: 160% 0; }
    to  { background-position: -160% 0; }
}

/* Tablet */
@media (max-width: 1024px){
    .dh-sw-bar{ --fs: clamp(12px, 2.6vw, 15px); }
}

/* Mobile tweaks */
@media (max-width: 480px){
    .dh-sw-bar{ --pad: 8px; --fs: clamp(12px, 3.8vw, 15px); }
    .dh-sw-rays{ width: 80px; height: 80px; }
    .dh-sw-sun{ width: 52px; height: 52px; }
}

/* Accessibility: respect reduced-motion (JS also skips injection) */
@media (prefers-reduced-motion: reduce){
    .dh-sw-fx{ display: none !important; }
}