/* Ichki Nazorat — Glass motion layer (demo: docs/redesign/animations-demo.html).
   Quiet, functional motion: only transform / opacity / scale / translate / filter are animated.
   - Everything sits inside (prefers-reduced-motion: no-preference), so users who asked the OS for
     less motion get none; legacy keyboard mode ([data-motion-input=keyboard]) is excluded too.
   - Rules live in @layer ichki-product with !important and id padding (:not(#__nm)) so they beat the
     legacy engine's own layered !important declarations, and still apply on clean glass pages.
   - Row "flash"/"removing" use transitions (not animations): transitions override !important
     backgrounds of the legacy engine, animations would not. Classes are set by ichki-glass-motion.js. */

:root{--ig-ease:cubic-bezier(.2,.8,.2,1)}

@media (prefers-reduced-motion:no-preference){

/* ---------- 1. Page transitions (cross-document View Transitions) ----------
   Names exist only while a transition is active: a permanent view-transition-name would turn .work
   into a backdrop root and switch off the glass blur of every panel inside it. */
@view-transition{navigation:auto}
html:active-view-transition body .app > .work{view-transition-name:ig-main}
html:active-view-transition body .app > .side{view-transition-name:ig-side}
html:active-view-transition body .app > .work > .topbar{view-transition-name:ig-top}
html:active-view-transition body .app > .side .nav-item.active{view-transition-name:ig-nav}
::view-transition-old(ig-main){animation:ig-vt-out 140ms ease-in both}
::view-transition-new(ig-main){animation:ig-vt-in 300ms var(--ig-ease) both}
::view-transition-old(ig-side),::view-transition-old(ig-top){display:none}
::view-transition-new(ig-side),::view-transition-new(ig-top){animation:none}
::view-transition-group(ig-nav){animation-duration:320ms;animation-timing-function:var(--ig-ease)}
::view-transition-old(ig-nav),::view-transition-new(ig-nav){animation-duration:320ms;height:100%}

@keyframes ig-vt-out{to{opacity:0;transform:translateY(-4px)}}
@keyframes ig-vt-in{from{opacity:0;transform:translateY(10px)}}
@keyframes ig-rise{from{opacity:0;transform:translateY(8px)}}
@keyframes ig-rise-sm{from{opacity:0;transform:translateY(5px)}}
@keyframes ig-fill-w{from{width:0}}
@keyframes ig-fill-h{from{transform:scaleY(0)}}
@keyframes ig-pop-in{from{opacity:0;transform:translateY(10px) scale(.965)}}
@keyframes ig-fade-in{from{opacity:0}}
@keyframes ig-drop{from{opacity:0;transform:translateY(-4px) scale(.97)}}
@keyframes ig-spin-in{from{transform:rotate(-120deg) scale(.6);opacity:0}}
@keyframes ig-shimmer{from{background-position:180% 0}to{background-position:-80% 0}}
@keyframes ig-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}80%,100%{box-shadow:0 0 0 6px transparent}}

