/* =============================================================================
   RED DONKEY v4 - site.css
   Пълна дизайн система: токени, reset, утилити и всички споделени компоненти.
   Мобилен приоритет: базовите стилове са за 320-390px.
   Breakpoints: база <= 809px | 810px tablet | 1200px desktop
   Основа: БЯЛО. Тъмни зони: само footer + слоеве върху снимки.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. ШРИФТОВЕ
   Файловете са при нас (assets/fonts), не в Google Fonts: външният stylesheet
   блокираше първото рисуване, докато се отвори връзка към чужд сървър.
   Променливи шрифтове - един файл покрива всички тегла; по един за кирилица
   и латиница, браузърът тегли само нужния според unicode-range.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/oswald-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -----------------------------------------------------------------------------
   1. ТОКЕНИ
   -------------------------------------------------------------------------- */
:root {
  /* --- 1.1 Цветове (светла тема) --- */
  --c-bg: #ffffff;
  --c-ink: #111214;
  --c-surface: #f4f5f7;
  --c-surface-2: #eceef1;
  /* Бледите („ghost") едри надписи. 2026-08-04: Стефан ги намери „твърде
     fade-нати". Показах му четири степени (reference/originals/_ghost_opts.png)
     и той избра ЧЕТВЪРТАТА. Контрастът с бялото се качва от 1.15:1 на 1.35:1.
     Ползва се и от годините в хронологията на za-nas.html, тоест промяната тук
     важи за всички шест страници с такива надписи наведнъж. */
  --c-ghost: #d9dee6;
  --c-muted: #6e7276;
  --c-muted-2: #9aa0a6;
  /* Дребните ГЛАВНИ надписи (12-13px): „Организираш събитие?", „Имейл",
     „Дата", „Име *" и т.н. 2026-08-05: Стефан - „където пише организираш
     събитие малко повече да се вижда, твърде бледо е". На тази големина и с
     разредка --ls-label сивото #6e7276 (4.85:1) чете като избледняло.
     #4a4f54 качва контраста на 8.3:1, без да стане плътно черно - йерархията
     спрямо основния текст се запазва.
     НЕ ползвай --c-muted за такива надписи; той остава за нормалния по размер
     второстепенен текст, който Стефан НЕ е оспорвал. */
  --c-label: #4a4f54;
  --c-line: rgba(17, 18, 20, 0.15);
  --c-line-soft: rgba(17, 18, 20, 0.08);

  /* Акценти.
     РЕШЕНИЕ (Стефан, 2026-08-03): НИКАКВИ червени UI ефекти по сайта.
     Основният интерактивен акцент е мастиленото черно: --c-accent.
     Червените токени остават дефинирани САМО заради бранд знака (логото
     е червено като графика) и заради изключените variant-b/c файлове -
     нито един UI компонент тук не бива да ги ползва. */
  --c-accent: #111214;
  --c-red: #e31e24;
  --c-red-dark: #c4252d;
  --c-red-tint: #fdecec;
  --c-red-on-dark: #ff5a5f;
  --c-blue: #153d8a;
  --c-blue-dark: #0f2d66;

  /* Тъмни зони (footer, слоеве върху снимки) */
  --c-dark: #111214;
  --c-dark-2: #1a1b1f;
  --c-on-dark: #ffffff;
  --c-on-dark-muted: #9aa0a6;

  /* Стъкло на nav пила */
  --c-nav-bg: rgba(255, 255, 255, 0.72);
  --c-nav-border: rgba(17, 18, 20, 0.08);

  /* --- 1.2 Типография --- */
  --f-display: "Oswald", "Roboto Condensed", "Arial Narrow", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(44px, 11vw, 128px);
  --fs-stat: clamp(28px, 9vw, 48px);
  --fs-display: clamp(30px, 8.4vw, 80px);
  --fs-ghost: clamp(88px, 30vw, 380px);
  --fs-card-num: clamp(76px, 26vw, 180px);
  --fs-acc: clamp(26px, 7.6vw, 76px);
  --fs-h2: clamp(22px, 5vw, 30px);
  --fs-h3: clamp(19px, 4.4vw, 30px);
  --fs-h4: clamp(20px, 4vw, 26px);
  --fs-h5: clamp(30px, 7vw, 60px);
  --fs-day: clamp(38px, 11vw, 50px);
  --fs-body-lg: clamp(17px, 4vw, 20px);
  --fs-body: 16px;
  --fs-nav: 14px;
  --fs-label: 13px;
  --fs-meta: 12px;
  --fs-wordmark: clamp(18px, 5vw, 21px);

  /* Междуредие на едрия (display) текст.
     2026-08-05: Стефан - „изглежда много сбит текста, искам съвсем малко
     повече отстояние". При 0.9 кирилицата се удря: опашката на Ц/Щ и запетаята
     влизат в реда отдолу, а бревисът на Й опира в реда отгоре. Показах четири
     степени (scratchpad/_lh_compare.png) - 1.05 е първата, при която редовете
     се разделят, без текстът да се разпилее.
     Важи за всички едри заглавия наведнъж (CTA карти, заглавия на секции,
     имена на събития/артисти, услугите) - тоест и за другите страници.
     Трите неща, които ТРЯБВА да останат сбити, си имат собствен line-height и
     НЕ се влияят: .stat__num (0.95 + одометърът на 1), .fan-card__num (0.8) и
     .marquee-ghost__item (0.85). Ако някой ден пипаш този токен - провери ги. */
  --lh-display: 1.05;
  --lh-body: 1.6;
  --ls-display: -0.02em;
  --ls-label: 0.06em;

  /* --- 1.3 Отстояния --- */
  --sp-section: 80px;        /* вертикален ритъм - mobile */
  --sp-gutter: 16px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 80px;

  /* Ширини */
  --w-container: 1200px;
  --w-content: 900px;
  --w-text: 800px;
  --w-nav: 1168px;

  /* --- Радиуси --- */
  --r-xl: 36px;
  --r-card: 34px;
  --r-pill: 30px;
  --r-acc: 26px;
  --r-photo: 24px;
  --r-tag: 20px;
  --r-field: 10px;

  /* --- Сенки --- */
  --sh-nav: 0 4px 24px rgba(17, 18, 20, 0.08);
  --sh-card: 0 12px 40px rgba(17, 18, 20, 0.08);
  --sh-card-hi: 0 20px 60px rgba(17, 18, 20, 0.14);
  --sh-btn: 0 6px 18px rgba(17, 18, 20, 0.22);

  /* --- Преходи --- */
  --ease: cubic-bezier(0.44, 0, 0.56, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.2s;
  --t-mid: 0.3s;
  --t-slow: 0.6s;

  /* --- Текстури --- */
  /* Grid линиите са ЕДВА доловими (0.12): при 0.5 те се сливаха на някои
     DPI/zoom в тъмни вертикални ивици по hero фона (клиентски баг, 2026-08-03) */
  --tex-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M50 0H0v50' fill='none' stroke='%23111214' stroke-width='1' stroke-opacity='0.12'/%3E%3C/svg%3E");
  --tex-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%23111214' fill-opacity='0.5'/%3E%3C/svg%3E");
  --tex-dots-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%23ffffff' fill-opacity='0.5'/%3E%3C/svg%3E");

  /* Височина на nav пила (за скрол отстъпи) */
  --nav-h: 56px;
}

@media (min-width: 810px) {
  :root {
    --sp-section: 120px;
    --sp-gutter: 24px;
    --nav-h: 60px;
  }
}

@media (min-width: 1200px) {
  :root {
    --sp-section: 160px;
    --sp-gutter: 20px;
  }
}

/* -----------------------------------------------------------------------------
   2. RESET / БАЗА
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Lenis поема скрола - изключваме native smooth, за да няма конфликт */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, picture, video, svg, canvas {
  display: block;
  max-width: 100%;
}

img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* В тъмните зони мастиленият ринг е невидим - там рингът е бял */
.footer :focus-visible,
.event-row :focus-visible,
.contact-card :focus-visible {
  outline-color: #fff;
}

::selection {
  background: var(--c-accent);
  color: #fff;
}

/* Display роли */
.d1, .d2, .d3,
.hero__title,
.manifesto__title,
.section-title,
.acc-title,
.event-row__title,
.artist-card__name,
.cta-card__title,
.stat__num,
.fan-card__num,
.marquee-ghost__item,
.footer__col-title {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

/* -----------------------------------------------------------------------------
   3. УТИЛИТИ
   -------------------------------------------------------------------------- */
/* Безопасната зона на телефони с изрязване (notch/остров).
   Страниците обявяват viewport-fit=cover, тоест съдържанието стига до самия
   ръб на екрана - но до 2026-08-05 никъде не се четеше env(safe-area-inset-*)
   и в landscape изрязването седеше върху текста. max() пази нормалното
   отстояние там, където изрязване няма (тогава env(...) е 0). */
.container {
  width: 100%;
  max-width: calc(var(--w-container) + var(--sp-gutter) * 2);
  margin-inline: auto;
  padding-left: max(var(--sp-gutter), env(safe-area-inset-left));
  padding-right: max(var(--sp-gutter), env(safe-area-inset-right));
}

.container--content { max-width: calc(var(--w-content) + var(--sp-gutter) * 2); }
.container--text { max-width: calc(var(--w-text) + var(--sp-gutter) * 2); }

.section {
  position: relative;
  padding-block: calc(var(--sp-section) / 2);
}

.section--flush { padding-block: 0; }
.section--tight { padding-block: calc(var(--sp-section) / 3); }
.section--clip { overflow: hidden; }

.main {
  display: block;
  padding-top: calc(var(--nav-h) + 24px);
}

/* Скокът по котва (#секция) без Lenis - клавиатура, prefers-reduced-motion,
   споделен дълбок линк - спираше така, че заглавието оставаше ПОД лепкавата
   навигация. scroll-margin не влияе на подредбата, само на това къде спира
   скролът, затова може да се сложи на всичко с id. */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-center { text-align: center; }
.u-nowrap { white-space: nowrap; }
.u-muted { color: var(--c-muted); }
/* Акцентен линк в текст (наследник на стария .u-red) */
.u-ink {
  color: var(--c-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.u-desktop-only { display: none; }
.u-mobile-only { display: block; }

@media (min-width: 810px) {
  .u-desktop-only { display: block; }
  .u-mobile-only { display: none; }
}

/* Показва се само когато JS е активен.
   Селекторът е с повишена специфичност (html:not(.js)), за да бие собствения
   display на компонента (напр. .slider__nav { display: flex }). */
.js-only { display: none; }
.js .js-only { display: block; }
.js .js-only--flex { display: flex; }
html:not(.js) .js-only { display: none !important; }

/* Скрива се когато JS е активен */
.js .no-js-only { display: none; }

/* Хеърлайн */
.hairline {
  height: 1px;
  background: var(--c-line);
  border: 0;
  margin: 0;
}

/* -----------------------------------------------------------------------------
   4. ФОНОВИ ТЕКСТУРИ (grid + spotlight vignette)
   -------------------------------------------------------------------------- */
.bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--tex-grid);
  background-size: 50px 50px;
  /* 0.3 (беше 0.55): заедно със stroke-opacity 0.12 линиите са едва щрих -
     при 0.55 alias-ваха в "черни черти" по hero фона на някои екрани */
  opacity: 0.3;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 0%, transparent 100%);
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 0%, transparent 100%);
  z-index: 0;
}

.bg-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 42%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
              radial-gradient(120% 120% at 50% 50%, rgba(255, 255, 255, 0) 45%, var(--c-surface) 100%);
  z-index: 0;
}

/* Прожектор, следящ мишката (desktop-only, JS сетва --sx/--sy).
   Неутрално сив (без червено/розово) - решение от 2026-08-03. */
.bg-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  background: radial-gradient(
    260px circle at var(--sx, 50%) var(--sy, 40%),
    rgba(17, 18, 20, 0.05) 0%,
    rgba(17, 18, 20, 0) 70%
  );
}

@media (min-width: 1200px) and (pointer: fine) {
  .has-spotlight .bg-spotlight { opacity: 1; }
}

.section > .container,
.hero > .container { position: relative; z-index: 1; }

/* -----------------------------------------------------------------------------
   5. АНИМАЦИОННА СИСТЕМА (data-anim)
   Без JS/GSAP всичко е видимо: началните състояния важат само при .js-anim
   -------------------------------------------------------------------------- */
.js-anim [data-anim] { opacity: 0; will-change: transform, opacity; }
.js-anim [data-anim="rise"] { transform: translateY(40px); }
.js-anim [data-anim="rise-sm"] { transform: translateY(20px); }
.js-anim [data-anim="fade"] { transform: none; }
.js-anim [data-anim="slide-x"] { transform: translateX(-30px); }
.js-anim [data-anim="spring"] { transform: translateY(30px); }
.js-anim [data-anim="zoom"] { transform: scale(0.94); }
.js-anim [data-anim="stagger"] > * { opacity: 0; transform: translateY(24px); }
.js-anim [data-anim="stagger"] { opacity: 1; }

