/* Support.me Konsole — Bewegung
 *
 * Motion-These (Arbeitsoberflaeche: schnell, erklaerend, nie wartend):
 *   Fokus       Login-Karte „kondensiert" aus unscharfem Glas, die Erde
 *               blendet dahinter auf. Einmal pro Anmeldung, 640 ms.
 *   Kontinuitaet Seitenwechsel gleitet 260 ms herein; Kopfzeile verdichtet
 *               sich beim Scrollen (Glas + Haarlinie erscheinen).
 *   Rueckmeldung Druck-Skalierung, gleitende Tab-Pille (Ant bewegt die
 *               Ink-Bar selbst — wir formen sie nur zur Pille), Modals
 *               materialisieren (Blur + Scale), Listen bauen sich kurz auf.
 *   Budget      Blur nur auf Login-Karte und Modal-Eintritt; Staffeln
 *               gedeckelt (max. 10 Zeilen, 300 ms gesamt).
 * Alles bleibt ohne Animation sichtbar; „Bewegung reduzieren" → Fades.
 */

:root {
  --cn-out: cubic-bezier(0.16, 1, 0.3, 1);     /* Ankunft, entschlossen */
  --cn-ios: cubic-bezier(0.32, 0.72, 0, 1);    /* iOS-snappy, Rueckmeldung */
}

