/* S58 (agent D) motion.css: «Aurora Vision» harakatlari. Faqat transform / opacity (layout sakramaydi).
   Daraja: <html data-motion="full|lite|off"> (prefs.js; tizimda reduced-motion bo'lsa doim off). Tugma effekti: data-btn.
   Bo'limlar: 1) asos  2) aurora fon  3) sahifa o'tishi  4) hover tizimi  5) bosish  6) oynalar  7) mikro  8) tugma effektlari
              9) drag & drop + tezkor tugmalar  10) darajalar (lite / off / reduced-motion) */

/* ---- 1) asos ---- */
:root { --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.3,1.25,.4,1); --ease-press:cubic-bezier(.22,1,.36,1);
  --t-page:.18s; --t-lift:.48s; --rise:8px; }

/* ---- 2) aurora fon (bg.js yaratadi: .aurora > i.b1, i.b2, i.b3 + svg.grain) ---- */
.aurora { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--page); contain:strict; }
.aurora i { position:absolute; width:70vmax; height:70vmax; border-radius:50%; opacity:var(--a-op); will-change:transform;
  animation:s58drift 80s ease-in-out infinite alternate; }
.aurora .b1 { left:-22vmax; top:-28vmax; background:radial-gradient(closest-side, var(--a1), transparent); }
.aurora .b2 { right:-26vmax; top:8vmax; background:radial-gradient(closest-side, var(--a2), transparent); opacity:calc(var(--a-op) * .65); animation-duration:90s; animation-delay:-30s; }
.aurora .b3 { left:18vmax; bottom:-34vmax; background:radial-gradient(closest-side, var(--a3), transparent); animation-duration:72s; animation-delay:-55s; }
.aurora svg.grain { position:absolute; inset:0; width:100%; height:100%; opacity:.035; mix-blend-mode:multiply; }
html[data-theme="dark"] .aurora svg.grain { mix-blend-mode:screen; opacity:.045; }
@keyframes s58drift {
  0% { transform:translate3d(0,0,0) scale(1); }
  50% { transform:translate3d(6vmax,4vmax,0) scale(1.08); }
  100% { transform:translate3d(-4vmax,7vmax,0) scale(.96); }
}
html.bg-paused .aurora i, html.bg-paused .au-band span { animation-play-state:paused; }
/* kirish lentasidagi aurora (H.bg.mount(#loginAurora, {place:'login'})): o'sha 3 dog' + don, faqat lenta ichida.
   login.css (A) dog'larning joyi va rangini beradi; bu yerda: lentadan chiqmaydi, fon qoplamaydi, sekin suzadi. */
.band .aurora, .aurora.au-band { position:absolute; inset:0; z-index:0; overflow:hidden; background:transparent; contain:paint; }
.au-band span { will-change:transform; animation:s58band 34s ease-in-out infinite alternate; }
.au-band .au2 { animation-duration:42s; animation-delay:-14s; }
.au-band .au3 { animation-duration:28s; animation-delay:-22s; }
.au-band svg.grain { position:absolute; inset:0; width:100%; height:100%; opacity:.06; mix-blend-mode:screen; }
@keyframes s58band {
  0% { transform:translate3d(0,0,0) scale(1); }
  50% { transform:translate3d(48px,26px,0) scale(1.1); }
  100% { transform:translate3d(-36px,40px,0) scale(.95); }
}