/* КРИТИЧНО: след като анимацията изиграе, GSAP маха inline transform-а
   (clearProps). Без правилата отдолу началните състояния горе се активират
   пак и елементът се връща в изходната си позиция - CTA картите излизаха
   извън левия ръб на телефона. Класът се слага при СТАРТА на анимацията
   (inline стилът на GSAP го бие, докато тя тече), затова няма трепване.
   Специфичност (0,3,0) > (0,2,0) на началните състояния.

   `:not(.is-pressed)` е добавен на 2026-08-05. Тези две правила (0,3,0) биеха
   правилата за натиснато състояние (0,1,0 / 0,2,0) и на 30 карти в 9 страници
   допирът НЕ променяше нито един пиксел - механизмът работеше, но `transform:
   none` печелеше. Изключването на натиснатия елемент е по-чисто от това да се
   дублира цялата секция 31 с по-висока специфичност. */
.js-anim [data-anim].is-revealed:not(.is-pressed) { transform: none; will-change: auto; }
.js-anim [data-anim="stagger"].is-revealed > :not(.is-pressed) { transform: none; will-change: auto; }

/* Интрото на hero-то: буква по буква (MagicUI blurInUp, initHeroChars).
   ИСТОРИЯ: v2 (буквите) -> v3 „като бутоните" (Стефан, 2026-08-09 сутрин)
   -> ВЪРНАТО на v2 СЪЩИЯ ден („не, не ми харесва - върни я"). Буквеното
   интро е ОДОБРЕНОТО. Тук стои само стартовото скриване - до старта на
   tween-а заглавието е невидимо, за да няма проблясък. Гейтнато на
   .js-anim: без JS / при anim-off класът го няма и текстът си стои видим. */
.js-anim .hero__words[data-hero-chars]:not(.is-revealed) { opacity: 0; }
/* СПАСИТЕЛЕН ПОЯС (2026-08-08, Стефан: "на desktop hero-то и текстът бавно
   зареждат"): гейтовете крият заглавието и бутоните, докато site.js пътува
   по мрежата - на бавна връзка първият екран стоеше празен до 2.5s (boot
   застраховката) или до пристигането на JS (мерено: 3.5s на Fast3G, текст
   чак на 4.9s). Inline boot скриптът слага html.hero-rescue на 1.1s по
   АБСОЛЮТНИЯ часовник (CSS animation-delay тук не върши работа - той тръгва
   чак когато самият CSS пристигне и на бавна мрежа спасението закъсняваше
   с още толкова). Понеже класът обикновено е на място преди първото
   боядисване, заглавието е видимо от първия нарисуван кадър. Ако интрото
   е стигнало първо - елементите са .is-revealed и правилата не хващат.
   При закъснял site.js guard-ът в initHeroChars вижда класа и НЕ крие
   показан текст. reveal() на бутоните е gsap.to - от видимо крайно
   състояние е no-op, там JS guard не трябва. */
/* :not(.rd-ready) Е ЗАДЪЛЖИТЕЛНО (Стефан, 2026-08-09: "бутоните изведнъж
   просто се появяват"): без него поясът (0.9s) ИЗПРЕВАРВАШЕ замислената
   rise анимация на бутоните (delay 0.95s) с 50ms и я убиваше на всяко
   нормално зареждане - показваше ги мигновено. Поясът е за случая
   "site.js още пътува"; пристигне ли (rd-ready в boot()), анимациите са
   си живи, а синхронният sweep в initRevealSafetyNet пази вече показаното
   от мигане. */
html.hero-rescue:not(.rd-ready) .hero__words[data-hero-chars]:not(.is-revealed),
html.hero-rescue:not(.rd-ready) .hero--threads .hero__actions[data-anim]:not(.is-revealed) {
  opacity: 1 !important;
  transform: none !important;
}

/* РАЗШИРЕН ПОЯС (2026-08-09, Стефан: календарът на телефона стоеше бяла
   дупка ~2s): докато site.js още НЕ Е пристигнал (:not(.rd-ready), класът
   се слага в boot()), поясът показва ЦЯЛОТО съдържание без гейтове - не
   само hero-то. Пристигне ли site.js: rd-ready гаси тези правила, а
   синхронните sweep() виквания в initRevealSafetyNet/initCalendarPour
   маркират видимото като разкрито ПРЕДИ следващия кадър - нищо не мига.
   Съдържанието под екрана се връща под гейтовете и анимациите му се
   играят нормално при скрол. При бърз JS (обичайният случай) rd-ready
   идва преди 0.9s и тези правила изобщо не светват. */
html.hero-rescue:not(.rd-ready) [data-anim]:not(.is-revealed),
html.hero-rescue:not(.rd-ready) [data-anim="stagger"] > * {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}
html.hero-rescue:not(.rd-ready) .event-row:not(.is-revealed) {
  clip-path: inset(0 0 0 0 round var(--r-pill)) !important;
}
html.hero-rescue:not(.rd-ready) .event-row:not(.is-revealed) .event-row__bg img {
  transform: none !important;
}
/* .char правилата останаха от v2 интрото (буква по буква). Днес h1 не се
   разбива на букви, но initHeroChars може да се върне с един атрибут -
   затова стилът стои. */
.hero__words .char { display: inline-block; }

/* „ЗАВЕСА" на заглавията (2026-08-07, предложение 1, одобрено): заглавието
   се показва изпод невидим долен ръб - clip-path се вдига като завеса.
   Чист CSS преход, пуска се от is-revealed (initAppear, вид "curtain") -
   БЕЗ GSAP зависимост. opacity: 1 бие глобалното [data-anim] { opacity: 0 }
   от по-горе (същата специфичност, по-късно в файла). */
.js-anim [data-anim="curtain"] {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: translateY(30px);
}
.js-anim [data-anim="curtain"].is-revealed {
  transition: clip-path 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* -12% отгоре/отдолу: буквите с опашки (Д, Ц, Щ) и бревисът на Й стърчат
     извън em кутията - inset(0 ...) им режеше крайчетата за постоянно. */
  clip-path: inset(-12% 0 -12% 0);
}

/* „НАЛИВАНЕ" на календара (2026-08-07, предложение 3, одобрено): тъмният ред
   се разлива отляво надясно при първото виждане, снимката отзад се отпуска
   от леко приближение. Редовете се разкриват от initCalendarPour (site.js),
   пак само с класа is-revealed - без GSAP зависимост.
   БЪГ, ХВАНАТ ОТ СТЕФАН (2026-08-08, „твърде са заоблени картите"): тук
   стоеше round 999px с грешната идея, че редът е пълно хапче. Реалният му
   радиус е --r-pill = 30px, а крайното clip състояние ОСТАВА върху реда
   завинаги (преход към 'none' не се интерполира) - тоест наливането тихо
   ПРОМЕНЯШЕ ФОРМАТА на всеки ред до пълно хапче. round трябва да е равен
   на border-radius на реда - иначе анимацията подменя дизайна. */
/* 0.8s -> 0.5s (2026-08-07, CDP trace): clip-path се боядисва всеки кадър от
   прехода, а редът е ~550k device px - по-късият бурст (заедно с по-ранното
   палене от initCalendarPour) маха едрите paint-ове от активния скрол. */
.js-anim .event-row { transition: clip-path 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js-anim .event-row:not(.is-revealed) { clip-path: inset(0 100% 0 0 round var(--r-pill)); }
.js-anim .event-row.is-revealed { clip-path: inset(0 0 0 0 round var(--r-pill)); }
.js-anim .event-row:not(.is-revealed) .event-row__bg img { transform: scale(1.1); }

/* Глобален killswitch */
html.anim-off [data-anim],
html.anim-off [data-anim="stagger"] > * {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}
html.anim-off .event-row { clip-path: none !important; }
html.anim-off .hero__words { opacity: 1 !important; }
/* Буквите поотделно: gsap.set им слага inline opacity 0 - правилото на
   родителя не ги спасява (хванато на 2026-08-08 при бавна мрежа). */
html.anim-off .hero__words .char {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-anim],
  [data-anim="stagger"] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* -----------------------------------------------------------------------------
   6. ЕТИКЕТИ / ЧИПОВЕ / ТАГОВЕ

   ВНИМАНИЕ: .label-chip и .eyebrow са ИЗВАДЕНИ ОТ УПОТРЕБА (2026-08-04).
   Стефан: „всички такива надписи да се махнат, защото си личи, че е AI".
   Всичките 53 бройки отпаднаха от живите страници - дребният сив uppercase
   етикет над заглавие е точно белегът, който издава генериран сайт.
   Правилата остават само защото изключените от деплой експерименти
   (index-b/c/mosaic/video/cards/videocard, hero-lab) още ги ползват.
   НЕ добавяй нови чипове по страниците без изричното му одобрение.
   .tag-pill остава - носи жанра на артиста. Модификаторът .tag-pill--ink
   („Разпродаден") отпадна на 2026-08-05, виж бележката под .tag-pill--on-photo.
   -------------------------------------------------------------------------- */
.label-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  /* Grayscale AA: без този hint дребният uppercase текст хваща субпикселни
     сини/оранжеви ръбове (ClearType) и етикетът изглежда синкав, а не #6E7276 */
  transform: translateZ(0);
}

.label-chip svg { width: 20px; height: 20px; flex: none; }
.label-chip--accent { color: var(--c-accent); }
.label-chip--on-dark { color: var(--c-on-dark-muted); }

.tag-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-tag);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.5;
  background: var(--c-surface-2);
  color: var(--c-ink);
  white-space: nowrap;
}

/* Върху снимка таговете остават тъмни (най-четими) */
.tag-pill--on-photo {
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
}

/* .tag-pill--ink („Разпродаден") е ИЗТРИТ на 2026-08-05 по искане на Стефан:
   черните маркери в списъка с отминали събития отпадат и на десктоп, и на
   телефон. Заедно с тях отпаднаха 7 етикета от events.html. Правилото не се
   пази „за всеки случай" - нищо друго по сайта не го ползваше. */

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  /* Същият grayscale AA hint като .label-chip (вж. коментара там) */
  transform: translateZ(0);
}

/* -----------------------------------------------------------------------------
   7. БУТОНИ
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-nav);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background var(--t-mid) var(--ease),
              color var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}

.btn svg { width: 16px; height: 16px; flex: none; }

.btn:active { transform: translateY(1px); }

/* Основен бутон: мастилено черно (решение 2026-08-03 - без червени бутони) */
.btn--solid {
  background: var(--c-accent);
  color: #fff;
}
.btn--solid:hover { background: #000; box-shadow: var(--sh-btn); }

/* Билетните бутони са в kupibileti-синьо (решение на клиента) */
.btn--ticket {
  background: var(--c-blue);
  color: #fff;
  /* „Пулс" (2026-08-07, предложение 5, одобрено): веднъж на ~6.5s бутонът
     едва доловимо вдишва - единственото движение с търговска цел по сайта.
     92-100% от цикъла = самият пулс, останалото е покой. */
  animation: rd-ticket-pulse 6.5s ease-in-out 3s infinite;
}
.btn--ticket:hover { background: var(--c-blue-dark); box-shadow: 0 6px 18px rgba(21, 61, 138, 0.28); }
/* Пулсът спира, щом човекът вече взаимодейства - и ЗАДЪЛЖИТЕЛНО при натискане:
   animation бие transform от .is-pressed класа и без това правило натиснатото
   състояние на билетния бутон умира. */
.btn--ticket:hover,
.btn--ticket:active,
.btn--ticket.is-pressed { animation: none; }
html.anim-off .btn--ticket { animation: none; }

@keyframes rd-ticket-pulse {
  0%, 90%, 100% { transform: scale(1); }
  94% { transform: scale(1.035); }
  97% { transform: scale(0.995); }
}

.btn--dark { background: var(--c-ink); color: #fff; }
.btn--dark:hover { background: #000; }

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
}
.btn--ghost:hover { border-color: var(--c-ink); background: var(--c-surface); }

.btn--ghost-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

.btn--lg { min-height: 60px; padding: 0 32px; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: var(--fs-meta); }
.btn--block { display: flex; width: 100%; }

/* „Shimmer" бутон (2026-08-07): Стефан поиска MagicUI shimmer-button за
   „Предстоящи събития" в hero-то. Пренесен на чист CSS, две части:
   1. span.btn-shimmer__ring - светла искра, обикаляща по РЪБА: спанът е
      маскиран до пръстен от 1.5px чрез mask-composite, а ВЪТРЕ в него се
      върти квадрат с conic градиент чрез transform.
      Защо не анимиран @property ъгъл в самия градиент: смяната на ъгъла
      пребоядисваше бутона ~50 пъти/сек ПОСТОЯННО, дори в пълен покой
      (потвърдено с CDP trace на 2026-08-07: 318 paint-а за 5s покой -> 0
      след изключване). Transform върти на композитора без нито един paint.
   2. ::after - коса светла ивица, минаваща през лицето на всеки ~5s
      (transform, също без paint - проверено в същия trace). */
.btn-shimmer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-shimmer__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  -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;
  overflow: hidden;
  pointer-events: none;
}
.btn-shimmer__ring::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  /* Квадрат, чийто вписан кръг покрива диагонала на бутона при всяко
     завъртане (нужен е ~103% от ширината - 320% е с широк запас). */
  width: 320%;
  aspect-ratio: 1 / 1;
  background: conic-gradient(
    transparent 0deg 250deg,
    rgba(255, 255, 255, 0.9) 305deg,
    transparent 360deg);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: rd-shimmer-rot 3.4s linear infinite;
  will-change: transform;
  pointer-events: none;
}
.btn-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg,
    transparent 0% 40%,
    rgba(255, 255, 255, 0.16) 50%,
    transparent 60% 100%);
  transform: translateX(-130%);
  animation: rd-sheen 5.2s ease-in-out 1.6s infinite;
  pointer-events: none;
}
@keyframes rd-shimmer-rot { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rd-sheen {
  0% { transform: translateX(-130%); }
  34%, 100% { transform: translateX(130%); }
}
html.anim-off .btn-shimmer__ring::before,
html.anim-off .btn-shimmer::after { animation: none; }

/* Минимален бутон: текст + икона */
.btn-minimal {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-size: var(--fs-nav);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink);
  transition: color var(--t-mid) var(--ease), gap var(--t-mid) var(--ease);
}
.btn-minimal svg { width: 18px; height: 18px; }
/* Hover: стрелката се отдалечава; цветът остава мастилен (без червено) */
.btn-minimal:hover { gap: var(--sp-3); }

