/* ============================================================
   Карточка кейса изнутри — кинематографичный стиль
   ------------------------------------------------------------
   Подключается ПОСЛЕ site.css и переопределяет только окно кейса
   (.modal .sheet и его содержимое). Ни одна другая часть сайта
   не затрагивается — все селекторы начинаются с .modal.

   Идея: окно превращается в маленький зал. Свет в зале гаснет
   (подложка темнеет и размывается), кадр идёт от края до края,
   подписи набраны как титры — капсом, вразрядку.

   Тема следует теме сайта: светлая тема — светлое окно, тёмная —
   тёмное. Все цвета вынесены в переменные --cm* и объявлены дважды:
   ниже для светлой темы и в блоке html.dark для тёмной.
   Сам кадр (область видео) в обеих темах чёрный — это летербокс,
   он и должен быть чёрным.

   Если понадобится вернуть как было — достаточно убрать <link>
   на этот файл, site.css не тронут.
   ============================================================ */

/* ---------- палитра: светлая тема ---------- */

.modal{
  /* внутренние отступы окна, вынесены в переменную:
     кадр уходит в край через отрицательный margin ровно на них */
  --cmPad: clamp(16px, 2.2vw, 26px);

  --cmSheet: linear-gradient(180deg, #FCFCFE, #F4F5F9);
  --cmInk: var(--ink);
  --cmMuted: var(--muted);
  --cmFaint: var(--muted2);
  --cmLine: var(--line);
  --cmLineSoft: rgba(2,6,23,.07);
  --cmChip: rgba(2,6,23,.03);
  --cmAccentText: #1C7F77;          /* акцент на светлом фоне нужен темнее */
  --cmAccentLine: rgba(28,127,119,.45);
  --cmBackdrop: radial-gradient(120% 90% at 50% 50%, rgba(8,11,20,.58), rgba(4,6,12,.80));
  --cmGrainBlend: multiply;
  --cmGrainAlpha: .035;
  --cmShadow:
    0 34px 96px rgba(2,6,23,.30),
    0 4px 20px rgba(2,6,23,.14),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* ---------- палитра: тёмная тема ---------- */

html.dark .modal{
  --cmSheet: linear-gradient(180deg, #0B0C12, #0A0B10);
  --cmInk: #F4F6FA;
  --cmMuted: rgba(238,242,248,.70);
  --cmFaint: rgba(238,242,248,.46);
  --cmLine: rgba(255,255,255,.10);
  --cmLineSoft: rgba(255,255,255,.06);
  --cmChip: rgba(255,255,255,.035);
  --cmAccentText: rgba(129,216,208,.92);
  --cmAccentLine: rgba(129,216,208,.55);
  --cmBackdrop: radial-gradient(120% 90% at 50% 50%, rgba(6,8,14,.74), rgba(2,3,7,.94));
  --cmGrainBlend: overlay;
  --cmGrainAlpha: .05;
  --cmShadow:
    0 40px 120px rgba(0,0,0,.62),
    0 4px 22px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---------- свет в зале гаснет ---------- */

.modal .backdrop{ background: var(--cmBackdrop); }
.modal.modalOpen .backdrop{
  backdrop-filter: blur(14px) saturate(.86);
  -webkit-backdrop-filter: blur(14px) saturate(.86);
}

/* ---------- само окно ---------- */

.modal .sheet{
  background: var(--cmSheet);
  border:1px solid var(--cmLine);
  border-radius:20px;
  box-shadow: var(--cmShadow);
  color: var(--cmInk);
  /* «наводка на резкость»: кадр приходит слегка расфокусированным */
  opacity:0;
  transform: scale(1.028) translateY(10px);
  filter: blur(9px);
  transition:
    opacity .40s cubic-bezier(.16,1,.3,1),
    transform .62s cubic-bezier(.16,1,.3,1),
    filter .52s cubic-bezier(.16,1,.3,1);
}
html.dark .modal .sheet{ background: var(--cmSheet); }

.modal.modalOpen .sheet{
  opacity:1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}

/* тонкая световая линия по верхнему краю — как засветка плёнки */
.modal .sheet::before{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:0;
  height:1px;
  background: linear-gradient(90deg,
    transparent,
    var(--cmAccentLine) 30%,
    var(--cmAccentLine) 70%,
    transparent);
  opacity:.9;
  pointer-events:none;
  z-index:6;
}

/* зерно плёнки поверх всего окна, почти незаметное */
.modal .sheet::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:7;
  opacity: var(--cmGrainAlpha);
  mix-blend-mode: var(--cmGrainBlend);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ---------- шапка окна: титры ---------- */

/* в site.css у html.dark .sheetTop свой фон и вес селектора выше —
   поэтому гасим его отдельным правилом с тем же весом */
.modal .sheetTop,
html.dark .modal .sheetTop{
  background: transparent;
  border-bottom:0;
  padding: clamp(18px, 2.2vw, 26px) var(--cmPad) clamp(14px, 1.6vw, 18px);
  align-items:flex-start;
  position:relative;
  z-index:3;
}

.modal .sheetTitle{
  font-family:'Russo One', system-ui, sans-serif;
  font-weight:400;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height:1.14;
  letter-spacing:.005em;
  text-transform:uppercase;
  color: var(--cmInk);
}

/* подпись под названием — как строка в титрах: капс и разрядка */
.modal .sheetMeta{
  margin-top:9px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.20em;
  text-transform:uppercase;
  color: var(--cmAccentText);
  display:flex;
  align-items:center;
  gap:10px;
}
.modal .sheetMeta::before{
  content:"";
  width:18px;
  height:1px;
  background: var(--cmAccentLine);
  flex:0 0 auto;
}

.modal .close{
  width:40px;
  height:40px;
  flex:0 0 auto;
  border-radius:999px;
  border:1px solid var(--cmLine);
  background: var(--cmChip);
  color: var(--cmMuted);
  font-size:20px;
  line-height:1;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.modal .close:hover{
  background: rgba(129,216,208,.18);
  border-color: var(--cmAccentLine);
  color: var(--cmInk);
}

/* ---------- тело ---------- */

.modal .sheetBody{
  padding: 0 var(--cmPad) clamp(20px, 2.4vw, 28px);
  /* Колонка нужна, чтобы кнопку «смотреть» можно было прижать вправо
     обычным потоком, а не абсолютом: абсолют внутри прокручиваемого
     блока вставал не по месту. */
  display:flex;
  flex-direction:column;
  align-items:stretch;
  /* Полосу прокрутки прячем: она съедала правый край кадра, и кадр
     переставал быть симметричным. Колесо и тачпад работают как обычно. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.modal .sheetBody::-webkit-scrollbar{ width:0; height:0; }

/* Колонка-флекс по умолчанию сжимает содержимое, если оно не влезает
   по высоте. На узких экранах из-за этого кадр схлопывался в полоску
   в пару пикселей. Запрещаем сжатие — пусть окно просто прокручивается. */
.modal .sheetBody > *{ flex-shrink:0; }

/* ---------- кадр от края до края ---------- */

.modal .modalMedia{
  margin: 0 calc(var(--cmPad) * -1);
  width: auto;
  border-radius:0;
  border:0;
  border-top:1px solid var(--cmLineSoft);
  border-bottom:1px solid var(--cmLineSoft);
  background:#000;          /* летербокс чёрный в обеих темах */
  color: rgba(255,255,255,.5);
  position:relative;
}
/* мягкое затемнение по нижнему краю кадра — глубина, как в кино */
.modal .modalMedia::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:34%;
  pointer-events:none;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.42));
  opacity:.9;
}
/* у видео и iframe своё управление — плашку убираем, чтобы не мешала */
.modal .modalMedia:has(video)::after,
.modal .modalMedia:has(iframe)::after{ display:none; }

/* вертикальные ролики остаются по центру и в рамке */
.modal .modalMedia.vertical{
  margin:0 auto;
  width:min(420px, 100%);
  border-radius:16px;
  border:1px solid var(--cmLine);
  overflow:hidden;
}

/* ---------- строка просмотров ---------- */

.modal .modalViews{
  margin-top: clamp(16px, 2vw, 22px);
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:6px 13px;
  border:1px solid var(--cmLine);
  border-radius:999px;
  background: var(--cmChip);
  color: var(--cmMuted);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  align-self:flex-start;   /* капсула по содержимому, а не во всю ширину */
}
.modal .modalViews::before{
  content:"";
  width:14px;
  height:1px;
  background: var(--cmAccentLine);
  flex:0 0 auto;
}
.modal .modalViews:empty{ display:none; }

/* ---------- описание ---------- */

.modal .modalDesc{
  margin-top: clamp(14px, 1.8vw, 18px);
  /* Без ограничения по ширине: раньше стоял предел 70 символов, и текст
     обрывался на середине, оставляя справа пустое поле. */
  color: var(--cmMuted);
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height:1.72;
}
.modal .modalDesc a{
  color: var(--cmAccentText);
  text-decoration-color: var(--cmAccentLine);
}
.modal .modalDesc a:hover{ text-decoration-color: var(--cmAccentText); }
.modal .modalDesc strong,
.modal .modalDesc b{ color: var(--cmInk); }

/* ---------- теги ---------- */

.modal .sheetBody .tags{
  margin-top: clamp(16px, 2vw, 20px) !important;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.modal .sheetBody .tag{
  background: transparent;
  border:1px solid var(--cmLine);
  color: var(--cmFaint);
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 12px;
  transition: border-color .2s ease, color .2s ease;
}
.modal .sheetBody .tag:hover{
  border-color: var(--cmAccentLine);
  color: var(--cmInk);
}

/* ---------- кнопка «смотреть» ---------- */

.modal .sheetLink{
  position:static;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:flex-end;
  margin-top: clamp(16px, 2vw, 20px);
  padding:10px 20px;
  border-radius:999px;
  border:1px solid rgba(129,216,208,.55);
  background: var(--accent);
  color:#06181A;
  font-size:10.5px;
  letter-spacing:.16em;
  box-shadow: 0 10px 30px rgba(129,216,208,.22);
  transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease;
}
.modal .sheetLink:hover{
  opacity:1;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(129,216,208,.32);
}

/* ---------- размер окна по экранам ---------- */

/* На 2К (2560px) окно в 920px занимает примерно треть экрана — там всё
   хорошо. На FHD те же 920px съедают почти весь экран по высоте, потому
   что кадр 16:9 тянет за собой высоту. Поэтому ниже 2К окно уже на 20%,
   а на ноутбуках — ещё немного. Пропорции внутри не меняются, всё
   масштабируется вместе с шириной. */

@media (max-width: 1999px){
  .modal .sheet{
    width: min(740px, calc(100% - 24px));
    max-height: min(calc(100vh - 24px), 92vh);
  }
  /* заголовок тоже ужимаем, иначе в узком окне он разъезжается на три строки */
  .modal .sheetTitle{ font-size: clamp(18px, 1.25vw, 23px); }
}

@media (max-width: 1400px){
  .modal .sheet{ width: min(680px, calc(100% - 24px)); }
  .modal .sheetTitle{ font-size: clamp(17px, 1.5vw, 21px); }
}

@media (max-width: 1024px){
  .modal .sheet{ width: min(620px, calc(100% - 20px)); }
}

/* ---------- телефон: карточка выезжает снизу ---------- */

/* На телефоне окно по центру экрана выглядит как захват всего экрана:
   страница под ним не видна, и непонятно, куда возвращаться. Поэтому
   здесь карточка ведёт себя как в приложениях — выезжает снизу, верх
   страницы остаётся виден, наверху скруглённые углы и полоска-ручка.
   Так сразу понятно: это слой поверх, а не новая страница. */

@media (max-width: 760px){
  .modal{
    --cmPad: 16px;
    align-items: flex-end;   /* прижимаем к низу экрана */
  }

  .modal .sheet{
    width:100%;
    /* 86% высоты: сверху всегда остаётся полоска страницы */
    max-height: 86vh;
    max-height: 86dvh;       /* dvh учитывает адресную строку браузера */
    border-radius: 22px 22px 0 0;
    border-bottom:0;
    box-shadow: 0 -18px 60px rgba(0,0,0,.45);
    /* выезд снизу вместо наводки на резкость: и роднее, и легче для телефона */
    transform: translateY(100%);
    filter:none;
    transition:
      transform .46s cubic-bezier(.16,1,.3,1),
      opacity .24s ease;
    opacity:1;
  }
  .modal.modalOpen .sheet{
    transform: translateY(0);
    filter:none;
  }

  /* световая полоска сверху превращается в ручку, за которую «тянут» */
  .modal .sheet::before{
    left:50%;
    right:auto;
    top:8px;
    width:42px;
    height:4px;
    margin-left:-21px;
    border-radius:999px;
    background: var(--cmLine);
    opacity:1;
  }

  .modal .sheetTop{ padding-top:22px; }
  .modal .sheetTitle{ font-size:18px; }
  .modal .sheetLink{ align-self:stretch; justify-content:center; }
  .modal .sheetMeta{ letter-spacing:.14em; }

  /* запас под жестовую полоску на айфонах */
  .modal .sheetBody{
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* Совсем узкие телефоны: длинные названия занимали по семь строк */
@media (max-width: 380px){
  .modal{ --cmPad: 14px; }
  .modal .sheetTitle{ font-size:16px; line-height:1.2; }
  .modal .sheetTop{ padding:16px var(--cmPad) 12px; }
  .modal .close{ width:36px; height:36px; font-size:18px; }
  .modal .sheetMeta{ font-size:9.5px; letter-spacing:.1em; }
}

/* ---------- если человек отключил анимации ---------- */

@media (prefers-reduced-motion: reduce){
  .modal .sheet{
    filter:none !important;
    transform:none !important;
    transition: opacity .01s linear !important;
  }
  .modal .sheetLink{ transition:none; }
}