/* ============================================================
   NAVOR — SKELETON LOADING

   Подключается ПОСЛЕ style.css и ui.css:
       <link rel="stylesheet" href="skeleton.css?v=…">

   ── Устройство ─────────────────────────────────────────────
   Один источник анимации — .sk. Всё остальное (.sk-poster,
   .sk-line и прочее) только задаёт форму и размер. Поэтому
   поменять скорость или цвет мерцания можно в одном месте, а не
   в двадцати.

   Размеры НЕ выдуманы: каждый скелетон повторяет размеры своей
   настоящей карточки — .card 182px с постером 273px, .cat-card
   200px с постером 300px, .top-card 250×330 и так далее. Если
   ошибиться здесь, содержимое после загрузки прыгнет, а именно
   ради того, чтобы не прыгало, скелетоны и делают.

   Существующие классы .skel-line / .skel-title / .skel-sub /
   .skeleton-hero из ui.css оставлены рабочими: на них уже
   опирается разметка в favorites.html и index.html, и переименовать
   их значило бы менять работающий код ради единообразия имён.
   Ниже они сведены к общей анимации, чтобы мерцание везде было
   одинаковым.
   ============================================================ */

/* ---------- база ----------
   prefers-reduced-motion уважаем: постоянное мерцание на пол-экрана
   part людей вызывает дурноту, а сам скелетон без анимации свою
   работу выполняет — место занято, разметка не прыгает. */
.sk,
.skel-line{
  position:relative;
  overflow:hidden;
  background:#191e28;
  border-radius:8px;
}
.sk::after,
.skel-line::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.055) 45%,
    rgba(255,255,255,.085) 50%,
    rgba(255,255,255,.055) 55%,
    transparent 100%);
  animation:sk-shimmer 1.55s ease-in-out infinite;
}
@keyframes sk-shimmer{
  100%{transform:translateX(100%)}
}
@media (prefers-reduced-motion:reduce){
  .sk::after,.skel-line::after{animation:none}
}

/* Прежняя анимация из ui.css заменена общей: .skel-line теперь
   получает мерцание тем же способом, что и .sk. Собственный фон и
   background-size ей больше не нужны. */
.skel-line{
  display:block;height:14px;border-radius:6px;margin-top:10px;
  background-image:none;background-size:auto;animation:none;
}

/* ---------- элементы ---------- */
.sk-line{height:13px;border-radius:6px}
.sk-line + .sk-line{margin-top:8px}
.sk-line.w70{width:70%}
.sk-line.w55{width:55%}
.sk-line.w45{width:45%}
.sk-line.w35{width:35%}
.sk-line.w90{width:90%}
.sk-chip{height:22px;width:46px;border-radius:7px}
.sk-btn{height:46px;width:180px;border-radius:14px}
.sk-circle{border-radius:50%}

/* Скелетоны не кликаются и не читаются с экрана: это заглушки,
   а не содержимое. */
[class*="sk-card"],
.sk,
.skeleton{pointer-events:none;user-select:none}

/* ---------- карточка ряда (.card, 182×273) ---------- */
.sk-card{width:182px;flex-shrink:0}
.sk-card .sk-poster{height:273px;border-radius:var(--radius)}
.sk-card .sk-meta{margin-top:11px}

/* ---------- широкая карточка («часто ищут», 300px) ---------- */
.sk-card-wide{width:300px;flex-shrink:0}
.sk-card-wide .sk-poster{aspect-ratio:16/9;border-radius:var(--radius)}
@media (max-width:1024px){.sk-card-wide{width:190px}}

/* ---------- карточка каталога (.cat-card, 200×300) ---------- */
.sk-card-cat{width:200px;flex-shrink:0}
.sk-card-cat .sk-poster{height:300px;border-radius:var(--r-md)}
.sk-card-cat .sk-meta{margin-top:12px}

/* ---------- Топ-10 (.top-card, 250×330) ----------
   Постер сдвинут на 54px слева — там место под крупную цифру. */