/* Кръгли prev/next */
.btn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-ink);
  color: #fff;
  transition: background var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.btn-round svg { width: 20px; height: 20px; }
.btn-round:hover { background: #000; transform: translateY(-2px); }
.btn-round:disabled { opacity: 0.3; cursor: default; }
.btn-round:disabled:hover { background: var(--c-ink); }

@media (min-width: 810px) {
  .btn-round { width: 56px; height: 56px; }
}

/* Стрелка, която се разтяга (CTA карти) */
.arrow-line {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 120px;
  color: var(--c-muted);
}
.arrow-line__bar {
  height: 2px;
  width: 41px;
  background: currentColor;
  transition: width var(--t-slow) var(--ease-out);
}
.arrow-line__tip { flex: none; width: 12px; height: 28px; }
.arrow-line__tip svg { width: 12px; height: 28px; }

/* -----------------------------------------------------------------------------
   8. NAV PILL
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  z-index: 90;
  transition: transform 0.45s var(--ease-out);
}

.nav.is-hidden { transform: translateY(calc(-100% - 24px)); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: var(--nav-h);
  max-width: var(--w-nav);
  margin-inline: auto;
  padding: 0 8px 0 14px;
  border-radius: var(--r-pill);
  background: var(--c-nav-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--c-nav-border);
  box-shadow: var(--sh-nav);
}

/* Лого */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  min-height: 44px;      /* tap target >= 44px */
}
.logo__mark { width: 28px; height: 28px; flex: none; }
.logo__word {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-wordmark);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
/* Ръкописният надпис от официалното лого (кривите са извадени от logo-red.svg).
   Опашката на "y" слиза под реда - надписът се вдига с 2px, за да седи
   оптически на една линия с магарето. */
.logo__script {
  width: auto;
  height: clamp(26px, 7vw, 30px);
  flex: none;
  margin-top: -2px;
}

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
}

.nav__link {
  position: relative;
  display: block;
  overflow: hidden;
  height: 18px;
  font-size: var(--fs-nav);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink);
}

/* Roll-up hover: две насложени копия */
.nav__link-roll {
  display: block;
  transition: transform var(--t-mid) var(--ease-out);
}
.nav__link-roll span { display: block; height: 18px; line-height: 18px; }
.nav__link:hover .nav__link-roll,
.nav__link:focus-visible .nav__link-roll { transform: translateY(-18px); }

.nav__link.is-active { color: var(--c-ink); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 10%;
  bottom: 0;
  width: 80%;
  height: 2px;
  background: var(--c-ink);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

.nav__cta { display: none; }

/* Бургер */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border-radius: 50%;
  flex: none;
}
.burger__bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-ink);
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) linear;
}
.burger.is-open .burger__bar:first-child { transform: translateY(4px) rotate(45deg); }
.burger.is-open .burger__bar:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (min-width: 1200px) {
  .nav { top: 16px; left: 20px; right: 20px; }
  .nav__inner { padding: 0 8px 0 20px; }
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
}

/* -----------------------------------------------------------------------------
   9. MENU OVERLAY
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--c-bg);
  padding: calc(var(--nav-h) + 40px) var(--sp-gutter) var(--sp-8);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.menu__list {
  max-width: var(--w-content);
  margin-inline: auto;
  border-top: 1px solid var(--c-line);
}

.menu__item { border-bottom: 1px solid var(--c-line); }

.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 64px;
  padding-block: var(--sp-3);
  font-family: var(--f-display);
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: 1;
  transition: color var(--t-mid) var(--ease), padding-left var(--t-mid) var(--ease);
}
.menu__link:hover { color: var(--c-muted); padding-left: 8px; }
/* Текущата страница в мобилното меню. До 2026-08-05 това правило живееше само
   в страничните стилове на za-nas.html и organize-event.html - другите 23
   страници не маркираха нищо и екранният четец не казваше къде се намира
   човекът. Сега маркировката е на всяка страница, а стилът е тук, на едно
   място. */
.menu__link[aria-current="page"],
.menu__link.is-active { color: var(--c-muted); }
/* .menu__num отпадна 2026-08-04 - Стефан: номерата издават, че е правено от AI */

.menu__foot {
  max-width: var(--w-content);
  margin: var(--sp-8) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.menu__contact { font-size: var(--fs-body); color: var(--c-muted); line-height: 2.2; min-width: 0; overflow-wrap: anywhere; }
.menu__contact a {
  display: inline-block;
  max-width: 100%;
  padding-block: 10px;
  color: var(--c-ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.menu__contact a:hover { color: var(--c-muted); }

/* -----------------------------------------------------------------------------
   10. СОЦИАЛНИ ИКОНИ
   -------------------------------------------------------------------------- */
.socials {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  color: var(--c-muted);
  transition: color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out);
}
.social:first-child { margin-left: 0; }
.social svg { width: 20px; height: 20px; }
.social:hover { color: var(--c-ink); transform: translateY(-2px); }
.socials--on-dark .social { color: var(--c-on-dark-muted); }
.socials--on-dark .social:hover { color: #fff; }

/* -----------------------------------------------------------------------------
   11. HERO (текстов display hero)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62vh;
  padding-block: var(--sp-9) var(--sp-10);
  overflow: hidden;
  text-align: center;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
}

/* Свой composite слой предварително: parallax скрубът на hero съдържанието
   не плаща създаване на слой и repaint на първия скрол кадър. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.anim-off) [data-hero-parallax] { will-change: transform; }
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 700;
  max-width: 100%;
}

.hero__line {
  display: block;
  white-space: nowrap;
}

.hero__sub {
  max-width: 42ch;
  font-size: var(--fs-body-lg);
  color: var(--c-muted);
  line-height: var(--lh-body);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* Hero с партньорска лента в ГОРНИЯ ръб (index.html).
   Обновление 2026-08-03 (късно): лентата стои НАД текста на hero-то - между
   навигацията и заглавието - и логата са в оригиналните си цветове.
   Колона: лентата ляга отгоре, съдържанието се центрира с margin-block:auto. */
.hero--sponsors {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding-top: 0;
}
/* margin-block:auto центрира съдържанието в остатъка, НО на нисък телефонски
   екран остатъкът е малък и „RED DONKEY" етикетът лягаше върху логата.
   padding-top гарантира отстояние независимо от auto маржа. */
.hero--sponsors > .container { margin-block: auto; padding-top: var(--sp-8); }
@media (min-width: 810px) {
  .hero--sponsors > .container { padding-top: var(--sp-7); }
}

.hero__sponsors {
  position: relative;
  /* НАД parallax съдържанието (z1): при скрол hero текстът потъва надолу,
     но ако се доближи до лентата, тя остава плътна и отгоре */
  z-index: 2;
  width: 100%;
  /* Дишане между nav пила и логата: без филтри, само отстояние */
  padding-block: var(--sp-3) var(--sp-5);
  background: var(--c-bg);
}

@media (min-width: 810px) {
  .hero { min-height: 74vh; }
}

@media (min-width: 1200px) {
  .hero { min-height: 80vh; padding-block: var(--sp-10); }
  .hero--sponsors { padding-top: 0; }
  .hero__inner { gap: var(--sp-6); }
  .hero__sponsors { padding-block: var(--sp-4) var(--sp-6); }
}

/* --- 11.1 КОМПАКТНО HERO ----------------------------------------------------
   Решение на Стефан (2026-08-03, късно): „огромните текстове в hero-то и
   началото на другите страници" се махат - „бледите текстове (ghost лентите)
   ги остави". Едрото .hero__title изчезва от index/artisti/events/galeria/
   lokacii/organize-event/za-nas и остава само като невидим H1 (.sr-only) за
   екранни четци и SEO.
   Затова hero-то тук НЕ е екран за запълване, а кратка въвеждаща лента:
   min-height отпада (иначе остава голяма бяла дупка), отстоянията се свиват и
   реалното съдържание тръгва високо на страницата - това е целта на промяната.
   ВАЖНО: .hero / .hero__title правилата отгоре ОСТАВАТ - 404.html ги ползва
   с пълния си display вид (.nf__title).
   Правилата са след media блоковете горе нарочно: медия заявките не носят
   специфичност, така .hero--compact бие .hero и на 810/1200px. */
.hero--compact {
  min-height: 0;
  /* Долният padding е нарочно малък: следващата секция сама носи
     calc(--sp-section / 2) отгоре (40 / 60 / 80px). Двете заедно дават
     дишане, без да отварят бяла дупка под краткото hero. */
  padding-block: var(--sp-6) var(--sp-7);
}
.hero--compact .hero__inner { gap: var(--sp-4); }

/* „Голо" hero (2026-08-09): след махането на сивите интро текстове (Стефан)
   тези хераldа държат само sr-only H1 - празната лента + отстъпът на първата
   секция отваряха голяма бяла дупка над първото заглавие („Нашата история
   да започва малко по-нагоре... много бяло празно пространство"). Свиваме
   ги до нула - първата секция сама си носи дишането. */
.hero--bare { padding-block: 0; min-height: 0; }
.hero--bare .hero__inner { gap: 0; }
.hero--compact .hero__sub {
  max-width: 46ch;
  margin-inline: auto;
}
.hero--compact .hero__actions { margin-top: var(--sp-1); }

/* index.html: партньорската лента е първото нещо в hero-то (решение 3) и вече
   не се центрира спрямо огромно заглавие - блокът под нея просто следва. */
.hero--sponsors.hero--compact > .container {
  margin-block: 0;
  padding-top: var(--sp-6);
}

@media (min-width: 810px) {
  .hero--compact { padding-block: var(--sp-7) var(--sp-8); }
  .hero--sponsors.hero--compact > .container { padding-top: var(--sp-7); }
}

@media (min-width: 1200px) {
  .hero--compact { padding-block: var(--sp-7) var(--sp-8); }
  .hero--compact .hero__inner { gap: var(--sp-5); }
}

/* Голото hero бие compact НА ВСИЧКИ ширини (одит, 2026-08-09):
   стоеше само ПРЕДИ media блоковете горе и при еднаква специфичност
   по-късните @media правила го надписваха на >=810px - 72px празна лента
   със сив спотлайт отпечатък под навигацията (същият капан като реш. 15).
   Затова: ПО-ВИСОКА специфичност И СЛЕД media блоковете. Не го местѝ. */
.hero--compact.hero--bare { padding-block: 0; min-height: 0; }
.hero--bare .bg-vignette,
.hero--bare .bg-grid,
.hero--bare .bg-spotlight { display: none; }

/* --- 11.2 HERO С „THREADS" (само index.html) --------------------------------
   Стефан, 2026-08-03: „използвай тази анимация за hero-то" (React Bits Threads)
   + „в hero maximum да пише три думи ... не искам хората да четат".
   Затова началната страница НЕ ползва .hero--compact: 335px са твърде малко,
   за да се прочете снопът нишки. Височината е компромис - анимацията диша, но
   първата секция („Повече от агенция") пак се стига с един скрол.
   Правилата стоят СЛЕД медия блоковете горе, за да бият .hero (медия заявките
   не носят специфичност) - същият похват като .hero--compact. */
.hero--threads {
  /* --threads-drop удължава платното НАДОЛУ извън hero-то (клипва се от
     overflow:hidden). Смисълът: снопът нишки е центриран по средата на
     платното, а на широк екран заглавието е точно там. Като „удължим" платното
     надолу, снопът слиза под бутоните и заглавието остава чисто, без да режем
     анимацията. На телефон думите са три реда и нишките минават отстрани и
     зад тях - там отместване не трябва. */
  --threads-drop: 0px;
  min-height: 58vh;
  /* Горното отстояние 24px -> 8px (Стефан, 2026-08-05: „лентата със спонсорите
     да се мръдне още малко по-нагоре, съвсем малко"). Празнината между
     плаващата навигация и логата пада от 48px на 32px - още се чете като
     отделен ред, но лентата вече не виси в средата на нищото.
     Долу под 32px не бива: навигацията е фиксирана до 68px и логата почват
     да ѝ дишат във врата при скрол нагоре.
     Долното отстояние 40px -> 20px (2026-08-07): Стефан - „виж колко свободно
     място има под тях [бутоните]" - изяждаме го, двойката слиза по-ниско. */
  padding-block: var(--sp-2) var(--sp-5);
}
.hero--threads .hero__inner { gap: var(--sp-5); }
/* Стефан, 2026-08-04: „за телефон тези двата бутона да са малко по надолу";
   2026-08-05: „да се свалят още малко надолу"; 2026-08-07: „още по-надолу,
   виж колко свободно място има под тях". Историята: 24 -> 44 -> 76px.
   Заедно със свитото долно отстояние на hero-то (40 -> 20px) двойката пада
   с ~52px и вълната диша в по-широка празнина.
   От 810px нагоре стойността се връща на предишната (виж медия блока отдолу),
   защото там въздухът и без това е повече. */
.hero--threads .hero__actions { margin-top: 76px; }
/* Партньорската лента остава първото нещо в hero-то (решение 3).
   padding-top-ът тук КОМПЕНСИРА свитото горно отстояние на hero-то: лентата се
   вдига, а трите думи остават там, където бяха. Ако пипнеш едното - виж и
   другото, иначе целият hero тръгва нагоре. */
.hero--sponsors.hero--threads > .container {
  margin-block: auto;
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-2);
}

@media (min-width: 810px) {
  /* 64vh -> 54vh и долен padding sp-9 -> sp-5 (Стефан, 2026-08-08: "не
     изглежда ли твърде празен самото hero... виж колко място под бутоните
     остава"): изяждаме празната лента под бутоните, статистиките влизат
     в първия екран и hero-то се чете пълно, не оредяло. Вълната пак диша -
     платното се свива с височината и снопът се качва по-близо до бутоните. */
  .hero--threads { min-height: 54vh; padding-block: var(--sp-6) var(--sp-5); --threads-drop: 150px; }
  .hero--threads .hero__actions { margin-top: var(--sp-2); }
  /* Съдържанието се вдига в горната част на hero-то, за да остане долу чист
     въздух за вълната (иначе трите думи и нишките си оспорват едно и също
     хоризонтално поле). */
  .hero--sponsors.hero--threads > .container { margin-block: 0 auto; padding-top: var(--sp-7); }
}
@media (min-width: 1200px) {
  /* 68vh -> 56vh, sp-10 -> sp-5: същото решение от 2026-08-08 (празното под
     бутоните), пропорционално за широкия екран. */
  .hero--threads { min-height: 56vh; padding-block: var(--sp-6) var(--sp-5); --threads-drop: 180px; }
  .hero--threads .hero__inner { gap: var(--sp-6); }
}

/* --- 11.2b LIQUID GLASS БУТОНИ В HERO-ТО (само index.html) ------------------
   Стефан, 2026-08-04: „тези двата бутона ... да са liquid glass".
   Стъклото е истинско, не нарисувано: backdrop-filter размива и насища това,
   което минава ЗАД бутона - тук това са нишките на Threads. Вълната се вижда
   размита през бутона и продължава да се движи, докато анимацията върви.
   Материалът стои от три слоя:
     1) полупрозрачен фон - основният тон;
     2) backdrop-filter   - размиване + насищане на фона отдолу;
     3) inset подсветка   - светъл ръб горе, който чете като дебелина на стъкло.
   Материалът е един и същ на всички ширини нарочно - бутон, който сменя
   материала си на 810px, изглежда като бъг. Телефонско е само отстоянието.
   Непрозрачностите не са произволни (измерено, не на око): 0.78 на тъмния
   бутон държи белия текст на 9.6:1 върху бяло, а 0.50 на светлия държи
   мастиления текст на 4.8:1 дори когато най-тъмната нишка мине точно зад него.
   И двете са над AA прага 4.5:1, но запасът на СВЕТЛИЯ е тънък - ако някой
   вдигне прозрачността му над 0.50, текстът пада под прага. */
.hero--threads .hero__actions .btn {
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  transition: background var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease);
}

/* Горният linear-gradient е „блясъкът" - светлината, която пада върху горния
   ръб на стъклото. Без него полупрозрачният фон чете просто като сив бутон.
   Втората стойност (плътният rgba) е самото стъкло. */
.hero--threads .hero__actions .btn--solid {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 52%),
    rgba(17, 18, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 10px 28px rgba(17, 18, 20, 0.22);
}
.hero--threads .hero__actions .btn--solid:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 52%),
    rgba(17, 18, 20, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 12px 32px rgba(17, 18, 20, 0.30);
}

