/* Рух V52 — погодные предупреждения: анимированная карточка со сценой, метриками и советами */
.ruh-wx{--wx-a:#1d4ed8;--wx-b:#0ea5e9;--wx-glow:rgba(14,165,233,.5);--wx-ink:#fff;
  position:fixed;z-index:2200;top:calc(var(--header-h,124px) + 14px);right:22px;width:min(414px,calc(100vw - 28px));box-sizing:border-box;
  padding:14px 14px 12px;border-radius:24px;color:var(--wx-ink);overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.18),transparent 55%),linear-gradient(140deg,var(--wx-a),var(--wx-b));
  box-shadow:0 30px 70px -22px var(--wx-glow),0 10px 26px -12px rgba(2,6,23,.45),inset 0 0 0 1px rgba(255,255,255,.16);
  opacity:0;transform:translate3d(115%,0,0) scale(.96);transition:transform .7s cubic-bezier(.2,.95,.25,1.12),opacity .45s ease,border-radius .4s ease,width .4s ease}
.ruh-wx.is-in{opacity:1;transform:none}
.ruh-wx.is-leaving{opacity:0!important;transform:translate3d(110%,0,0) scale(.94)!important;transition:transform .45s ease,opacity .35s ease}
.ruh-wx.is-danger{--wx-a:#7f1d1d;--wx-b:#f43f5e;--wx-glow:rgba(244,63,94,.55)}
.ruh-wx.is-warning{--wx-a:#9a3412;--wx-b:#f59e0b;--wx-glow:rgba(245,158,11,.5)}
.ruh-wx.is-info{--wx-a:#1e3a8a;--wx-b:#38bdf8;--wx-glow:rgba(56,189,248,.5)}
.ruh-wx.wx-storm{--wx-a:#1e1b4b;--wx-b:#7c3aed;--wx-glow:rgba(124,58,237,.6)}
.ruh-wx.wx-ice,.ruh-wx.wx-snow,.ruh-wx.wx-frost{--wx-a:#0c4a6e;--wx-b:#0284c7;--wx-glow:rgba(56,189,248,.55)}
.ruh-wx.wx-frost{--wx-a:#1e3a8a;--wx-b:#60a5fa}
.ruh-wx.wx-fog{--wx-a:#334155;--wx-b:#94a3b8;--wx-glow:rgba(148,163,184,.5)}
.ruh-wx.wx-wind{--wx-a:#115e59;--wx-b:#2dd4bf;--wx-glow:rgba(45,212,191,.5)}
.ruh-wx.wx-heat{--wx-a:#b91c1c;--wx-b:#f59e0b;--wx-glow:rgba(251,146,60,.6)}
.ruh-wx.wx-rain{--wx-a:#172554;--wx-b:#3b82f6;--wx-glow:rgba(59,130,246,.55)}
.ruh-wx.wx-drizzle{--wx-a:#1e3a8a;--wx-b:#38bdf8}

/* сцена с анимацией погоды */
.ruh-wx__scene{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ruh-wx .wxp{position:absolute;left:var(--x);top:-12%;display:block;will-change:transform}
.wx-scene--rain .wxp,.wx-scene--storm .wxp,.wx-scene--drizzle .wxp{width:2px;height:calc(16px*var(--s));border-radius:2px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.75));transform:rotate(14deg);animation:wxFall var(--d) linear var(--dl) infinite}
.wx-scene--drizzle .wxp{opacity:.55;height:calc(9px*var(--s))}
.wx-scene--snow .wxp,.wx-scene--ice .wxp,.wx-scene--frost .wxp{width:calc(5px*var(--s));height:calc(5px*var(--s));border-radius:50%;background:#fff;opacity:.85;box-shadow:0 0 6px rgba(255,255,255,.8);animation:wxSnow calc(var(--d)*3.2) linear var(--dl) infinite}
.wx-scene--wind .wxp{top:var(--y);left:auto;right:-30%;width:calc(46px*var(--s));height:2px;border-radius:2px;background:linear-gradient(to left,transparent,rgba(255,255,255,.8));animation:wxGust calc(var(--d)*1.4) linear var(--dl) infinite}
.wx-scene--fog .wxp{top:var(--y);left:-40%;width:75%;height:46px;border-radius:50%;background:rgba(255,255,255,.28);filter:blur(16px);animation:wxFog calc(var(--d)*7) ease-in-out var(--dl) infinite alternate}
.wx-scene--heat .wxp{top:auto;bottom:-30%;left:var(--x);width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.42),transparent 65%);animation:wxHeat calc(var(--d)*2.6) ease-in-out var(--dl) infinite alternate}
.wx-flash{position:absolute;inset:0;background:#fff;opacity:0;animation:wxFlash 5.5s ease-in-out infinite}
@keyframes wxFall{to{transform:translate3d(-26px,540px,0) rotate(14deg)}}
@keyframes wxSnow{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(14px,260px,0)}100%{transform:translate3d(-8px,540px,0)}}
@keyframes wxGust{to{transform:translate3d(-640px,0,0)}}
@keyframes wxFog{to{transform:translate3d(110%,0,0)}}
@keyframes wxHeat{from{transform:translate3d(0,0,0) scale(.9);opacity:.5}to{transform:translate3d(0,-60px,0) scale(1.25);opacity:1}}
@keyframes wxFlash{0%,86%,100%{opacity:0}88%{opacity:.5}90%{opacity:.05}92%{opacity:.38}95%{opacity:0}}

/* шапка карточки */
.ruh-wx__head{display:flex;align-items:center;gap:12px}
.ruh-wx__icon{position:relative;flex:0 0 auto;display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);font-size:22px}
.ruh-wx__icon i{animation:wxBob 3.2s ease-in-out infinite;color:#fff}
.ruh-wx__icon em{position:absolute;inset:-5px;border-radius:20px;border:2px solid rgba(255,255,255,.55);animation:wxPulse 2.2s ease-out infinite}
@keyframes wxBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
@keyframes wxPulse{0%{transform:scale(.88);opacity:.9}100%{transform:scale(1.22);opacity:0}}
.ruh-wx__title{min-width:0;flex:1}
.ruh-wx__title small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ruh-wx__lvl{display:inline-block;padding:2px 7px;border-radius:99px;background:rgba(255,255,255,.26);margin-right:2px}
.ruh-wx__title b{display:block;margin-top:3px;font-size:18px;line-height:1.2;font-weight:800;letter-spacing:-.01em;text-shadow:0 1px 10px rgba(0,0,0,.2)}
.ruh-wx__tools{display:flex;gap:6px;align-self:flex-start}
.ruh-wx__tools button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:10px;background:rgba(255,255,255,.18);color:#fff;font-size:12px;cursor:pointer;transition:background .2s,transform .2s}
.ruh-wx__tools button:hover{background:rgba(255,255,255,.34);transform:scale(1.06)}

/* раскрывающееся тело */
.ruh-wx__more{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.2,.9,.25,1),opacity .3s}
.ruh-wx__inner{overflow:hidden;min-height:0}
.ruh-wx__inner p{margin:12px 2px 12px;font-size:13.5px;line-height:1.5;font-weight:500;opacity:.96}
.ruh-wx__metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px}
.ruh-wx .wxm{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:8px 10px;border-radius:14px;background:rgba(2,6,23,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ruh-wx .wxm i{grid-row:1/3;font-size:15px;opacity:.9}
.ruh-wx .wxm b{font-size:13.5px;font-weight:800;line-height:1.15;white-space:nowrap}
.ruh-wx .wxm small{font-size:10px;font-weight:600;opacity:.75;white-space:nowrap}
.ruh-wx__tips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ruh-wx__tips span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.18);font-size:11.5px;font-weight:700}
.ruh-wx__tips i{font-size:9px}
.ruh-wx__foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.ruh-wx .wxb{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:0;border-radius:12px;background:rgba(2,6,23,.26);color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .2s,transform .2s}
.ruh-wx .wxb:hover{background:rgba(2,6,23,.4);transform:translateY(-1px)}
.ruh-wx .wxb--main{background:#fff;color:#0f172a;box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
.ruh-wx .wxb--main:hover{background:#fff;transform:translateY(-2px)}
.ruh-wx__pager{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px}
.ruh-wx__pager button{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:9px;background:rgba(255,255,255,.18);color:#fff;font-size:10px;cursor:pointer}
.ruh-wx__timer{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;background:rgba(255,255,255,.75);animation:wxTimer 14s linear forwards}
.ruh-wx:hover .ruh-wx__timer{animation-play-state:paused}
@keyframes wxTimer{to{transform:scaleX(0)}}

/* свёрнутая «пилюля» */
.ruh-wx.is-min{width:auto;max-width:min(330px,calc(100vw - 28px));padding:7px 14px 7px 7px;border-radius:99px;cursor:pointer}
.ruh-wx.is-min .ruh-wx__more{grid-template-rows:0fr;opacity:0}
.ruh-wx.is-min .ruh-wx__icon{width:38px;height:38px;border-radius:50%;font-size:16px}
.ruh-wx.is-min .ruh-wx__icon em{border-radius:50%;inset:-4px}
.ruh-wx.is-min .ruh-wx__title small,.ruh-wx.is-min .ruh-wx__tools,.ruh-wx.is-min .ruh-wx__timer{display:none}
.ruh-wx.is-min .ruh-wx__title b{margin:0;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ruh-wx.is-min .ruh-wx__scene{opacity:.55}

@media (max-width:760px){
  .ruh-wx{top:calc(env(safe-area-inset-top,0px) + 10px);right:10px;left:10px;width:auto;border-radius:22px;transform:translate3d(0,-130%,0) scale(.97)}
  .ruh-wx.is-leaving{transform:translate3d(0,-130%,0) scale(.95)!important}
  .ruh-wx.is-min{left:auto;right:10px;top:calc(var(--header-h,109px) + 8px);max-width:calc(100vw - 20px)}
  .ruh-wx__title b{font-size:16.5px}
  .ruh-wx__metrics{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .ruh-wx *,.ruh-wx{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}
  .ruh-wx .wxp,.wx-flash{display:none}
}

/* уведомления-тосты не перекрывают погодную карточку */
@media (min-width:761px){
  body:has(.ruh-wx:not(.is-min):not(.is-leaving)) .toast-container{right:456px!important}
  body:has(.ruh-wx.is-min) .toast-container{right:370px!important}
}
@media (max-width:760px){
  body:has(.ruh-wx) .toast-container{top:auto!important;bottom:calc(88px + env(safe-area-inset-bottom,0px))!important}
}