/* ============================================================
   bufet — герой главной и бегущая строка под ним.
   Перенос из docs/02/design_2/assets/home-c.css (строки 208–262)
   плюс относящиеся к герою правила блока RESPONSIVE.
   Инлайновые стили макета (подпись в чипе с ценой) перенесены сюда.
   ============================================================ */
.hero { position: relative; padding-top: 78px; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(28px, 4vw, 72px); align-items: center; padding-block: clamp(40px, 6vw, 80px) var(--section-y); }
.hero__eyebrow { margin-bottom: 28px; }
.hero__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--ink); margin: 0 0 30px; }
.hero__title .accent { color: var(--accent); }
.hero__sub { max-width: 40ch; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.5; margin: 0 0 40px; }

/* ---- большой CTA-кластер ------------------------------------ */
.hero__cta { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); flex-wrap: wrap; }
.cta-main {
  display: inline-flex; align-items: center; gap: 1.1em;
  padding: 1.4em 1.5em 1.4em 2.1em; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; box-shadow: var(--sh-accent);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: -.01em; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  will-change: transform;
}
.cta-main__arrow { width: 46px; height: 46px; flex: none; display: grid; place-items: center; background: #fff; color: var(--accent-deep); border-radius: 50%; transition: transform var(--dur) var(--ease); }
.cta-main__arrow svg { width: 22px; height: 22px; }
.cta-main:hover { box-shadow: 0 26px 60px color-mix(in oklab, var(--accent) 50%, transparent); }
.cta-main:hover .cta-main__arrow { transform: translateX(5px) rotate(0deg); }

/* ---- вращающийся бейдж -------------------------------------- */
.badge { position: relative; width: 116px; height: 116px; flex: none; display: grid; place-items: center; }
.badge__ring { position: absolute; inset: 0; animation: bufet-spin 16s linear infinite; }
.badge__ring text { font-family: var(--font-display); font-size: 11.6px; font-weight: 700; letter-spacing: .18em; fill: var(--ink); text-transform: uppercase; }
.badge__dot { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.badge__dot svg { width: 22px; height: 22px; }
@keyframes bufet-spin { to { transform: rotate(360deg); } }
.no-anim .badge__ring { animation: none; }

/* ---- визуальная часть --------------------------------------- */
.hero__visual { position: relative; }
.hero__plate { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-3); }
.hero__plate .plate { position: absolute; inset: 0; border-radius: var(--r-3); }
.hero__blob { position: absolute; width: 58%; aspect-ratio: 1; right: -8%; top: -10%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--accent) 70%, #fff), var(--accent)); filter: blur(6px); opacity: .9; z-index: -1; }
.hero__chip {
  position: absolute; z-index: 3; background: #fff; box-shadow: var(--sh-2);
  border-radius: var(--r-pill); padding: 12px 18px; display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
}
.hero__chip small { display: block; font-weight: 500; font-size: .72rem; color: var(--ink-3); }
.hero__chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.hero__chip--1 { left: -7%; top: 18%; }
.hero__chip--2 { right: -6%; bottom: 16%; }
.hero__chip--price { right: 6%; bottom: -4%; background: var(--ink); color: #fff; }
.hero__chip--price small { color: rgba(255, 255, 255, .6); }

/* обложка телефона: показывается только веткой ≤767 ниже */
.hero__cover, .hero__tiles, .hero__tiles-more { display: none; }

/* ---- бегущая строка ----------------------------------------- */
.marquee { border-block: 1px solid var(--line); overflow: hidden; padding-block: 22px; }
.marquee__track { display: flex; gap: 56px; white-space: nowrap; width: max-content; will-change: transform; }
.marquee__track span { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 2rem); letter-spacing: -.02em; color: var(--ink); display: inline-flex; align-items: center; gap: 56px; }
.marquee__track span::after { content: "✦"; color: var(--accent); font-size: .7em; }

/* ---- адаптив (блок RESPONSIVE макета) ----------------------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__visual { max-width: 520px; }
}
@media (max-width: 600px) {
  /* Правило макета `.badge { width: 96px }` не переносим: на ≤767px
     мобильная композиция бейдж не показывает вовсе (см. mobile.css). */
  .hero__chip--1 { left: 0; }
  .hero__chip--2 { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .badge__ring { animation: none; }
}

/* ---- обложка на телефоне: «страница 1 → 2» (план части 2b, Task 2) ---------- */
@media (max-width: 767px) {
  .hero {
    --cover-stage: calc(100vh - 52px - 76px - env(safe-area-inset-bottom, 10px));
    /* высота кадра в конце сцены; она же держит место кадра в раскладке */
    --cover-frame-end: 58%;
    /* срез кадра снизу: 0 — кадр во весь экран, --cover-cut-max — конечное состояние */
    --cover-cut-max: calc(var(--cover-stage) * .42);
    --cover-cut: var(--cover-cut-max);
    padding-top: 52px;
    /* сцена прилипает к экрану, а не к .hero — см. план части 2b, Task 2 */
    overflow: visible;
  }
  /* @supports, а не второе объявление: значение переменной не проверяется до подстановки */
  @supports (height: 100svh) {
    .hero { --cover-stage: calc(100svh - 52px - 76px - env(safe-area-inset-bottom, 10px)); }
  }
  .hero__grid { display: flex; flex-direction: column; gap: 0; padding-block: 0 clamp(28px, 8vw, 48px); }
  .hero__visual { order: -1; position: relative; max-width: none; }
  [data-cover-armed] { height: calc(var(--cover-stage) * 2); }
  .hero__stage { position: sticky; top: 52px; height: var(--cover-stage); display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; contain: layout paint; }
  /* место кадра в колонке — постоянное: прокрутка не пересчитывает раскладку */
  .hero__stage::before { content: ""; flex: none; height: var(--cover-frame-end); }
  .hero__plate { position: absolute; top: 0; left: 0; right: 0; height: 100%; aspect-ratio: auto; border-radius: 22px; z-index: 2; clip-path: inset(0 0 var(--cover-cut) 0 round 22px); }
  .hero__plate .plate { border-radius: 22px; }
  /* на обложке уже две подписи — третьей (подпись медиафайла) там не место */
  .hero__plate .plate__cap { display: none; }
  /* подписи живут по видимому окну кадра, а не по всей плите: низ ходит вместе со срезом */
  .hero__cover { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: var(--cover-cut); z-index: 2; pointer-events: none; transition: opacity var(--dur) var(--ease); }
  /* подписи принадлежат первому кадру: на листаемых кадрах работ их нет */
  .hero__plate:has(.carousel__slide:not(:first-child).is-active) .hero__cover { opacity: 0; }
  .hero__cover-line { position: absolute; font-family: var(--font-display); font-weight: 800; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .38); letter-spacing: -.02em; max-width: 70%; }
  .hero__cover-line--top { top: 34%; right: 18px; font-size: 1.3rem; text-align: right; }
  .hero__cover-line--bottom { left: 18px; bottom: 20%; font-size: 1.9rem; line-height: 1; }
  /* плитки едут за кромкой кадра трансформом: место в раскладке у них постоянное */
  .hero__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; opacity: var(--cover-tiles, 1); transform: translateY(calc(var(--cover-cut-max) - var(--cover-cut) + (1 - var(--cover-tiles, 1)) * 24px)); }
  .hero__tile { background: var(--bg-2); border-radius: var(--r-2); padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 6px; }
  .hero__tile-n { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; line-height: 1; color: var(--accent); }
  .hero__tile-t { font-family: var(--font-display); font-weight: 700; font-size: .8rem; line-height: 1.2; color: var(--ink); }
  .hero__tiles-more { display: block; margin: 12px 0 0; opacity: var(--cover-tiles, 1); transform: translateY(calc(var(--cover-cut-max) - var(--cover-cut))); }
  .hero__tiles-more .link { font-size: .88rem; }
  /* прозрачные плитки убираем и из порядка обхода клавиатурой, и от читалки */
  [data-cover-veiled] .hero__tiles, [data-cover-veiled] .hero__tiles-more { visibility: hidden; }
  .hero__plate .hero__carousel { height: 100%; }
  .hero__carousel .carousel__viewport { height: 100%; padding: 0; margin: 0; gap: 10px; scroll-padding-inline: 0; }
  .hero__carousel .carousel__slide { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 22px; }
  /* стрелки — под кнопкой паузы в углу кадра (см. docs/PARITY-CHECK.md → 94) */
  .hero__carousel .carousel__nav { position: absolute; right: 12px; top: 68px; z-index: 3; margin: 0; gap: 8px; }
  /* без backdrop-filter: размытие поверх играющего видео пересчитывается на каждом кадре сцены */
  .hero__plate .hero__carousel .carousel__btn,
  .hero__plate .hero__carousel .carousel__btn:hover { width: 52px; height: 36px; background: rgba(255, 255, 255, .92); backdrop-filter: none; box-shadow: none; color: var(--ink); }
  .hero__left { padding-top: 28px; }
  .hero__chip, .hero__blob { display: none; }
  .hero__plate .plate__tag { top: 12px; left: 12px; background: rgba(255, 255, 255, .9); backdrop-filter: none; }
}

/* ---- обложка на компьютере: карусели нет, виден только первый слайд ---------- */
@media (min-width: 768px) {
  .hero__plate .hero__carousel, .hero__carousel .carousel__viewport { position: absolute; inset: 0; }
  .hero__carousel .carousel__viewport { padding: 0; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
  .hero__carousel .carousel__slide { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; transform: none; opacity: 1; }
  .hero__carousel .carousel__slide:not(:first-child), .hero__carousel .carousel__nav { display: none; }
}