.hero--threads .hero__actions .btn--ghost {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%),
    rgba(255, 255, 255, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 0 1px rgba(17, 18, 20, 0.07),
    0 10px 28px rgba(17, 18, 20, 0.10);
}
.hero--threads .hero__actions .btn--ghost:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 60%),
    rgba(255, 255, 255, 0.74);
  border-color: #fff;
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(17, 18, 20, 0.12),
    0 12px 32px rgba(17, 18, 20, 0.14);
}

.hero--threads .hero__actions .btn:active { transform: translateY(1px); }

/* Без backdrop-filter (стар Firefox с изключен флаг) прозрачният фон би оставил
   нишките да минават ПРЕЗ текста. Тогава бутоните стават плътни.

   ВНИМАНИЕ ЗА СПЕЦИФИЧНОСТТА: резервните правила ТРЯБВА да изброяват и :hover.
   `@supports` и `@media` НЕ носят тежест - селектор без :hover е (0,3,0) и губи
   от hover правилото горе (0,4,0). Без този ред бутоните бяха плътни в покой,
   но пак ставаха полупрозрачни в момента, в който минеш с мишката - тоест
   резервният вариант не важеше точно там, за където е писан. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .hero--threads .hero__actions .btn--solid,
  .hero--threads .hero__actions .btn--solid:hover { background: var(--c-accent); }
  .hero--threads .hero__actions .btn--ghost,
  .hero--threads .hero__actions .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.94);
    border-color: var(--c-line);
  }
  .hero--threads .hero__actions .btn--solid:hover { background: #000; }
  .hero--threads .hero__actions .btn--ghost:hover { background: #fff; }
}

/* Системна настройка „по-малко прозрачност" (iOS/macOS Increase Contrast).
   Същото правило за :hover - иначе настройката се разваля при посочване.
   Ghost бутонът НЕ получава border-color:#fff тук: върху белия плътен фон
   бялата рамка изчезва напълно и бутонът остава без контур. */
@media (prefers-reduced-transparency: reduce) {
  .hero--threads .hero__actions .btn--solid,
  .hero--threads .hero__actions .btn--solid:hover { background: var(--c-accent); }
  .hero--threads .hero__actions .btn--ghost,
  .hero--threads .hero__actions .btn--ghost:hover {
    background: #fff;
    border-color: var(--c-line);
  }
  .hero--threads .hero__actions .btn--solid:hover { background: #000; }
  .hero--threads .hero__actions .btn--ghost:hover { border-color: var(--c-ink); }
}

/* Платното: фон на hero-то, зад съдържанието (.hero > .container е z-index 1),
   но НАД белите фонови текстури. pointer-events:none - никога не хваща клик
   върху бутоните/навигацията; мишката се слуша върху самото hero (threads.js).
/* --threads-top се сетва от JS = височината на партньорската лента, за да е
   снопът центриран спрямо ВИДИМАТА част на hero-то, а не спрямо цялата секция. */
.hero__threads {
  position: absolute;
  top: var(--threads-top, 0px);
  left: 0;
  display: block;
  width: 100%;
  /* ВНИМАНИЕ: <canvas> е replaced елемент - при `height:auto` браузърът взима
     ВЪТРЕШНАТА пропорция (300x150 = 2:1) и ИГНОРИРА `bottom:0`. Резултатът беше
     платно 720px високо в 612px hero и снопът нишки падаше под центъра.
     Затова височината е сметната изрично. */
  /* --threads-h се сетва от JS САМО на десктоп, където платното вече не се
     мери спрямо hero-то, а се центрира спрямо празнината .hero__wave. Тогава
     --threads-top може да е и отрицателен (платното започва над hero-то) -
     overflow:hidden на .hero го отрязва. Fallback-ът е старото поведение. */
  height: var(--threads-h, calc(100% - var(--threads-top, 0px) + var(--threads-drop, 0px)));
  pointer-events: none;
  z-index: 0;
  /* Появата: платното се проявява, докато threads.js надига вълната от почти
     равна линия до пълния й размах. Без това снопът изскачаше готов в един
     кадър. Класът идва след първия нарисуван кадър. */
  opacity: 0;
  transition: opacity 1600ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hero__threads.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__threads { transition-duration: 200ms; }
}

/* Празнината за вълната. На телефон я няма - там снопът и без това минава
   между трите думи и бутоните. */
.hero__wave { display: none; }
@media (min-width: 810px) {
  .hero__wave { display: block; width: 100%; height: 200px; }
}
@media (min-width: 1200px) {
  .hero__wave { height: 230px; }
}

/* Трите думи. Оригиналните нишки са ЧЕРНИ линии върху бяло, а заглавието също е
   мастилено - затова под текста ляга мек БЯЛ радиален скрим (не сива кутия):
   нишките се губят точно зад буквите и контрастът остава над 3:1 навсякъде. */
.hero__words {
  position: relative;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(38px, 12.6vw, 66px);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.98;
  color: var(--c-ink);
  max-width: 100%;
}

/* Скримът е БЯЛ радиален елипсов „мъгляк", не сива кутия: върху бял фон не се
   вижда изобщо, а нишките зад буквите се стопяват в него. Размерът е в `em`
   спрямо самото заглавие, за да следва шрифта на всяка ширина.
   Измерено (reference/threads_check.py contrast): без него най-лошият контраст
   на 1440px пада до 1.1:1 там, където правата нишка минава по основната линия
   на буквите; със скрима остава над AA прага 3:1 във всеки момент. */
.hero--threads-on .hero__words::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 3em);
  height: calc(100% + 3.4em);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side ellipse,
              rgba(255, 255, 255, 0.985) 0%,
              rgba(255, 255, 255, 0.965) 42%,
              rgba(255, 255, 255, 0.84) 64%,
              rgba(255, 255, 255, 0.44) 83%,
              rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: -1;
}

/* Под 810px думите стоят една под друга (така се четат едро на телефон) и
   разделителите отпадат - средната точка на край на ред е шум. */
.hero__word {
  display: block;
  white-space: nowrap;
}
.hero__sep { display: none; }

@media (min-width: 810px) {
  /* На широк екран трите думи се четат на един ред със средни точки. */
  .hero__words {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    font-size: clamp(44px, 5.5vw, 84px);
  }
  .hero__sep {
    display: inline;
    font-style: normal;
    margin-inline: 0.3em;
    color: var(--c-muted-2);
  }
  /* На широк екран снопът вече е под заглавието (--threads-drop), затова
     скримът е по-лек - само за високите вълни, които стигат до буквите. */
  .hero--threads-on .hero__words::before { height: calc(100% + 2.2em); }
}
/* Забележка: скримът е закачен за .hero--threads-on - клас, който threads.js
   слага само когато платното реално живее. Без JS, без WebGL или при свален
   контекст класът го няма и скрим не се рисува. */

/* -----------------------------------------------------------------------------
   12. СТАТИСТИКИ
   -------------------------------------------------------------------------- */
.stats { text-align: center; }

.stats__label { margin-bottom: var(--sp-6); }

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7) var(--sp-4);
  max-width: var(--w-text);
  margin-inline: auto;
}

.stat { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }

/* Стефан, 2026-08-04: „тези числа не искам да бъдат така faded, искам да са
   нормални". Маската на референта (стопяване надолу до 35% непрозрачност)
   отпада - числата се четат плътно мастилени. */
.stat__num {
  font-size: var(--fs-stat);
  font-weight: 700;
  white-space: nowrap;
  line-height: 0.95;
}
.stat__num .digit { display: inline-block; }

.stat__foot {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-label);
}
.stat__foot svg { width: 16px; height: 16px; flex: none; }

@media (min-width: 1200px) {
  .stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
    max-width: var(--w-container);
  }
  .stat__num { font-size: clamp(40px, 4.6vw, 60px); }
}

/* -----------------------------------------------------------------------------
   13. СЕКЦИОННИ ЗАГЛАВИЯ / МАНИФЕСТ
   -------------------------------------------------------------------------- */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
  margin-bottom: var(--sp-8);
}

.section-head--start {
  align-items: flex-start;
  text-align: left;
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 600;
}

