/* Версия 3: первый экран — фотография мастерской во весь блок.
 *
 * ⚠️ ТЁМНЫЙ ПЕРВЫЙ ЭКРАН — НАЗВАННОЕ ИСКЛЮЧЕНИЕ ИЗ РЕШЕНИЯ «СВЕТЛАЯ ТЕМА
 * ОСНОВНАЯ» (решение владельца 01.09.2026). Фотография снята в тёмной
 * мастерской при одной лампе, и светлее она не станет: осветлять её значит
 * убить единственное, ради чего она тут стоит. Исключение записано и в
 * `TZ-landing-v4.md` — иначе следующая сессия «починит» экран обратно и будет
 * права. Ниже первого экрана страница остаётся светлой, как везде.
 *
 * ⚠️ ЦВЕТА ТЕКСТА — ТОКЕНАМИ КОНТРАСТНОЙ СЕКЦИИ (`--alt-fg`, `--alt-fg-2`).
 * Они светлые в ОБЕИХ темах, потому что описывают текст на тёмной полосе, а
 * не на фоне страницы. Своих `#fff` по месту не заводить.
 *
 * ⚠️ ЗАТЕМНЕНИЕ — ИСКЛЮЧЕНИЕ, И ОНО ОБЪЯСНЕНО. Шторка поверх кадра задана
 * постоянными rgba, а не токеном: она затемняет ФОТОГРАФИЮ, а не поверхность
 * страницы, и обязана быть одинаковой в обеих темах — иначе в светлой теме
 * текст ляжет на подсвеченный стол и перестанет читаться.
 */

.hero-shot {
  position: relative;
  isolation: isolate;
  margin-top: -64px;              /* высота шапки: `.nav { height: 64px }` */
  padding-top: 64px;
  min-height: clamp(480px, 72vh, 680px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0B0F0D;
}
.hero-shot-img {
  position: absolute; inset: 0 0 0 auto;
  width: min(72%, 1040px);
  /* Пока кадр летит по сети, на его месте стоит замыленная заглушка (746
     байт): чёрная дыра в первом экране читается как незагрузившаяся страница.
     Стоит она ИМЕННО НА КАДРЕ, а не на всём блоке — растянутая на всю ширину,
     она выглядела размытым фоном страницы (владелец назвал это «слишком
     большим блюром», и был прав). */
  background: url('../img/workshop-tiny.jpg') center / cover no-repeat;
  /* ⚠️ Левый край кадра РАСТВОРЯЕТСЯ, а не обрывается линией: на стыке с
     тёмной подложкой видна вертикальная граница там, где шторка слабее — у
     пола под столом. Маска гасит сам кадр, а не кладёт поверх ещё один слой. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.hero-shot-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* Кадр квадратный, экран широкий: показываем середину — стол со стеблями и
     человека за ним. На телефоне тот же центр остаётся в кадре. */
  object-position: 50% 100%;
  z-index: -2;
}
/* Шторка: снизу и слева плотнее — там лежит текст. */
.hero-shot::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 10, 8, .34) 0%, rgba(6, 10, 8, .12) 40%, rgba(6, 10, 8, .28) 100%),
    linear-gradient(90deg, #0B0F0D 0%, #0B0F0D 26%, rgba(6, 10, 8, .74) 42%, rgba(6, 10, 8, .22) 60%, rgba(6, 10, 8, 0) 76%);
}

.hero-shot-body { padding: clamp(28px, 4vh, 48px) var(--pad); position: relative; width: 100%; }
.hero-shot-in { max-width: min(560px, 46vw); }

/* Категория. Кадр говорит «флористика», фраза говорит «программа» — вместе
   они не говорят, ДЛЯ КОГО она; это делает надпись. */
