/* ══════════════════════════════════════════════════════════════════
   Cognita — «Biz haqimizda»: sehrli atmosfera (about-magic.js bilan birga).
     • #abSky  — butun oyna foni: yulduzlar, nur changi, uchar yulduz (canvas)
     • .abm-aurora — tumanlik/aurora (faqat CSS: transform + opacity, arzon)
     • #abFx   — sahna effektlari: sehrli halqa, chaqiruv marosimi, uchqunlar
     • sahifaning qolgan qismi: karta nuri, sarlavha chizig'i, raqam uchquni
   Hamma narsa `body.abm-on` ostida — JS ishlamasa hech narsa o'zgarmaydi.
   Sinflar abm- prefiksi bilan; pages.css ga tegilmaydi.
   ══════════════════════════════════════════════════════════════════ */
/* pages.css dagi tokenlar (shu fayl mustaqil ham ishlasin); --ab-mood ni dvigatel body da yangilaydi */
:root{ --ab-mood:#32E6D3; --h-acc:#32E6D3; --h-acc2:#42C9FF; --h-acct:#5FF0DE; --h-gold:#F4BD63 }

/* body o'z stacking context'iga ega bo'lmasa, z-index:-1 qatlamlar body fonining
   ORTIDA qolib ketadi (html da alohida fon bor) — shuning uchun ajratamiz. */
body.abm-on[data-page="about"]{isolation:isolate}
/* pages.css ning statik yulduzlari — eng uzoq, xira qatlam sifatida qoladi */
body.abm-on[data-page="about"]::before{opacity:.3}

/* ── osmon ── */
#abSky{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-1;display:block;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
body.abm-on #abSky{opacity:1}

/* ── aurora / tumanlik: ikki yirik gradient qatlam, sekin suzadi ── */
.abm-aurora{--abm-rgb:50,230,211;position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-2;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.8s ease}
body.abm-on .abm-aurora{opacity:1}
.abm-aurora i{position:absolute;display:block;will-change:transform,opacity}
.abm-aurora i:nth-child(1){left:-20%;top:-24%;width:140%;height:78%;
  background:
    radial-gradient(ellipse 30% 44% at 70% 46%,rgba(var(--abm-rgb),.17),transparent 72%),
    radial-gradient(ellipse 26% 40% at 22% 34%,rgba(124,108,255,.13),transparent 72%),
    radial-gradient(ellipse 20% 34% at 47% 24%,rgba(66,201,255,.08),transparent 72%);
  animation:abm-aur1 36s ease-in-out infinite alternate}
.abm-aurora i:nth-child(2){left:-15%;bottom:-30%;width:130%;height:70%;
  background:
    radial-gradient(ellipse 30% 42% at 26% 52%,rgba(var(--abm-rgb),.10),transparent 72%),
    radial-gradient(ellipse 28% 40% at 80% 46%,rgba(157,120,255,.10),transparent 72%);
  animation:abm-aur2 47s ease-in-out infinite alternate}
@keyframes abm-aur1{from{transform:translate3d(-3%,0,0) skewX(-8deg) scale(1);opacity:.75}to{transform:translate3d(4%,3%,0) skewX(6deg) scale(1.12);opacity:1}}
@keyframes abm-aur2{from{transform:translate3d(3%,2%,0) scale(1.08);opacity:1}to{transform:translate3d(-4%,-2%,0) scale(1);opacity:.7}}

/* ── sahna effektlari (o'lcham va joylashuvni JS belgilaydi: orbitdan biroz keng, oynadan chiqmaydi) ── */
#abFx{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
/* chaqnash pardasi: robot USTIDA, canvas bilan bir xil o'lchamda, toshib chiqmaydi */
#orbit > .abm-veil{position:absolute;left:0;top:0;width:100%;height:100%;z-index:6;overflow:hidden;pointer-events:none}
.abm-veil .abm-flash{--abm-rgb:50,230,211;position:absolute;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.97) 0,rgba(255,255,255,.72) 9%,rgba(var(--abm-rgb),.52) 24%,rgba(var(--abm-rgb),.15) 46%,transparent 68%)}
.abm-veil .abm-flash.abm-go{animation:abm-flash .68s cubic-bezier(.2,.7,.2,1) both}
@keyframes abm-flash{0%{opacity:0;transform:scale(.16)}19%{opacity:1;transform:scale(.82)}100%{opacity:0;transform:scale(1.34)}}