.section-title--display { font-size: var(--fs-display); font-weight: 700; }

.section-lead {
  max-width: 60ch;
  font-size: var(--fs-body-lg);
  color: var(--c-muted);
}

.manifesto { text-align: center; }
.manifesto__title {
  font-size: var(--fs-display);
  font-weight: 700;
  max-width: 16ch;
  margin: var(--sp-4) auto 0;
}

/* -----------------------------------------------------------------------------
   14. ECOSYSTEM / ЗА НАС TEASER
   -------------------------------------------------------------------------- */
.eco {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  text-align: center;
}

.eco__title { font-size: var(--fs-h2); }
.eco__text {
  font-size: var(--fs-body-lg);
  color: var(--c-ink);
  max-width: 46ch;
  margin-inline: auto;
}
.eco__actions { display: flex; justify-content: center; }

@media (min-width: 810px) {
  .eco {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    text-align: left;
    gap: var(--sp-8);
  }
  .eco__text { margin-inline: 0; }
  .eco__actions { justify-content: flex-start; }
}

/* Въртящ се кръгов badge.
   РЕШЕНИЕ 10 (Стефан, 2026-08-03): badge-ът е СИН като "Купи билети"
   (#153D8A), не мастилен. Контраст на бяло: 10.2:1 (AA/AAA). */
.rotating-badge {
  width: 120px;
  height: 120px;
  color: var(--c-blue);
  animation: rd-rotate 14s linear infinite;
}
/* Текстът трябва да се СЪБИРА в обиколката на кръга (2*PI*56 = 351.9 viewBox px).
   "RED DONKEY · BACKSTAGE MANAGEMENT · " при 12px/0.18em е ~341px - пасва с малка
   пауза на шева. При 13px/0.28em беше 417px и краят се застъпваше с началото
   ("MANAGEMED"-бъгът). При промяна на текста - премери отново! */
.rotating-badge text { font-family: var(--f-body); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; fill: currentColor; text-transform: uppercase; }

@keyframes rd-rotate { to { transform: rotate(360deg); } }

@media (min-width: 1200px) {
  .rotating-badge { width: 150px; height: 150px; }
}

/* -----------------------------------------------------------------------------
   15. КАРТИ-СТЪЛБИЧКА (card fan / staircase)
   -------------------------------------------------------------------------- */
.fan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

/* Рецепта по референта: ПЛЪТЕН наситен цвят + duotone снимка (grayscale +
   multiply върху цвета) + dot текстура + гигантско число + описателна ивица
   върху ПЛЪТЕН цвят в дъното (никакъв текст директно върху снимка).
   Палитра (2026-08-03, без червено): 00 бяла, 01-04 мастилен duotone в два
   нюанса - четните са плътното почти черно, нечетните (--dark-lift) са
   по-светъл въглен с по-четлив кадър, за да не са четирите еднакви. */
.fan-card {
  --fan-pad: var(--sp-4);
  --fan-strip: var(--c-surface-2);
  --fan-strip-ink: var(--c-ink);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
  padding: var(--fan-pad);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-surface);
  color: var(--c-ink);
  isolation: isolate;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease);
}

.fan-card:first-child { grid-column: 1 / -1; min-height: 300px; }

/* ВНИМАНИЕ (научено с бъг): media обвивката НЕ бива да има z-index - отрицателен
   z-index създава stacking context, който изолира mix-blend-mode на снимката и
   duotone-ът спира да се смесва с цвета на картата. Позиционирана без z-index тя
   стои над фона на картата и под слоевете с явен z-index (точки z1, текст z2). */
.fan-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.fan-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 18% -> 8% (2026-08-04): същата причина като при .event-row__bg - главите на
     новите портрети са по-нагоре в кадъра. */
  object-position: 50% 8%;
  filter: grayscale(1) contrast(1.12) brightness(1.04);
  opacity: 0.35;
  mix-blend-mode: multiply;
}
.fan-card__media.is-missing img { display: none; }

.fan-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--tex-dots);
  background-size: 24px 24px;
  opacity: 0.5;
  pointer-events: none;
}

.fan-card__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.fan-card__head svg { width: 22px; height: 22px; flex: none; }

.fan-card__num {
  position: relative;
  z-index: 2;
  font-family: var(--f-display);
  font-size: var(--fs-card-num);
  font-weight: 700;
  line-height: 0.8;
  text-align: center;
  margin-block: var(--sp-4);
}

/* Описателната ивица: разлива се до ръбовете на картата, плътен фон, бял/тъмен
   текст с AA контраст - текстът никога не лежи направо върху снимката. */
.fan-card__desc {
  position: relative;
  z-index: 2;
  margin: var(--sp-4) calc(var(--fan-pad) * -1) calc(var(--fan-pad) * -1);
  padding: var(--sp-3) var(--fan-pad) var(--fan-pad);
  background: var(--fan-strip);
  color: var(--fan-strip-ink);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
}