@layer ichki-product{

/* ---------- 2a. Staggered entrance, first paint only (html.ig-settled is set ~1.8s after load) ----------
   fill-mode "backwards" leaves no transform behind afterwards, so rows/cards don't keep a stacking
   context (otherwise an open "•••" menu would slide under the next row). */
html:not(.ig-settled):not([data-motion-input=keyboard]) body .app > .work > :not(.topbar):not(.admin-shell):not(.ia-shell):not(dialog):not(script):not(#__nm):not(#__nn),
html:not(.ig-settled):not([data-motion-input=keyboard]) body .app :is(.admin-view.active,.ia-shell) > :not(dialog):not(script):not(#__nm):not(#__nn),
html:not(.ig-settled):not([data-motion-input=keyboard]) body .app .admin-shell > :not(.admin-view):not(dialog):not(script):not(#__nm):not(#__nn){
  animation:ig-rise-sm 440ms var(--ig-ease) backwards!important;animation-delay:calc(var(--ig-i,0) * 40ms)!important}
html:not(.ig-settled):not([data-motion-input=keyboard]) body .app .work :is(
  .kpis,.vk,.ia-kpis,.pc-stats,.price-analytics-metrics,.schedule-metrics,.coverage-metrics,.cc-admin-metrics,
  .metric-grid,.summary-grid,.wt-kpis,.expiry-admin-metrics,
  .rowlist,.stack,.employee-table,.accounts-list,.assignment-list,.wt-task-list,.schedule-list,.ia-detail-body,
  .expiry-unit-list,.cc-staff-list,.cc-upload-list,.coverage-priorities,.coverage-directions
) > :not(dialog):not(script):not(#__nm):not(#__nn),
html:not(.ig-settled):not([data-motion-input=keyboard]) body .app .work tbody:not(#price-app tbody) > tr:not(#__nm):not(#__nn){
  animation:ig-rise 440ms var(--ig-ease) backwards!important;animation-delay:calc(120ms + var(--ig-i,0) * 30ms)!important}
/* delay index: children 1..10 get their own slot, the rest share the last one */
body .app .work * > :nth-child(1){--ig-i:0} body .app .work * > :nth-child(2){--ig-i:1}
body .app .work * > :nth-child(3){--ig-i:2} body .app .work * > :nth-child(4){--ig-i:3}
body .app .work * > :nth-child(5){--ig-i:4} body .app .work * > :nth-child(6){--ig-i:5}
body .app .work * > :nth-child(7){--ig-i:6} body .app .work * > :nth-child(8){--ig-i:7}
body .app .work * > :nth-child(9){--ig-i:8} body .app .work * > :nth-child(10){--ig-i:9}
body .app .work * > :nth-child(n+11){--ig-i:10}
body .app > .work > :nth-child(1){--ig-i:0} body .app > .work > :nth-child(2){--ig-i:1} body .app > .work > :nth-child(3){--ig-i:2}
body .app > .work > :nth-child(4){--ig-i:3} body .app > .work > :nth-child(n+5){--ig-i:4}

/* ---------- 2c. Progress bars fill, chart columns grow (first paint) ---------- */
html:not(.ig-settled):not([data-motion-input=keyboard]) body .app .work :is(.track-bar > span,.mini-progress > i,.bar > i,.bar-track > i):not(#__nm):not(#__nn){
  animation:ig-fill-w 900ms var(--ig-ease) backwards!important;animation-delay:calc(200ms + var(--ig-i,0) * 45ms)!important}
html:not(.ig-settled):not([data-motion-input=keyboard]) body .app .work .gbars > .gbar > i:not(#__nm):not(#__nn){
  transform-origin:bottom!important;animation:ig-fill-h 700ms var(--ig-ease) backwards!important;animation-delay:calc(160ms + var(--ig-b,0) * 14ms)!important}
body .app .work .gbars > .gbar:nth-child(5n+1) > i{--ig-b:0} body .app .work .gbars > .gbar:nth-child(n+6) > i{--ig-b:5}
body .app .work .gbars > .gbar:nth-child(n+11) > i{--ig-b:10} body .app .work .gbars > .gbar:nth-child(n+16) > i{--ig-b:15}
body .app .work .gbars > .gbar:nth-child(n+21) > i{--ig-b:20} body .app .work .gbars > .gbar:nth-child(n+26) > i{--ig-b:25}

/* ---------- 3a. Press feedback + soft hover glow ---------- */
html:not([data-motion-input=keyboard]) body .app :is(.work button,.work .button,.work .btn,.work summary,.topbar .icon-btn,.side a):not(.price-table-scroll *):not(#__nm):not(#__nn){
  transition:scale 120ms var(--ig-ease),background-color 150ms ease,border-color 150ms ease,color 150ms ease,box-shadow 220ms ease,filter 150ms ease,opacity 150ms ease!important}
html:not([data-motion-input=keyboard]) body .app :is(.work button:not(:disabled),.work .button,.work .btn,.work summary,.topbar .icon-btn):not(.price-table-scroll *):active:not(#__nm):not(#__nn){scale:.96!important;transform:none!important}
html:not([data-motion-input=keyboard]) body .app .work :is(button,.button,.btn):not(:disabled):not(.price-table-scroll *):hover:not(#__nm):not(#__nn){filter:brightness(1.06)!important}

/* ---------- 3b. Hover lift for tiles and cards ---------- */
html:not([data-motion-input=keyboard]) body .app .work :is(.kpi,.ia-kpi,.pc-stat,.metric,.assignment-card,.survey-template-card,.account-card,.wt-task-card,.schedule-card,.rowlist > a.it,.coverage-metrics > article,.schedule-metrics > article,.cc-admin-metrics > article):not(#__nm):not(#__nn){
  transition:translate 260ms var(--ig-ease),border-color 200ms ease,box-shadow 260ms ease,background-color 200ms ease!important}
html:not([data-motion-input=keyboard]) body .app .work :is(.kpi,.ia-kpi,.pc-stat,.metric,.assignment-card,.survey-template-card,.account-card,.wt-task-card,.schedule-card,.rowlist > a.it,.coverage-metrics > article,.schedule-metrics > article,.cc-admin-metrics > article):hover:not(:has(details[open])):not(#__nm):not(#__nn){
  translate:0 -2px!important;box-shadow:0 14px 30px -18px rgba(0,0,0,.45)!important}

/* ---------- 3c. Dialogs: scale in over a blurred backdrop ---------- */
html:not([data-motion-input=keyboard]) body dialog[open]:not(.inspection-review-dialog):not(#__nm):not(#__nn){animation:ig-pop-in 260ms var(--ig-ease)!important}
html:not([data-motion-input=keyboard]) body dialog[open]:not(.inspection-review-dialog):not(#__nm):not(#__nn)::backdrop{
  animation:ig-fade-in 260ms ease!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important}

/* ---------- 3d. Dropdown menus ("•••", "Другие действия") ---------- */
html:not([data-motion-input=keyboard]) body .app details[open] > :is(.menu-pop,.dropdown,.menu-panel):not(#__nm):not(#__nn){animation:ig-drop 240ms var(--ig-ease)!important;transform-origin:top right!important}

/* ---------- 3e. Theme switch: colours cross-fade, the new icon spins in (html.ig-theming via JS) ---------- */
html.ig-theming body,html.ig-theming body *:not(#__nm):not(#__nn),html.ig-theming body *::before,html.ig-theming body *::after{
  transition:background-color 380ms ease,color 380ms ease,border-color 380ms ease,fill 380ms ease,stroke 380ms ease!important}
html.ig-theming body [data-theme-ic]:not(#__nm):not(#__nn){animation:ig-spin-in 450ms var(--ig-ease)!important}

/* ---------- 4a. Skeleton shimmer (the loading line is restyled below, outside the media query) ---------- */
body .app .work [data-error][hidden] + p[role=status]:last-child::before,
body .app .work [data-error][hidden] + p[role=status]:last-child::after{animation:ig-shimmer 1.3s linear infinite}

/* ---------- 4b. Attention dots pulse ("Ожидает", overdue) ---------- */
html:not([data-motion-input=keyboard]) body .app .work :is(.badge.pending,.badge.overdue,.chip.overdue)::before{animation:ig-ping 1.8s ease-out infinite!important}

/* ---------- 4c. Row feedback after an action ---------- */
body .app .work .ig-flash:not(#__nm):not(#__nn){background-color:var(--good-bg)!important;box-shadow:inset 3px 0 0 var(--good)!important;transition:none!important}
body .app .work .ig-flash-out:not(#__nm):not(#__nn){transition:background-color 1.3s ease-out,box-shadow 1.3s ease-out!important}
body .app .work .ig-removing:not(#__nm):not(#__nn){opacity:0!important;translate:18px 0!important;pointer-events:none!important;
  transition:opacity 280ms ease-in,translate 280ms var(--ig-ease)!important}
body .ui-toast.show:not(#__nm){animation:ig-pop-in 260ms var(--ig-ease)!important}

}
}

/* ---------- 4a. Skeleton layout for "Загрузка задач…" (static in reduced-motion too) ---------- */
@layer ichki-product{
  body .app .work [data-error][hidden] + p[role=status]:last-child:not(#__nm):not(#__nn){
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0!important;padding:0!important;
    font-size:0!important;color:transparent!important;background:none!important;border:0!important;box-shadow:none!important}
  body .app .work [data-error][hidden] + p[role=status]:last-child::before,
  body .app .work [data-error][hidden] + p[role=status]:last-child::after{
    content:"";height:118px;border-radius:var(--r-md,14px);border:1px solid var(--stroke);
    background:linear-gradient(100deg,var(--panel-2) 30%,color-mix(in srgb,var(--fg) 7%,transparent) 50%,var(--panel-2) 70%);background-size:220% 100%}
  /* a card or row with an open menu must stay above its siblings */
  body .app .work :is(.assignment-card,.account-card,.survey-template-card,.employee-row,.data-row,.wt-task-card,tr):has(details[open]):not(#__nm){position:relative!important;z-index:30!important}
}
@media (max-width:760px){
  @layer ichki-product{body .app .work [data-error][hidden] + p[role=status]:last-child:not(#__nm):not(#__nn){grid-template-columns:1fr}}
}