/* ---- 3) sahifa o'tishi va ro'yxat ketma-ketligi (H.motion.enter qo'yadi, 900 ms dan keyin oladi) ---- */
@keyframes s58in { from { opacity:0; transform:translateY(var(--rise)); } }
@keyframes s58fade { from { opacity:0; } }
@keyframes s58item { from { opacity:0; transform:translateY(10px) scale(.985); } }
@keyframes s58pane { from { opacity:0; transform:translateX(18px); } }
.m-enter > * { animation:s58in var(--t-page) var(--ease-out) backwards; }
.m-enter :is(.list, .grid, .clist, .tiles, .wgrid, .wsum, tbody) > * { animation:s58item .42s var(--ease-out) backwards; }
.m-enter :is(.list, .grid, .clist, .tiles, .wgrid, .wsum, tbody) > :nth-child(2) { animation-delay:.03s; }
.m-enter :is(.list, .grid, .clist, .tiles, .wgrid, .wsum, tbody) > :nth-child(3) { animation-delay:.06s; }
.m-enter :is(.list, .grid, .clist, .tiles, .wgrid, .wsum, tbody) > :nth-child(4) { animation-delay:.09s; }
.m-enter :is(.list, .grid, .clist, .tiles, .wgrid, .wsum, tbody) > :nth-child(5) { animation-delay:.12s; }
.m-enter :is(.list, .grid, .clist, .tiles, .wgrid, .wsum, tbody) > :nth-child(6) { animation-delay:.15s; }
.m-enter :is(.list, .grid, .clist, .tiles, .wgrid, .wsum, tbody) > :nth-child(7) { animation-delay:.18s; }
.m-enter :is(.list, .grid, .clist, .tiles, .wgrid, .wsum, tbody) > :nth-child(8) { animation-delay:.21s; }
.m-enter :is(.list, .grid, .clist, .tiles, .wgrid, .wsum, tbody) > :nth-child(n+9) { animation-delay:.24s; }
.m-pane { animation:s58pane .32s var(--ease-out) backwards; }

/* ---- 4) hover tizimi (faqat sichqoncha: telefonda «yopishib qolgan» hover yo'q) ---- */
@media (hover:hover) and (pointer:fine) {
  :is(.box.sumc, .att, .tile, .card.task, .wg > .box, .qbtn, .sw-card) { transition:transform var(--t-lift) var(--ease-out), border-color .25s, background-color .25s; }
  :is(.box.sumc, .att, .tile, .card.task, .wg > .box, .sw-card):hover { transform:translateY(-2px); border-color:var(--v-s); background-color:color-mix(in srgb, var(--v) 3%, var(--card)); }
  .cli:not(.split .cli) { transition:transform var(--t-lift) var(--ease-out), border-color .25s, background-color .25s; }
  .cli:not(.split .cli):hover { transform:translateY(-2px); border-color:var(--v-s); background-color:color-mix(in srgb, var(--v) 3%, var(--card)); }
  /* yorug'lik supurgisi: karta ustidan bir marta o'tadi */
  :is(.box.sumc, .att, .wg > .box) { position:relative; overflow:hidden; }
  :is(.box.sumc, .att, .wg > .box)::after { content:''; position:absolute; top:0; bottom:0; left:0; width:60%; pointer-events:none;
    background:linear-gradient(105deg, transparent 20%, color-mix(in srgb, var(--v) 9%, transparent) 50%, transparent 80%);
    transform:translateX(-120%); opacity:0; }
  :is(.box.sumc, .att, .wg > .box):hover::after { animation:s58sweep .9s var(--ease-out) 1; }
  /* havola tagchizig'i chizilib chiqadi */
  :is(.lnk, .task .cl, .ext, a.more) { background:linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat; transition:background-size .3s var(--ease-out), color .2s; text-decoration:none; }
  :is(.lnk, .task .cl, .ext, a.more):hover { background-size:100% 1.5px; text-decoration:none; }
  /* jadval qatori: chapda binafsha chiziq o'sadi */
  .t tr.click td:first-child { background-image:linear-gradient(var(--v), var(--v)); background-repeat:no-repeat; background-position:left center; background-size:0 100%; transition:background-size .25s var(--ease-out), background-color .2s; }
  .t tr.click:hover td:first-child { background-size:3px 100%; }
  .split .cli { transition:background .2s, border-color .25s; }
}
@keyframes s58sweep { 0% { opacity:1; transform:translateX(-120%); } 100% { opacity:1; transform:translateX(220%); } }