.sk-card-top{width:250px;height:330px;flex-shrink:0;position:relative}
.sk-card-top .sk-poster{position:absolute;inset:0 0 0 54px;border-radius:var(--r-lg)}

/* ---------- премьера (.prem-card, 392px) ---------- */
.sk-card-prem{
  width:392px;flex-shrink:0;border:1px solid var(--line);
  border-radius:22px;overflow:hidden;background:var(--surface);
}
.sk-card-prem .sk-poster{width:100%;aspect-ratio:396/238;border-radius:0}
.sk-card-prem .sk-body{padding:16px 18px 20px}
@media (max-width:1024px){.sk-card-prem{width:300px}}

/* ---------- «Моё» и результаты поиска (2:3) ---------- */
.sk-card-fav .sk-poster{aspect-ratio:2/3;border-radius:var(--r-md)}
.sk-card-fav .sk-meta{margin-top:11px}

/* ---------- актёр (круглый) ----------
   Размеры повторяют .cast и .cast-face со страницы фильма,
   ВКЛЮЧАЯ точку перелома на 1024px: там карточка сужается со 112
   до 92px, а аватар — со 100 до 80. Без этого на телефоне
   скелетон был бы шире настоящей карточки, и ряд дёргался бы в
   момент подмены — ровно то, ради чего скелетоны и делают. */
.sk-cast{width:112px;flex-shrink:0;text-align:center}
.sk-cast .sk-face{width:100px;height:100px;border-radius:50%;margin:0 auto 12px}
.sk-cast .sk-line{margin-left:auto;margin-right:auto}
@media (max-width:1024px){
  .sk-cast{width:92px}
  .sk-cast .sk-face{width:80px;height:80px}
}

/* ---------- герой / большой баннер ----------
   Повторяет .hero: та же высота и те же отступы, поэтому подмена
   на настоящий слайд не двигает страницу. */
.sk-hero{
  position:relative;min-height:88vh;
  display:flex;align-items:flex-end;
  padding:120px var(--pad-x) 60px;
  background:linear-gradient(160deg,#151a24,#0d1016);
  overflow:hidden;
}
.sk-hero .sk-hero-inner{width:100%;max-width:1024px}
.sk-hero .sk-logo{width:44%;height:56px;margin-bottom:18px;border-radius:12px}
.sk-hero .sk-meta-row{display:flex;gap:10px;margin-bottom:16px}
.sk-hero .sk-desc{margin-bottom:22px}
.sk-hero .sk-btns{display:flex;gap:12px}
.sk-hero .sk-btn.sq{width:46px}
@media (max-width:1024px){
  .sk-hero{min-height:74vh;padding:100px var(--pad-x) 40px}
  .sk-hero .sk-logo{width:70%;height:38px}
  .sk-hero .sk-btn{width:140px;height:42px}
}

/* ---------- ряд скелетонов ----------
   Повторяет .row: те же отступы и тот же зазор, чтобы карточки
   стояли ровно там, где встанут настоящие. */
.sk-row{
  display:flex;gap:18px;overflow:hidden;
  padding:4px var(--pad-x) 10px;
}
@media (max-width:1024px){.sk-row{gap:12px}}

/* ---------- уход скелетона ----------
   Скелетон не выдёргивается: он гаснет за 260 мс, а содержимое
   проявляется. Резкая подмена читается как «моргнуло», хотя всё
   загрузилось нормально. */
.sk-fade{transition:opacity .26s ease}
.sk-fade.sk-hide{opacity:0}
.sk-in{animation:sk-in .3s ease both}
@keyframes sk-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .sk-in{animation:none}
  .sk-fade{transition:none}
}

/* ---------- картинка, которая ещё грузится ----------
   Постер может приехать позже разметки. Пока он не загружен,
   держим под ним подложку скелетона: иначе на месте картинки
   мелькает пустой прямоугольник. */
.sk-img{opacity:0;transition:opacity .28s ease}
.sk-img.sk-ready{opacity:1}