/* ============================================================================
   ОБЛОЖКИ ПРОЕКТОВ — общий контракт кадрирования
   ============================================================================
   Плитки на главной живут в диапазоне от портрета 3:4 (один слот) до панорамы
   25:8 (четыре слота). Одного кадрирования, красивого во всём диапазоне, не
   существует, поэтому обложка не «подгоняется под ширину», а объявляет, что
   в ней можно резать, а что нельзя.

   ПРАВИЛО SAFE AREA (единое для всех проектов)
   Внешние --cover-safe кадра — расходная кромка: её разрешено срезать при любой
   пропорции плитки. Всё, что внутри, обязано быть видно целиком и при нехватке
   места уменьшается, а не обрезается. Значение взято из обложки MDT, где отступ
   знака от кромки подбирался глазом.

   РОЛИ СЛОЁВ
     data-role="bg"      — фон: режется, кадрируется вокруг точки фокуса
     data-role="subject" — сюжет: живёт в масштабе фона, пока влезает в safe-рамку;
                           дальше уменьшается, но не режется
     data-role="edge"    — краевой элемент: прибит к боку, размер от высоты кадра,
                           едет вместе с кромкой (кусты, рамки, бейджи)
     data-role="mark"    — знак: как сюжет, но со своим отступом

   ЧТО ОБЪЯВЛЯЕТ ПРОЕКТ (переменные на элементе [data-cover])
     --art-ar   пропорция исходного артворка (ширина / высота)
     --subj-k   доля сюжета от ширины артворка (0…1)
     --subj-ar  пропорция самого сюжета (ширина / высота)
   Три числа снимаются с макета один раз и больше не трогаются: дальше формула
   сама держит сюжет в масштабе фона и сама уменьшает его на узких плитках.

   Отступы и кривые ховера заданы здесь один раз — отсюда гармония между
   проектами: они свойство системы, а не конкретной обложки.
   ========================================================================= */

:root{
  --cover-safe:.07;                                  /* расходная кромка, доля от кадра */
  --cover-mark-safe:.07;                             /* отступ знака от кромки */
  --cover-hover-scale:1.02;                          /* зум сюжета под курсором */
  --cover-hover-ease:320ms cubic-bezier(.2,.7,.15,1);/* кривая — как у бейджа watch на designemcd.io */
}

/* сцена меряет сама себя: внутренние размеры считаются в cqw/cqh и ничего
   не знают про вьюпорт страницы. Селекторы удвоены ([data-cover][data-cover]),
   чтобы перебивать правила плиток вида «.card .cover img» без !important. */
[data-cover][data-cover]{position:relative;overflow:hidden;container-type:size;background:var(--cover-bg,transparent);}
/* глобальное img,video{max-width:100%} со страницы не даёт слоям выйти за кромку —
   а кроп в том и состоит, что артворк крупнее кадра. Внутри обложки снимаем потолок. */
[data-cover][data-cover] [data-role]{max-width:none;max-height:none;}

/* фон — режется, точка фокуса задаётся переменными на слое */
[data-cover][data-cover] [data-role="bg"]{position:absolute;inset:0;width:100%;height:100%;
  transform:scale(var(--bg-zoom,1));   /* лёгкий доводочный зум фона, не трогая сюжет */
  object-fit:cover;object-position:var(--focal-x,50%) var(--focal-y,50%);
  background-size:cover;background-position:var(--focal-x,50%) var(--focal-y,50%);background-repeat:no-repeat;}

/* сюжет и знак: ширина = min(натуральная в масштабе фона, ширина safe-рамки,
   высота safe-рамки в пересчёте через пропорцию сюжета) */
[data-cover][data-cover] [data-role="subject"],
[data-cover][data-cover] [data-role="mark"]{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  aspect-ratio:var(--subj-ar,1);height:auto;
  width:min(
    calc(max(100cqw, 100cqh * var(--art-ar,1)) * var(--subj-k,1)),
    calc(100cqw * (1 - 2 * var(--cover-safe))),
    calc(100cqh * (1 - 2 * var(--cover-safe)) * var(--subj-ar,1))
  );}