/* ---- 5) bosish ---- */
:is(.btn, .iconbtn, .chip, .seg button, .tile, .att, .cli, .sumc, .qbtn, .opt, .person) { transition-property:transform, background, border-color, color; transition-duration:.16s; transition-timing-function:var(--ease-press); }
:is(.btn, .iconbtn, .chip, .seg button, .qbtn, .opt):active:not(:disabled) { transform:scale(.97); }
:is(.tile, .att, .cli, .sumc, .person):active { transform:scale(.985); }
html[data-btn="soft"] .btn.solid:hover:not(:disabled) { transform:translateY(-1px); }

/* ---- 6) oynalar: prujinali chiqish ---- */
.sheet { transition:transform .42s var(--ease-spring), opacity .2s; }
.toast { transition:opacity .2s, transform .38s var(--ease-spring); }
/* kompyuterda sheet = o'ngdan chiqadigan panel (base.css: top:0; right:0; bottom:0; translateX(100%) -> .on da none).
   Markazlash uchun yarim kenglik/balandlik surish bu yerda bo'lmasin: u panelni ekrandan chiqarib, bo'sh oq to'rtburchak qoldirardi (fix-oq-oyna, 2026-11-08). */
.skel { background:linear-gradient(90deg, var(--panel) 0%, var(--surf) 40%, var(--panel) 80%); background-size:200% 100%; animation:s58shim 1.2s linear infinite; }
@keyframes s58shim { to { background-position:-200% 0; } }