.hero-shot-kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  /* ⚠️ Цвет ЯРКИЙ, а не приглушённый: замер по пикселям дал приглушённому
     3.83:1 при пороге 4.5 для мелкого текста. Иерархию здесь держит размер и
     начертание, а не тусклость — тусклый мелкий текст на фотографии не
     читается вовсе. */
  text-transform: uppercase; color: var(--alt-fg); margin: 0 0 18px;
  display: flex; align-items: center; gap: 9px;
}
.hero-shot-kicker::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #6FBF8C;
}
.hero-shot h1 {
  color: var(--alt-fg);
  font-size: clamp(29px, 3.5vw, 45px); line-height: 1.07;
  letter-spacing: -0.035em; font-weight: 600; margin: 0;
  text-wrap: balance;
}
.hero-shot-lede {
  color: var(--alt-fg-2); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5;
  margin: 20px 0 0; max-width: 46ch;
}
.hero-shot-act { margin-top: clamp(24px, 3vh, 34px); max-width: 480px; }
.hero-shot-act .catch input {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(242, 239, 232, .28);
  color: var(--alt-fg);
}
.hero-shot-act .catch input::placeholder { color: rgba(242, 239, 232, .55); }
.hero-shot-act .catch-note { color: rgba(242, 239, 232, .58); }
.hero-shot-act .catch-err { color: #F2A48C; }

/* ⚠️ `.reveal` НА ПЕРВОМ ЭКРАНЕ ЗАПРЕЩЁН (прямой запрет ТЗ): заминка со
   скриптом — и человек видит пустой тёмный экран. Появление здесь делает
   чистый CSS, без единого класса, который ставит JS. */
@media (prefers-reduced-motion: no-preference) {
  .hero-shot-in > * { animation: shotIn .7s cubic-bezier(.22,.7,.3,1) both; }
  .hero-shot-in > *:nth-child(2) { animation-delay: .07s; }
  .hero-shot-in > *:nth-child(3) { animation-delay: .14s; }
  .hero-shot-in > *:nth-child(4) { animation-delay: .21s; }
}
@keyframes shotIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Шапка стоит ПОВЕРХ тёмного кадра, пока страница не прокручена: в светлой
   теме её обычный тёмный текст на фотографии не читался бы вовсе.
   ⚠️ И ОНА ВСЕГДА НА БЛЮРЕ (решение владельца 03.09.2026), а не только после
   прокрутки. Прозрачная шапка читается ровно до тех пор, пока под ней тёмное
   место кадра: на светлом пятне — на белой футболке, на лампе — название и
   кнопки пропадают. Фотография у каждого магазина будет своя, и угадывать, где
   у неё светлое, нельзя; блюр с лёгкой подложкой не зависит от кадра вовсе.
   Значения свои, а не от `.is-stuck`: та подмешивает ФОН СТРАНИЦЫ (в светлой
   теме почти белый) — поверх фотографии это была бы молочная полоса. */
.nav--on-shot:not(.is-stuck) {
  background: rgba(8, 13, 10, .38);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-bottom-color: rgba(242, 239, 232, .10);
}
.nav--on-shot:not(.is-stuck) .brand { color: var(--alt-fg); }
.nav--on-shot:not(.is-stuck) .brand small { display: none; }
.nav--on-shot:not(.is-stuck) .theme-btn,
.nav--on-shot:not(.is-stuck) .btn--ghost {
  color: var(--alt-fg); border-color: rgba(242, 239, 232, .30); background: rgba(255, 255, 255, .06);
}
.nav--on-shot:not(.is-stuck) .btn--ghost:hover { background: rgba(255, 255, 255, .14); }

@media (max-width: 1080px) {
  .hero-shot-img { width: 66%; }
  .hero-shot-in { max-width: 44vw; }
  .hero-shot::after {
    background:
      linear-gradient(180deg, rgba(6, 10, 8, .34) 0%, rgba(6, 10, 8, .12) 40%, rgba(6, 10, 8, .28) 100%),
      linear-gradient(90deg, #0B0F0D 0%, #0B0F0D 32%, rgba(6, 10, 8, .70) 46%, rgba(6, 10, 8, .20) 62%, rgba(6, 10, 8, 0) 76%);
  }
}
/* ⚠️ НА ТЕЛЕФОНЕ КОМПОЗИЦИЯ ДРУГАЯ, И ЭТО НЕ КАПРИЗ. Текст занимает там почти
   всю высоту блока, поэтому «фотография фоном» превращается в тёмное пятно:
   замер рендером в рамке 390 px — от кадра оставалась только лампа, всё
   остальное съедала шторка, без которой текст не читается. Поэтому на узком
   экране кадр стоит СВЕРХУ своей полосой, а текст — под ним на тёмном фоне:
   и фотография видна целиком, и контраст не зависит от того, что под буквами.
   Правило «один кадр на страницу» при этом не нарушено — кадр тот же. */
@media (max-width: 820px) {
  /* ⚠️ ВЫСОТА ПОЛОСЫ СЧИТАЕТСЯ ИЗ ПРОПОРЦИЙ КАДРА, А НЕ НАЗНАЧАЕТСЯ ЧИСЛОМ.
     Обрезка владельца — 1280×736; при высоте «на глаз» `object-fit: cover`
     снова срезал бы её по бокам, то есть вернул бы ровно ту беду, ради которой
     обрезку и делали. Одна переменная на все три места (кадр, шторка, отступ
     текста): разойдись они — под фотографией появится щель или текст наедет. */
  /* ⚠️ КАДР НАЧИНАЕТСЯ ПОД ШАПКОЙ, А НЕ ПОД НЕЁ ЗАЕЗЖАЕТ (правка владельца
     03.09.2026: «там лицо обрезается»). Блок первого экрана поднят на высоту
     шапки (`margin-top: -64px` выше), чтобы на десктопе фотография уходила
     под неё, — а на телефоне те же 64 px срезали ровно голову: кадр там узкой
     полосой, и шапка съедала четверть его высоты. Поэтому кадр и шторка
     сдвинуты вниз на высоту шапки, а над ними остаётся тёмная подложка блока.
     ⚠️ `--nav-h` обязана совпадать с `.nav { height }` (`sections.css`) и с
     `margin-top`/`padding-top` самого `.hero-shot`: разойдутся — над кадром
     появится тёмная щель или он снова наедет на шапку. */
  .hero-shot {
    --nav-h: 64px;
    --shot-h: min(calc(100vw / 1.739), 420px);
    min-height: 0; display: block; background: #0B0F0D;
  }
  .hero-shot-img {
    inset: var(--nav-h) 0 auto 0; height: var(--shot-h); width: 100%;
  }
  .hero-shot-img img {
    inset: 0; height: 100%;
    object-position: 50% 50%;
  }
  .hero-shot::after {
    inset: var(--nav-h) 0 auto 0; height: var(--shot-h);
    background: linear-gradient(180deg, rgba(6,10,8,.26) 0%, rgba(6,10,8,.06) 34%, rgba(6,10,8,.62) 84%, #0B0F0D 100%);
  }
  .hero-shot-body {
    padding: calc(var(--nav-h) + var(--shot-h) - 12px) var(--pad) 40px;
  }
  .hero-shot-in { max-width: none; }
}

@media (max-width: 720px) {
  .hero-shot-in { max-width: none; }
  .hero-shot::after {
    /* ⚠️ На телефоне текст лежит поверх ВСЕГО кадра, поэтому шторка плотнее,
       чем на десктопе. Но не сплошная: при первой редакции (0.60→0.86→0.95)
       от фотографии оставалось одно тёмное пятно, и кадр переставал что-либо
       значить. Верхняя треть, где текста нет, оставлена светлее — видно
       лампу и мастерскую. */
    background: linear-gradient(180deg, rgba(6, 10, 8, .34) 0%, rgba(6, 10, 8, .30) 22%, rgba(6, 10, 8, .72) 52%, rgba(6, 10, 8, .90) 100%);
  }
}