[data-cover][data-cover] [data-role="mark"]{
  width:min(
    calc(max(100cqw, 100cqh * var(--art-ar,1)) * var(--subj-k,1)),
    calc(100cqw * (1 - 2 * var(--cover-mark-safe))),
    calc(100cqh * (1 - 2 * var(--cover-mark-safe)) * var(--subj-ar,1))
  );}
[data-cover][data-cover] [data-role="subject"] > *,
[data-cover][data-cover] [data-role="mark"] > *{width:100%;height:100%;display:block;object-fit:contain;}

/* data-role="fit" — вся обложка и есть сюжет: вписывается целиком, не режется никогда.
   Вписывается не в кадр, а в safe-рамку: отступ от кромки тот же, что у сюжетов и знаков,
   поэтому плитки разных проектов дышат одинаково. */
[data-cover][data-cover] [data-role="fit"]{position:absolute;
  left:calc(100cqw * var(--cover-safe));top:calc(100cqh * var(--cover-safe));
  width:calc(100cqw * (1 - 2 * var(--cover-safe)));height:calc(100cqh * (1 - 2 * var(--cover-safe)));
  object-fit:contain;object-position:50% 50%;}

/* data-role="art" — цельный артворк с плоским фоном (видео, кадр): заполняет плитку
   как обычный кроп, но никогда не срезает объявленный safe-прямоугольник. Когда пропорции
   плитки не дают выполнить оба условия, артворк уменьшается, а поля закрывает --cover-bg
   (тот же плоский цвет, что у его собственного фона, — стык не виден).
   Проект объявляет: --art-ar (пропорция кадра), --safe-w / --safe-h (доли кадра,
   которые обязаны остаться видны) и при необходимости --safe-cx / --safe-cy (центр
   прямоугольника в долях, по умолчанию середина). */
[data-cover][data-cover] [data-role="art"]{position:absolute;left:50%;top:50%;
  transform:translate(calc(-1 * var(--safe-cx,.5) * 100%),calc(-1 * var(--safe-cy,.5) * 100%));
  aspect-ratio:var(--art-ar,1);height:auto;object-fit:fill;
  /* у ролика/картинки крайние пиксели бывают тёмными (кодек, вьюпорт рендера) — на стыке
     с заливкой это читается тонкой полосой. Срезаем кромку: --art-trim, по умолчанию 0.25%. */
  clip-path:inset(var(--art-trim,.25%));
  /* масштаб таков, чтобы safe-прямоугольник ровно вписался в safe-рамку кадра и занял её
     целиком: по ширине либо по высоте — что окажется теснее. Остаток артворка выходит
     за кромку и срезается, недостаток закрывает --cover-bg. */
  width:calc(min(
    calc(100cqw * (1 - 2 * var(--cover-safe)) / var(--safe-w,1)),
    calc(100cqh * (1 - 2 * var(--cover-safe)) * var(--art-ar,1) / var(--safe-h,1))
  ) * var(--art-zoom,1));}   /* --art-zoom — ручная поправка масштаба, 1 = ровно по safe-рамке */

/* краевой элемент — размер от высоты сцены, привязка к боку в процентах:
   при сужении кадра не мельчает, а съезжает к центру вместе с кромкой */
[data-cover][data-cover] [data-role="edge"]{position:absolute;pointer-events:none;}
[data-cover][data-cover] [data-role="edge"] > img{display:block;height:100%;width:auto;}

/* ховер: сюжет чуть подаётся вперёд, фон и знак стоят на месте.
   Класс .hot — для обложек в iframe, куда мышь не долетает (pointer-events:none
   на обложке нужен, чтобы клик попадал по плитке, а не проваливался в кадр). */
/* зум пишем внутрь transform рядом со сдвигом: отдельное свойство scale применяется
   ДО transform, поэтому translate(-50%,-50%) считался от неувеличенного размера и
   опора уезжала в угол. Здесь порядок явный, центр остаётся центром. */
[data-cover][data-cover] [data-role="subject"]{transition:transform var(--cover-hover-ease);}
[data-cover]:hover [data-role="subject"],
[data-cover].hot [data-role="subject"]{transform:translate(-50%,-50%) scale(var(--cover-hover-scale));}

@media (prefers-reduced-motion:reduce){
  [data-cover][data-cover] [data-role="subject"]{transition:none;}
}