/* ============================================================
   Кнопка ролика и плеер на лендингах направлений
   (/kompas.html, /lichnostny-profil.html, /profil-dolzhnosti.html,
    /otsenka-personala.html, /diagnostika-vygoraniya.html,
    /korporativnaya-kultura.html, /komandnaya-diagnostika.html)
   ------------------------------------------------------------
   Логика кнопки — общий public/video-cta.js, тот же, что на хабах
   «/dlya-sebya.html» и «/dlya-kompanii.html»: до клика на странице нет ни
   <video>, ни запроса к файлу, плеер собирается по клику. Свой файл нужен
   только потому, что CSP сервера разрешает лишь 'self' (внешние скрипты
   запрещены), а библиотек в проекте нет.

   Вид кнопки — та же зелёная плашка, что на хабах, но приведённая к ряду CTA:
   на лендингах рядом стоят .btn и .btn-ghost, и «чип» другого размера читался
   бы как чужой элемент. Поэтому здесь совпадают и кегль, и паддинги, и радиус
   с соседними кнопками; градиент, иконка и блик — как на хабах.
   Копии этих стилей живут на хабах (dlya-kompanii.css, dlya-sebya.css) —
   меняя вид кнопки, правьте во всех трёх местах.

   Цвета записаны литералами намеренно: у лендингов в :root нет --emerald и
   --emerald-deep, и var() там не разрешился бы.
   ============================================================ */
.dir-video{
  /* position:relative — не для вида, а чтобы блик ::after (position:absolute с
     inset:-60% -40%) считался от самой кнопки и обрезался её overflow:hidden.
     Без этого в потоке он уезжает в область прокрутки документа: анимация
     translateX раздувала scrollWidth страницы с 1280 до 4787 px. На хабах ту же
     роль играет position:absolute у кнопки. */
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 20px;border:0;border-radius:14px;cursor:pointer;
  font-family:'Onest',-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px;font-weight:600;line-height:1.5;letter-spacing:.01em;color:#fff;
  background:linear-gradient(100deg,#0e4a38 0%,#13624b 34%,#0aa87e 62%,#0e4a38 100%);
  background-size:230% 100%;background-position:0% 50%;
  box-shadow:0 8px 20px -12px rgba(14,74,56,.7);
  overflow:hidden;isolation:isolate;
  transition:transform .18s ease,box-shadow .18s ease;
}
.dir-video::after{                       /* бегущий блик */
  content:"";position:absolute;inset:-60% -40%;
  background:linear-gradient(105deg,transparent 36%,rgba(233,255,150,.85) 50%,transparent 64%);
  transform:translateX(-130%);pointer-events:none;
}
.dir-video-ico{flex:none;margin-left:1px}
.dir-video:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(14,74,56,.85)}
.dir-video:focus-visible{outline:2px solid #0aa87e;outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .dir-video{animation:dir-video-sheen 6s cubic-bezier(.45,0,.25,1) infinite}
  .dir-video::after{animation:dir-video-glint 6s cubic-bezier(.45,0,.25,1) infinite}
}
@keyframes dir-video-sheen{
  0%,8%{background-position:0% 50%}
  46%,100%{background-position:100% 50%}
}
@keyframes dir-video-glint{
  0%,10%{transform:translateX(-130%)}
  34%,100%{transform:translateX(130%)}
}

/* ---------- плеер ролика: создаётся по клику; до него на странице только кнопка ---------- */
.vid-modal{position:fixed;inset:0;z-index:200;display:none}
.vid-modal.on{display:block}
.vid-backdrop{position:absolute;inset:0;background:rgba(12,20,16,.78)}
.vid-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1080px,92vw);background:#0e1412;border-radius:18px;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.7)}
.vid-box video{display:block;width:100%;height:auto;background:#000}
.vid-x{position:absolute;right:10px;top:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.9);color:#16321f;font-size:17px;line-height:1}
.vid-x:hover{background:#fff}
.vid-x:focus-visible{outline:2px solid #06d6a0;outline-offset:2px}

/* телефон: в ряду CTA кнопки растягиваются на всю ширину, кнопка ролика
   ведёт себя так же — иначе она остаётся узкой посреди широких соседей */
@media (max-width:640px){
  .cta .dir-video{flex:1;justify-content:center;text-align:center}
  .vid-box{width:94vw}
}
@media print{
  .dir-video,.vid-modal{display:none!important}
}