/* ZH Marketing, site.css
   Tokeni: [C] ZH Web Design System.md. Без градиенти, сенки и сияния.
   Последният раздел е движението (Фаза 2): само transform и opacity. */
/* ---------- Шрифт ---------- */
@font-face {
  font-family: 'Onest';
  src: url('/assets/fonts/onest-cyrillic.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  src: url('/assets/fonts/onest-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Резервен шрифт с подравнени метрики (измерено с Arial): без скок на текста при зареждане */
@font-face {
  font-family: 'Onest Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  font-weight: 400 600;
  size-adjust: 103.3%;
  ascent-override: 94%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Onest Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Liberation Sans Bold');
  font-weight: 700 800;
  size-adjust: 88%;
  ascent-override: 110%;
  descent-override: 34.7%;
  line-gap-override: 0%;
}
/* ---------- Токени ---------- */
:root {
  --ink: #0C0C0C;
  --paper: #F7F7F7;
  --signal: #BF1E12;
  --mist: #D4D4D4;
  --paper-72: rgba(247, 247, 247, 0.72);
  --paper-56: rgba(247, 247, 247, 0.56);
  --line-dark: rgba(247, 247, 247, 0.14);
  --line-light: rgba(12, 12, 12, 0.14);
  --ink-72: rgba(12, 12, 12, 0.72);
  --surface-dark: #141414;
  --signal-press: #A61A0F;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 120ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 560ms;

  --font: 'Onest', 'Onest Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --container: 1200px;
  --gutter: 20px;
  --header-h: 64px;
  --section-pad: clamp(72px, 10vw, 144px);

  /* Контекстни цветове: тъмно платно по подразбиране */
  --bg: var(--ink);
  --fg: var(--paper);
  --fg-2: var(--paper-72);
  --fg-3: var(--paper-56);
  --line: var(--line-dark);
  --focus: var(--paper);
}
/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 300;
  background: var(--paper); color: var(--ink);
  padding: 12px 20px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1024px) {
  body { font-size: 17px; }
}
/* ---------- Типография ---------- */
.display, h1 { overflow-wrap: anywhere; text-wrap: balance; }
.display { font-size: clamp(40px, 7vw, 96px); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; }
h1 { font-size: clamp(36px, 5.6vw, 72px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(30px, 4.2vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -0.028em; text-wrap: balance; overflow-wrap: anywhere; }
h3 { font-size: clamp(21px, 2.2vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
p { max-width: 38em; text-wrap: pretty; }
/* Етикет: обикновен текст, без декоративна точка (4 октомври: точките се повтаряха навсякъде) */
.label {
  font-size: 14px; line-height: 1.4; font-weight: 600;
  letter-spacing: 0; color: var(--fg-2);
}
/* ---------- Платна ---------- */
.section { background: var(--bg); color: var(--fg); padding-block: var(--section-pad) calc(var(--section-pad) + 8px); }
/* ---------- Бутони ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 16px 28px; border: 0; border-radius: 0;
  font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
  background: var(--signal); color: var(--paper);
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--paper); opacity: 0; pointer-events: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:active { background: var(--signal-press); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { opacity: 0.08; }
}
/* ---------- Хедър ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  color: var(--paper);
}
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(12, 12, 12, 0.92); border-bottom: 1px solid var(--line-dark);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.logo { font-size: 17px; font-weight: 800; letter-spacing: 0.12em; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.nav-list { display: flex; align-items: center; gap: var(--s6); }
.nav-list a:not(.btn) {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 600; text-decoration: none; color: var(--paper-72);
}
.nav-list a:not(.btn)[aria-current="page"] { color: var(--paper); }
.nav-list a:not(.btn)[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--signal);
}
@media (hover: hover) and (pointer: fine) {
  .nav-list a:not(.btn):hover { color: var(--paper); }
}
.menu-toggle {
  display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px;
  background: none; border: 0; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--paper);
}
.menu-toggle-icon { position: relative; width: 22px; height: 14px; }
.menu-toggle-icon span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; }
.menu-toggle-icon span:nth-child(1) { top: 0; }
.menu-toggle-icon span:nth-child(2) { top: 6px; }
.menu-toggle-icon span:nth-child(3) { bottom: 0; }
@media (max-width: 899px) {
  .js .menu-toggle { display: inline-flex; }
  .js .nav-list {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--line-dark);
    padding: 8px var(--gutter) 24px;
    visibility: hidden; opacity: 0;
  }
  .js .nav-list.is-open { visibility: visible; opacity: 1; }
  .js .nav-list li { border-bottom: 1px solid var(--line-dark); }
  .js .nav-list li:last-child { border-bottom: 0; padding-top: 16px; }
  .js .nav-list a:not(.btn) { min-height: 56px; font-size: 20px; width: 100%; }
  .js .nav-list a:not(.btn)[aria-current="page"]::after { left: 0; right: auto; width: 24px; bottom: 10px; }
  .js .nav-list .btn { width: 100%; }
  /* Без JS: втори ред с връзки */
  html:not(.js) .site-header { height: auto; }
  html:not(.js) .nav-list { width: 100%; flex-wrap: wrap; gap: 0 var(--s5); }
  html:not(.js) .nav-list li:last-child { display: none; }
  html:not(.js) { --header-h: 108px; }
}
@media (max-width: 899px) and (min-width: 0) {
  html:not(.js) .site-header { position: static; }
}
/* ---------- Герой ---------- */
/* Фино зърно върху героя: статичен SVG шум, без заявка и без fixed слой */
/* Доказателство в героя: реалните месеци на Milano като хоризонтални стълбове */
/* ---------- Доказателство: график ---------- */
.chart { --plot: 260px; --max: 12; }
.chart-frame { position: relative; padding-right: 48px; }
.chart-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 2vw, 20px); }
.chart-col { display: flex; flex-direction: column; }
.chart-plot { position: relative; height: var(--plot); display: flex; align-items: flex-end; }
.bar { display: block; width: 100%; height: calc(var(--v) / var(--max) * 100%); background: var(--mist); transform-origin: bottom; }
.chart-val { margin-top: var(--s3); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.chart-month { font-size: 14px; color: var(--fg-2); line-height: 1.3; }
.baseline-layer { position: absolute; top: 0; left: 0; right: 0; height: var(--plot); pointer-events: none; z-index: 1; }
.baseline {
  position: absolute; left: 0; right: 0; height: 2px; background: var(--signal);
  bottom: calc(5.6 / var(--max) * 100%); transform-origin: left;
}
.baseline-tag { position: absolute; right: 0; bottom: calc(5.6 / var(--max) * 100% + 6px); font-size: 14px; font-weight: 700; color: var(--paper); font-variant-numeric: tabular-nums; }
.chart-cols { padding-bottom: 0; }
/* ---------- Карта на доказателство ---------- */
/* ---------- Как работим (светло) ---------- */
/* ---------- Услуги накратко ---------- */
/* ---------- CTA ---------- */
/* ---------- Вътрешна страница: герой ---------- */
/* ---------- Резултати ---------- */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
caption { text-align: left; padding-block: var(--s4); font-size: 14px; color: var(--paper-72); }
th, td { text-align: right; padding: 14px 10px 14px 0; border-bottom: 1px solid var(--line-dark); font-size: 15px; white-space: nowrap; }
th:first-child, td:first-child { white-space: normal; }
@media (max-width: 480px) {
  th, td { font-size: 14px; padding-right: 8px; }
  th { font-size: 12px; }
}
th:first-child, td:first-child { text-align: left; }
th { font-weight: 700; font-size: 13px; color: var(--paper-72); }
tbody th { font-size: 15px; color: var(--paper); font-weight: 400; }
tfoot td { font-weight: 800; border-bottom: 0; }
/* ---------- Услуги: табове ---------- */
.tab {
  position: relative; min-height: 56px; padding: 12px 24px 12px 0; margin-right: var(--s5);
  background: none; border: 0; cursor: pointer; font-size: 17px; font-weight: 700; color: var(--paper-72); text-align: left;
}
.tab[aria-selected="true"] { color: var(--paper); }
.tab[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 24px; bottom: -1px; height: 2px; background: var(--signal); }
@media (hover: hover) and (pointer: fine) {
  .tab:hover { color: var(--paper); }
}
/* ---------- За нас ---------- */
/* ---------- Контакти ---------- */
/* ---------- Диалог ---------- */
dialog.proof-dialog {
  padding: 0; border: 0; background: transparent; color: var(--paper);
  max-width: min(1200px, calc(100vw - 32px)); width: 100%; max-height: calc(100vh - 32px); overflow: visible;
}
dialog.proof-dialog::backdrop { background: rgba(12, 12, 12, 0.92); }
.dialog-inner { position: relative; display: grid; gap: var(--s3); }
.dialog-inner img { width: 100%; max-height: calc(100vh - 140px); object-fit: contain; background: #fff; border-radius: 4px; }
.dialog-cap { font-size: 14px; color: var(--paper-72); }
.dialog-close {
  justify-self: end; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: var(--ink); border: 1px solid var(--line-dark); color: var(--paper); cursor: pointer; border-radius: 0;
}
.dialog-close svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .dialog-close:hover { border-color: var(--paper-72); }
}
/* ---------- Подвал ---------- */
/* Подвал: лого, под него една лента с иконки (телефон, Instagram, YouTube) и имейла, всичко в средата */
/* ---------- 404 ---------- */
/* ---------- Интерактивен график: детайл за избрания месец ---------- */
.chart-col[tabindex] { cursor: default; outline-offset: 6px; }
.chart-col .bar { transition: background-color var(--dur-fast) var(--ease-out); }
.chart.has-active .chart-col.is-active .bar { background: var(--paper); }
.chart-detail { margin-top: var(--s4); min-height: 3em; font-size: 15px; color: var(--fg-2); }
.chart-detail strong { color: var(--fg); font-weight: 700; }
/* ---------- Как работим: стъпки като поредица ---------- */
/* ---------- Услуги: целият ред е връзка ---------- */
/* ---------- Кой стои зад ZH ---------- */
/* ---------- Блог: карти ---------- */
/* ---------- Блог: статия ---------- */
.prose { max-width: 42em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(24px, 2.6vw, 34px); margin-top: 2.2em; line-height: 1.15; }
.prose h3 { font-size: clamp(20px, 2vw, 24px); margin-top: 1.8em; }
.prose p { max-width: none; color: var(--paper-72); }
.prose strong { color: var(--paper); }
.prose ul { padding-left: 1.2em; list-style: disc; color: var(--paper-72); }
.prose li + li { margin-top: 0.5em; }
.prose blockquote { border-left: 2px solid var(--signal); padding-left: var(--s5); color: var(--paper); font-weight: 600; font-size: 1.1em; }
.article-toc { font-size: 15px; color: var(--paper-72); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); padding-block: var(--s5); max-width: 42em; }
.article-toc ol { list-style: decimal; padding-left: 1.4em; display: grid; gap: 6px; margin-top: var(--s3); }
.article-toc a { color: var(--paper); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .article-toc a:hover { text-decoration: underline; }
}
/* Видео в края на статията: кликът зарежда YouTube, дотогава само локален постер */
.video-end { margin-top: var(--s9); max-width: 960px; }
.video-end h2 { font-size: clamp(26px, 3.2vw, 40px); }
.video-end > p { margin-top: var(--s4); color: var(--paper-72); }
.yt { position: relative; margin-top: var(--s6); aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--surface-dark); }
.yt img, .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.yt-play {
  position: absolute; inset: 0; display: grid; place-items: end start; padding: clamp(16px, 3vw, 32px); width: 100%; height: 100%;
  background: none; border: 0; cursor: pointer; color: var(--paper);
}
.yt-play span {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px;
  background: var(--signal); font-size: 17px; font-weight: 700; transition: transform var(--dur-press) var(--ease-out);
}
.yt-play svg { width: 18px; height: 18px; }
.yt-play:active span { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .yt-play:hover span { background: var(--signal-press); }
}
.video-links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin-top: var(--s5); }
/* ---------- Календар: зарежда се чак когато е на екрана ---------- */
/* ---------- Утилити ---------- */
/* ==========================================================================
   Движение (Фаза 2). Само transform и opacity. Токените са в :root.
   Единствените изключения са display и overlay с allow-discrete при диалога:
   те не са визуални, а отлагат display:none до края на излизането.
   ========================================================================== */
