/* =========================================================================
   Кейс «Фильмоскоп» — тело кейса (пересобрано по макету Figma, фрейм 2652:13882).
   База — шаблон medcare-case. Система анимаций: reveal + reveal-text по словам
   + каскад сплитов + blur-появление hero.

   ПРАВИЛА ПЕРЕДАЧИ (design-handoff-animations.md):
   — всё скоуплено под .case-filmoskop (голые .container/.section/.tag/.media
     совпали бы с классами сайта и перекрасили общую шапку/подвал);
   — reset (* box-sizing, типографика) НЕ глобальный — тоже под .case-filmoskop;
   — без внешних CDN. Шрифт Manrope сайт подключает глобально (в пакете не дублируем;
     фолбэк — системный). Roboto/Roboto Condensed — шрифты приложения, показаны на
     блоке «Визуальный стиль» картинкой, в вёрстке кейса не используются;
   — медиа-слоты через aspect-ratio (--ar), не фиксированную высоту;
   — prefers-reduced-motion гасит появление и автоплей.
   ========================================================================= */

.case-filmoskop {
  /* --- Цвета (из макета: блок «Визуальный стиль») --- */
  --c-primary: #FA3C00;          /* акцент бренда — оранжевый */
  --c-primary-dark: #B4380F;     /* тёмный оранж для градиента CTA */
  --c-plum: #412C3B;             /* тёмная слива (старт градиента лого) */
  --c-text: #141210;             /* основной текст */
  --c-text-2: #2c2620;           /* вторичный текст */
  --c-muted: #8b8177;            /* приглушённый (лейблы) */
  --c-line: rgba(20, 18, 16, .12);
  --c-white: #ffffff;
  --c-pill-bg: #f3f0ec;          /* подложка пилюли-лейбла */
  --c-media-bg: #efe7db;         /* подложка медиа-слота, пока грузится */

  /* --- Типографика --- */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* --- Раскладка (сетка макета) --- */
  --maxw: 1440px;
  --pad: 80px;          /* боковые поля */
  --content: 1280px;    /* внутренняя ширина контента */

  /* --- Анимация появления --- */
  --reveal-dur: .7s;
  --reveal-ease: cubic-bezier(.22, .61, .36, 1);

  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-white);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* reset — только внутри кейса, не глобальный */
.case-filmoskop *, .case-filmoskop *::before, .case-filmoskop *::after { box-sizing: border-box; }
.case-filmoskop img, .case-filmoskop svg, .case-filmoskop video { display: block; max-width: 100%; }
.case-filmoskop a { color: inherit; text-decoration: none; }
.case-filmoskop ul { margin: 0; padding: 0; list-style: none; }
.case-filmoskop h1, .case-filmoskop h2, .case-filmoskop h3, .case-filmoskop p { margin: 0; }

/* -------------------------------- layout -------------------------------- */
.case-filmoskop .container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.case-filmoskop .section { padding-block: clamp(28px, 3.4vw, 44px); }