/* Цветови варианти */
/* 00 - бялата "майка" карта: лек b/w кадър, бяла ивица, тъмен текст */
.fan-card--brand { background: #fff; border: 1px solid var(--c-line-soft); }
.fan-card--brand { --fan-strip: #fff; --fan-strip-ink: var(--c-ink); }
.fan-card--brand .fan-card__num { color: var(--c-ink); }
.fan-card--brand .fan-card__desc { border-top: 1px solid var(--c-line-soft); }

/* Синьото #153D8A е запазено САМО за бутоните "Купи билети" - не се ползва
   като повърхност никъде другаде. */

/* 02/04 - тъмен duotone: приглушен b/w кадър върху почти черно, бяло число,
   плътна тъмна ивица + бял текст */
.fan-card--dark { background: var(--c-ink); color: #fff; }
.fan-card--dark { --fan-strip: var(--c-dark-2); --fan-strip-ink: #fff; }
.fan-card--dark .fan-card__media img { opacity: 0.4; mix-blend-mode: normal; filter: grayscale(1) contrast(1.2) brightness(0.72); }
.fan-card--dark .fan-card__num { color: #fff; }
.fan-card--dark::after { background-image: var(--tex-dots-light); opacity: 0.35; }

/* 01/03 - "повдигнатият" мастилен нюанс (замества стария червен duotone):
   въглен фон, по-светъл и по-присъстващ кадър, по-редки точки. Комбинира се
   с .fan-card--dark: <article class="fan-card fan-card--dark fan-card--dark-lift">
   ЗАБЕЛЕЖКА: тъмните варианти остават заради organize-event.html ("За всеки
   повод"); началната страница вече ползва цветните --c1..--c4 отдолу. */
.fan-card--dark-lift { background: var(--c-dark-2); }
.fan-card--dark-lift { --fan-strip: var(--c-ink); }
.fan-card--dark-lift .fan-card__media img { opacity: 0.55; filter: grayscale(1) contrast(1.08) brightness(0.9); }
.fan-card--dark-lift::after { opacity: 0.16; }
/* Мека сянка под числото: върху по-светлите кадри на lift картите бялата
   цифра иначе губи ръб в светлите зони на снимката */
.fan-card--dark .fan-card__num { text-shadow: 0 2px 26px rgba(0, 0, 0, 0.5); }

/* ЦВЕТНИ карти по модела на jnoah (РЕШЕНИЕ 9, Стефан, 2026-08-03):
   01 лилаво #8637DB, 02 синьо #008CFF, 03 ОРАНЖЕВО #FF8A00 (нарочен
   заместител на червеното #E81C2B на jnoah - червено UI е забранено с
   решение 2; ако Стефан изрично поиска червено, тук се слага #E81C2B),
   04 лайм #A4F00C. Картите са ЕДИНСТВЕНОТО място с наситени цветове.
   Рецепта (по реф. step03.png): плътен наситен фон + grayscale снимка в
   mix-blend multiply (duotone - кадърът чете в цвета на картата) + тъмни
   точки + гигантско мастилено число (по jnoah числата са тъмни на всички
   цветни карти; едър текст, AA large >= 3:1 на всеки от четирите цвята) +
   описателна ивица върху ПО-ТЪМЕН плътен тон на същия цвят (премерен AA). */
.fan-card--c1, .fan-card--c2, .fan-card--c3, .fan-card--c4 { color: var(--c-ink); }

.fan-card--c1 .fan-card__media img,
.fan-card--c2 .fan-card__media img,
.fan-card--c3 .fan-card__media img,
.fan-card--c4 .fan-card__media img {
  opacity: 0.85;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.05) brightness(1.18);
  /* Кадърът се стопява преди ивицата - плътният цвят отдолу остава чист.
     58%/96% -> 30%/58% (2026-08-07, ръбовете от iPhone снимката на Стефан):
     описателната ивица започва на ~58-72% от височината на картата, а
     старите стопове оставяха снимката още ~60% плътна там - ивицата я
     режеше с твърд хоризонтален ръб (измерена делта до 194/765 по цялата
     ширина). Стопяването трябва да е ЗАВЪРШИЛО на 58% - най-високата
     позиция на ивицата (карти с 3 реда текст на 320px). */
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 58%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 58%);
}

.fan-card--c1::after,
.fan-card--c2::after,
.fan-card--c3::after,
.fan-card--c4::after { opacity: 0.4; }

/* Горен воал в media обвивката: гарантира AA на етикета върху duotone кадъра.
   Живее като ::after на .fan-card__media (БЕЗ z-index - вж. предупреждението
   за stacking context по-горе): рисува се над снимката, под текста (z2). */
.fan-card--c1 .fan-card__media::after,
.fan-card--c2 .fan-card__media::after,
.fan-card--c3 .fan-card__media::after,
.fan-card--c4 .fan-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 01 КОНЦЕРТИ - лилаво. Бял етикет (бяло върху #8637DB = 5.9:1; тъмният воал
   отгоре го подсигурява и върху светли зони от кадъра). Ивица #6B2BB2:
   бяло върху нея = 8.0:1 (AA/AAA). */
.fan-card--c1 { background: #8637db; --fan-strip: #6b2bb2; --fan-strip-ink: #fff; }
.fan-card--c1 .fan-card__head { color: #fff; }
.fan-card--c1 .fan-card__media::after,
.fan-card--c2 .fan-card__media::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 38%);
}

/* 02 БУКИНГ - синьо. Бял етикет с тъмния воал (чисто бяло върху #008CFF е
   само 3.4:1 - воалът смъква фона под нужната яркост в зоната на етикета).
   Ивица #0069C4: бяло върху нея = 5.5:1 (AA). */
.fan-card--c2 { background: #008cff; --fan-strip: #0069c4; --fan-strip-ink: #fff; }
.fan-card--c2 .fan-card__head { color: #fff; }

/* 03 ТУРНЕТА - оранжево (на мястото на jnoah-червеното #E81C2B, вж. горе).
   Мастилен етикет (7.9:1 на чист фон) + светъл воал, който не пуска тъмните
   зони на кадъра под етикета. Ивица #E67C00: мастилено върху нея = 6.5:1. */
.fan-card--c3 { background: #ff8a00; --fan-strip: #e67c00; --fan-strip-ink: var(--c-ink); }
.fan-card--c3 .fan-card__media::after,
.fan-card--c4 .fan-card__media::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.3) 22%, rgba(255, 255, 255, 0) 44%);
}

/* 04 ОРГАНИЗАЦИЯ - лайм. Като при jnoah лайм картата е с ТЪМЕН текст
   (бяло върху лайм е 1.4:1 - нечетимо). Мастилен етикет (13.4:1 на чист
   фон) + светъл воал. Ивица #8FD40A: мастилено върху нея = 10.3:1. */
.fan-card--c4 { background: #a4f00c; --fan-strip: #8fd40a; --fan-strip-ink: var(--c-ink); }

@media (min-width: 810px) {
  .fan { gap: var(--sp-4); }
  .fan-card { --fan-pad: var(--sp-5); min-height: 320px; }
  .fan-card:first-child { min-height: 340px; }
}

/* Desktop: стълбичка от 5 карти */
@media (min-width: 1200px) {
  .fan {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
  }
  .fan-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: 250px;
    min-height: 330px;
  }
  .fan-card:first-child { min-height: 330px; }
  .fan-card:nth-child(1) { margin-top: 0; }
  .fan-card:nth-child(2) { margin-top: 50px; }
  .fan-card:nth-child(3) { margin-top: 100px; }
  .fan-card:nth-child(4) { margin-top: 150px; }
  .fan-card:nth-child(5) { margin-top: 200px; }
  /* Лек lift + tilt на hover (само transform - reduced-motion правилото
     в секция 5 нулира прехода, а не позицията) */
  .fan-card:hover {
    transform: translateY(-12px) rotate(-1.2deg) scale(1.02);
    box-shadow: var(--sh-card-hi);
    z-index: 2;
  }
}

/* -----------------------------------------------------------------------------
   16. MARQUEE - ghost текст
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: rd-marquee var(--marquee-dur, 46s) linear infinite;
}

.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}

@keyframes rd-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.marquee-ghost {
  padding-block: var(--sp-4);
  /* Маската стопява ДОЛНАТА част на буквите. Старата (transparent 6% -> #000
     100%) разпъваше прехода по цялата височина, тоест по-голямата част от
     надписа стоеше полупрозрачна върху и без това бледия цвят - оттам идваше
     усещането „твърде fade-нато".

     2026-08-04, втора поправка: Стефан - „и отдолу да са малко по-подчертани,
     защото иначе фадеват отдолу към бяло". Затова маската вече НЕ стига до
     прозрачно: долният ръб задържа 45% плътност, а от 26% нагоре буквата е на
     пълен цвят. Така краят се чете, но пак има мек завършек, а не рязана
     линия. Показах му четири степени (reference/originals/_ghost_bottom.png);
     избра втората. */
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, #000 26%);
  mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, #000 26%);
}

.marquee-ghost__item {
  font-size: var(--fs-ghost);
  font-weight: 700;
  line-height: 0.85;
  color: var(--c-ghost);
  padding-right: 0.25em;
  white-space: nowrap;
  user-select: none;
}

/* Лента с лога / зали */
.marquee-logos {
  --marquee-dur: 38s;
  -webkit-mask-image: linear-gradient(to right, transparent 2%, #000 14%, #000 86%, transparent 98%);
  mask-image: linear-gradient(to right, transparent 2%, #000 14%, #000 86%, transparent 98%);
}

.marquee-logos .marquee__group { gap: clamp(32px, 6vw, 71px); padding-right: clamp(32px, 6vw, 71px); }

.marquee-logos__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-display);
  font-size: clamp(18px, 3.4vw, 28px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--c-muted);
  white-space: nowrap;
  transition: color var(--t-mid) var(--ease);
}
.marquee-logos__item:hover { color: var(--c-ink); }
.marquee-logos__item img { height: 28px; width: auto; object-fit: contain; }

/* Лента с ПАРТНЬОРСКИ ЛОГА в hero-то (решение 2026-08-03: партньорите се
   въртят горе в hero-то, не във footer-а). Бавна, ПОСТОЯННА скорост - чист
   CSS, никакво scroll/velocity куплиране (виж бележката в site.js, т.6).
   Обновление 2026-08-03 (късно): логата са в ОРИГИНАЛНИТЕ си цветове -
   без grayscale/brightness/opacity филтри (изрично решение на Стефан). */
.marquee-sponsors {
  /* 128s, а не 64s: track-ът е от ЧЕТИРИ групи (виж бележката в index.html),
     затова -50% изминава ДВЕ групи вместо една. Двойният път за същото усещане
     за скорост иска двойно време - реалната скорост остава ~24 px/s. */
  --marquee-dur: 128s;
  /* Ширина на ЕДНА клетка (слот) - еднаква за всяко лого. Разстоянието между
     центровете на съседните лога = точно тази ширина, независимо колко е
     широко самото лого. Оттук идва равномерният ритъм. */
  --sponsor-slot: 108px;
  /* Базова височина на логото; всяко лого я коригира с --k (виж по-долу) */
  --sponsor-h: 20px;
  /* Колко широка е зоната на избледняване в двата края */
  --sponsor-fade: 56px;

  /* Меко избледняване в двата края: логата се появяват и изчезват плавно,
     не изскачат рязко в ръбовете (жалба на клиента 2026-08-03:
     „просто се появяват в краищата"). Многостъпална крива - линейният
     градиент се чете по-рязко от око. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    rgba(0, 0, 0, 0.12) calc(var(--sponsor-fade) * 0.34),
    rgba(0, 0, 0, 0.45) calc(var(--sponsor-fade) * 0.62),
    rgba(0, 0, 0, 0.82) calc(var(--sponsor-fade) * 0.84),
    #000 var(--sponsor-fade),
    #000 calc(100% - var(--sponsor-fade)),
    rgba(0, 0, 0, 0.82) calc(100% - var(--sponsor-fade) * 0.84),
    rgba(0, 0, 0, 0.45) calc(100% - var(--sponsor-fade) * 0.62),
    rgba(0, 0, 0, 0.12) calc(100% - var(--sponsor-fade) * 0.34),
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0,
    rgba(0, 0, 0, 0.12) calc(var(--sponsor-fade) * 0.34),
    rgba(0, 0, 0, 0.45) calc(var(--sponsor-fade) * 0.62),
    rgba(0, 0, 0, 0.82) calc(var(--sponsor-fade) * 0.84),
    #000 var(--sponsor-fade),
    #000 calc(100% - var(--sponsor-fade)),
    rgba(0, 0, 0, 0.82) calc(100% - var(--sponsor-fade) * 0.84),
    rgba(0, 0, 0, 0.45) calc(100% - var(--sponsor-fade) * 0.62),
    rgba(0, 0, 0, 0.12) calc(100% - var(--sponsor-fade) * 0.34),
    transparent 100%);
  /* Маската хваща само хоризонталната ос - вертикално нищо не се реже */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Разредката вече идва от ширината на слота, не от gap.
   gap:0 + padding-right:0 пази безшевния цикъл: групата е точно 9 слота,
   track-ът е 18, а -50% измества точно една група. */
.marquee-sponsors .marquee__group {
  gap: 0;
  padding-right: 0;
  align-items: center;
}

/* Клетка с ФИКСИРАНА ширина; логото е центрирано вътре */
.sponsor-slot {
  flex: 0 0 auto;
  width: var(--sponsor-slot);
  padding-inline: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marquee-sponsors img {
  /* --k нормализира оптичния размер на всяко лого поотделно (виж по-долу) */
  max-height: calc(var(--sponsor-h) * var(--k, 1));
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Оптична нормализация по лого. Стойностите са смятани от РЕАЛНИТЕ граници на
   мастилото (не от рамката на файла): тесните емблеми (БТА, West Security,
   Вода София) при еднаква височина изглеждат дребни до широките надписи
   (kupibileti, Явор), затова получават по-голяма височина, а широките - по-малка.
   Пипнати файлове: 24chasa-ink.svg и kupibileti.svg имаха огромен вграден
   „въздух" в SVG рамката (реалното лого пълнеше 25% и 67% от височината) -
   рамката им е стеснена до самото лого, за да не се смалява без причина. */
.marquee-sponsors img[src*="kupibileti"]    { --k: 0.76; }
.marquee-sponsors img[src*="yavor"]         { --k: 0.83; }
.marquee-sponsors img[src*="24chasa"]       { --k: 0.88; }
.marquee-sponsors img[src*="78tv"]          { --k: 1.06; }
.marquee-sponsors img[src*="bg-radio"]      { --k: 1.12; }
.marquee-sponsors img[src*="btv"]           { --k: 1.16; }
.marquee-sponsors img[src*="voda-sofia"]    { --k: 1.30; }
.marquee-sponsors img[src*="west-security"] { --k: 1.12; }
.marquee-sponsors img[src*="bta"]           { --k: 1.18; }

@media (min-width: 810px) {
  .marquee-sponsors {
    --sponsor-slot: 148px;
    --sponsor-h: 24px;
    --sponsor-fade: 110px;
  }
  .sponsor-slot { padding-inline: 10px; }
}

@media (min-width: 1200px) {
  .marquee-sponsors {
    --sponsor-slot: 172px;
    --sponsor-h: 26px;
    --sponsor-fade: 150px;
  }
  .sponsor-slot { padding-inline: 12px; }
}

/* При изключени анимации лентата спира като статичен ред (не скрол).
   Слотовете са с еднаква ширина, така че редът е равномерен и в покой.
   Тогава ЛЯВОТО избледняване се маха: при движеща се лента то показва „логото
   влиза", но при неподвижен ред първото лого просто изглежда избеляло.
   Дясното остава - то подсказва, че редът продължава извън екрана. */
html.anim-off .marquee-sponsors .marquee__track { animation: none; }
html.anim-off .marquee-sponsors {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--sponsor-fade)),
    rgba(0, 0, 0, 0.82) calc(100% - var(--sponsor-fade) * 0.84),
    rgba(0, 0, 0, 0.45) calc(100% - var(--sponsor-fade) * 0.62),
    rgba(0, 0, 0, 0.12) calc(100% - var(--sponsor-fade) * 0.34), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--sponsor-fade)),
    rgba(0, 0, 0, 0.82) calc(100% - var(--sponsor-fade) * 0.84),
    rgba(0, 0, 0, 0.45) calc(100% - var(--sponsor-fade) * 0.62),
    rgba(0, 0, 0, 0.12) calc(100% - var(--sponsor-fade) * 0.34), transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .marquee-sponsors .marquee__track { animation: none; }
  .marquee-sponsors {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--sponsor-fade)),
      rgba(0, 0, 0, 0.82) calc(100% - var(--sponsor-fade) * 0.84),
      rgba(0, 0, 0, 0.45) calc(100% - var(--sponsor-fade) * 0.62),
      rgba(0, 0, 0, 0.12) calc(100% - var(--sponsor-fade) * 0.34), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--sponsor-fade)),
      rgba(0, 0, 0, 0.82) calc(100% - var(--sponsor-fade) * 0.84),
      rgba(0, 0, 0, 0.45) calc(100% - var(--sponsor-fade) * 0.62),
      rgba(0, 0, 0, 0.12) calc(100% - var(--sponsor-fade) * 0.34), transparent 100%);
  }
}

/* -----------------------------------------------------------------------------
   17. CTA КАРТИ (двойка)
   -------------------------------------------------------------------------- */
.cta-pair {
  display: grid;
  gap: var(--sp-4);
  max-width: var(--w-content);
  margin-inline: auto;
}

.cta-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-card);
  transition: transform var(--t-mid) var(--ease-out);
}

.cta-card--plate { background: var(--c-surface); }
.cta-card--bare { padding-inline: var(--sp-5); }

/* 2026-08-05: надписът беше сив само върху БЕЗ-плочката карта, а върху
   плочката - мастилен. Двете карти стоят една до друга и разликата се четеше
   като грешка: „където пише организираш събитие ... твърде бледо е".
   Сега и двете са мастилени. */
.cta-card__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink);
}

.cta-card__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  max-width: 22ch;
}

.cta-card:hover .arrow-line__bar { width: 100%; }
.cta-card:hover .arrow-line { color: var(--c-ink); }

@media (min-width: 810px) {
  .cta-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
  .cta-card { padding: var(--sp-8) var(--sp-7); gap: var(--sp-7); }
  .cta-card--bare { padding-inline: 0; }
  .arrow-line { max-width: 180px; }
}

/* -----------------------------------------------------------------------------
   18. АКОРДЕОН - услуги (голяма версия, редовете са линкове)
   -------------------------------------------------------------------------- */
.acc-services {
  max-width: var(--w-content);
  margin-inline: auto;
  border-top: 2px solid var(--c-line);
}

.acc-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-4) 0;
  border-bottom: 2px solid var(--c-line);
  overflow: hidden;
  --acc-accent: var(--c-ink);
}

/* Hover fill слой - неутрално сиво (без червен tint) */
.acc-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-surface);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
  z-index: 0;
}
.acc-row:hover::before { opacity: 1; }

/* .acc-row__num отпадна 2026-08-04 - същата причина */

.acc-row__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.acc-title {
  display: block;
  font-size: var(--fs-acc);
  font-weight: 700;
  transition: color var(--t-mid) var(--ease);
  overflow-wrap: break-word;
}
.acc-row:hover .acc-title { color: var(--acc-accent); }

/* .acc-row__desc е ИЗТРИТ на 2026-08-05. Стефан: „искам да се махнат тези
   малките текстове под големите текстове". Дребният ред стоеше на 4px под
   заглавие от 76px - опашките на Ц/Д го докосваха и редът четеше като
   случайно паднал под него. Заглавието и стрелката носят смисъла сами.
   Не връщай описания под .acc-title. */

/* Плюс икона. До 2026-08-05 беше закачена за ГОРНИЯ ръб (align-self:flex-start),
   защото под заглавието стоеше описание и плюсът трябваше да пази първия ред.
   Описанието отпадна - остана само едноредовото заглавие, затова плюсът вече
   се центрира вертикално спрямо него (.acc-row е align-items: center). */
.acc-row__plus {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  transition: transform var(--t-mid) var(--ease-out), color var(--t-mid) var(--ease);
}
.acc-row__plus::before,
.acc-row__plus::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}
.acc-row__plus::before { width: 24px; height: 3px; }
.acc-row__plus::after { width: 3px; height: 24px; }
.acc-row:hover .acc-row__plus { transform: rotate(90deg); color: var(--acc-accent); }

@media (min-width: 810px) {
  .acc-row { gap: var(--sp-5); padding: var(--sp-5) var(--sp-4); }
  .acc-row__plus { width: 50px; height: 50px; }
  .acc-row__plus::before { width: 30px; height: 4px; }
  .acc-row__plus::after { width: 4px; height: 30px; }
}

/* -----------------------------------------------------------------------------
   19. АКОРДЕОН - FAQ (малка версия, с JS отваряне)
   -------------------------------------------------------------------------- */
