/**
 * Stage hero — слоёная сцена главной страницы.
 *
 * Сцена собрана из отдельных изображений (стена, пол, шторы, ламбрекен, зал),
 * а не из одного плоского кадра: только так её можно подать разным вьюпортам
 * с разным кропом и разным весом. Раньше грузились home-page-scene-bright.png
 * и -dark.png по 4096x2130 (9.4 МБ на любой экран), теперь 0.5-1.9 МБ.
 *
 * БРЕЙКПОИНТ задаётся в ОДНОМ месте — ZT_HERO_MOBILE_MQ в functions.php.
 * Оттуда он попадает в три места, которые обязаны совпадать:
 *   1) :root { --crop-w } — инлайном через wp_add_inline_style()
 *   2) <source media> у каждой <picture> во front-page.php
 *   3) media у <link rel=preload> в zt_hero_preload()
 * Рассинхрон ничем не ловится: <picture> отдаст мобильный кроп, а CSS посчитает
 * пропорции по 4096 — пол и зал разъедутся.
 */

:root {
  /* ширина кропа текущего набора: 4096 desktop, 1900 mobile (см. inline-стиль) */
  --crop-w: 4096;
  --floor-h: 365;
  --wall-h: 1858;         /* задняя стена, в пикселях мастера 4096 */
  /* --valance-h живёт в style.css: по нему считает высоту не только сцена,
     но и шапка на телефонах */
  --aud-overlap: 76;      /* верх зала заходит на пол, в пикселях мастера 4096 */
  --curtain-w: auto;      /* desktop: штора целиком */
  --stage-h: 100svh;      /* стена + пол */
  --dim: 0;               /* 0 = свет, 1 = темно; переключает JS по порогу скролла */
  --aud-bg: #310409;
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root { --curtain-w: 22vw; }
}

/* ── сцена: стена + пол = --stage-h, ламбрекен поверх ──────────────────── */
#fp-hero .stage {
  position: relative;
  height: var(--stage-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

/* стена занимает всё, что осталось от пола; фиксированную высоту ей не давать */
.stage__wall {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;   /* штора специально свисает ниже границы стены, на пол */
}
.stage__wall picture,
.stage__wall img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;  /* если что-то и уйдёт, то верх — он под ламбрекеном */
}

/* пол: высота из пропорции кропа — 1440:365 на mobile, 4096:365 на desktop */
.stage__floor {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: var(--crop-w) / var(--floor-h);
  overflow: hidden;
}
.stage__floor picture,
.stage__floor img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* свет/темнота: тёмный слой поверх светлого, прозрачность из --dim.
   Порог резкий (в JS), сам кроссфейд короткий — как было с плоским кадром. */
.stage .layer--dark {
  opacity: var(--dim);
  transition: opacity 0.5s ease;
  will-change: opacity;
}

/* Портретные планшеты и вертикальные панели (>=768): сцена не выше 125% ширины,
   иначе она растягивается на весь экран, а зал уезжает под фолд. */
@media (min-width: 768px) and (orientation: portrait) {
  :root { --stage-h: min(100svh, 125vw); }
}

/* ── шторы: низ опущен до середины пола ────────────────────────────────── */
.curtain {
  position: absolute;
  top: 0;
  bottom: calc(-50vw * var(--floor-h) / var(--crop-w));
  width: var(--curtain-w);
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}
.curtain--left  { left: 0; }
.curtain--right { right: 0; }
.curtain img {
  position: absolute;
  top: 0;
  height: 100%;
  width: auto;
  /* Tailwind preflight задаёт img{max-width:100%}. Контейнер .curtain на
     desktop имеет width:auto и схлопывается в 0px (оба img внутри спозиционированы
     абсолютно), поэтому 100% от нуля обнуляли бы и саму штору. */
  max-width: none;
}
/* при обрезке показываем внутренний (мягкий) край шторы, а не внешний */
.curtain--left  img { right: 0; left: auto; }
.curtain--right img { left: 0; right: auto; transform: scaleX(-1); }

/* подвязки только на широком desktop; ниже — только прямая штора.
   display:none у .curtain__tied работает вместе с loading="lazy" в разметке:
   без lazy браузер скачал бы подвязку даже на телефоне, где она скрыта. */
.curtain__tied { display: none; }

@media (min-width: 1280px) {
  /* Ширина шторы — натуральная при текущей высоте, но не шире --curtain-cap:
     на квадратных экранах (1280x1024, 1440x1440) штора иначе занимала 420-600px
     и проём превращался в узкую щель. Обрезается внешний край, мягкие складки
     у проёма остаются (в базовых правилах выше: левая штора прижата вправо). */
  :root {
    --curtain-cap: 25vw;
    --curtain-ar: calc(834 / 1928);   /* прямая штора */
  }
  .curtain {
    width: min(var(--curtain-cap), calc((var(--stage-h) - 50vw * var(--floor-h) / var(--crop-w)) * var(--curtain-ar)));
  }
}