/* ---------------------------------- tags -------------------------------- */
.case-filmoskop .tag { display: inline-flex; align-items: center; white-space: nowrap; }
/* hero-теги: капсула, светлое стекло, тонкая рамка, фон-блюр (Transparent/Glass) */
.case-filmoskop .tag--glass {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* пилюля-лейбл секции: капсула, светло-серый фон, приглушённый серый текст */
.case-filmoskop .tag--pill {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #585858;
  background: #efefef;
  border-radius: 999px;
}

/* ---------------------------------- hero -------------------------------- */
.case-filmoskop .hero {
  position: relative;
  min-height: clamp(440px, 54vw, 700px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: #f0e7db;
}
.case-filmoskop .hero__media { position: absolute; inset: 0; z-index: 0; }
.case-filmoskop .hero__media .media-el { width: 100%; height: 100%; object-fit: cover; }
/* scrim: белый заголовок (сверху) и теги (снизу) читаемы на ЛЮБОМ кропе плёнки.
   object-fit:cover даёт разный кадр на десктопе/мобиле — без scrim'а белый текст
   слипается со светлыми бликами (мобилка). Середина почти чистая. Поверх медиа,
   под .hero__content (z:1). */
.case-filmoskop .hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20,18,16,.42) 0%, rgba(20,18,16,.12) 38%,
    rgba(20,18,16,.08) 62%, rgba(20,18,16,.30) 100%);
}
.case-filmoskop .hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* сайтовая шапка .navbar_new фикс-h=72 z=999 накрывает hero. Свой хедер пакета
     убран — сдвигаем контент вниз, чтобы заголовок не уезжал под навбар (плёнка
     остаётся full-bleed под ним). Тот же приём, что на pm2026-лендинге. */
  padding-block: calc(72px + clamp(16px, 4vw, 40px)) 48px;
}
.case-filmoskop .hero__title { flex: 1; display: flex; align-items: flex-start; }
.case-filmoskop .hero__word {
  display: block;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--c-white);
  font-size: clamp(34px, 9.6vw, 150px);
  /* тёмный ореол: белый заголовок читаем на любом кадре плёнки (object-fit:cover
     даёт светлый кроп сверху на мобиле — scrim'а мало над near-white бликами). */
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 2px 26px rgba(0,0,0,.5);
  animation: cfHero 1s var(--reveal-ease) both;
}
@keyframes cfHero {
  from { opacity: 0; transform: translateY(24px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.case-filmoskop .hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  animation: cfHero 1s var(--reveal-ease) .3s both;
}

/* --------------------------------- интро -------------------------------- */
.case-filmoskop .intro { padding-top: clamp(48px, 6vw, 96px); }
.case-filmoskop .intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 481px) minmax(0, 600px);
  justify-content: space-between;
  gap: 40px 80px;
}
.case-filmoskop .intro__left { display: flex; flex-direction: column; }
.case-filmoskop .intro__heading {
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: #070606;
}
.case-filmoskop .intro__release { margin-top: auto; padding-top: 40px; }
/* App Store / Google Play — подчёркнутые текст-ссылки, столбиком (как в макете) */
.case-filmoskop .intro__badges { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 12px; }
.case-filmoskop .intro__badge {
  font-size: 16px;
  font-weight: 400;
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}
.case-filmoskop .intro__badge:hover { color: var(--c-primary); }
.case-filmoskop .intro__right { display: flex; flex-direction: column; gap: 24px; }
/* лейбл раздела (Заказчик/Проект/Задачи) — semibold, тёмный */
.case-filmoskop .meta-label { display: block; font-size: 18px; font-weight: 600; color: #070606; letter-spacing: -.01em; }
/* мелкий серый лейбл (Результат) */
.case-filmoskop .meta-cap { display: block; font-size: 14px; font-weight: 400; color: #8e8e8e; }
/* значения — regular, приглушённый серый */
.case-filmoskop .meta-value {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: #585858;
}
.case-filmoskop .meta-value--sm { font-size: 15px; }
.case-filmoskop .meta-tasks { margin-top: 10px; display: flex; flex-direction: column; gap: 14px; }
.case-filmoskop .meta-tasks li {
  font-size: 15px;
  font-weight: 400;
  color: #585858;
}

/* ------------------------------- подписи -------------------------------- */
.case-filmoskop .caption__grid {
  display: grid;
  grid-template-columns: 380px minmax(0, 900px);
  gap: 24px;
  align-items: start;
}
.case-filmoskop .caption__tag { display: flex; }
.case-filmoskop .caption__text {
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.42;
  color: var(--c-text);
  letter-spacing: -.01em;
}
.case-filmoskop .caption__text--stack { display: flex; flex-direction: column; gap: 20px; }

/* --------------------------------- медиа -------------------------------- */
.case-filmoskop .media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  overflow: hidden;
  background: var(--c-media-bg);
}
.case-filmoskop .media .media-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* сплиты: 640 / 600 (лево крупнее) и 600 / 640 (право крупнее) */
.case-filmoskop .split { display: grid; gap: clamp(20px, 3vw, 40px); align-items: center; }
.case-filmoskop .split--a { grid-template-columns: 1.0667fr 1fr; }  /* лево 640 · право 600 */
.case-filmoskop .split--c { grid-template-columns: 1fr 1.0667fr; }  /* лево 600 · право 640 */
.case-filmoskop .split--top { align-items: start; }                  /* разная высота слотов */

/* ---------------------------------- CTA --------------------------------- */
.case-filmoskop .cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding: clamp(32px, 3.4vw, 44px) clamp(24px, 2.6vw, 40px);
  background: var(--c-primary);            /* плоский оранжевый #FA3C00 */
  color: var(--c-white);
}
.case-filmoskop .cta__text { flex: 1 1 auto; min-width: 0; }
.case-filmoskop .cta__title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--c-white);
  max-width: 36ch;          /* заголовок ложится в 2 строки */
}
.case-filmoskop .cta__subtitle {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 400;
  color: var(--c-white);    /* без ограничения ширины — подзаголовок в 1 строку */
}
.case-filmoskop .cta__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 0 40px;
  font-size: 18px;
  font-weight: 600;
  color: #070606;
  background: var(--c-white);
  border-radius: 999px;                    /* капсула */
  transition: transform .2s;
}
.case-filmoskop .cta__btn:hover { transform: translateY(-2px); }