.acc-faq {
  display: grid;
  gap: var(--sp-3);
  max-width: var(--w-content);
  margin-inline: auto;
}

.faq-item {
  border-radius: var(--r-acc);
  background: var(--c-surface);
  overflow: hidden;
}

.faq-item__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  min-height: 64px;
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: var(--ls-display);
}

.faq-item__icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--c-muted);
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) linear;
}
.faq-item__icon::before { width: 18px; height: 2px; }
.faq-item__icon::after { width: 2px; height: 18px; }
.faq-item.is-open .faq-item__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid) var(--ease-out);
}
.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__panel > div { overflow: hidden; }
.faq-item__text {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--c-muted);
  font-size: var(--fs-body);
}

/* Без JS панелите са отворени (съдържанието остава достъпно) */
.no-js .faq-item__panel { grid-template-rows: 1fr; }

/* -----------------------------------------------------------------------------
   19b. БЕЗ JS - навигацията пак трябва да е достъпна
   На mobile линковете живеят в overlay менюто, което се отваря с JS. Ако JS
   липсва, менюто става обикновен списък в потока, а бургерът се скрива.
   -------------------------------------------------------------------------- */
.no-js .menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  overflow: visible;
  padding-top: calc(var(--nav-h) + 32px);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--c-line);
}
.no-js .burger { display: none; }
.no-js .main { padding-top: var(--sp-7); }

/* -----------------------------------------------------------------------------
   20. АРТИСТ КАРТА + ГРИД
   -------------------------------------------------------------------------- */
.artist-card {
  position: relative;
  display: block;
  padding: 6px;
  border-radius: var(--r-card);
  background: var(--c-surface);
  overflow: hidden;
}

.artist-card__media {
  display: block;
  position: relative;
  border-radius: var(--r-pill);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, var(--c-surface-2), #dfe2e7);
}

.artist-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform var(--t-slow) var(--ease-out);
}
.artist-card:hover .artist-card__media img { transform: scale(1.02); }

/* Тъмният overlay върху снимката се запазва - текстът върху снимка е бял */
.artist-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 12% 100%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.1) 62%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.artist-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  color: #fff;
}

.artist-card__name {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: #fff;
}

.artist-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.artist-card__view {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  padding: 10px 22px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-ink);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .artist-card:hover .artist-card__view { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.artist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

@media (min-width: 810px) {
  .artist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

/* -----------------------------------------------------------------------------
   21. АРТИСТ СЛАЙДЕР (native scroll + drag/бутони с JS)
   -------------------------------------------------------------------------- */
.slider { position: relative; }

.slider__viewport {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--sp-2);
  /* pan-x е ЗАДЪЛЖИТЕЛЕН (2026-08-07): само с pan-y хоризонталното плъзгане
     с пръст беше забранено и слайдерът на телефон се движеше единствено с
     бутоните - Стефан го хвана на живо. pan-y остава, за да може вертикален
     жест върху картите да скролва страницата. */
  touch-action: pan-x pan-y pinch-zoom;
}
.slider__viewport::-webkit-scrollbar { display: none; }
.slider__viewport.is-dragging { scroll-snap-type: none; cursor: grabbing; }

/* Плъзгач между стрелките (Стефан, 2026-08-09: "под артистите да има
   slider да мога да ги плъзгам"). Тънка линия + мастилен палец; кутията е
   28px висока - удобна цел, линията се рисува в средата ѝ. */
.slider__scrub {
  position: relative;
  flex: 0 1 260px;
  height: 28px;
  align-self: center;
  cursor: grab;
  /* влаченето по плъзгача не бива да скролва страницата */
  touch-action: none;
}
.slider__scrub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--c-line);
}
.slider__scrub-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 30%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--c-ink);
  transition: none;
}
.slider__scrub.is-dragging { cursor: grabbing; }

.slider__slide {
  flex: 0 0 auto;
  width: min(80vw, 320px);
  scroll-snap-align: start;
}

.slider__nav {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* CTA карта на слайдера */
.slider-cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  margin-bottom: var(--sp-5);
}
.slider-cta__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}
.slider-cta__title {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: var(--ls-display);
}
.slider-cta:hover .arrow-line__bar { width: 100%; }

@media (min-width: 810px) {
  .slider__viewport { gap: var(--sp-5); }
  .slider__slide { width: 340px; }
}

@media (min-width: 1200px) {
  .slider--artists { padding-right: 370px; }
  .slider--artists .slider-cta {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 330px;
    min-height: 450px;
    justify-content: center;
    margin-bottom: 0;
    z-index: 3;
  }
  /* Градиентен воал към бялото под CTA картата */
  .slider--artists::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 430px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 42%);
    pointer-events: none;
    z-index: 2;
  }
  .slider--artists .slider__nav { justify-content: flex-start; }
}

/* -----------------------------------------------------------------------------
   22. КАЛЕНДАР / EVENT ROW
   -------------------------------------------------------------------------- */
.calendar {
  display: grid;
  gap: var(--sp-3);
  max-width: var(--w-container);
  margin-inline: auto;
}

.event-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  /* Дясно 24px вместо 16px (2026-08-07, арт одит): лявата структура
     дата+разделител бута текста на 99px от левия ръб, а отдясно той опираше
     на 16px в извивката на хапчето - дългите заглавия се блъскаха в ръба.
     Desktop блокът (810+) си слага собствен padding и не се влияе. */
  padding: var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-4);
  border-radius: var(--r-pill);
  overflow: hidden;
  isolation: isolate;
  /* Mobile: тъмен ред с плътен overlay върху снимката (контраст!) */
  background: var(--c-dark);
  color: #fff;
}

.event-row__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.event-row__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Фоновете са портрети/зали (не афиши) - държим лицата в кадър при широкия crop.
     22% -> 10% на 2026-08-04: новите портрети са с главата ГОРЕ (4.5% въздух над
     темето), затова старата котва падаше под лицата. Стойността е компромис -
     работи и за портретите, и за пейзажните снимки на залите. */
  object-position: 50% 10%;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-mid) var(--ease);
}
.event-row__bg.is-missing img { display: none; }

/* Mobile: снимката е постоянен фон -> ВИНАГИ силен тъмен градиент,
   по-плътен вляво (под датата и заглавието), избледняващ надясно. */
.event-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.66) 55%, rgba(0, 0, 0, 0.38) 100%);
  transition: opacity var(--t-mid) var(--ease);
}

.event-row__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 58px;
  flex: none;
}
.event-row__day {
  font-family: var(--f-display);
  font-size: var(--fs-day);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: var(--ls-display);
}
.event-row__month {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  margin-top: 4px;
}

/* Събитие без обявена дата (Фики, потвърдено с reddonkey.bg на 2026-08-08:
   там пише само "2027 година"): в кръгчето стои годината. По-малък кегел -
   4 цифри на пълния --fs-day избутват заглавието. */
.event-row__day--year { font-size: clamp(22px, 6vw, 28px); line-height: 1.1; }

.event-row__divider {
  width: 1px;
  height: 56px;
  background: rgba(255, 255, 255, 0.28);
}

.event-row__body { min-width: 0; }

.event-row__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: #fff;
}

/* Цялият ред е кликаем чрез разтеглен линк; билетният бутон стои над него */
.event-row__link { position: static; }
.event-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.event-row__cta { position: relative; z-index: 2; }

.event-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: var(--sp-1);
  font-size: var(--fs-meta);
  font-weight: 600;
  /* Mobile: редът е винаги върху снимка -> по-плътно бяло за AA контраст */
  color: rgba(255, 255, 255, 0.88);
}

.event-row__thumb { display: none; }

.event-row__cta {
  grid-column: 1 / -1;
  margin-top: var(--sp-3);
}
.event-row__cta .btn { width: 100%; }

/* Tablet/desktop: светъл ред, снимката се разкрива на hover */
@media (min-width: 810px) {
  .event-row {
    grid-template-columns: auto 1px minmax(0, 1fr) auto auto;
    gap: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-surface);
    color: var(--c-ink);
  }
  .event-row__bg img { opacity: 0; }
  .event-row::before { opacity: 0; }
  .event-row__title { color: var(--c-ink); }
  .event-row__month { color: var(--c-ink); }
  .event-row__divider { height: 80px; background: var(--c-line); }
  .event-row__meta { color: var(--c-muted); }

  .event-row__thumb {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: var(--r-tag);
    overflow: hidden;
    flex: none;
    background: var(--c-surface-2);
  }
  .event-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
  }
  .event-row__thumb.is-missing img { display: none; }

  .event-row__cta { grid-column: auto; margin-top: 0; }
  .event-row__cta .btn { width: auto; }

  .event-row:hover .event-row__bg img { opacity: 0.95; transform: scale(1.05); }
  .event-row:hover::before { opacity: 1; }
  .event-row:hover .event-row__title { color: #fff; }
  .event-row:hover .event-row__day { color: #fff; }
  .event-row:hover .event-row__month { color: #fff; }
  .event-row:hover .event-row__meta { color: rgba(255, 255, 255, 0.78); }
  .event-row:hover .event-row__divider { background: rgba(255, 255, 255, 0.28); }
  .event-row:hover .event-row__thumb img { transform: scale(1.08); }
}

@media (min-width: 1200px) {
  .event-row__thumb { width: 100px; height: 100px; }
}

.calendar__foot {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-7);
}

/* -----------------------------------------------------------------------------
   23. ЛОКАЦИЯ КАРТА
   -------------------------------------------------------------------------- */
.venue-card {
  position: relative;
  display: block;
  padding: 6px;
  border-radius: var(--r-card);
  background: var(--c-surface);
  overflow: hidden;
}
.venue-card__media {
  position: relative;
  border-radius: var(--r-pill);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, var(--c-surface-2), #dfe2e7);
}
.venue-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.venue-card:hover .venue-card__media img { transform: scale(1.05); }
.venue-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.12) 60%, rgba(0, 0, 0, 0) 100%);
}
.venue-card__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--sp-4);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.venue-card__body > * { min-width: 0; }
.venue-card__name {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: 1;
  overflow-wrap: break-word;
}

/* -----------------------------------------------------------------------------
   24. WORKFLOW КАРТА
   -------------------------------------------------------------------------- */
.workflow-card {
  position: relative;
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-card);
  background: var(--c-surface);
  overflow: hidden;
}
/* Ред икона + номер над всяка стъпка (Стефан, 2026-08-08: "да е с номерация
   на стъпките" + "иконки, които да съответстват"). Иконите са в стила на
   fan-card главите: stroke 1.8, без запълване. */
.workflow-card__step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  color: var(--c-ink);
}
.workflow-card__step svg { width: 26px; height: 26px; flex: none; }
.workflow-card__step span {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: var(--ls-display);
  color: var(--c-label);
}
.workflow-card__label {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink);
}
.workflow-card__text { margin-top: var(--sp-3); font-size: var(--fs-body-lg); }
.workflow-card__ghost {
  position: absolute;
  right: -0.08em;
  bottom: -0.28em;
  font-family: var(--f-display);
  font-size: 220px;
  font-weight: 700;
  line-height: 0.7;
  color: var(--c-surface-2);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  pointer-events: none;
}
.workflow-card:hover .workflow-card__ghost { opacity: 1; }
/* На touch екрани призрачните числа НЕ се показват изобщо (Стефан,
   2026-08-09: "като си сложа пръста или скроллвам се появяват 01 02 03 и
   започват да закриват текста"). iOS лепи :hover след докосване и числото
   лягаше върху абзаца. Hover ефектът остава само за истинска мишка. */
@media (hover: none) {
  .workflow-card__ghost { display: none; }
}

/* -----------------------------------------------------------------------------
   25. AGENT / ЕКИП КАРТА
   -------------------------------------------------------------------------- */