/* ── kartalar: ko'ringanda bir martalik nur o'tishi (JS <i class="abm-sheen"> qo'shadi va o'chiradi) ── */
body.abm-on[data-page="about"] .box > .abm-sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:1}
body.abm-on[data-page="about"] .box > .abm-sheen::before{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:44%;
  background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.035) 30%,rgba(190,250,255,.13) 50%,rgba(255,255,255,.035) 70%,transparent 100%);
  transform:translateX(-130%) skewX(-16deg);animation:abm-sheen 1.25s cubic-bezier(.3,.1,.2,1) .3s both}
@keyframes abm-sheen{from{transform:translateX(-130%) skewX(-16deg)}to{transform:translateX(260%) skewX(-16deg)}}

/* ── bo'lim sarlavhasi ostida sehrli chiziq: chapdan chiziladi, uchida uchqun yuguradi ── */
body.abm-on[data-page="about"] .sec-head h2.h{position:relative}
body.abm-on[data-page="about"] .sec-head h2.h::after{content:"";position:absolute;left:0;bottom:-8px;width:132px;max-width:60%;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--ab-mood,var(--h-acc)),var(--h-acc2) 55%,rgba(157,120,255,0));
  opacity:0;transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.2,.8,.2,1) .25s,opacity .35s ease .25s}
body.abm-on[data-page="about"] .sec-head h2.h.abm-seen::after{opacity:.9;transform:none}
body.abm-on[data-page="about"] .sec-head h2.h::before{content:"";position:absolute;left:-4px;bottom:-12px;width:10px;height:10px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0,var(--h-acct) 34%,rgba(95,240,222,0) 70%)}
body.abm-on[data-page="about"] .sec-head h2.h.abm-seen::before{animation:abm-linespark 1s cubic-bezier(.2,.8,.2,1) .25s both}
@keyframes abm-linespark{0%{opacity:0;transform:translateX(0) scale(.4)}14%{opacity:1}78%{opacity:1}100%{opacity:0;transform:translateX(128px) scale(1.1)}}

/* ── raqamlar yonida to'rt qirrali uchqun ── */
body.abm-on[data-page="about"] .stat b::after{content:"";display:inline-block;width:.34em;height:.34em;margin-left:.16em;vertical-align:.62em;
  background:linear-gradient(135deg,#fff,var(--h-gold));
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  opacity:0;transform:scale(0) rotate(-40deg)}
body.abm-on[data-page="about"] .stat.abm-seen b::after{animation:abm-starin .7s cubic-bezier(.34,1.56,.44,1) .55s both,abm-twinkle 5.5s ease-in-out 1.6s infinite}
body.abm-on[data-page="about"] .stat:nth-child(2).abm-seen b::after{animation-delay:.7s,2.9s}
body.abm-on[data-page="about"] .stat:nth-child(3).abm-seen b::after{animation-delay:.85s,4.1s}
body.abm-on[data-page="about"] .stat:nth-child(4).abm-seen b::after{animation-delay:1s,2.2s}
@keyframes abm-starin{from{opacity:0;transform:scale(0) rotate(-40deg)}to{opacity:.9;transform:none}}
@keyframes abm-twinkle{0%,72%,100%{opacity:.9;transform:none}80%{opacity:.35;transform:scale(.55) rotate(18deg)}88%{opacity:1;transform:scale(1.25) rotate(0deg)}}

/* ── harakatni kamaytirish: hammasi statik va darhol ko'rinadi ── */
@media (prefers-reduced-motion:reduce){
  #abSky,.abm-aurora{transition:none}
  .abm-aurora i{animation:none}
  .abm-veil{display:none}
  body.abm-on[data-page="about"] .sec-head h2.h::after{transition:none}
  body.abm-on[data-page="about"] .sec-head h2.h.abm-seen::before{animation:none}
  body.abm-on[data-page="about"] .stat.abm-seen b::after{animation:none;opacity:.85;transform:none}
}