/* ZH Marketing, za-nas.css
   „За нас“ по структурата на visuvate.com/about: едро заглавие, което при скрол изостава и минава под съдържанието,
   и един стъклен панел с текста, блока за Кристиан и четирите принципа на зигзаг около вертикална линия.
   Блокът за Кристиан е .h-founder от home-shell.css. Зарежда се след shell.css и home-shell.css. */

/* ---------- Едро заглавие ---------- */
.a-hero { position: relative; z-index: 0; padding-top: calc(var(--header-h) + clamp(40px, 5.7vw, 82px)); padding-bottom: clamp(30px, 4.4vw, 63px); color: var(--paper); text-align: center; }
.a-hero h1 { font-size: clamp(96px, 28vw, 150px); max-width: none; white-space: nowrap; }
@media (min-width: 700px) { .a-hero h1 { font-size: clamp(150px, 15.4vw, 222px); } }
.a-hero h1 b { color: var(--signal); font-weight: 900; }
/* Изоставане както на Контакти: 0.6 от скрола до 230px, на телефон 0.34 до 78px (shell.css, .zh-lag) */
.a-title { --lag-range: 230px; --lag-shift: 78px; }
@media (min-width: 700px) { .a-title { --lag-range: 385px; --lag-shift: 230px; } }
@media (prefers-reduced-motion: no-preference) { .a-hero h1 { animation: zh-line-in 760ms var(--ease-out) both; } }

/* ---------- Панелът: по-плътно стъкло, защото заглавието минава отдолу ---------- */
.a-wrap { position: relative; z-index: 1; }
.a-panel { max-width: 1080px; margin-inline: auto; color: var(--paper); background: rgba(12, 12, 12, 0.86); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .a-panel { background: rgba(12, 12, 12, 0.7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}
.a-panel > * + * { border-top: 1px solid var(--glass-line); }
.a-sec { padding: clamp(40px, 6.4vw, 88px) clamp(20px, 4.4vw, 60px); }

/* ---------- Текст в тясна колона в средата; ключовите думи са в светло ---------- */
.a-text { display: grid; justify-items: center; gap: clamp(44px, 6.4vw, 84px); text-align: center; }
.a-text strong { font-weight: inherit; color: var(--paper); }
.a-intro { max-width: 30em; font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; line-height: 1.55; color: var(--paper-72); }
.a-problem { display: grid; justify-items: center; gap: 18px; max-width: 660px; }
.a-problem h2 { font-size: clamp(34px, 4vw, 54px); line-height: 0.94; max-width: none; }
.a-problem p { max-width: 32em; font-size: 18px; line-height: 1.7; color: var(--paper-72); }

/* ---------- Кристиан: редът е част от панела, не отделна карта ---------- */
.za-nas .h-founder { border-radius: 0; }
.za-nas .h-founder h2 { font-size: clamp(38px, 4.6vw, 62px); line-height: 0.92; }
.za-nas .h-founder-body { padding: clamp(28px, 4.4vw, 56px) clamp(20px, 4.4vw, 60px); }
@media (min-width: 900px) {
  .za-nas .h-founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .za-nas .h-founder img { max-height: 560px; }
}

/* ---------- Четири принципа: вертикална линия и точки на зигзаг ---------- */
.a-vals { display: grid; justify-items: center; gap: clamp(36px, 4.8vw, 64px); }
.a-vals > h2 { font-size: clamp(44px, 5.6vw, 80px); max-width: none; text-align: center; }
.a-vals > h2 b { color: var(--signal); font-weight: 900; }
.a-zig { --gap: 40px; --h3: clamp(27px, 7.2vw, 34px); position: relative; display: grid; gap: 34px; width: 100%; max-width: 900px; padding-left: var(--gap); }
/* Линията стои винаги; върху нея червената се изписва надолу със скрола (без поддръжка стои цяла) */
.a-zig::before, .a-zig::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; pointer-events: none; }
.a-zig::before { background: rgba(247, 247, 247, 0.2); }
.a-zig::after { background: var(--signal); transform-origin: 50% 0; }
.a-zig li { position: relative; display: grid; gap: 10px; max-width: none; }
.a-zig h3 { font-family: var(--cond); font-weight: 800; font-size: var(--h3); line-height: 0.96; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; }
.a-zig p { max-width: 30em; font-size: 17px; line-height: 1.65; color: var(--paper-72); }
/* Чертичка от линията към всяка точка */
.a-zig li::before { content: ''; position: absolute; top: calc(var(--h3) * 0.44); left: calc(var(--gap) * -1); width: calc(var(--gap) - 14px); height: 1px; background: rgba(247, 247, 247, 0.56); transform-origin: 0 50%; }
@media (min-width: 760px) {
  .a-zig { --gap: clamp(110px, 13vw, 160px); --h3: clamp(28px, 2.9vw, 36px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); row-gap: 0; padding-left: 0; }
  .a-zig::before, .a-zig::after { left: 50%; }
  .a-zig li { grid-column: 2; grid-row: calc(var(--i) + 1); }
  .a-zig li + li { margin-top: -30px; }
  .a-zig li::before { left: calc(var(--gap) / -2); width: calc(var(--gap) / 2 - 30px); }
  .a-zig li:nth-child(odd) { grid-column: 1; justify-items: end; text-align: right; }
  .a-zig li:nth-child(odd)::before { left: auto; right: calc(var(--gap) / -2); transform-origin: 100% 50%; }
}

/* ---------- Движение (измерено: 26px, 0.5 s, веднъж). Без JS и при намалено движение всичко е на място. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .a-intro { animation: zh-fade-in 600ms var(--ease-out) 240ms both; }
  .js .za-nas [data-rise] { transition-duration: 500ms; transition-delay: calc(var(--d, 0) * 100ms); }
  .js .za-nas [data-rise]:not(.is-in) { transform: translateY(26px); transition-delay: 0ms; }

  /* Портретът се открива отгоре надолу; самата рамка не се мести, за да я вижда наблюдателят на скрола */
  .js .za-nas figure[data-rise], .js .za-nas figure[data-rise]:not(.is-in) { opacity: 1; transform: none; }
  .js .za-nas figure[data-rise] img { transition: clip-path 900ms var(--ease-brand), transform 900ms var(--ease-brand); }
  .js .za-nas figure[data-rise]:not(.is-in) img { clip-path: inset(0 0 100% 0); transform: scale(1.06); }
  .js .za-nas figure[data-rise].is-in img { clip-path: inset(0 0 0 0); }

  /* Чертичката излиза от линията, след като точката е влязла */
  .js .a-zig li::before { transition: transform 420ms var(--ease-brand) 180ms; }
  .js .a-zig li:not(.is-in)::before { transform: scaleX(0); transition-delay: 0ms; }

  @supports (animation-timeline: view()) {
    .a-zig::after { animation: a-draw linear both; animation-timeline: view(block); animation-range: cover 24vh cover calc(100% - 52vh); }
    @keyframes a-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}