.agent-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-card);
  background: var(--c-surface);
}
.agent-card__title {
  font-family: var(--f-display);
  font-size: var(--fs-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}
.agent-card__person { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.agent-card__person > :not(.agent-card__avatar) { min-width: 0; overflow-wrap: break-word; }
.agent-card__avatar {
  width: 60px; height: 60px;
  border-radius: var(--r-tag);
  object-fit: cover;
  background: var(--c-surface-2);
  flex: none;
}
.agent-card__name { font-weight: 700; }
/* Букинг картата е тясна (280px sticky) - имейлът трябва да се пренася, не да излиза */
.agent-card__row { display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.agent-card__row dd,
.agent-card__row a { max-width: 100%; overflow-wrap: anywhere; }
/* Имейлът и телефонът в букинг картата бяха цели от 17px - на 11 артистични
   страници това са двете най-важни действия. Само при докосване, за да не
   разтегля картата на десктоп. */
@media (hover: none) {
  .agent-card__row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
.agent-card__row dt { color: var(--c-label); font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: var(--ls-label); }
.agent-card__blurb { color: var(--c-muted); font-size: 14px; }

@media (min-width: 1200px) {
  .agent-card--sticky { position: sticky; top: 120px; width: 280px; }
}

/* -----------------------------------------------------------------------------
   26. ФОРМИ
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-1); }

.form__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-label);
}

.field {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  border-radius: var(--r-field);
  border: 1px solid rgba(17, 18, 20, 0.12);
  background: #fff;
  font-size: var(--fs-body);
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.field::placeholder { color: var(--c-muted-2); }
.field:focus {
  outline: none;
  background: var(--c-surface);
  border-color: var(--c-ink);
}
textarea.field { min-height: 100px; resize: vertical; }

select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23111214' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.form__submit { min-height: 55px; }

.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__note { font-size: 14px; color: var(--c-muted); }

.form__status {
  display: none;
  padding: var(--sp-4);
  border-radius: var(--r-field);
  background: var(--c-surface-2);
  color: var(--c-ink);
  font-weight: 500;
}
.form__status.is-visible { display: block; }

/* -----------------------------------------------------------------------------
   27. FOOTER (тъмен - одобрена тъмна зона)
   -------------------------------------------------------------------------- */
.footer {
  background: var(--c-dark);
  color: #fff;
  padding-block: var(--sp-10) var(--sp-6);
  margin-top: var(--sp-section);
}

.footer__top {
  display: grid;
  gap: var(--sp-8);
  text-align: center;
  justify-items: center;
}

.footer__brand { display: grid; gap: var(--sp-4); justify-items: center; max-width: 46ch; }
.footer__logo { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; }
.footer__logo img { height: 34px; width: auto; }
.footer__logo .logo__word { color: #fff; }
.footer__tagline { font-family: var(--f-display); font-size: var(--fs-h4); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-display); }
.footer__desc { color: var(--c-on-dark-muted); font-size: var(--fs-body); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-4);
  width: 100%;
  min-width: 0;
  text-align: left;
}

/* Грид дете по подразбиране е min-width:auto -> не се свива под min-content
   и дълъг неразделим низ (имейл) излиза извън колоната. */
.footer__col { min-width: 0; }

/* Мобилно: колоната с контактите заема целия ред - "office@reddonkey.bg"
   (162px) не се събира в половин колона при 320-390px. */
.footer__col:last-child { grid-column: 1 / -1; }

.footer__col-title {
  font-size: var(--fs-h4);
  font-weight: 600;
  margin-bottom: var(--sp-3);
  overflow-wrap: break-word;
}

.footer__col li + li { margin-top: 2px; }
.footer__col a,
.footer__col span {
  display: inline-block;
  max-width: 100%;
  padding-block: 10px;
  color: var(--c-on-dark-muted);
  font-size: var(--fs-body);
  transition: color var(--t-mid) var(--ease);
  /* Предпазна мрежа: имейл/телефон/адрес се пренасят, вместо да се режат.
     Без ellipsis - контактът трябва да остане четим докрай. */
  overflow-wrap: anywhere;
}
.footer__col a:hover { color: #fff; }

.footer__legal {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: var(--sp-2);
  text-align: center;
  /* Четим сив - реф. бъгът с нечетимия copyright НЕ се копира */
  color: var(--c-on-dark-muted);
  font-size: 14px;
}
.footer__legal a { color: #fff; }

/* Таблет: 3 колони, но на ЦЯЛА ширина (brand отгоре). Рамо до рамо с brand-а
   при 810-1099px оставя ~118px на колона - по-малко от неразделимия имейл
   (162px) и от заглавието "Информация" (154px). */
@media (min-width: 810px) {
  .footer__top {
    text-align: left;
    justify-items: stretch;
    align-items: start;
    gap: var(--sp-8);
  }
  .footer__brand { justify-items: start; }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__col:last-child { grid-column: auto; }
  .footer__legal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
  }
  .footer__legal > :last-child { text-align: right; }
}

/* Desktop: brand и колоните рамо до рамо - от 1200px нататък (десктоп точката
   на прекъсване в сайта) всяка от трите колони е ~189px, т.е. имейлът (162px)
   се побира на един ред с резерв. */
@media (min-width: 1200px) {
  .footer__top {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sp-9);
  }
}

/* -----------------------------------------------------------------------------
   27b. ДЪЛГИ НЕРАЗДЕЛИМИ НИЗОВЕ (имейл / телефон / URL / адрес)
   -------------------------------------------------------------------------- */
/* Клас бъгове, не единичен случай: "office@reddonkey.bg" е ЕДНА неразделима
   дума (~162px). Грид/флекс дете е min-width:auto по подразбиране, т.е. не се
   свива под min-content -> низът излиза от колоната, разширява scrollWidth на
   документа и се реже визуално. Двойна защита:
   1) min-width:0 -> контейнерът има право да се свие;
   2) overflow-wrap:anywhere -> низът се пренася, вместо да излезе навън.
   БЕЗ text-overflow:ellipsis - контактите трябва да остават четими докрай. */

/* Контейнери за контакти (вкл. page-scoped блокове в kontakti.html) */
.contact-info,
.contact-info__list,
.contact-info__row,
.contact-card__inner,
.contact-card__form {
  min-width: 0;
}
.contact-info__row dd,
.contact-info__row a,
.contact-info__map {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Линкове с контактна схема - независимо къде се появят в сайта */
a[href^="mailto:"],
a[href^="tel:"] {
  overflow-wrap: anywhere;
}

/* Събития / зали: дълги имена на зали и адреси се пренасят, не се режат */
.event-row__body,
.event-row__title,
.event-row__meta,
.venue-card__body {
  min-width: 0;
}
.event-row__title,
.event-row__meta,
.venue-card__meta {
  overflow-wrap: break-word;
}

/* -----------------------------------------------------------------------------
   28. (ПРЕМАХНАТО) CUSTOM CURSOR

   Стефан, 2026-08-04: „като си сложа мишката на артистите се появява едно
   „виж", което не спира да ми следва мишката - това ме дразни и искам да се
   махне". Целият механизъм отпадна: правилата тук, `initCursor` в site.js и
   атрибутите data-cursor по страниците.
   Картите вече показват „Виж" САМО в самата карта (.artist-card__view) - там
   надписът стои на място и не гони мишката.
   НЕ връщай, без изрично да го е поискал.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   29. SKIP LINK
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 50%;
  top: -80px;
  transform: translateX(-50%);
  z-index: 200;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-field) var(--r-field);
  background: var(--c-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 0; }

/* -----------------------------------------------------------------------------
   30. ПЕЧАТ
   -------------------------------------------------------------------------- */
@media print {
  .nav, .menu, .marquee, .bg-grid, .bg-vignette, .bg-spotlight,
  .hero__threads { display: none !important; }
  body { color: #000; background: #fff; }
}

/* -----------------------------------------------------------------------------
   31. ДОКОСВАНЕ - натиснато състояние

   Стефан, 2026-08-04: „шефа ми гледа главно от телефон, а повечето анимации,
   които в момента имаме, са главно за desktop".

   Одитът намери точния размер на дупката: от 53 правила `:hover` по сайта нито
   едно не се задейства при докосване. Десет са нарочно гейтнати за десктоп без
   реална загуба, петнайсет хващат частично `.btn:active` - остават 28, които на
   телефон не правят АБСОЛЮТНО нищо. Най-лошото: `.btn-round` (кръгчетата
   напред/назад в слайдерите) и `.btn-minimal` (46 линка „Виж всички") дори не
   носят клас `.btn`, тоест нямат и едно натискане.

   Тук се дава обратна връзка при допир на всичко кликаемо. Класът `.is-pressed`
   се слага от site.js, а НЕ се разчита само на `:active`, защото в iOS Safari
   `:active` не се задейства върху нелинкови елементи без слушател по документа,
   и защото трябва да се ОТКАЖЕ, ако пръстът се плъзне встрани, без да пусне.

   Правилата важат само там, където няма мишка - на десктоп hover си остава.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  /* Общо: всичко кликаемо потъва едва доловимо. 0.97 е измерено - под 0.95
     картата видимо „подскача" при списък от редове, над 0.985 не се усеща. */
  .is-pressed {
    transform: scale(0.97);
    transition: transform 90ms var(--ease-out);
  }

  /* Едрите повърхности се свиват по-малко - при карта 370px 3% са 11px и
     ръбът видимо се отлепя от съседа. */
  .artist-card.is-pressed,
  .venue-card.is-pressed,
  .cta-card.is-pressed,
  .fan-card.is-pressed,
  .team-card.is-pressed,
  .gal-item.is-pressed {
    transform: scale(0.985);
  }

  /* Редът за събитие е ТЪМЕН, с бял текст и снимка отгоре (z-index -2).
     Светлият фон отдолу не се вижда изобщо - затова при допир вместо него
     мърда самата снимка, точно както прави hover-ът на десктоп. */
  .event-row.is-pressed { transform: none; }
  .event-row.is-pressed .event-row__bg img {
    opacity: 0.95;
    transform: scale(1.05);
  }

  /* Редовете не се свиват - те са широки колкото екрана и мащабирането им
     чете като трепване. Вместо това фонът потъмнява. */
  .past-row.is-pressed,
  .acc-row.is-pressed,
  .menu__link.is-pressed,
  .footer__col a.is-pressed,
  .marquee-logos__item.is-pressed {
    transform: none;
    background-color: var(--c-surface);
    transition: background-color 90ms linear;
  }
  /* В тъмните зони потъмняването не се вижда - там изсветляваме. */
  .menu__link.is-pressed,
  .footer__col a.is-pressed {
    background-color: transparent;
    color: #fff;
    opacity: 0.62;
  }

  /* Кръгчетата напред/назад: те нямат клас .btn, затова досега нямаха нищо. */
  .btn-round.is-pressed { transform: scale(0.9); }

  /* „Виж всички" линковете: стрелката тръгва - същото, което на десктоп прави
     hover-ът (gap расте). */
  .btn-minimal.is-pressed { gap: var(--sp-3); }

  /* Стрелката на CTA картите е главният сигнал „води натам" и на телефон беше
     замръзнала. При допир се изстрелва до края. */
  .cta-card.is-pressed .arrow-line__bar,
  .slider-cta.is-pressed .arrow-line__bar { width: 100%; }

  /* Плюсът в услугите се завърта, както при hover. */
  .acc-row.is-pressed .acc-row__plus { transform: rotate(90deg); }

  /* Иконките за социални мрежи и филтърните чипове в локациите. */
  .social.is-pressed,
  .filter-chip.is-pressed { transform: scale(0.92); }

  /* Текстови връзки (телефон, имейл, „Виж на картата") - мащабирането на
     ред текст чете като трепване, затова само избледняват. */
  .agent-card__row a.is-pressed,
  .contact-info__row a.is-pressed,
  .contact-info__map.is-pressed,
  .request__contact a.is-pressed,
  .venue-card__map.is-pressed,
  .venue-card__count.is-pressed {
    transform: none;
    opacity: 0.55;
    transition: opacity 90ms linear;
  }

  /* Бутонът с въпроса в FAQ: досега единственият знак, че си го натиснал,
     беше самото отваряне на панела - и то със закъснение. */
  .faq-item__btn.is-pressed {
    transform: none;
    background-color: var(--c-surface);
    transition: background-color 90ms linear;
  }
}

/* При изключени анимации нищо не мърда - остава само промяната на фона. */
.anim-off .is-pressed,
html.anim-off .is-pressed { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .is-pressed { transform: none !important; }
}

/* -----------------------------------------------------------------------------
   32. ОДОМЕТЪР - цифрите в статистиките се превъртат

   Всяка цифра стои в прозорче висока точно 1em, а вътре в него колонка от
   цифри се плъзга нагоре (виж buildOdometer в site.js). Височината следва
   шрифта, затова работи и на 320px, и на десктоп без нито едно число в px.

   ВНИМАНИЕ: `line-height` тук ТРЯБВА да е 1, иначе прозорчето и стъпката на
   колонката се разминават и цифрите спират между два реда.
   -------------------------------------------------------------------------- */
.odo { display: inline-flex; align-items: baseline; }

.odo .odo__win {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: baseline;
}

.odo .odo__strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.odo .odo__d {
  display: block;
  height: 1em;
  line-height: 1;
  /* Цифрите трябва да са с ЕДНАКВА ширина, иначе колонката шава настрани,
     докато се върти („1" е по-тясна от „8"). */
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.odo .odo__sep { display: inline-block; }

/* Без анимации колонката стои на крайната цифра - показваме само нея. */
.anim-off .odo .odo__strip { transform: none; }

/* -----------------------------------------------------------------------------
   33. МАСТИЛЕНА НИШКА НА ПРОГРЕСА (2026-08-07, предложение 4, одобрено)
   2px линия в горния ръб, расте с прочетеното. Освен готино е и полезно -
   на телефон казва колко страница остава. Създава се от initProgressThread
   (site.js) на всички страници. Стои НАД плаващата навигация (z 90).
   НЕ гасне при reduced-motion - това е индикатор за позиция (като скролбара),
   не декоративно движение: мърда само когато човекът сам скролва.
   -------------------------------------------------------------------------- */
.progress-thread {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 95;
  pointer-events: none;
  background: var(--c-ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}