/* ============================ scroll-reveal ============================== */
/* opacity:0 гейтится за .js-anim — класс ставит boot ТОЛЬКО когда реально
   стартовал. Без JS (или если boot упал) класса нет → контент виден сразу.
   mirrorRu.bodyHtml для краулеров в HTML есть всегда; это про живых юзеров.
   (Сергей, MR !90 #1 — тот же фикс, что в productcamp.) */
.case-filmoskop.js-anim .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
  will-change: opacity, transform;
}
.case-filmoskop.js-anim .reveal.is-visible { opacity: 1; transform: none; }
/* каскад для соседнего медиа в сплите */
.case-filmoskop .split .media:nth-child(2) { transition-delay: .12s; }

/* --- появление текста по словам (blur + slide, каскадом) --- */
.case-filmoskop.js-anim .reveal-text .rw {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em);
  filter: blur(6px);
  transition:
    opacity .55s ease,
    transform .6s var(--reveal-ease),
    filter .55s ease;
  transition-delay: var(--d, 0s);
  will-change: opacity, transform, filter;
}
.case-filmoskop.js-anim .reveal-text.is-visible .rw { opacity: 1; transform: none; filter: none; }

/* ============================== адаптив ================================= */
@media (max-width: 1200px) {
  .case-filmoskop { --pad: 40px; }
  .case-filmoskop .caption__grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 900px) {
  .case-filmoskop .intro__grid { grid-template-columns: 1fr; gap: 36px; }
  .case-filmoskop .intro__release { padding-top: 24px; }
  .case-filmoskop .split--a, .case-filmoskop .split--c { grid-template-columns: 1fr; }
  .case-filmoskop .cta { gap: 24px; }
}
@media (max-width: 768px) {
  .case-filmoskop { --pad: 20px; }
  .case-filmoskop .caption__text { font-size: 20px; }
  .case-filmoskop .cta__btn { width: 100%; }
}
@media (max-width: 480px) {
  .case-filmoskop .hero__content { padding-block: calc(72px + 14px) 24px; }
  .case-filmoskop .tag--glass { font-size: 13px; padding: 9px 14px; }
  .case-filmoskop .tag--pill { font-size: 14px; padding: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .case-filmoskop .reveal { opacity: 1; transform: none; transition: none; }
  .case-filmoskop .reveal-text .rw { opacity: 1; transform: none; filter: none; transition: none; }
  .case-filmoskop .hero__word, .case-filmoskop .hero__tags { animation: none; }
}