/* =====================================================================
   FASLLAR: bahor (o'rik guli), yoz (Toshkent quyoshi), kuz (anor va chinor), qish (qor)
   <html data-season="spring|summer|autumn|winter">. Kuz qiymatlari autumn.css da.
   Ob-havo rejimi: .sky[data-w="sun|cloud|rain|snow"] — zarrachalar seasons.js da yaratiladi.
   ===================================================================== */

/* ---------- BAHOR ---------- */
:root[data-season="spring"]{
  --bg:#F1EEF6; --paper:#FDFCFF; --ink:#241B33; --muted:#6C6380; --line:#E1DAEC;
  --accent:#6A3FA0; --accent-soft:#EDE4F8; --mark:#B3261E; --mark-soft:#FBE4DF;
  --ok:#2F8A4E; --ok-soft:#DFF1E4; --warn:#9A5B00; --warn-soft:#FBEBCF;
  --gold:#7CC47F; --gold-soft:#E5F4E4; --xurmo:#3FA66A; --olive:#2F8A4E;
  --grad:linear-gradient(135deg,#341A5E 0%,#6A3FA0 50%,#2E9A72 100%);
  --grad-gold:linear-gradient(135deg,#2F8A4E 0%,#7CC47F 100%);
  --shadow:0 1px 2px rgba(40,20,70,.05),0 8px 26px -12px rgba(70,40,120,.22);
  --shadow-lg:0 26px 60px -26px rgba(52,26,94,.5);
  --leaf-a:#F6E9FF; --leaf-b:#FFFFFF; --leaf-c:#D9C2F2;
  --emblem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg%3E%3Ccircle cx='50' cy='25' r='19'/%3E%3Ccircle cx='74' cy='42' r='19'/%3E%3Ccircle cx='65' cy='71' r='19'/%3E%3Ccircle cx='35' cy='71' r='19'/%3E%3Ccircle cx='26' cy='42' r='19'/%3E%3C/g%3E%3C/svg%3E");
  --hl-grad:linear-gradient(100deg,#4B2582 0%,#6A3FA0 45%,#2E9A72 100%);
  --bar-grad:linear-gradient(90deg,#341A5E,#6A3FA0 40%,#9C7BD0 65%,#2E9A72);
  --prog:linear-gradient(90deg,#6A3FA0,#2E9A72);
  --hero-ink:#341A5E; --hero-glow:rgba(214,190,255,.5); --hero-emb:#F3E8FF; --ring-fg:#B9F0C8;
  --branch:#5A3B2E; --bloom:#FFFFFF; --bloom2:#E8D5FA; --bloom-c:#B78AE8;
  --logo-a:#2E9A72; --logo-b:#4B2582;
}
@media (prefers-color-scheme: dark){:root[data-season="spring"]:not([data-theme="light"]){
  --bg:#15111E; --paper:#1E1829; --ink:#EEE8F7; --muted:#B4A8C9; --line:#342A47;
  --accent:#B79AF0; --accent-soft:#2F2448; --ok:#86D49E; --ok-soft:#1A3225;
  --gold:#86D49E; --gold-soft:#1C3326; --xurmo:#86D49E;
  --grad:linear-gradient(135deg,#25124A 0%,#4B2C7E 50%,#1E6E52 100%);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px -12px rgba(0,0,0,.6); --shadow-lg:0 26px 60px -26px rgba(0,0,0,.8);
  --leaf-a:#D9C8F2; --leaf-b:#F2EAFB; --leaf-c:#B79AF0; --branch:#7A6052; --bloom:#EFE6FB; --bloom2:#CDB6EE; --bloom-c:#9A72D6; color-scheme:dark}}
:root[data-season="spring"][data-theme="dark"]{
  --bg:#15111E; --paper:#1E1829; --ink:#EEE8F7; --muted:#B4A8C9; --line:#342A47;
  --accent:#B79AF0; --accent-soft:#2F2448; --ok:#86D49E; --ok-soft:#1A3225;
  --gold:#86D49E; --gold-soft:#1C3326; --xurmo:#86D49E;
  --grad:linear-gradient(135deg,#25124A 0%,#4B2C7E 50%,#1E6E52 100%);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px -12px rgba(0,0,0,.6); --shadow-lg:0 26px 60px -26px rgba(0,0,0,.8);
  --leaf-a:#D9C8F2; --leaf-b:#F2EAFB; --leaf-c:#B79AF0; --branch:#7A6052; --bloom:#EFE6FB; --bloom2:#CDB6EE; --bloom-c:#9A72D6; color-scheme:dark}

/* ---------- YOZ ---------- */
:root[data-season="summer"]{
  --bg:#EDF4E8; --paper:#FCFEFA; --ink:#14261A; --muted:#58705E; --line:#D5E5D2;
  --accent:#1E7A3E; --accent-soft:#DCF0DF; --mark:#C0392B; --mark-soft:#FBE4DF;
  --ok:#1E7A3E; --ok-soft:#DCF0DF; --warn:#9A5B00; --warn-soft:#FBEBCF;
  --gold:#F2B705; --gold-soft:#FFF3C7; --xurmo:#F2B705; --olive:#4F8F2F;
  --grad:linear-gradient(135deg,#0E4425 0%,#1E7A3E 50%,#5DAA3A 100%);
  --grad-gold:linear-gradient(135deg,#E09A00 0%,#F7CD3A 100%);
  --shadow:0 1px 2px rgba(15,45,25,.05),0 8px 26px -12px rgba(20,70,35,.22);
  --shadow-lg:0 26px 60px -26px rgba(14,68,37,.55);
  --leaf-a:#3E8E3A; --leaf-b:#6DB33F; --leaf-c:#2B6E35;
  --emblem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='22'/%3E%3Cg stroke='%23000' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M50 4v14M50 82v14M4 50h14M82 50h14M17 17l10 10M73 73l10 10M83 17 73 27M27 73 17 83'/%3E%3C/g%3E%3C/svg%3E");
  --hl-grad:linear-gradient(100deg,#145C30 0%,#2F8F45 50%,#E0A200 100%);
  --bar-grad:linear-gradient(90deg,#0E4425,#1E7A3E 40%,#6DB33F 70%,#F7CD3A);
  --prog:linear-gradient(90deg,#1E7A3E,#9BC53D);
  --hero-ink:#0E4425; --hero-glow:rgba(255,214,90,.7); --hero-emb:#FFE58A; --ring-fg:#FFD54A;
  --logo-a:#6DB33F; --logo-b:#0E4425;
}
@media (prefers-color-scheme: dark){:root[data-season="summer"]:not([data-theme="light"]){
  --bg:#0E1810; --paper:#152218; --ink:#E7F3E6; --muted:#A3BCA4; --line:#26402B;
  --accent:#7BD38C; --accent-soft:#173822; --ok:#7BD38C; --ok-soft:#173822;
  --gold:#FFC93C; --gold-soft:#3A3010;
  --grad:linear-gradient(135deg,#082A15 0%,#155A2D 50%,#3E7F27 100%);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px -12px rgba(0,0,0,.6); --shadow-lg:0 26px 60px -26px rgba(0,0,0,.8);
  --leaf-a:#2F6E2E; --leaf-b:#4C8C33; --leaf-c:#245A2A; color-scheme:dark}}
:root[data-season="summer"][data-theme="dark"]{
  --bg:#0E1810; --paper:#152218; --ink:#E7F3E6; --muted:#A3BCA4; --line:#26402B;
  --accent:#7BD38C; --accent-soft:#173822; --ok:#7BD38C; --ok-soft:#173822;
  --gold:#FFC93C; --gold-soft:#3A3010;
  --grad:linear-gradient(135deg,#082A15 0%,#155A2D 50%,#3E7F27 100%);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px -12px rgba(0,0,0,.6); --shadow-lg:0 26px 60px -26px rgba(0,0,0,.8);
  --leaf-a:#2F6E2E; --leaf-b:#4C8C33; --leaf-c:#245A2A; color-scheme:dark}

/* ---------- QISH ---------- */
:root[data-season="winter"]{
  --bg:#E9EFF6; --paper:#FBFDFF; --ink:#13213A; --muted:#5B6A84; --line:#D5DFEC;
  --accent:#2B5597; --accent-soft:#E0E9F6; --mark:#B3261E; --mark-soft:#FBE4DF;
  --ok:#2E7058; --ok-soft:#DCEFE6; --warn:#8A5A00; --warn-soft:#F8ECD3;
  --gold:#8FB8E6; --gold-soft:#E4EEFA; --xurmo:#6C9BD2; --olive:#2E7058;
  --grad:linear-gradient(135deg,#14244A 0%,#2B5597 50%,#5E8FCB 100%);
  --grad-gold:linear-gradient(135deg,#6C9BD2 0%,#B9D6F2 100%);
  --shadow:0 1px 2px rgba(20,35,70,.05),0 8px 26px -12px rgba(30,60,110,.22);
  --shadow-lg:0 26px 60px -26px rgba(20,36,74,.55);
  --leaf-a:#FFFFFF; --leaf-b:#FFFFFF; --leaf-c:#FFFFFF;
  --emblem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23000' stroke-width='6' stroke-linecap='round' fill='none'%3E%3Cpath d='M50 4v92M10 27l80 46M90 27 10 73'/%3E%3Cpath d='M38 12l12 12 12-12M38 88l12-12 12 12M14 42l16-4-4-16M86 58l-16 4 4 16M86 42l-16-4 4-16M14 58l16 4-4 16'/%3E%3C/g%3E%3C/svg%3E");
  --hl-grad:linear-gradient(100deg,#1C3466 0%,#2B5597 50%,#6C9BD2 100%);
  --bar-grad:linear-gradient(90deg,#14244A,#2B5597 40%,#6C9BD2 70%,#CFE2F6);
  --prog:linear-gradient(90deg,#2B5597,#8FB8E6);
  --hero-ink:#14244A; --hero-glow:rgba(200,225,255,.5); --hero-emb:#E4F0FF; --ring-fg:#CFE6FF;
  --logo-a:#6C9BD2; --logo-b:#14244A;
}
@media (prefers-color-scheme: dark){:root[data-season="winter"]:not([data-theme="light"]){
  --bg:#0D1422; --paper:#151F31; --ink:#E7EEF9; --muted:#A2B2CC; --line:#27344D;
  --accent:#8DB4F0; --accent-soft:#1B2B4A; --ok:#7FCFAE; --ok-soft:#14302A;
  --gold:#A9C9F0; --gold-soft:#1C2A44;
  --grad:linear-gradient(135deg,#0B1631 0%,#1D3B6E 50%,#3D6BA8 100%);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px -12px rgba(0,0,0,.6); --shadow-lg:0 26px 60px -26px rgba(0,0,0,.8);
  --leaf-a:#DDE8F7; --leaf-b:#DDE8F7; --leaf-c:#DDE8F7; color-scheme:dark}}
:root[data-season="winter"][data-theme="dark"]{
  --bg:#0D1422; --paper:#151F31; --ink:#E7EEF9; --muted:#A2B2CC; --line:#27344D;
  --accent:#8DB4F0; --accent-soft:#1B2B4A; --ok:#7FCFAE; --ok-soft:#14302A;
  --gold:#A9C9F0; --gold-soft:#1C2A44;
  --grad:linear-gradient(135deg,#0B1631 0%,#1D3B6E 50%,#3D6BA8 100%);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px -12px rgba(0,0,0,.6); --shadow-lg:0 26px 60px -26px rgba(0,0,0,.8);
  --leaf-a:#DDE8F7; --leaf-b:#DDE8F7; --leaf-c:#DDE8F7; color-scheme:dark}

/* tugma, menyu va kartadagi soyalar asosiy rang bilan uyg'un bo'lsin */
.btn:not(.ghost):not(.tgbtn),.tabs button.on,.stagebar .snode{box-shadow:0 8px 18px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.brand .logo{filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--accent) 40%,transparent))}

/* ====================== OSMON QATLAMI (zarrachalar) ====================== */
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;transition:background 1.2s ease}
.sky i{position:absolute;top:-8vh;left:var(--x);display:block;will-change:transform}
/* barg */
.sky .leaf{width:var(--s);height:var(--s);opacity:.55;background:var(--c);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 74 36 70 22 79 24 66 3 58 15 50 4 33 23 36 27 20 39 29 42 9 50 1 58 9 61 29 73 20 77 36 96 33 85 50 97 58 76 66 78 79 64 70ZM48.5 74h3v24h-3Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 74 36 70 22 79 24 66 3 58 15 50 4 33 23 36 27 20 39 29 42 9 50 1 58 9 61 29 73 20 77 36 96 33 85 50 97 58 76 66 78 79 64 70ZM48.5 74h3v24h-3Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:p-fall var(--d) linear var(--w) infinite, p-sway calc(var(--d) / 4) ease-in-out var(--w) infinite alternate}
/* o'rik gulbargi */
.sky .petal{width:var(--s);height:calc(var(--s) * .72);opacity:.8;background:var(--c);border-radius:70% 0 70% 0;
  box-shadow:inset -2px -2px 4px rgba(200,80,120,.25);
  animation:p-fall var(--d) linear var(--w) infinite, p-sway calc(var(--d) / 5) ease-in-out var(--w) infinite alternate}
/* qor */
.sky .snow{width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:.9;
  box-shadow:0 0 3px rgba(50,80,130,.35);
  animation:p-fall-straight var(--d) linear var(--w) infinite, p-sway calc(var(--d) / 3) ease-in-out var(--w) infinite alternate}
.sky .snow.big{background:transparent;box-shadow:none;opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23000' stroke-width='6' stroke-linecap='round' fill='none'%3E%3Cpath d='M50 4v92M10 27l80 46M90 27 10 73'/%3E%3Cpath d='M38 12l12 12 12-12M38 88l12-12 12 12M14 42l16-4-4-16M86 58l-16 4 4 16M86 42l-16-4 4-16M14 58l16 4-4 16'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23000' stroke-width='6' stroke-linecap='round' fill='none'%3E%3Cpath d='M50 4v92M10 27l80 46M90 27 10 73'/%3E%3Cpath d='M38 12l12 12 12-12M38 88l12-12 12 12M14 42l16-4-4-16M86 58l-16 4 4 16M86 42l-16-4 4-16M14 58l16 4-4 16'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;background-color:#fff;filter:drop-shadow(0 0 1px rgba(50,80,130,.6))}
/* yomg'ir */
.sky .rain{top:-20vh;width:1.5px;height:var(--s);border-radius:2px;opacity:.55;
  background:linear-gradient(transparent,var(--rain,rgba(60,90,140,.6)));
  animation:p-rain var(--d) linear var(--w) infinite}
/* bulut */
.sky .cloud{top:var(--y);left:0;width:var(--s);height:calc(var(--s) * .38);border-radius:999px;opacity:var(--o,.55);
  background:var(--cloud,#fff);filter:blur(1px);
  animation:p-drift var(--d) linear var(--w) infinite}
.sky .cloud::before,.sky .cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.sky .cloud::before{width:46%;height:120%;left:16%;top:-58%}
.sky .cloud::after{width:36%;height:96%;left:48%;top:-40%}
/* quyosh */
.sky .sun{top:-170px;right:-170px;left:auto;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,214,90,.75) 0 20%,rgba(255,190,60,.28) 34%,rgba(255,190,60,0) 62%)}
.sky .sun::after{content:"";position:absolute;inset:-30px;border-radius:50%;opacity:.35;
  background:repeating-conic-gradient(from 0deg,rgba(255,200,80,.55) 0 4deg,transparent 4deg 18deg);
  -webkit-mask:radial-gradient(circle,transparent 26%,#000 30%,transparent 66%);mask:radial-gradient(circle,transparent 26%,#000 30%,transparent 66%);
  animation:p-spin 90s linear infinite}
.sky .flash{inset:0;top:0;left:0;background:#fff;opacity:0;animation:p-flash 9s linear infinite}

@keyframes p-fall{from{transform:translateY(0) rotate(0deg)}to{transform:translateY(118vh) rotate(540deg)}}
@keyframes p-fall-straight{from{transform:translateY(0)}to{transform:translateY(118vh)}}
@keyframes p-sway{from{margin-left:-26px}to{margin-left:26px}}
@keyframes p-rain{from{transform:translate(0,0) rotate(12deg)}to{transform:translate(-26vh,135vh) rotate(12deg)}}
@keyframes p-drift{from{transform:translateX(-40vw)}to{transform:translateX(140vw)}}
@keyframes p-spin{to{transform:rotate(360deg)}}
@keyframes p-flash{0%,92%,100%{opacity:0}93%{opacity:.35}94%{opacity:0}95.5%{opacity:.22}97%{opacity:0}}

/* ob-havo bo'yicha osmon tusi */
.sky[data-w="rain"]{background:linear-gradient(180deg,rgba(70,86,108,.20),rgba(70,86,108,.06) 70%)}
.sky[data-w="cloud"]{background:linear-gradient(180deg,rgba(120,132,148,.16),transparent 70%)}
.sky[data-w="snow"]{background:linear-gradient(180deg,rgba(150,180,220,.18),transparent 70%)}
.sky[data-w="sun"]{background:linear-gradient(180deg,rgba(255,206,90,.10),transparent 60%)}
.sky[data-night="1"]{background:linear-gradient(180deg,rgba(15,25,55,.22),transparent 75%)}
.sky[data-w="rain"] .cloud,.sky[data-w="snow"] .cloud{--cloud:#C5CDD8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sky .cloud{--cloud:#56606E}}
:root[data-theme="dark"] .sky .cloud{--cloud:#56606E}
@media (prefers-reduced-motion: reduce){.sky i{animation:none!important;display:none}.sky .sun{display:block}}

/* ====================== OB-HAVO TUGMASI ====================== */
.wxbtn{position:fixed;left:max(14px, env(safe-area-inset-left, 0px));bottom:calc(14px + env(safe-area-inset-bottom, 0px));z-index:30;
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 10px;border-radius:999px;cursor:pointer;
  font:600 14px var(--body);color:var(--ink);background:color-mix(in srgb,var(--paper) 88%,transparent);
  border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.wxbtn .wi{font-size:22px;line-height:1}
.wxbtn .wt{white-space:nowrap}
.wxbtn[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow)}
.wxbtn:hover{border-color:var(--accent)}
.wxbtn.busy .wi{animation:p-spin 1.2s linear infinite}
@media (max-width:1279px){.wxbtn .wt{display:none}.wxbtn{padding:0 10px;width:44px;justify-content:center}}

/* ====================== FASL BEZAKLARI ====================== */
/* bahor: gullayotgan o'rik shoxi (yuqori chap burchak) */
.sky .branch,.sky .canopy{position:absolute;pointer-events:none}
.sky .branch{top:0;left:0;width:min(46vw,520px);height:auto;opacity:.95}
.sky .branch.r{left:auto;right:0;top:40px;transform:scaleX(-1)}
.sky .branch svg{display:block;width:100%;height:auto;overflow:visible}
.sky .branch .bough{fill:none;stroke:var(--branch);stroke-linecap:round}
.sky .branch .fl{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:p-bloom 1.4s cubic-bezier(.2,.9,.3,1.25) var(--bd) forwards}
.sky .branch .fl circle.pt{fill:var(--bloom)}
.sky .branch .fl circle.pt2{fill:var(--bloom2)}
.sky .branch .fl circle.cn{fill:var(--bloom-c)}
.sky .branch .bud{fill:#7CC47F;transform-box:fill-box;transform-origin:center;transform:scale(0);animation:p-bloom 1s ease-out var(--bd) forwards}
@keyframes p-bloom{to{transform:scale(1)}}
/* yoz: daraxt soyasi — tepadan osilib turgan yashil barglar (yuqori o'ng) */
.sky .canopy{top:-10px;right:-20px;left:auto;width:min(52vw,600px);transform-origin:top right;animation:p-breeze 7s ease-in-out infinite alternate}
.sky .canopy svg{display:block;width:100%;height:auto}
.sky .canopy .lv{fill:var(--leaf-b)}.sky .canopy .lv2{fill:var(--leaf-a)}.sky .canopy .lv3{fill:var(--leaf-c)}
.sky .canopy .tw{fill:none;stroke:#5A4632;stroke-linecap:round}
@keyframes p-breeze{from{transform:rotate(0deg)}to{transform:rotate(-2.2deg)}}
.sky[data-season-fx="summer"] .sun{right:auto;left:-170px}
@media (max-width:640px){.sky .branch{width:70vw;opacity:.7}.sky .canopy{width:78vw;opacity:.75}}
@media (prefers-reduced-motion: reduce){.sky .branch,.sky .canopy{display:block}.sky .branch .fl,.sky .branch .bud{animation:none;transform:none}}
.exn,.exr b,.num,td.n{white-space:nowrap}

/* ====================== HAQIQIYROQ KUZ ====================== */
.sky .rleaf{position:absolute;top:-12vh;left:var(--x);display:block;perspective:500px;opacity:var(--o);
  animation:rl-fall var(--d) linear var(--w) infinite}
.sky .rleaf b{display:block;animation:rl-sway calc(var(--d) / 5) ease-in-out var(--w) infinite alternate}
.sky .rleaf svg{display:block;transform-style:preserve-3d;animation:rl-tumble var(--sp) linear var(--w) infinite;
  filter:drop-shadow(0 6px 5px rgba(70,30,10,.22))}
.sky .rleaf.far svg{filter:blur(.6px) saturate(.85)}
.sky .rleaf.near{z-index:2}
.sky .rleaf.near svg{filter:blur(1.4px) drop-shadow(0 10px 8px rgba(70,30,10,.25))}
@keyframes rl-fall{from{transform:translate(0,0)}to{transform:translate(var(--wind),124vh)}}
@keyframes rl-sway{from{transform:translateX(calc(var(--amp) * -1))}to{transform:translateX(var(--amp))}}
@keyframes rl-tumble{
  0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
  25%{transform:rotateX(55deg) rotateY(25deg) rotateZ(90deg)}
  50%{transform:rotateX(10deg) rotateY(70deg) rotateZ(180deg)}
  75%{transform:rotateX(-45deg) rotateY(20deg) rotateZ(270deg)}
  100%{transform:rotateX(0deg) rotateY(0deg) rotateZ(360deg)}}
/* yerdagi xazon */
.sky .ground{position:absolute;left:0;right:0;bottom:0;height:70px;pointer-events:none;
  -webkit-mask:linear-gradient(transparent,#000 45%);mask:linear-gradient(transparent,#000 45%)}
.sky .ground span{position:absolute;display:block;filter:saturate(.9) brightness(.92) drop-shadow(0 2px 2px rgba(60,25,8,.25))}
/* yuqori o'ngdagi kuzgi shox */
.sky .abranch{position:absolute;top:-6px;right:-10px;width:min(40vw,440px);transform-origin:50% 0;transform:scaleX(-1);animation:ab-breeze 6s ease-in-out infinite alternate}
.sky .abranch svg{display:block;width:100%;height:auto;overflow:visible}
.sky .abranch .al svg{overflow:visible}
@keyframes ab-breeze{from{transform:scaleX(-1) rotate(0deg)}to{transform:scaleX(-1) rotate(1.8deg)}}
@media (max-width:640px){.sky .abranch{width:70vw;opacity:.8}.sky .ground{height:50px}}
@media (prefers-reduced-motion: reduce){.sky .rleaf{display:none}.sky .abranch{animation:none}}
:root[data-season="autumn"] body{background:
    radial-gradient(1000px 560px at 85% -10%,rgba(255,196,96,.38),transparent 70%),
    radial-gradient(800px 500px at -10% 10%,rgba(190,70,40,.10),transparent 70%),
    linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,#d9a35a) 100%);background-attachment:fixed}