/* 7. Бутони: натискане и hover слой */
.btn { transition: transform var(--dur-press) var(--ease-out); }
.btn::before { transition: opacity var(--dur-fast) var(--ease-out); }
.btn:active { transform: scale(0.98); }
/* 4. Навигация: слой със състояние при скрол */
.js .site-header::before { opacity: 0; transition: opacity 200ms var(--ease-out); }
.js .site-header.is-scrolled::before { opacity: 1; }
/* 1. Герой: вход на четири елемента */
.js [data-hero] { opacity: 0; transform: translateY(12px); }
.js [data-hero="1"] { --hi: 1; }
.js [data-hero="2"] { --hi: 2; }
.js [data-hero="3"] { --hi: 3; }
.js.is-ready [data-hero] {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--hi, 0) * 60ms);
}
/* 2. Скрол разкриване, веднъж */
.js [data-reveal] { opacity: 0; transform: translateY(16px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--ri, 0) * 50ms);
}
/* 3. График на Milano: стълбове и базова линия. Цифрите са статичен текст. */
.js .chart .bar { transform: scaleY(0); }
.js .chart .baseline { transform: scaleX(0); }
.js .chart.is-in .bar {
  transform: none;
  transition: transform 600ms var(--ease-out);
  transition-delay: calc(var(--bi, 0) * 70ms);
}
.js .chart.is-in .baseline { transform: none; transition: transform 480ms var(--ease-out) 360ms; }
.chart-col:nth-child(2) .bar { --bi: 1; }
.chart-col:nth-child(3) .bar { --bi: 2; }
.chart-col:nth-child(4) .bar { --bi: 3; }
.chart-col:nth-child(5) .bar { --bi: 4; }
/* Резервен вариант, ако скриптът не се зареди навреме */
.reveal-all [data-hero], .reveal-all [data-reveal] { opacity: 1 !important; transform: none !important; }
.reveal-all .chart .bar, .reveal-all .chart .baseline { transform: none !important; }
/* 5. Мобилно меню и икона */
.menu-toggle-icon span { transition: transform 200ms var(--ease-out), opacity 120ms var(--ease-out); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 899px) {
  .js .nav-list {
    transform: translateY(-8px);
    transition: opacity 200ms var(--ease-in-out), transform 200ms var(--ease-in-out), visibility 0s linear 200ms;
  }
  .js .nav-list.is-open {
    transform: none;
    transition: opacity 280ms var(--ease-drawer), transform 280ms var(--ease-drawer), visibility 0s;
  }
  .js .nav-list li { opacity: 0; transition: opacity 120ms var(--ease-in-out); }
  .js .nav-list.is-open li { opacity: 1; transition: opacity var(--dur-base) var(--ease-out); }
  .js .nav-list.is-open li:nth-child(2) { transition-delay: 40ms; }
  .js .nav-list.is-open li:nth-child(3) { transition-delay: 80ms; }
  .js .nav-list.is-open li:nth-child(4) { transition-delay: 120ms; }
  .js .nav-list.is-open li:nth-child(5) { transition-delay: 160ms; }
  .js .nav-list.is-open li:nth-child(6) { transition-delay: 160ms; }
}
/* Табове: кръстосан преход в една клетка */
/* Диалог със screenshot */
dialog.proof-dialog {
  opacity: 0;
  transition: opacity 140ms var(--ease-in-out), overlay 140ms allow-discrete, display 140ms allow-discrete;
}
dialog.proof-dialog[open] {
  opacity: 1;
  transition: opacity 200ms var(--ease-out), overlay 200ms allow-discrete, display 200ms allow-discrete;
}
@starting-style {
  dialog.proof-dialog[open] { opacity: 0; }
}
dialog.proof-dialog::backdrop {
  opacity: 0;
  transition: opacity 140ms var(--ease-in-out), overlay 140ms allow-discrete, display 140ms allow-discrete;
}
dialog.proof-dialog[open]::backdrop { opacity: 1; transition-duration: 200ms; transition-timing-function: var(--ease-out); }
@starting-style {
  dialog.proof-dialog[open]::backdrop { opacity: 0; }
}
.dialog-inner img { transform: scale(0.96); transition: transform 140ms var(--ease-in-out); }
dialog.proof-dialog[open] .dialog-inner img { transform: none; transition: transform var(--dur-base) var(--ease-out); }
@starting-style {
  dialog.proof-dialog[open] .dialog-inner img { transform: scale(0.96); }
}
/* 6. Преход между страниците (прогресивно подобрение) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  .site-header { view-transition-name: site-nav; }
  ::view-transition-old(root) { animation: 140ms var(--ease-in-out) both vt-out; }
  ::view-transition-new(root) { animation: 220ms var(--ease-out) both vt-in; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; } }
}
/* Намалено движение: без позиция и мащаб, само opacity до 200ms */
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .js [data-hero], .js [data-reveal] { transform: none; }
  .js.is-ready [data-hero], .js [data-reveal].is-in { transition: opacity 200ms var(--ease-out); transition-delay: 0s; }
  .js .chart .bar, .js .chart .baseline { transform: none; opacity: 0; }
  .js .chart.is-in .bar, .js .chart.is-in .baseline { opacity: 1; transition: opacity 200ms var(--ease-out); transition-delay: 0s; }
  .menu-toggle-icon span { transition: none; }
  dialog.proof-dialog[open] .dialog-inner img, .dialog-inner img { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 899px) {
  .js .nav-list, .js .nav-list.is-open { transform: none; }
}
/* ==========================================================================
   Фаза 5 (9 октомври 2026): собствен визуален език по секции и движение 8-17.
   Пружините са критично затихнали (затихване 1.0), изчислени като linear().
   Всичко е видимо във финално състояние без JS (анимира се само под .js).
   ========================================================================== */
