/* ============================================================
   ALTO. Глобални токени, предварителни състояния, ритъм на секциите
   Зарежда се веднъж. Секционните кодови блокове ползват само var()
   и никога не съдържат hex стойност или число за отстояние.
   ============================================================ */

/* ---------- ТОКЕНИ (Фаза 2, Бранд книга) ---------- */
:root {
  /* Палитра. Извлечена от каталога, паното и логото, не от стария сайт. */
  --c-red:        #C4161C;
  --c-red-deep:   #7A0C12;
  --c-ink:        #17110F;
  --c-ink-2:      #241A17;
  --c-cream:      #F4EBE1;
  --c-cream-dark: #E8DACB;
  --c-leaf:       #63B23F;
  --c-ink-soft:   #5C534E;
  --c-cream-soft: rgba(244, 235, 225, 0.66);

  /* Семантични. Секциите ползват тези, не суровите цветове по-горе,
     затова смяна на схемата е една промяна тук. */
  --c-bg:         var(--c-cream);
  --c-surface:    var(--c-cream-dark);
  --c-text:       var(--c-ink);
  --c-text-soft:  var(--c-ink-soft);
  --c-line:       rgba(23, 17, 15, 0.14);
  --c-accent:     var(--c-red);
  --c-accent-ink: var(--c-cream);

  /* Тъмна сцена. Прилага се със .scene--dark върху секцията. */
  --grad-scene: linear-gradient(148deg, var(--c-red-deep) 0%, var(--c-ink) 58%);

  /* Шрифтове. Файловете се зареждат от Breakdance, тук стоят само стековете. */
  --f-display: 'Unbounded', 'Onest', system-ui, sans-serif;
  --f-body:    'Onest', system-ui, -apple-system, sans-serif;

  /* Типографска скала */
  --t-xs:   clamp(0.72rem, 0.7rem + 0.12vw, 0.78rem);
  --t-sm:   clamp(0.85rem, 0.82rem + 0.16vw, 0.94rem);
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --t-lg:   clamp(1.18rem, 1.08rem + 0.45vw, 1.42rem);
  --t-xl:   clamp(1.5rem, 1.28rem + 1.05vw, 2.1rem);
  --t-2xl:  clamp(1.95rem, 1.45rem + 2.3vw, 3.1rem);
  --t-3xl:  clamp(2.5rem, 1.62rem + 3.9vw, 4.6rem);
  --t-4xl:  clamp(3rem, 1.7rem + 6vw, 6.4rem);

  /* Кирилицата в Unbounded е широка, затова заглавията вървят с
     отрицателен tracking, иначе изглеждат раздути. */
  --ls-display: -0.02em;
  --ls-caps:    0.14em;
  --lh-display: 1.06;
  --lh-body:    1.62;

  /* Отстояния */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  /* Ритъм на секциите. Всяка секция носи собствения си padding. */
  --section-y: clamp(4.5rem, 9vw, 9.5rem);
  --section-x: clamp(1.25rem, 5vw, 5rem);
  --container: 1320px;
  --container-narrow: 780px;

  /* Радиус. Единственият извит елемент в сайта е листът от логото. */
  --r-sm: 2px;
  --r-md: 2px;
  --r-pill: 999px;

  --shadow-lift: 0 18px 48px rgba(23, 17, 15, 0.18);

  /* Език на движението (Фаза 2) */
  --e-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 180ms;
  --d-base: 320ms;
  --d-slow: 600ms;

  /* Обвивка на хедъра. Резервира се сега, стилът идва във Фаза 12. */
  --header-h: 92px;
}

@media (max-width: 767px) {
  :root { --header-h: 66px; }
}

/* ---------- ТЪМНА СЦЕНА ----------
   Секциите се редуват между кремава мрежа и тъмна сцена.
   Класът пренасочва семантичните токени, така че вътрешните
   правила остават едни и същи и в двата режима. */
.scene--dark {
  --c-bg:        transparent;
  --c-text:      var(--c-cream);
  --c-text-soft: var(--c-cream-soft);
  --c-line:      rgba(244, 235, 225, 0.18);
  --c-surface:   rgba(244, 235, 225, 0.06);
  background: var(--grad-scene);
  color: var(--c-cream);
}

/* ---------- ПРЕДВАРИТЕЛНИ СЪСТОЯНИЯ НА АНИМАЦИИТЕ ---------- */
html.anim-ready [data-anim="fade-in"],
html.anim-ready [data-anim="fade-up"],
html.anim-ready [data-anim="fade-down"],
html.anim-ready [data-anim="fade-left"],
html.anim-ready [data-anim="fade-right"],
html.anim-ready [data-anim="scale-in"],
html.anim-ready [data-anim="blur-in"] { opacity: 0; }

html.anim-ready [data-anim="clip-up"]   { clip-path: inset(100% 0 0 0); }
html.anim-ready [data-anim="clip-down"] { clip-path: inset(0 0 100% 0); }

html.anim-ready [data-anim-done] { opacity: 1; clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  html.anim-ready [data-anim],
  html.anim-ready [data-stagger] > * {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- ОБХВАТЕН РЕСЕТ НА СЕКЦИЯ ----------
   Неутрализира базовите стилове на Breakdance по елемент,
   без да вдига специфичност навсякъде. */
[data-sect] {
  position: relative;
  padding-block: var(--section-y);
  padding-inline: var(--section-x);
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
}

[data-sect] *, [data-sect] *::before, [data-sect] *::after { box-sizing: border-box; }

[data-sect] h1, [data-sect] h2, [data-sect] h3,
[data-sect] h4, [data-sect] h5, [data-sect] h6,
[data-sect] p, [data-sect] figure, [data-sect] blockquote {
  margin: 0; padding: 0;
  font-weight: inherit; line-height: inherit; letter-spacing: inherit;
}

[data-sect] ul, [data-sect] ol { margin: 0; padding: 0; list-style: none; }
[data-sect] a { color: inherit; text-decoration: none; }
[data-sect] img, [data-sect] video, [data-sect] svg {
  display: block; max-width: 100%; height: auto;
}
[data-sect] button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

[data-sect] .container {
  width: 100%; max-width: var(--container); margin-inline: auto;
}
[data-sect] .container--narrow { max-width: var(--container-narrow); }

/* ---------- ОБЩИ ТИПОГРАФСКИ РОЛИ ---------- */
[data-sect] .display {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}

[data-sect] .eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-text-soft);
}

/* ---------- ГРАМАЖЕН ЧИП ----------
   Подписващият елемент. Появява се в героя, между секциите
   и като филтър в каталога, затова живее глобално. */
[data-sect] .gram {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out);
}

[data-sect] .gram:hover,
[data-sect] .gram[aria-pressed="true"] {
  border-color: var(--c-leaf);
  color: var(--c-leaf);
}

/* ---------- МИНИМУМ ЗА ДОСТЪПНОСТ ---------- */
:focus-visible {
  outline: 2px solid var(--c-leaf);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}