@keyframes cn-kondensieren {
  0%   { opacity: 0; transform: translateY(12px) scale(0.96); filter: blur(14px); }
  55%  { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes cn-steigen {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cn-materialisieren {
  from { opacity: 0; transform: scale(0.94); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes cn-einblenden { from { opacity: 0; } to { opacity: 1; } }

/* ─── 1 · Fokus: Anmeldung ─── */
html[data-cn-route='login'] .ant-pro-form-login-container {
  animation: cn-kondensieren 640ms var(--cn-out) both !important;
  will-change: transform, filter, opacity;
}
html[data-cn-route='login'] .ant-pro-form-login-top,
html[data-cn-route='login'] .ant-pro-form-login-main form > * {
  animation: cn-steigen 420ms var(--cn-out) both;
}
html[data-cn-route='login'] .ant-pro-form-login-top { animation-delay: 160ms; }
html[data-cn-route='login'] .ant-pro-form-login-main form > :nth-child(2) { animation-delay: 220ms; }
html[data-cn-route='login'] .ant-pro-form-login-main form > :nth-child(3) { animation-delay: 260ms; }
html[data-cn-route='login'] .ant-pro-form-login-main form > :nth-child(4) { animation-delay: 300ms; }
html[data-cn-route='login'] .ant-pro-form-login-main form > :nth-child(n+5) { animation-delay: 340ms; }
/* Die Erde blendet erst auf, wenn das Video Bilder hat (login.js setzt die Klasse) */
.cn-video { opacity: 0; transition: opacity 900ms var(--cn-out); }
.cn-video.cn-video--an { opacity: 1; }
html[data-cn-route='login'] .ant-pro-form-login-main .ant-btn-primary:active:not(:disabled) { transform: scale(0.97); }

/* ─── 2 · Kontinuitaet: Seitenwechsel ─── */
html[data-cn-route='app'] .ant-pro-page-container {
  animation: cn-steigen 260ms var(--cn-out) both;
}
/* Kennzahl-Kacheln der Willkommensseite: kurz gestaffelt */
html[data-cn-route='app'] .ant-descriptions-row { animation: cn-steigen 320ms var(--cn-out) both; }
html[data-cn-route='app'] .ant-descriptions-row:nth-child(2) { animation-delay: 50ms; }
html[data-cn-route='app'] .ant-descriptions-row:nth-child(n+3) { animation-delay: 100ms; }
/* Tabellenzeilen: max. 10 gestaffelt (30 ms), danach sofort */
html[data-cn-route='app'] .ant-table-tbody > tr.ant-table-row { animation: cn-steigen 300ms var(--cn-out) both; }
html[data-cn-route='app'] .ant-table-tbody > tr.ant-table-row:nth-child(2) { animation-delay: 30ms; }
html[data-cn-route='app'] .ant-table-tbody > tr.ant-table-row:nth-child(3) { animation-delay: 60ms; }
html[data-cn-route='app'] .ant-table-tbody > tr.ant-table-row:nth-child(4) { animation-delay: 90ms; }
html[data-cn-route='app'] .ant-table-tbody > tr.ant-table-row:nth-child(5) { animation-delay: 120ms; }
html[data-cn-route='app'] .ant-table-tbody > tr.ant-table-row:nth-child(6) { animation-delay: 150ms; }
html[data-cn-route='app'] .ant-table-tbody > tr.ant-table-row:nth-child(7) { animation-delay: 180ms; }
html[data-cn-route='app'] .ant-table-tbody > tr.ant-table-row:nth-child(8) { animation-delay: 210ms; }
html[data-cn-route='app'] .ant-table-tbody > tr.ant-table-row:nth-child(9) { animation-delay: 240ms; }
html[data-cn-route='app'] .ant-table-tbody > tr.ant-table-row:nth-child(n+10) { animation-delay: 270ms; }

/* Kopfzeile: oben ruhig und offen, beim Scrollen verdichtet sich das Glas */
html[data-cn-route='app'] header.ant-layout-header.ant-pro-layout-header-fixed-header {
  transition: background-color 220ms var(--cn-ios), border-color 220ms var(--cn-ios), backdrop-filter 220ms var(--cn-ios) !important;
}
html[data-cn-route='app']:not([data-cn-scrolled]) header.ant-layout-header.ant-pro-layout-header-fixed-header {
  background: rgba(244, 244, 244, 0) !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ─── 3 · Rueckmeldung ─── */
html[data-cn-route='app'] .ant-pro-sider .ant-menu-item,
html[data-cn-route='app'] .ant-pro-sider .ant-menu-submenu-title {
  transition: background-color 180ms var(--cn-ios), color 180ms var(--cn-ios), box-shadow 220ms var(--cn-ios), transform 150ms var(--cn-ios) !important;
}
html[data-cn-route='app'] .ant-pro-sider .ant-menu-item:active,
html[data-cn-route='app'] .ant-pro-sider .ant-menu-submenu-title:active { transform: scale(0.98); }
html[data-cn-route='app'] .ant-table-wrapper .ant-table-tbody > tr > td { transition: background-color 150ms var(--cn-ios) !important; }

/* Tabs: Ant bewegt die Ink-Bar selbst → als Pille geformt gleitet sie
   zwischen den Tabs (iOS-Segmented-Control ohne eigenes JS). */
html[data-cn-route='app'] .ant-tabs-top > .ant-tabs-nav::before { border-bottom: none !important; }
html[data-cn-route='app'] .ant-tabs-top > .ant-tabs-nav .ant-tabs-nav-wrap { overflow: visible; }
html[data-cn-route='app'] .ant-tabs-top > .ant-tabs-nav .ant-tabs-nav-list {
  background: #eef0f2;
  border: 0.5px solid #e2e2e7;
  border-radius: 12px;
  padding: 3px;
  gap: 0;
}
html[data-cn-route='app'] .ant-tabs-top > .ant-tabs-nav .ant-tabs-tab {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  padding: 7px 14px !important;
  border-radius: 9px;
  color: #656d76 !important;
  font-weight: 510;
  transition: color 180ms var(--cn-ios) !important;
}
html[data-cn-route='app'] .ant-tabs-top > .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn { color: #191c1f !important; }
html[data-cn-route='app'] .ant-tabs-top > .ant-tabs-nav .ant-tabs-ink-bar {
  top: 3px !important;
  bottom: 3px !important;
  height: auto !important;
  z-index: 0;
  border-radius: 9px;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(25, 28, 31, 0.10), 0 0 0 0.5px rgba(25, 28, 31, 0.04);
  transition: left 300ms var(--cn-ios), width 300ms var(--cn-ios), transform 300ms var(--cn-ios) !important;
}

/* Modals materialisieren (Glas kondensiert), Abgang schneller */
html[data-cn-route='app'] .ant-modal.ant-zoom-enter,
html[data-cn-route='app'] .ant-modal.ant-zoom-appear {
  animation-name: cn-materialisieren !important;
  animation-duration: 380ms !important;
  animation-timing-function: var(--cn-out) !important;
}
html[data-cn-route='app'] .ant-modal.ant-zoom-leave { animation-duration: 160ms !important; }
html[data-cn-route='app'] .ant-modal-mask {
  background: rgba(25, 28, 31, 0.20) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Schalter, Haekchen, Radio: Petrol als Zustandsfarbe, weiche Uebergaenge */
html[data-cn-route='app'] .ant-switch { transition: background-color 220ms var(--cn-ios) !important; }
html[data-cn-route='app'] .ant-switch .ant-switch-handle { transition: inset-inline-start 260ms var(--cn-ios), left 260ms var(--cn-ios) !important; }
html[data-cn-route='app'] .ant-switch.ant-switch-checked { background: #276a87 !important; }
html[data-cn-route='app'] .ant-switch:active .ant-switch-handle::before { transition: inset 150ms var(--cn-ios) !important; }
html[data-cn-route='app'] .ant-checkbox-checked .ant-checkbox-inner,
html[data-cn-route='app'] .ant-radio-checked .ant-radio-inner { background: #276a87 !important; border-color: #276a87 !important; }

/* Seitenumschalter als Pillen */
html[data-cn-route='app'] .ant-pagination .ant-pagination-item,
html[data-cn-route='app'] .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
html[data-cn-route='app'] .ant-pagination .ant-pagination-next .ant-pagination-item-link {
  border-radius: 999px !important;
  border: none !important;
  transition: background-color 150ms var(--cn-ios), color 150ms var(--cn-ios) !important;
}
html[data-cn-route='app'] .ant-pagination .ant-pagination-item-active { background: #191c1f !important; }
html[data-cn-route='app'] .ant-pagination .ant-pagination-item-active a { color: #ffffff !important; }

/* Dropdowns, Popover, Tooltips: weich gerundet, Ink-Tiefe */
html[data-cn-route='app'] .ant-dropdown .ant-dropdown-menu,
html[data-cn-route='app'] .ant-select-dropdown,
html[data-cn-route='app'] .ant-popover .ant-popover-inner {
  border-radius: 14px !important;
  padding: 6px !important;
  box-shadow: 0 8px 24px rgba(25, 28, 31, 0.12), 0 0 0 1px rgba(25, 28, 31, 0.06) !important;
}
html[data-cn-route='app'] .ant-dropdown .ant-dropdown-menu-item,
html[data-cn-route='app'] .ant-select-dropdown .ant-select-item { border-radius: 9px !important; }
html[data-cn-route='app'] .ant-tooltip .ant-tooltip-inner {
  border-radius: 10px !important;
  background: #191c1f !important;
  font-size: 12.5px;
  padding: 6px 10px !important;
}
html[data-cn-route='app'] .ant-tooltip .ant-tooltip-arrow::before { background: #191c1f !important; }

/* Leere Listen: ruhig, ohne grauen Ant-Kasten */
html[data-cn-route='app'] .ant-empty { padding-block: 32px; }
html[data-cn-route='app'] .ant-empty .ant-empty-image { opacity: 0.5; }
html[data-cn-route='app'] .ant-empty .ant-empty-description { color: #79828a !important; font-size: 14px; }

/* Tastatur: sichtbarer Fokusring (3 px Petrol, 20 %) */
html[data-cn-route] .ant-btn:focus-visible,
html[data-cn-route] .ant-menu-item:focus-visible,
html[data-cn-route] .ant-menu-submenu-title:focus-visible,
html[data-cn-route] a:focus-visible,
html[data-cn-route] .ant-switch:focus-visible,
html[data-cn-route] .ant-tabs-tab-btn:focus-visible {
  outline: 3px solid rgba(39, 106, 135, 0.35) !important;
  outline-offset: 2px;
}

/* ─── Bewegung reduzieren: nur noch Blenden ─── */
@media (prefers-reduced-motion: reduce) {
  html[data-cn-route] .ant-pro-form-login-container,
  html[data-cn-route] .ant-pro-form-login-top,
  html[data-cn-route] .ant-pro-form-login-main form > *,
  html[data-cn-route] .ant-pro-page-container,
  html[data-cn-route] .ant-descriptions-row,
  html[data-cn-route] .ant-table-tbody > tr.ant-table-row {
    animation: cn-einblenden 180ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
    animation-delay: 0ms !important;
    filter: none !important;
  }
  html[data-cn-route] .ant-modal.ant-zoom-enter,
  html[data-cn-route] .ant-modal.ant-zoom-appear { animation-name: cn-einblenden !important; }
  html[data-cn-route] .ant-pro-sider .ant-menu-item:active,
  html[data-cn-route] .ant-pro-sider .ant-menu-submenu-title:active,
  html[data-cn-route] .ant-btn:active { transform: none !important; }
  .cn-video { transition: none; }
}