/* FSP Russia design language (fsp-russia.ru) + interactive "developer" layer.
   Tokens mirror the official palette: #1B1C21 canvas, #402FFF brand, #EDEDED light, #EC1D35 accent. */
:root {
  --fsp-bg: #1B1C21;
  --fsp-panel: #202128;
  --fsp-line: #3D3E42;
  --fsp-muted: #9B9C9E;
  --fsp-light: #EDEDED;
  --fsp-blue: #402FFF;
  --fsp-violet: #8C80FF;
  --fsp-red: #EC1D35;
}

html { scroll-behavior: smooth; color-scheme: dark; }
body { overflow-x: clip; }

@property --beam-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Cursor-lit blueprint: a brighter grid revealed only around the pointer */
.cursor-grid {
  background-image:
    linear-gradient(rgba(140, 128, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 128, 255, 0.22) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(280px circle at var(--cx, -999px) var(--cy, -999px), #000, transparent 70%);
          mask-image: radial-gradient(280px circle at var(--cx, -999px) var(--cy, -999px), #000, transparent 70%);
}
@media (hover: none) { .cursor-grid { display: none; } }

/* Scroll progress line inside the header island */
.scroll-progress { transform: scaleX(var(--progress, 0)); transform-origin: left; }

/* Scroll reveal — content stays visible without JS (.js is set in <head>) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="left"] { transform: translateX(-24px); }
.js [data-reveal="scale"] { transform: scale(0.96); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Cursor spotlight: soft fill + lit border segment that follow the pointer */
.spotlight { position: relative; isolation: isolate; }
.spotlight::before,
.spotlight::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.3s ease; z-index: -1;
}
.spotlight::before {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(140, 128, 255, 0.13), transparent 45%);
}
.spotlight::after {
  padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(140, 128, 255, 0.95), rgba(64, 47, 255, 0.35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.spotlight:hover::before, .spotlight:hover::after,
.spotlight:focus-visible::before, .spotlight:focus-visible::after { opacity: 1; }

/* Border beam: a light segment travelling around a panel's outline */
.beam {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; z-index: 1;
  background: conic-gradient(from var(--beam-angle), transparent 0 72%, rgba(64, 47, 255, 0.6) 84%, #8C80FF 92%, #EDEDED 95%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: beam-spin 7s linear infinite;
}
.beam-light { background: conic-gradient(from var(--beam-angle), transparent 0 70%, rgba(255, 255, 255, 0.5) 88%, #fff 94%, transparent 97%); }
@keyframes beam-spin { to { --beam-angle: 360deg; } }

/* Ticker strips (decorative duplicate of real content, hidden from AT) */
.ticker { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker-rev { animation-direction: reverse; animation-duration: 46s; }
.ticker-wrap:hover .ticker { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Rail line drawing in on reveal */
.js .rail-draw { clip-path: inset(0 100% 100% 0); transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.2s; }
.js .is-in .rail-draw, .js .rail-draw.is-in { clip-path: inset(0 -8px -8px 0); }

/* Bars that grow to their value on reveal */
.js [data-bar] { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--d, 0ms); }
.js .is-in [data-bar] { transform: scaleX(1); }

/* Cabinet: countdown ring (pathLength=100, --p = filled share 0..100) draws in on reveal */
.ring-fg { stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); transition: stroke-dashoffset 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; }
.js .cd-ring:not(.is-in) .ring-fg { stroke-dashoffset: 100; }

/* Cabinet nav: active-section pill slides under the links */
.nav-ind { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), width 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s; }

/* Journey tracker: light sweep over the step the user is on now */
.step-live { position: relative; overflow: hidden; }
.step-live::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(237, 237, 237, 0.75), transparent);
  animation: step-sweep 2.4s ease-in-out 1.6s infinite;
}
@keyframes step-sweep { 60%, 100% { transform: translateX(100%); } }

/* Freshly submitted application: brand glow that fades out */
.just-added { animation: just-added 2.6s ease-out 0.3s both; }
@keyframes just-added {
  0%, 30% { box-shadow: 0 0 0 2px #402FFF, 0 0 42px 6px rgba(64, 47, 255, 0.55); }
  100% { box-shadow: 0 0 0 1px rgba(64, 47, 255, 0.6), 0 0 0 0 rgba(64, 47, 255, 0); }
}

@keyframes shine {
  0% { transform: translateX(0) skewX(-20deg); }
  45%, 100% { transform: translateX(450%) skewX(-20deg); }
}

/* Hero headline: glyphs settle with a brief brand glow */
.glyph-hot { color: #8C80FF; text-shadow: 0 0 18px rgba(140, 128, 255, 0.85); }
.headline-glow { text-shadow: 0 0 42px rgba(140, 128, 255, 0.35); }

/* Dashed vertical "blueprint" lines, as in FSP section backgrounds */
.bg-blueprint {
  background-image: repeating-linear-gradient(90deg, transparent 0 159px, rgba(61, 62, 66, 0.55) 159px 160px);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 4px);
          mask-image: repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 4px);
}

/* Fine grid texture used inside FSP cards/panels */
.bg-fsp-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Signature FSP glow: light в†’ brand gradient, heavily blurred */
.fsp-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 9999px;
  background: linear-gradient(180deg, #EDEDED 12%, #402FFF 77%);
  filter: blur(90px);
  opacity: 0.35;
}

/* Rails: thin connector lines with dot nodes (FSP "about" timeline motif) */
.rail { position: relative; border-left: 1px solid rgba(155, 156, 158, 0.55); }
.rail::before {
  content: ""; position: absolute; left: -4px; top: -4px;
  width: 7px; height: 7px; border-radius: 9999px; background: #C7C7C7;
}
.rail-curve { border-bottom: 1px solid rgba(155, 156, 158, 0.55); border-bottom-left-radius: 72px; }
.rail-end { position: relative; }
.rail-end::after {
  content: ""; position: absolute; right: -4px; bottom: -4px;
  width: 7px; height: 7px; border-radius: 9999px; background: #C7C7C7;
}

/* Animated circuit traces in the hero: light pulses travelling along paths */
.trace { stroke-dasharray: 6 220; animation: trace-run 5.5s linear infinite; }
.trace:nth-child(2n) { animation-duration: 7s; animation-delay: -2s; }
.trace:nth-child(3n) { animation-duration: 8.5s; animation-delay: -4s; }
@keyframes trace-run { to { stroke-dashoffset: -226; } }
.node-pulse { animation: node-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes node-pulse { 50% { transform: scale(1.35); opacity: 0.6; } }

.caret::after {
  content: "_";
  margin-left: 2px;
  color: #EDEDED;
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.boot-line { opacity: 0; animation: boot-in 0.25s ease-out forwards; }
@keyframes boot-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.flash-row { animation: flash-row 1.6s ease-out; }
@keyframes flash-row { from { background-color: rgba(64, 47, 255, 0.35); } to { background-color: transparent; } }

.scanlines::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}

/* Print: documents render as clean paper. */
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff !important; }
  .no-print { display: none !important; }
  .print-sheet { box-shadow: none !important; border: none !important; margin: 0 !important; max-width: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caret::after, .boot-line, .flash-row, .trace, .node-pulse, .beam, .ticker, .just-added { animation: none !important; opacity: 1 !important; }
  .step-live::after { display: none; }
  .js [data-reveal], .js [data-bar], .js .rail-draw { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------- Интерактивный тур, диалог подтверждения, состояние отправки ---------- */
.tour-launcher { position: fixed; right: 16px; bottom: 16px; z-index: 55; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 8px; border: 0; border-radius: 12px; background: #402FFF; color: #fff; font: 500 13px/1 "JetBrains Mono", monospace; box-shadow: 4px 4px 0 #EDEDED; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.tour-launcher:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #EDEDED; }
.tour-launcher:focus-visible { outline: 2px solid #EDEDED; outline-offset: 3px; }
.tour-launcher-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #EDEDED; color: #402FFF; font-size: 16px; font-weight: 700; }

.tour-layer { position: fixed; inset: 0; z-index: 70; }
.tour-shield { position: absolute; inset: 0; }
.tour-hole { position: absolute; border-radius: 12px; outline: 2px solid #8C80FF; box-shadow: 0 0 0 100vmax rgba(10, 11, 15, .78); pointer-events: none; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.tour-hole::after { content: ""; position: absolute; inset: -6px; border-radius: 16px; border: 2px solid rgba(140, 128, 255, .55); animation: tour-pulse 1.8s ease-out infinite; }
@keyframes tour-pulse { from { transform: scale(.98); opacity: 1; } to { transform: scale(1.04); opacity: 0; } }

.tour-pop { position: absolute; max-width: calc(100vw - 24px); padding: 16px; border: 2px solid #402FFF; border-radius: 12px; background: #202128; color: #EDEDED; box-shadow: 6px 6px 0 #402FFF; outline: none; }
.tour-meta { display: flex; justify-content: space-between; gap: 8px; color: #8C80FF; font: 500 11px "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.tour-tourname { max-width: 55%; overflow: hidden; color: #9B9C9E; text-overflow: ellipsis; white-space: nowrap; }
.tour-bar { height: 3px; margin: 10px 0 12px; overflow: hidden; border-radius: 99px; background: #3D3E42; }
.tour-bar span { display: block; height: 100%; background: #402FFF; }
.tour-title { margin: 0 0 6px; font: 500 17px/1.25 "JetBrains Mono", monospace; }
.tour-text { margin: 0; color: #C7C7C7; font-size: 14px; line-height: 1.5; }
.tour-next-link { display: inline-block; margin-top: 12px; color: #8C80FF; font: 500 13px "JetBrains Mono", monospace; text-decoration: underline; text-underline-offset: 3px; }
.tour-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.tour-keys { margin: 10px 0 0; color: #9B9C9E; font: 400 11px "JetBrains Mono", monospace; }
@media (max-width: 639px), (pointer: coarse) { .tour-keys { display: none; } }
.tour-btn { min-height: 40px; padding: 0 14px; border: 1px solid #4E5268; border-radius: 8px; background: transparent; color: #EDEDED; font: 500 12px "JetBrains Mono", monospace; cursor: pointer; transition: background .15s, border-color .15s; }
.tour-btn:hover:not(:disabled) { border-color: #402FFF; background: rgba(64, 47, 255, .12); }
.tour-btn:disabled { opacity: .4; cursor: not-allowed; }
.tour-btn:focus-visible { outline: 2px solid #8C80FF; outline-offset: 2px; }
.tour-btn-main { margin-left: auto; border-color: #402FFF; background: #402FFF; color: #fff; }
.tour-btn-main:hover:not(:disabled) { background: #5446ff; }
.tour-btn-quiet { padding: 0 6px; border-color: transparent; color: #9B9C9E; }
.tour-btn-danger { border-color: #EC1D35; background: #EC1D35; color: #fff; }
.tour-btn-danger:hover:not(:disabled) { background: #d4162d; }

.tour-offer { position: fixed; right: 16px; bottom: 80px; z-index: 56; width: min(380px, calc(100vw - 32px)); padding: 16px; border: 2px solid #402FFF; border-radius: 12px; background: #202128; color: #EDEDED; box-shadow: 6px 6px 0 #402FFF; animation: tour-rise .3s ease-out; }
.tour-offer-title { margin: 0; font: 500 15px "JetBrains Mono", monospace; }
.tour-offer-text { margin: 6px 0 0; color: #C7C7C7; font-size: 13px; line-height: 1.5; }
@keyframes tour-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.tour-toast { position: fixed; bottom: 80px; left: 50%; z-index: 80; max-width: calc(100vw - 32px); padding: 10px 16px; border: 1px solid #4E5268; border-radius: 10px; background: #2D2E37; color: #EDEDED; font: 400 13px "JetBrains Mono", monospace; transform: translateX(-50%); }

.ux-dialog { width: min(420px, calc(100vw - 32px)); padding: 20px; border: 2px solid #402FFF; border-radius: 12px; background: #202128; color: #EDEDED; box-shadow: 6px 6px 0 #402FFF; }
.ux-dialog::backdrop { background: rgba(10, 11, 15, .72); }
.ux-dialog-text { margin: 0; font-size: 15px; line-height: 1.5; }
.ux-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.is-pending { cursor: progress; opacity: .75; }
.is-pending::after { content: ""; width: 14px; height: 14px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ux-spin .7s linear infinite; }
@keyframes ux-spin { to { transform: rotate(360deg); } }
[data-pick-bar].is-active { border-color: #402FFF; }

@media (prefers-reduced-motion: reduce) {
  .tour-hole, .tour-launcher, .tour-btn { transition: none; }
  .tour-hole::after, .tour-offer, .is-pending::after { animation: none; }
}

/* Формы фильтров больших списков: на телефоне дополнительные поля (.fsp-more) свёрнуты под кнопку «Фильтры» */
@media (max-width: 639px) {
  form[data-autosubmit]:not(.is-open) .fsp-more { display: none; }
}

/* =====================================================================
   Адаптация под телефоны и планшеты
   ·  < 640px — телефон, 640–1023px — планшет; шапка со сворачиваемым меню уже до 1280px (xl).
   ·  Таблицы с классом .cards на телефоне превращаются в карточки (подписи ячеек проставляет ux.js),
      остальные широкие таблицы прокручиваются по горизонтали с затуханием у края.
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-wrap: break-word; }
/* дети сетки и гибких рядов не растягивают страницу шире экрана */
.grid > *, .flex > .flex-1, main section, main form { min-width: 0; }
select, input, textarea { max-width: 100%; }
.overflow-x-auto { position: relative; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #4E5268 transparent; }
.overflow-x-auto[data-fade="end"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.overflow-x-auto[data-fade="start"] { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 40px), transparent); }
.overflow-x-auto[data-fade="both"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* безопасные зоны вырезов (iPhone) */
@supports (padding: max(0px)) {
  .tour-launcher { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
  .tour-offer { right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px); }
  footer { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* крупные цели нажатия и «неувеличивающиеся» поля на сенсорных экранах */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]), select { min-height: 44px; }
  input[type=checkbox], input[type=radio] { width: 22px !important; height: 22px !important; }
  summary, [data-toggle], [data-copy] { min-height: 40px; }
  button:not(.tour-btn), [role=button] { touch-action: manipulation; }
  a, button, summary { -webkit-tap-highlight-color: rgba(140, 128, 255, .25); }
}
@media (max-width: 767px) {
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]), select, textarea { font-size: 16px !important; }
}

/* Меню шапки: панель на всю ширину острова, крупные строки */
.nav-sheet a, .nav-sheet button { display: flex; align-items: center; min-height: 44px; }
.nav-sheet a[aria-current="page"] { background: rgba(64, 47, 255, .18); color: #EDEDED; }
@media (max-width: 639px) {
  .nav-sheet { max-height: calc(100dvh - 104px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- Таблицы-карточки (телефон и планшет) ---------- */
@media (max-width: 1023px) {
  table.cards { min-width: 0 !important; width: 100%; }
  table.cards, table.cards tbody { display: block; }
  table.cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table.cards caption { display: none; }
  table.cards tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; padding: 14px 16px; }
  table.cards tr[hidden], table.cards tr.hidden { display: none; }
  table.cards td { display: block; min-width: 0; padding: 0 !important; text-align: left !important; flex: 1 1 calc(50% - 7px); }
  table.cards td[data-card="lead"] { flex: 0 0 auto; }
  table.cards td[data-card="title"] { flex: 1 1 0; min-width: 60%; }
  table.cards td[data-card="full"] { flex: 1 1 100%; }
  table.cards td[data-card="actions"] { flex: 1 1 100%; }
  table.cards td[data-card="actions"] > * { justify-content: flex-start !important; }
  table.cards td[data-card="actions"] .flex, table.cards td[data-card="actions"] form.flex { flex-wrap: wrap; }
  table.cards td[data-card="end"] { flex: 0 0 auto; margin-left: auto; }
  /* подпись поля над значением */
  table.cards td[data-label]:not([data-label=""]):not([data-card="title"]):not([data-card="lead"]):not([data-card="actions"]):not([data-card="end"])::before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    font: 500 10px/1.2 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: #9B9C9E;
  }
  table.cards td[data-card="actions"] { padding-top: 10px !important; border-top: 1px dashed #3D3E42; }
  table.cards td[data-card="actions"] button, table.cards td[data-card="actions"] a { min-height: 44px; }
  /* кнопка раскрытия строки: растягивается и получает подпись из data-card-text */
  table.cards button[data-card-text] { width: 100%; height: 44px; gap: 8px; justify-content: center; font: 500 12px "JetBrains Mono", monospace; }
  table.cards button[data-card-text]::after { content: attr(data-card-text); }
  table.cards td[data-card="expand"] { flex: 1 1 100%; }
  table.cards details form.absolute { position: static !important; width: 100% !important; margin-top: 8px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  table.cards td { flex-basis: calc(25% - 11px); }
  table.cards td[data-card="lead"] { flex: 0 0 auto; }
  table.cards td[data-card="title"] { flex: 1 1 0; min-width: 62%; }
  table.cards td[data-card="full"], table.cards td[data-card="actions"] { flex-basis: 100%; }
  table.cards td[data-card="expand"] { flex: 0 0 auto; margin-left: auto; }
  table.cards button[data-card-text] { width: auto; padding: 0 18px; }
}
@media (min-width: 1024px) { button[data-card-text]::after { content: none; } }

/* ---------- Мелочи вёрстки на узких экранах ---------- */
@media (max-width: 639px) {
  .ux-dialog { margin: auto auto 12px; width: calc(100vw - 24px); }
  .ux-dialog-actions { flex-direction: column-reverse; }
  .ux-dialog-actions .tour-btn { min-height: 46px; }
  .tour-toast { bottom: 96px; }
}

/* Открытое меню шапки не перекрывается подсказками тура */
body:has(header details[open]) .tour-offer, body:has(header details[open]) .tour-launcher { display: none; }
@media (max-width: 767px) {
  table.cards td [class*="whitespace-nowrap"] { white-space: normal; }
}

/* Инфографика кабинета министерства: столбцы «вырастают», линия и дуги кольца прорисовываются */
.chart-bar { transform-box: fill-box; transform-origin: bottom; animation: chart-grow .7s cubic-bezier(.2, .8, .2, 1) both; }
.chart-line { stroke-dasharray: 1; animation: chart-draw 1.1s ease-out .3s both; }
.chart-arc { animation: chart-sweep .7s cubic-bezier(.4, 0, .2, 1) both; }
.chart-pop { animation: chart-fade .5s ease-out both; }
.chart-dot { transform-box: fill-box; transform-origin: center; animation: chart-dot .45s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes chart-grow { from { transform: scaleY(0); } }
@keyframes chart-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes chart-fade { from { opacity: 0; } }
@keyframes chart-sweep { from { stroke-dasharray: 0 400; opacity: 0; } 30% { opacity: 1; } }
@keyframes chart-dot { from { transform: scale(0); opacity: 0; } }
/* С JS графики стартуют, когда карточку прокрутили в видимую область (.is-in ставит скрипт base.html) */
.js .chart-card:not(.is-in) :is(.chart-bar, .chart-line, .chart-arc, .chart-pop, .chart-dot) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .chart-bar, .chart-line, .chart-arc, .chart-pop, .chart-dot { animation: none; } }