/* NARTOS — блок с видео, которое перематывается прокруткой */

.reel{
  position:relative;
  height:210vh;                /* запас прокрутки на три титра */
  background:var(--coal);
  margin-top:-1px;
}
.reel__stage{
  position:sticky;top:0;height:100vh;height:100dvh;
  overflow:hidden;display:grid;place-items:center;
  /* Первый кадр ролика лежит фоном сцены: пока грузится видео, экран занят
     картинкой, а не чернотой, и появление ролика не читается как вспышка. */
  background:var(--coal) url('../video/flight-poster.jpg?v=22') center/cover no-repeat;
}

.reel__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:transparent;
  opacity:0;transition:opacity .6s var(--ease);
}
/* Каждая дорожка проявляется, когда сможет показать кадр. Постер под ней
   совпадает с первым кадром, поэтому переход незаметен. */
.reel--lq .reel__video--lq{opacity:1}
.reel__video--hd{transition-duration:.7s}
.reel--hd .reel__video--hd{opacity:1}

/* Пока качается первая дорожка — тонкая пульсация на постере, чтобы блок
   не выглядел сломанным. Секунда-полторы, дальше исчезает. */
.reel--loading .reel__stage::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(240,145,91,.9),transparent);
  animation:reelload 1.1s linear infinite;
}
@keyframes reelload{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .reel--loading .reel__stage::after{animation:none;opacity:.5}
}
/* Затемнение кадра. Снизу ослаблено: читаемость теперь держит подложка титра,
   а не общая темнота, — так лучше виден сам кадр. */
.reel__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(10,9,7,.5) 0%, rgba(10,9,7,.1) 32%, rgba(10,9,7,.52) 100%);
}
.reel__inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);padding:0 28px}

/* Титры сменяют друг друга по мере прокрутки.
   Подложка с мягким размытием: текст читается на любом кадре, но видео
   за ним остаётся видно. Размытие небольшое — 14px, кадр угадывается. */
.reel__cap{
  position:absolute;left:28px;right:28px;bottom:12vh;
  max-width:min(560px,42ch);
  padding:24px 28px 26px;
  border-radius:var(--r-l);
  background:rgba(14,11,9,.4);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.75);
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  pointer-events:none;
}
.reel__cap.is-on{opacity:1;transform:none}
/* Safari до 18 и старые Chromium без backdrop-filter: держим читаемость
   плотностью фона, иначе текст ляжет прямо на кадр. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .reel__cap{background:rgba(14,11,9,.74)}
}
.reel__cap span{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;
  font-family:'Geologica',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:#F0915B;
}
.reel__cap span::before{content:'';width:26px;height:2px;background:#F0915B}
.reel__cap h2{color:#fff;font-size:clamp(28px,3.6vw,52px);text-shadow:0 2px 30px rgba(0,0,0,.4)}
.reel__cap p{margin-top:14px;color:#E4DED4;font-size:clamp(17px,1.6vw,20px);max-width:34ch}

/* Индикатор прокрутки ролика убран: сверху страницы уже идёт общая полоса
   прогресса, а вторая под видео только спорила с ней за внимание.
   Элемент остаётся в разметке — reel.js проверяет его через if (bar). */
.reel__bar{display:none}

.reel__hint{
  position:absolute;left:50%;top:calc(50% + 4vh);transform:translateX(-50%);z-index:2;
  font-family:'Geologica',sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.7);display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:opacity .4s;
}
.reel__hint i{
  width:22px;height:34px;border:2px solid rgba(255,255,255,.5);border-radius:12px;position:relative;
}
.reel__hint i::after{
  content:'';position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;
  background:rgba(255,255,255,.8);transform:translateX(-50%);
  animation:wheel 1.8s var(--ease) infinite;
}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}
.reel.is-playing .reel__hint{opacity:0}

/* запасной вид: телефон, экономный режим, отключённое движение */
.reel--still{height:auto}
.reel--still .reel__stage{position:relative;height:auto;min-height:auto;padding:64px 0}
.reel--still .reel__video{display:none}
/* Кадр уже лежит фоном сцены, здесь только затемняем его посильнее,
   чтобы три титра подряд читались. */
.reel--still .reel__veil{
  background:linear-gradient(180deg, rgba(12,10,8,.55) 0%, rgba(12,10,8,.82) 55%, rgba(12,10,8,.94) 100%);
}
.reel--still .reel__cap{position:relative;left:auto;right:auto;bottom:auto;opacity:1;transform:none;
  max-width:none;margin-bottom:20px}
.reel--still .reel__cap:last-of-type{margin-bottom:0}
.reel--still .reel__hint{display:none}

@media (max-width:860px){
  /* Прокрутка проматывает кадры и на телефоне. Запас хода меньше десктопного:
     три экрана пальцем — это долго, ролик ощущается как застрявший. */
  .reel{height:190vh}
  .reel__cap{
    left:14px;right:14px;bottom:9vh;
    max-width:none;
    padding:18px 20px 20px;
    border-radius:var(--r);
    /* Размытие на мобильных чипах стоит кадров — уменьшаем, плотность фона
       добираем цветом. */
    backdrop-filter:blur(10px) saturate(1.1);
    -webkit-backdrop-filter:blur(10px) saturate(1.1);
    background:rgba(14,11,9,.5);
  }
  .reel__cap h2{font-size:clamp(26px,7vw,34px)}
  /* Справа снизу висит кнопка чата — оставляем ей место, иначе она садится
     на последнюю строку текста. */
  .reel__cap p{font-size:16px;max-width:none;margin-top:10px;padding-right:56px}
  .reel__cap span{font-size:11px;margin-bottom:10px}
  .reel__cap span::before{width:18px}
}

/* Узкие и низкие экраны в ландшафте: титр не должен закрывать весь кадр. */
@media (max-width:860px) and (max-height:520px){
  .reel{height:150vh}
  .reel__cap{bottom:6vh;padding:14px 16px 16px}
  .reel__cap p{display:none}
}
@media (prefers-reduced-motion:reduce){
  .reel__hint i::after{animation:none}
}