/* STEPS — 3D illyustratsiyalar (ui/art3d.js) uchun uslublar.
   Ikonka o'zi hamma narsani SVG ichida chizadi (gradient, yorug'lik, yerdagi soya);
   bu fayl faqat joylashuv, "plitka" va yengil harakatni beradi.

     <svg class="art3d">            — oddiy inline ikonka
     .art3d-tile > svg.art3d        — yumshoq tintli plitka ichida (ro'yxat qatori, sozlamalar)
     .art3d-float                   — bo'sh holat / onboarding: sekin "suzish"
     .art3d-pop                     — yutuq ochilganda: bir marta prujinali chiqish

   Harakat prefers-reduced-motion va :root[data-motion="reduce"] da o'chadi. */

.art3d{display:inline-block;flex:none;vertical-align:middle;overflow:visible;
       /* SVG ichidagi yerdagi soya ramkaga yopishib qolmasin */
       shape-rendering:geometricPrecision;-webkit-user-select:none;user-select:none;pointer-events:none}

/* Plitka: kichik o'lchamda (28–40px) ikonka yumshoq fon ustida turadi.
   Tint rangi --tile orqali: .art3d-tile{--tile:var(--brand-soft)} */
.art3d-tile{--tile:var(--surface-2);display:inline-grid;place-items:center;flex:none;
            width:var(--tile-size,40px);height:var(--tile-size,40px);border-radius:var(--r-xs);
            background:var(--tile);box-shadow:inset 0 0 0 1px var(--edge)}
.art3d-tile > .art3d{width:82%;height:82%}

/* Sekin suzish — bo'sh holat va onboarding illyustratsiyasi uchun. */
.art3d-float{animation:art3dFloat 5.6s var(--ease,ease-in-out) infinite alternate;transform-origin:50% 90%}
@keyframes art3dFloat{
  0%  {transform:translateY(0) rotate(0)}
  50% {transform:translateY(-3px) rotate(-1.2deg)}
  100%{transform:translateY(-1px) rotate(.8deg)}
}

/* Yutuq ochilganda — bir marta prujinali chiqish. */
.art3d-pop{animation:art3dPop .7s var(--spring,cubic-bezier(.34,1.56,.64,1)) both;transform-origin:50% 80%}
@keyframes art3dPop{
  0%  {transform:scale(.4) rotate(-14deg);opacity:0}
  60% {opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}

/* Tanlanmagan holat (masalan, hali ochilmagan yutuq) — rang so'ndiriladi, shakl qoladi. */
.art3d-muted{filter:grayscale(1) contrast(.85);opacity:.55}

@media (prefers-reduced-motion:reduce){
  .art3d-float,.art3d-pop{animation:none}
}
:root[data-motion="reduce"] .art3d-float,
:root[data-motion="reduce"] .art3d-pop{animation:none}