/* ============================================================
   Фон и приветственная фраза. Поверх боевых стилей, ничего в них
   не меняя. Режимы переключаются атрибутом на <html>:
     off   — как сейчас
     img   — кадры из ролика на фоне разделов
     video — ролик живёт за всей страницей
   ============================================================ */

/* ---------- приветственная фраза поверх видео ----------
   Стоит первой строкой, до большого заголовка: человек читает её
   раньше всего и сразу понимает, при чём тут шахматы. */
.fon-slogan{
  display:flex;align-items:center;gap:16px;margin:0 0 22px;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(16px,1.9vw,23px);letter-spacing:.015em;
  color:rgba(var(--text-rgb),.9);
}
.fon-slogan b{color:var(--accent);font-weight:700}
.fon-slogan i{display:block;width:44px;height:1px;flex:none;
  background:linear-gradient(90deg,var(--accent),transparent)}
@media (max-width:768px){
  .fon-slogan{gap:11px;margin-bottom:16px;font-size:14.5px}
  .fon-slogan i{width:26px}
}

/* ---------- РЕЖИМ «КАДРЫ НА ФОНЕ» ---------- */
/* вертикальный кадр с ферзём — у правого края раздела «О нас» */
html[data-fon="img"] .section-about{position:relative;overflow:hidden}
html[data-fon="img"] .section-about::before{
  content:'';position:absolute;z-index:0;right:0;top:0;bottom:0;
  width:min(30%,420px);
  /* contain, а не cover: раздел низкий, и при обрезке от фигуры остаётся
     одна макушка. Так ферзь виден целиком. */
  background:url('/q-tall.jpg') right center/contain no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 52%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 52%);
}
html[data-fon="img"] .about-inner{position:relative;z-index:1}

/* широкий кадр с поваленными фигурами — горизонт под разделом «Команда» */
html[data-fon="img"] .section-team{position:relative;overflow:hidden}
html[data-fon="img"] .section-team::after{
  content:'';position:absolute;z-index:0;left:0;right:0;bottom:0;height:min(42%,340px);
  background:url('/fallen.jpg') center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 78%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 78%);
  pointer-events:none;
}
html[data-fon="img"] .team-inner{position:relative;z-index:1}

/* тот же вертикальный кадр у контактов, но с другой стороны */
html[data-fon="img"] #contact{position:relative;overflow:hidden}
html[data-fon="img"] #contact::before{
  content:'';position:absolute;z-index:0;left:0;top:0;bottom:0;width:min(26%,360px);
  background:url('/q-tall.jpg') left center/contain no-repeat;transform:scaleX(-1);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 62%);
  mask-image:linear-gradient(90deg,#000 0%,transparent 62%);
  opacity:.8;
}
html[data-fon="img"] #contact > *{position:relative;z-index:1}

/* ---------- РЕЖИМ «ВИДЕО ЗА СТРАНИЦЕЙ» ---------- */
/* Ролик первого экрана переезжает за страницу — он же и остаётся
   единственным. Отдельного второго видео на странице нет. */
html[data-fon="video"] #heroVideo{
  position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;
  pointer-events:none;
  /* сильно гасим: это задник, а не содержимое */
  filter:grayscale(.72) saturate(.45) brightness(.3) contrast(1.06);
}
html[data-fon="video"] body{background:transparent}
/* разделы приглушённо-непрозрачные, иначе текст не прочесть */
html[data-fon="video"] .section-about,
html[data-fon="video"] .section-team,
html[data-fon="video"] #contact{background:rgba(10,26,46,.8)}
html[data-fon="video"] .section-services{background:rgba(16,38,61,.86)}
html[data-fon="video"] footer{background:rgba(7,20,38,.9)}
/* на телефоне фоновое видео не крутим — это батарея и трафик */
@media (max-width:900px){
  html[data-fon="video"] #heroVideo{display:none}
  html[data-fon="video"] body{
    background:url('/q-tall.jpg') center top/cover fixed no-repeat #0A1A2E;
  }
}

/* ---------- переключатель показа ---------- */
.fon-ui{position:fixed;left:16px;bottom:16px;z-index:600;
  display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:14px;
  background:rgba(4,12,22,.93);border:1px solid rgba(var(--text-rgb),.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.9);font-family:var(--f-body)}
.fon-ui b{font-family:var(--f-display);font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(var(--text-rgb),.4);margin-bottom:2px}
.fon-ui button{display:block;width:100%;text-align:left;cursor:pointer;
  padding:9px 13px;border-radius:9px;border:1px solid rgba(var(--text-rgb),.12);
  background:none;color:rgba(var(--text-rgb),.72);font:inherit;font-size:13px;
  transition:background .2s,border-color .2s,color .2s}
.fon-ui button:hover{color:var(--text);border-color:rgba(var(--text-rgb),.3)}
.fon-ui button.on{background:rgba(var(--accent-rgb),.18);border-color:var(--accent);color:var(--accent-hi)}
@media (max-width:900px){
  .fon-ui{left:10px;bottom:10px;padding:9px}
  .fon-ui button{font-size:12px;padding:8px 10px}
}