:root {
  --spring: linear(0, 0.227, 0.536, 0.750, 0.873, 0.938, 0.971, 0.986, 0.994, 0.997, 0.999, 0.999, 1);
  --spring-snappy: linear(0, 0.205, 0.499, 0.715, 0.848, 0.921, 0.960, 0.981, 0.991, 0.995, 0.998, 0.999, 1);
}
/* Как работим: една нишка, четири предмета */
.how-obj { width: 100%; height: auto; overflow: visible; }
@media (min-width: 900px) {
  .how-obj { max-width: 240px; }
}
.obj-research .dots circle { fill: var(--mist); }
.obj-research .dots .key { fill: var(--ink); }
.obj-research .ring { fill: none; stroke: var(--signal); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.obj-research .scan { fill: var(--signal); opacity: 0; }
.obj-structure .ln, .obj-structure .node { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.obj-structure .fill { fill: var(--ink); stroke: none; }
.obj-structure .key { stroke: var(--signal); }
.obj-ads .card { fill: var(--mist); transform-box: fill-box; transform-origin: bottom center; }
.obj-ads .c1 { transform: translateX(-62px) rotate(-6deg); }
.obj-ads .c3 { transform: translateX(62px) rotate(6deg); }
.obj-ads .c2 rect { fill: var(--ink); }
.obj-ads .c2 .t { fill: var(--paper); }
.obj-ads .c2 .b { fill: var(--signal); }
.obj-ads .tline { fill: var(--ink); transform-box: fill-box; transform-origin: left; }
.obj-ads .t2 { fill: var(--ink-72); }
.obj-report .rb { fill: var(--ink); transform-box: fill-box; transform-origin: bottom; }
.obj-report .cut { transform: scaleY(0.25); opacity: 0.35; }
.obj-report .up { transform: scaleY(1.45); }
.obj-report .base { stroke: var(--signal); stroke-width: 1.5; }
.obj-report .floor { stroke: var(--ink); stroke-width: 1.5; }
.js .how .ring { opacity: 0; transform: scale(0.6); }
.js .how .dots .key { fill: var(--mist); }
.js .how .obj-structure .ln, .js .how .obj-structure .node { opacity: 0; }
.js .how .obj-ads .c1, .js .how .obj-ads .c3 { transform: none; }
.js .how .obj-ads .tline { transform: scaleX(0); }
.js .how .obj-report .cut, .js .how .obj-report .up { transform: none; opacity: 1; }
.js .how.is-in .scan { animation: zh-scan 1100ms var(--ease-out) 300ms both; }
@keyframes zh-scan { 0% { opacity: 0; transform: translateX(0); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(248px); } }
.js .how.is-in .dots .key { fill: var(--ink); transition: fill 1ms linear 700ms; }
.js .how.is-in .dots .key:nth-child(n+20) { transition-delay: 900ms; }
.js .how.is-in .dots .key:nth-child(n+30) { transition-delay: 1100ms; }
.js .how.is-in .ring { opacity: 1; transform: none; transition: opacity 200ms var(--ease-out) 700ms, transform 480ms var(--spring-snappy) 700ms; }
.js .how.is-in .ring:nth-of-type(2) { transition-delay: 900ms; }
.js .how.is-in .ring:nth-of-type(3) { transition-delay: 1100ms; }
.js .how.is-in .obj-structure .l1 { opacity: 1; transition: opacity 240ms var(--ease-out) 500ms; }
.js .how.is-in .obj-structure .l2 { opacity: 1; transition: opacity 240ms var(--ease-out) 760ms; }
.js .how.is-in .obj-structure .l3 { opacity: 1; transition: opacity 240ms var(--ease-out) 1020ms; }
.js .how.is-in .obj-ads .c1 { transform: translateX(-62px) rotate(-6deg); transition: transform 600ms var(--spring) 600ms; }
.js .how.is-in .obj-ads .c3 { transform: translateX(62px) rotate(6deg); transition: transform 600ms var(--spring) 600ms; }
.js .how.is-in .obj-ads .tline { transform: none; transition: transform 420ms var(--ease-out) 1100ms; }
.js .how.is-in .obj-ads .t2 { transition-delay: 1220ms; }
.js .how.is-in .obj-report .cut { transform: scaleY(0.25); opacity: 0.35; transition: transform 560ms var(--spring) 900ms, opacity 240ms linear 900ms; }
.js .how.is-in .obj-report .up { transform: scaleY(1.45); transition: transform 560ms var(--spring) 1150ms; }
/* Услуги: два маршрута и три различни компонента */
/* Финален CTA: дневен ред на разговора */
/* 8. Hero: месеците на Milano след героя */
/* 9. Детайлът на графика сменя текста с кратко изместване */
.chart-detail.is-swap { animation: zh-swap 160ms var(--ease-out); }
@keyframes zh-swap { from { opacity: 0; transform: translateY(6px); } }
/* 13. Блог карти: натискане */
/* 14. Видеото в края на статиите */
.yt-play:active { transform: scale(0.96); }
.yt iframe { animation: zh-fade 200ms var(--ease-out); }
@keyframes zh-fade { from { opacity: 0; } }
/* 15. Календар: линия, докато iframe-ът зарежда */
[data-calendar] { position: relative; }
.js [data-calendar].is-loaded::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--signal); transform-origin: left; animation: zh-load 800ms var(--ease-out) both, zh-out 200ms var(--ease-out) 900ms both; }
@keyframes zh-load { from { transform: scaleX(0); } }
@keyframes zh-out { to { opacity: 0; } }
/* 16. Мобилно меню: отваряне с пружина */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .js .nav-list.is-open { transition: opacity 280ms var(--ease-drawer), transform 480ms var(--spring-snappy), visibility 0s; }
}
/* 17. Графикът минава между началната и /rezultati/ */
@media (prefers-reduced-motion: no-preference) {
  .chart { view-transition-name: milano-chart; }
}
@media (prefers-reduced-motion: reduce) {
  .js .how .ring, .js .how .obj-ads .c1, .js .how .obj-ads .c3, .js .how .obj-ads .tline, .js .how .obj-report .cut, .js .how .obj-report .up { transform: none !important; }
  .js .how .obj-report .cut { opacity: 0.35 !important; }
  .js .how.is-in .scan, .chart-detail.is-swap, .js [data-calendar].is-loaded::before { animation: none; }
  .js .how * { transition-duration: 200ms !important; transition-delay: 0s !important; }
  .yt-play:active { transform: none; }
}
@media (max-width: 899px) {
  .how-obj { width: 120px; }
}