/* ---- 7) mikro: belgi chiziladi, karta yig'iladi, nuqtalar sochiladi ---- */
.m-check path { stroke-dasharray:24; stroke-dashoffset:24; animation:s58draw .42s var(--ease-out) forwards; }
@keyframes s58draw { to { stroke-dashoffset:0; } }
.m-collapse { animation:s58collapse .36s var(--ease-out) forwards; pointer-events:none; }
@keyframes s58collapse { to { opacity:0; transform:scale(.96) translateY(-4px); } }
.confetti { position:fixed; left:0; top:0; width:0; height:0; z-index:70; pointer-events:none; }
.confetti i { position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; }
.confetti i:nth-child(8n+1) { background:#7703fc; } .confetti i:nth-child(8n+2) { background:#3894f7; }
.confetti i:nth-child(8n+3) { background:#16a34a; } .confetti i:nth-child(8n+4) { background:#a970ff; }
.confetti i:nth-child(8n+5) { background:#d97706; } .confetti i:nth-child(8n+6) { background:#7fe0a8; }
.confetti i:nth-child(8n+7) { background:#e2445c; } .confetti i:nth-child(8n+8) { background:#d9c2fe; }

/* ---- 8) tugma effektlari: data-btn = soft | pulse | ripple | none (bg.js .fx sinfini qo'yadi) ---- */
:is(.btn, .iconbtn, .chip, .tile, .qbtn, .opt) { position:relative; }
@keyframes s58pulse { from { opacity:.55; transform:scale(1); } to { opacity:0; transform:scale(1.18); } }
@keyframes s58ripple { from { opacity:.26; transform:translate(-50%,-50%) scale(0); } to { opacity:0; transform:translate(-50%,-50%) scale(1); } }
html[data-btn="pulse"] .fx::after { content:''; position:absolute; inset:-2px; border-radius:inherit; border:2px solid var(--v); pointer-events:none; animation:s58pulse .55s var(--ease-out) forwards; }
html[data-btn="ripple"] :is(.btn, .iconbtn, .chip, .tile, .qbtn, .opt) { overflow:hidden; }
html[data-btn="ripple"] .fx::after { content:''; position:absolute; left:50%; top:50%; width:220%; aspect-ratio:1; border-radius:50%; background:currentColor; pointer-events:none; animation:s58ripple .6s var(--ease-out) forwards; }
html[data-btn="none"] :is(.btn, .iconbtn, .chip, .tile, .att, .cli, .sumc, .qbtn, .opt, .seg button) { transition:none; }
html[data-btn="none"] :is(.btn, .iconbtn, .chip, .tile, .att, .cli, .sumc, .qbtn, .opt, .seg button):active { transform:none; }

/* ---- 9) drag & drop (dnd.js) va tezkor tugmalar (quickbar.js) ---- */
.wgrid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.wsum { display:contents; }
.wg { position:relative; min-width:0; }
.wg > .box, .wg > .sumc { height:100%; width:100%; }
.wg > .tiles { margin-top:0; }
.wg > h2.h:first-child, .wg > .wctl + h2.h { margin-top:0; }
@media (min-width:640px) { .wgrid { grid-template-columns:repeat(2, minmax(0,1fr)); } .wg.w-full { grid-column:1 / -1; } }
@media (min-width:1024px) { .wgrid { grid-template-columns:repeat(6, minmax(0,1fr)); } .wg.w-third { grid-column:span 2; } .wg.w-half { grid-column:span 3; } }
.editing .wg, .editing [data-sort-item] { cursor:grab; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.wgrid.editing { row-gap:26px; padding-top:14px; }
.wgrid.editing .wg { outline:1.5px dashed var(--v-s); outline-offset:4px; border-radius:var(--r); }
.wgrid.editing .wg > :not(.wctl) { pointer-events:none; }
.wctl { position:absolute; top:-14px; right:12px; z-index:3; display:flex; gap:2px; padding:3px; border-radius:var(--pillr); background:var(--card); border:1px solid var(--line); }
.wctl .iconbtn { min-width:34px; min-height:34px; padding:0; }
.grip { cursor:grab; touch-action:none; }
.dragging { z-index:30; pointer-events:none; }
.dragging > *, .dragging.qitem, li.dragging { outline:2px solid var(--v); outline-offset:2px; border-color:var(--v); }
.sorting, .sorting * { cursor:grabbing; }
.sidenav.editing button { outline:1px dashed rgba(255,255,255,.28); outline-offset:-2px; }
.sidenav.editing button > * { pointer-events:none; }
.ebar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px; border-radius:var(--r2); background:var(--v-t); margin:0 0 14px; }
.ebar p { flex:1 1 240px; margin:0; font-size:14px; }
.qbar { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.qbar::-webkit-scrollbar { display:none; }
.qbtn { flex:none; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:6px 14px 6px 10px; border:1px solid var(--line); border-radius:var(--pillr); background:var(--card); color:var(--ink); font-weight:600; font-size:14px; white-space:nowrap; }
.qbtn .ic { width:18px; height:18px; color:var(--v); }
.qbtn.qadd { border-style:dashed; color:var(--v); }
.qitem { flex:none; display:inline-flex; align-items:center; gap:2px; padding:3px 4px 3px 10px; border:1px dashed var(--v-s); border-radius:var(--pillr); background:var(--card); }
.qitem .qlab { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:14px; padding-right:4px; }
.qitem .qlab .ic { width:18px; height:18px; color:var(--v); }
.qitem .iconbtn { min-width:30px; min-height:30px; padding:0; }
.qitem .iconbtn .ic { width:16px; height:16px; }

/* ---- 10) darajalar ---- */
html[data-motion="lite"] .m-enter > * { animation-name:s58fade; }
html[data-motion="lite"] .m-enter :is(.list, .grid, .clist, .tiles, .wgrid, .wsum, tbody) > * { animation:none; }
html[data-motion="lite"] :is(.aurora i, .au-band span) { animation:none; }
html[data-motion="lite"] :is(.box.sumc, .att, .wg > .box):hover::after { animation:none; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
html[data-motion="off"] :is(.box.sumc, .att, .tile, .card.task, .cli, .wg > .box):hover { transform:none; }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  :is(.box.sumc, .att, .tile, .card.task, .cli, .wg > .box):hover { transform:none; }
}