/* Подвязки (884x1926) шире прямой шторы; показываем их, только когда кап почти
   не режет (16:10 и шире), иначе кисть уехала бы за край. */
@media (min-width: 1280px) and (min-aspect-ratio: 16/10) {
  :root { --curtain-ar: calc(884 / 1926); }
  .curtain__tied { display: block; }
  .curtain--left  .curtain__tied { left: 0; right: auto; }
  .curtain--right .curtain__tied { right: 0; left: auto; }
  /* кисть у внешнего края: прямую штору под подвязкой тоже прижимаем наружу */
  .curtain--left  .curtain__straight { left: 0; right: auto; }
  .curtain--right .curtain__straight { right: 0; left: auto; }
}

/* ── ламбрекен: поверх всего, высота по своей пропорции ────────────────── */
.valance {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  pointer-events: none;
}
.valance img { width: 100%; height: auto; }

/* ── зал ───────────────────────────────────────────────────────────────── */
#auditorium {
  position: relative;
  width: 100%;
  aspect-ratio: var(--crop-w) / 937;
  background: var(--aud-bg);
  overflow: hidden;
  contain: paint;
  /* перекрытие с полом в долях ширины кропа — работает на любом наборе */
  margin-top: calc(-1 * var(--aud-overlap) / var(--crop-w) * 100vw);
  z-index: 4;                        /* зал поверх кромки пола */
  color: var(--aud-bg);
  box-shadow: 0 2px 0 currentColor;
  transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}
#auditorium.auditorium-light { color: #f6f4ee; }

#auditorium-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--aud-bg);
  transition: background-color 0.5s ease;
  /* Подрез снизу при скролле. Раньше JS анимировал height, но height не
     композитится: каждый кадр стоил layout + paint всех шести слоёв, а
     will-change:height заставлял браузер держать слой ради некомпозитного
     свойства. Маска двигает одну градиентную границу — layout не трогается.
     --aud-fade — тот самый мягкий край в 25px, что был здесь и раньше. */
  --aud-visible: 100%;
  --aud-fade: 25px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--aud-visible) - var(--aud-fade)), transparent var(--aud-visible));
          mask-image: linear-gradient(to bottom, #000 calc(var(--aud-visible) - var(--aud-fade)), transparent var(--aud-visible));
  will-change: mask-image;
}

.auditorium__wall { width: 100%; display: block; pointer-events: none; }
.auditorium__wall img { width: 100%; height: auto; display: block; }
.auditorium__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  will-change: transform;
}
.auditorium__layer img { width: 100%; height: auto; display: block; }

/* Слайдер лежит поверх сцены. На desktop он занимает её целиком: слот слайдов
   там задан фиксированно и своим верхним отступом сам уходит из-под ламбрекена.
   На мобиле рамка сужается до задней стены — между нижней кромкой ламбрекена и
   полом, см. инлайновый блок в functions.php. */
#fp-hero-stage {
  position: absolute;
  /* Рамка слайдера = задняя стена: между нижней кромкой ламбрекена и верхом
     пола. Обе величины — из пропорций кропа, поэтому работает на любой ширине. */
  /* Шапка фиксирована и может быть выше ламбрекена (на 1280px — 87px против
     79px): стена начинается под тем, что ниже. */
  --wall-top: max(calc(100vw * var(--valance-h) / var(--crop-w)), var(--zt-header-h, 0px));
  top: var(--wall-top);
  left: 0;
  width: 100%;
  height: calc(var(--stage-h) - var(--wall-top) - 100vw * var(--floor-h) / var(--crop-w));
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .auditorium__layer { transform: none !important; }
  /* подрез снимаем целиком: иначе зал замрёт в случайно подрезанном
     состоянии, если настройку включили уже после загрузки страницы */
  #auditorium-frame { --aud-visible: 100% !important; }
  .stage .layer--dark { transition: none; }
}

/* Ламбрекен не ниже шапки: шапка поверх него прозрачная, и если ламбрекен короче,
   под ней оставалась полоса стены. На телефоне картинка растягивается по высоте. */
@media (max-width: 1023px) {
  .valance { min-height: var(--zt-header-h, 66px); overflow: hidden; }
  .valance img { height: 100%; min-height: var(--zt-header-h, 66px); object-fit: cover; object-position: center bottom; }
}