/* ==========================================================================
   Секция «Видео» (#video): ролик о работе помощника.
   Рамка раскрывается по прокрутке (scale + подъём, scrub — video.js); без JS-анимации
   (?static=1, reduced-motion) рамка сразу в полный размер, видео — постер и кнопка воспроизведения.
   Токены — из landing.css. Классы состояния на .vid__card: is-playing, is-started, is-muted, is-ended.
   ========================================================================== */

.vid__head { margin-bottom: clamp(32px, 4.4vw, 64px); }
.vid .h2 { font-size: clamp(36px, 4.6vw, 64px); max-width: 16ch; }

/* рамка: на ней scale/translate от scrub; тень и скругление — здесь, чтобы росли вместе с ней */
.vid__frame {
  position: relative; border-radius: var(--r-xl); background: var(--surface);
  box-shadow: var(--shadow-2), 0 30px 80px -40px rgba(91, 76, 255, .28);
  transform-origin: 50% 50%; will-change: transform;
}
html.is-static .vid__frame { will-change: auto; }
.vid__card { position: relative; margin: 0; border-radius: inherit; overflow: hidden; aspect-ratio: 16 / 9; background: #F2F1F6; isolation: isolate; }
.vid__el { display: block; width: 100%; height: 100%; object-fit: cover; background: #F2F1F6; }

/* ---------- свои контролы (показываются, когда video.js убрал нативные) ---------- */
.vid__ui { position: absolute; inset: 0; pointer-events: none; }
.vid__ui[hidden] { display: none; }
.vid__ui > * { pointer-events: auto; }

.vid__big {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .86); color: var(--dark);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px -12px rgba(10, 10, 15, .45);
  display: grid; place-items: center;
  transition: transform .35s var(--ease-out), opacity .3s var(--ease-out), background-color .2s;
}
.vid__big svg { width: 34px; height: 34px; fill: currentColor; margin-left: 4px; }
.vid__big:hover { transform: scale(1.06); background: #fff; }
.vid__card.is-playing .vid__big { opacity: 0; visibility: hidden; pointer-events: none; }

.vid__bar {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 6px; padding: 4px 6px;
  border-radius: var(--r-pill); color: #fff;
  background: rgba(10, 10, 15, .66);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.vid__btn {
  flex: none; height: 44px; min-width: 44px; padding: 0 12px; border: 0; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: inherit; font: 500 14.5px/1 Inter, sans-serif; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease-out), color .2s;
}
.vid__btn:hover { background: rgba(255, 255, 255, .16); }
.vid__btn svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vid__btn svg path[fill="none"], .vid__fs svg path { fill: none; }
.vid__btn:focus-visible, .vid__big:focus-visible, .vid__seek:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent); }

/* пауза / плей — иконки переключаются по состоянию */
.vid__btn .i-pause { display: none; }
.vid__card.is-playing .vid__btn .i-pause { display: block; }
.vid__card.is-playing .vid__btn .i-play { display: none; }

/* звук: пока заглушён — заметная белая капсула */
.vid__snd { padding: 0 16px 0 12px; }
.vid__card.is-muted .vid__snd { background: #fff; color: var(--ink); }
.vid__card.is-muted .vid__snd:hover { background: #F4F2FF; }
.vid__snd .i-wave { display: none; }
.vid__snd .i-cross { display: block; }
.vid__card:not(.is-muted) .vid__snd .i-wave { display: block; }
.vid__card:not(.is-muted) .vid__snd .i-cross { display: none; }

.vid__time { flex: none; min-width: 3.6em; text-align: center; font: 500 13px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .82); }

/* перемотка */
.vid__seek {
  --p: 0%;
  flex: 1; min-width: 40px; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.vid__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #fff var(--p), rgba(255, 255, 255, .28) var(--p)); }
.vid__seek::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .28); }
.vid__seek::-moz-range-progress { height: 4px; border-radius: 4px; background: #fff; }
.vid__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.vid__seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }

/* полноэкранный режим */
.vid__card:fullscreen { border-radius: 0; background: #000; aspect-ratio: auto; }
.vid__card:fullscreen .vid__el { object-fit: contain; background: #000; }
.vid__card:-webkit-full-screen { border-radius: 0; background: #000; aspect-ratio: auto; }
.vid__card:-webkit-full-screen .vid__el { object-fit: contain; background: #000; }

/* ---------- адаптив ---------- */
@media (max-width: 720px) {
  .vid__big { width: 72px; height: 72px; }
  .vid__big svg { width: 28px; height: 28px; }
  .vid__bar { left: 8px; right: 8px; bottom: 8px; gap: 2px; padding: 3px 4px; }
  .vid__time { display: none; }
  .vid__seek { margin: 0 6px; }
  .vid__snd { padding: 0 12px 0 10px; gap: 6px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .vid__big, .vid__btn { transition: none; }
}