/* ═══════════════════════════════════════════════════════════════════════════
   static/attendance/css/att-anim.css — kirish/chiqish natijasining VIZUAL
   qaytishi (2026-08-20, 3-tahrir: SODDALASHTIRILDI).
   FAQAT TrainingUser id=221 uchun (darvoza app.js::attAnimOn()).

   ⛔ MUHIM: bu fayl SHU EKRANDAGI HECH QANDAY mavjud qoidani qayta
   belgilamaydi. Barcha tanlagichlar `.att-anim-*` / `.ai-*` prefikslari bilan
   YANGI — attendance/templates/attendance/index.html ichidagi `.statuscard`
   (holat kapsulasi + pulsli nuqta), `.bigbtn`, `.hist` ("So'nggi tarix"),
   `.att-grid` va h.k. TEGILMAYDI. Fayl faqat tajriba yoqilgan xodim uchun
   ma'no kasb etadi; boshqa hamma uchun sahifada `.att-anim-*` tugun umuman
   paydo bo'lmaydi va quyidagi qoidalarning BIRORTASI ham hech narsaga mos
   kelmaydi.

   ── 2026-08-20, 3-TAHRIRDA NIMA O'CHDI ──
   Ertalabki qurilishdagi uchta CSS-3D sahna (🏢 `.ap-*` ofis portali,
   🔐 `.ab-*` biometrik skaner, 🚀 `.ag-*` texno-darvoza), ularning
   `perspective` / `transform-style:preserve-3d` / `rotateX` pol tekisligi /
   tabaqa-eshiklari / skaner chizig'i / ustunlari va ~50 ta `@keyframes` —
   BUTUNLAY O'CHIRILDI (endi tanlanadigan sahna yo'q). "Ko'rinish tanlash"
   tugmasi va modal kartalari (`.att-anim-pick`, `.att-anim-char*`) ham
   O'CHIRILDI. Bu faylda ulardan BITTA ham qoldiq qoida yo'q.

   Ranglar — FAQAT mavjud token'lardan: umumiy kit (--hb-brd) va shu ekranning
   o'z mavzu o'zgaruvchilari (--ok/--warn/--danger/--panel/--text/--muted/
   --shadow-lg, index.html'da qorong'i+yorug' ikkalasi uchun belgilangan).
   Yangi qattiq hex kiritilmagan.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Markazlashgan ish maydoni (o'zgarmagan) ───────────────────────────── */
.att-anim-ws{
  max-width:960px; margin:0 auto;
  font-variant-numeric:tabular-nums;
}
/* Karta + holat kapsulasi + tugma + tarix — bitta ustunda, tabiiy o'qish
   tartibida. (Tajribasiz ko'rinishdagi 380px+tarix ikki ustunli `.att-grid`
   shu xodim uchun ISHLATILMAYDI — app.js render() boshqa konteyner tanlaydi.) */
.att-anim-ws .att-left,
.att-anim-ws .att-right{min-width:0}
.att-anim-ws .att-right{margin-top:6px}
/* Katta tugma va holat kartasi markazda qoladi (kartaning O'Z qoidalari
   o'zgarmaydi — faqat maksimal kenglik va markazlash). */
.att-anim-ws .statuscard{max-width:620px; margin-left:auto; margin-right:auto}
.att-anim-ws .hist{max-width:100%}

/* ═══════════════════════════════════════════════════════════════════════
   YAGONA KARTA — "Apple Glass" muloqot markazi (saqlandi)
   ═══════════════════════════════════════════════════════════════════════ */
.att-anim-stage{
  position:relative; margin:10px auto 2px; max-width:620px;
  border:1.5px solid var(--hb-brd, var(--border));
  border-radius:28px; overflow:hidden;
  background:color-mix(in srgb, var(--panel) 72%, transparent);
  -webkit-backdrop-filter:blur(28px) saturate(170%);
  backdrop-filter:blur(28px) saturate(170%);
  box-shadow:var(--shadow-lg, var(--shadow));

  /* Holatga qarab almashadigan YAGONA rang o'zgaruvchisi — belgi ham,
     halo ham, banner chegarasi ham shundan oziqlanadi. Standart (tinch
     holat) — bosiq kulrang. */
  --a-tone: var(--muted);
}
.att-anim-stage[data-state="in_success"],
.att-anim-stage[data-state="out_success"]{ --a-tone: var(--ok); }
.att-anim-stage[data-state="out_of_range"]{ --a-tone: var(--warn); }
.att-anim-stage[data-state="locked"]      { --a-tone: var(--danger); }

/* ── Belgi maydoni ─────────────────────────────────────────────────────
   Balandlik IKKI qiymatli: bannersiz (tinch/muvaffaqiyat) — ixcham 156px,
   banner chiqadigan xato holatlarida esa 206px, ya'ni banner uchun joy
   AYNAN kerak bo'lganda ochiladi va silliq (0.28s) o'sadi.
   ⚠️ Banner ATAYLAB `position:absolute` — alohida `padding-bottom` bilan joy
   ajratilsa, yorug' mavzuda kartaning tagida oq "kesilgan" tasma bo'lib
   ko'rinardi (2026-08-20 ertalabki qurilishda aniqlangan). */
.att-anim-icon{
  position:relative; height:156px;
  display:grid; place-items:center;
  transition:height .28s ease;
}
.att-anim-stage[data-state="out_of_range"] .att-anim-icon,
.att-anim-stage[data-state="locked"] .att-anim-icon{height:206px}
.ai-slot{
  position:absolute; width:96px; height:96px;
  display:block; pointer-events:none;
  opacity:0; transform:scale(.86);
  color:var(--a-tone);
  transition:opacity .26s ease, transform .26s ease, color .26s ease;
}
.ai-slot svg{width:100%; height:100%; display:block}
/* Xato belgisidagi fon "yo'lakcha" (originalda #dbe4ea/#dbdbdb — yorug'
   fonda deyarli ko'rinmas, qorong'ida esa ko'zni qamashtiruvchi oq edi).
   Endi u ham `currentColor`, faqat sustroq. */
.ai-slot .ic-track{opacity:.26}

/* Tinch holat: muvaffaqiyat belgisi bor, lekin BOSIQ — "tayyor" hissi.
   (Ikkinchi nusxa/idle uchun alohida SVG YO'Q — bitta tugun, bitta yuklash.) */
.att-anim-stage[data-state=""] .ai-ok{opacity:.16; transform:scale(.9)}

/* Natija: muvaffaqiyat */
.att-anim-stage[data-state="in_success"] .ai-ok,
.att-anim-stage[data-state="out_success"] .ai-ok{
  opacity:1; animation:aiPop .52s cubic-bezier(.34,1.56,.64,1) both;
}
/* Natija: xato (out_of_range / locked) — bitta va o'sha belgi, faqat ohang
   (`--a-tone`) farq qiladi. */
.att-anim-stage[data-state="out_of_range"] .ai-err,
.att-anim-stage[data-state="locked"] .ai-err{
  opacity:1; animation:aiPop .52s cubic-bezier(.34,1.56,.64,1) both;
}
/* Xato ko'rsatilayotganda tinch holatdagi bosiq belgi chiqib turmasin */
.att-anim-stage[data-state="out_of_range"] .ai-ok,
.att-anim-stage[data-state="locked"] .ai-ok{opacity:0; transform:scale(.86)}

@keyframes aiPop{
  0%  {opacity:0; transform:scale(.7)}
  55% {opacity:1; transform:scale(1.06)}
  100%{opacity:1; transform:scale(1)}
}

/* ── Yumshoq yorug'lik dog'i belgi ortida ──────────────────────────────── */
.att-anim-halo{
  position:absolute; width:212px; height:212px; border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--a-tone) 26%, transparent) 0%,
    transparent 68%);
  opacity:0; transform:scale(.72);
  transition:opacity .3s ease, transform .3s ease;
}
.att-anim-stage:not([data-state=""]) .att-anim-halo{opacity:1; transform:scale(1)}

/* ── Ogohlantirish banneri (shisha) — o'zgarmagan xulq ─────────────────── */
.att-anim-banner{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:4;
  display:flex; align-items:center; gap:9px;
  padding:11px 14px; border-radius:16px;
  border:1.5px solid var(--hb-brd, var(--border));
  background:color-mix(in srgb, var(--panel) 68%, transparent);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  color:var(--text); font-size:12.5px; font-weight:700; line-height:1.35;
  font-variant-numeric:tabular-nums;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}
.att-anim-stage[data-state="out_of_range"] .att-anim-banner,
.att-anim-stage[data-state="locked"] .att-anim-banner{opacity:1; transform:translateY(0)}
.att-anim-stage[data-state="out_of_range"] .att-anim-banner,
.att-anim-stage[data-state="locked"] .att-anim-banner{
  border-color:color-mix(in srgb, var(--a-tone) 55%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   Harakatni kamaytirish (erishuvchanlik)
   Tizim sozlamasida "reduce motion" bo'lsa — HECH QANDAY harakat yo'q,
   lekin NATIJA (belgi, banner matni, holat) baribir TO'LIQ ko'rinadi:
   bu yerda animatsiya faqat bezak, ma'lumot tashimaydi.
   ⚠️ SVG fayllar ICHIDAGI SMIL animatsiyasi CSS `animation:none` bilan
   to'xtamaydi — shu bois `animation-play-state` emas, `visibility`ga
   tayanmaymiz: belgi oxirgi (to'liq chizilgan) ko'rinishida turadi.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .ai-slot, .att-anim-halo, .att-anim-banner, .att-anim-icon{transition:none}
  .att-anim-stage[data-state="in_success"] .ai-ok,
  .att-anim-stage[data-state="out_success"] .ai-ok,
  .att-anim-stage[data-state="out_of_range"] .ai-err,
  .att-anim-stage[data-state="locked"] .ai-err{
    animation:none; opacity:1; transform:scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobil
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:520px){
  /* Tor ekranda banner matni ikki qatorga o'ralishi mumkin — karta biroz
     pastroq, belgi kichikroq, lekin nisbatlar saqlanadi. */
  .att-anim-stage{border-radius:22px; margin-top:6px}
  .att-anim-icon{height:138px}
  /* Xato holatida banner matni tor ekranda IKKI qatorga o'ralishi mumkin —
     shu bois mobil qiymat desktopdagidan nisbatan kattaroq ochiladi. */
  .att-anim-stage[data-state="out_of_range"] .att-anim-icon,
  .att-anim-stage[data-state="locked"] .att-anim-icon{height:196px}
  .ai-slot{width:80px; height:80px}
  .att-anim-halo{width:176px; height:176px}
  .att-anim-banner{left:8px; right:8px; bottom:8px; padding:9px 11px; font-size:11.5px}
}