/* ==========================================================================
   Раскадровка «Смотритель»: главная (2026-09-30), «Работы» и «Моя история»
   (2026-10-01) - по просьбе заказчика.
   Хуки data-wm*, код js/watchman-fx.js, движок js/watchman.js.
   Правило заказчика: фотографии сайта не трогать - кадры стоят только там,
   где фото нет (панели «Работ», сцена, библиотека, фон FAQ, финал; на
   странице «Работы» - три карточки без фото; на «Моей истории» - сцена,
   карточки переходов, финал). Hero не трогаем (CLAUDE.md).
   ========================================================================== */

/* рамка одиночного кадра: коробка держит пропорции, холст заполняет её */
.wm-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.wm-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wm-frame--32 { aspect-ratio: 3 / 2; }

/* живая лампа: редкое мигание света у петель */
.wm-frame--loop canvas, .wm-panel-art canvas, .wm-spot-art canvas, canvas.wm-art { animation: wm-flicker 9s steps(1, end) infinite; }
@keyframes wm-flicker {
  0%, 100% { opacity: 1; }
  31% { opacity: .9; } 32% { opacity: 1; }
  33% { opacity: .94; } 34% { opacity: 1; }
  77% { opacity: .92; } 78% { opacity: 1; }
}

/* «Работы»: кадр в правой части раскрытой панели, слева уходит в панель под текст.
   Ширина задана от экрана, а не от панели: flex-ширина панели меняется на ходу,
   а холст не должен перерисовываться на каждом кадре прокрутки. Видимость = --w. */
.sfx-acc-panel .wm-panel-art { position: absolute; top: 0; right: 0; bottom: 0; width: min(40vw, 560px); opacity: calc(var(--w, 0) * .95); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, #000 55%); }
.sfx-acc-panel .wm-panel-art canvas { display: block; width: 100%; height: 100%; }
/* телефон: панели стоят столбиком, текст занимает почти всю панель - кадр слабее
   и гаснет к середине; на низких телефонах кадра в панели нет совсем */
@media (max-width: 760px) {
  .sfx-acc-panel .wm-panel-art { width: 100%; opacity: calc(var(--w, 0) * .5);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 20%, transparent 55%); mask-image: linear-gradient(180deg, #000 0%, #000 20%, transparent 55%); }
}
@media (max-width: 760px) and (max-height: 720px) { .sfx-acc-panel .wm-panel-art { display: none; } }

/* библиотека: кадр-комната в верхней части карточки */
.library-link .wm-frame--card { margin-bottom: .85rem; }

/* FAQ: тихая фактура стены под панелью */
.wm-has-bg { position: relative; isolation: isolate; overflow: hidden; }
.wm-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .16; pointer-events: none; display: block; }

/* финал: силуэт наполняется миром над собирающейся фразой */
.wm-frame--final { width: min(100%, 960px, calc(52svh * 16 / 9)); margin: 0 auto clamp(.5rem, 2svh, 1.5rem); }

/* закреплённая сцена «Поворотный момент»: трек длиннее экрана, кадр прилипает
   под меню. Высота липкой части - 100svh минус меню, иначе приём доигрывается
   раньше открепления (общее правило CLAUDE.md). */
.wm-scene { position: relative; height: 460svh; background: #000; }
.wm-stage { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden; background: #000; }
.wm-stage canvas { display: block; width: 100%; height: 100%; }
.wm-label { position: absolute; left: var(--gutter); bottom: clamp(1rem, 4svh, 2.5rem); margin: 0; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); pointer-events: none; }
@media (max-width: 760px) { .wm-scene { height: 400svh; } }

/* ---------- страница «Работы» (works.html) ----------
   Флагман: кадр 11 лежит слоем в верхней части квадрата и растворяется к
   низу, где стоит текст. Подсветка за курсором (::before) поднята над кадром,
   бейдж - над ней. Места под кадр хватает и в одну колонку: верхний отступ
   тела карточки считается от её ширины. */
.portfolio-card--spotlight .wm-spot-art { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 16 / 9; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 32%, transparent 88%); mask-image: linear-gradient(180deg, #000 0%, #000 32%, transparent 88%); }
.portfolio-card--spotlight .wm-spot-art canvas { display: block; width: 100%; height: 100%; }
.portfolio-card--spotlight.wm-has-art::before { z-index: 1; }
.portfolio-card--spotlight.wm-has-art .portfolio-tag { z-index: 2; }
.portfolio-card--spotlight.wm-has-art .portfolio-card-body { z-index: 2; padding-top: max(4.25rem, 44%); }
/* «Без прикрас» и «Программа»: кадр во всю картинку карточки вместо узора и значка */
.portfolio-card-image.wm-has-art { background: #000; }
.portfolio-card-image .wm-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform 300ms var(--ease-out); }
.portfolio-card:hover .portfolio-card-image .wm-art { transform: scale(1.04); }
.portfolio-card-image.wm-has-art .portfolio-tag { z-index: 1; }
.portfolio-card-image--mark.wm-has-art > svg { display: none; }
.portfolio-card-image--pattern.wm-has-art .pattern-mark { position: absolute; right: 1rem; bottom: 1rem; z-index: 1; font-size: .85rem; color: var(--fg-muted); background: var(--bg); padding: .28rem .6rem; }

/* ---------- страница «Моя история» (story.html) ----------
   Кадр перехода - третья колонка карточки, как кадр раскадровки рядом с
   текстом. Уже 1000px - кадр над текстом на всю ширину, пропорции 2:1, чтобы
   карточка в стопке не вырастала выше экрана. */
.story-card-inner.wm-has-art { grid-template-columns: auto minmax(0, 1fr) clamp(12rem, 25vw, 18.5rem); }
.wm-frame--story { grid-column: 3; grid-row: 1 / span 2; align-self: start; border-radius: 10px; box-shadow: 0 0 0 1px var(--border); }
@media (max-width: 999.98px) {
  .story-card-inner.wm-has-art { grid-template-columns: auto minmax(0, 1fr); }
  .wm-frame--story { grid-column: 1 / -1; grid-row: auto; order: -1; aspect-ratio: 2 / 1; margin-bottom: 1.25rem; }
}
@media (max-width: 620px) {
  .story-card-inner.wm-has-art { grid-template-columns: 1fr; }
  .wm-frame--story { margin-bottom: .35rem; border-radius: 8px; }
}
.story-final .wm-frame--final { border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
  .wm-frame--loop canvas, .wm-panel-art canvas, .wm-spot-art canvas, canvas.wm-art { animation: none; }
  .portfolio-card-image .wm-art { transition: none; }
  .portfolio-card:hover .portfolio-card-image .wm-art { transform: none; }
  .sfx-acc-panel .wm-panel-art { position: relative; width: 100%; height: 12rem; opacity: 1; -webkit-mask-image: none; mask-image: none; }
  .wm-scene { height: auto; }
  .wm-stage { position: relative; top: auto; height: min(70svh, 56.25vw); }
}

/* «Центр помощи» и «Консультации»: эскизы Ц2 и К3 вместо фото (2026-10-01, выбор заказчика).
   Коробка холста - как была у фото: «Центр» 1122:1402, на экранах ниже 950px не выше 42svh
   (как у фото в css/scroll-fx.css), «Консультации» - квадрат. Кадр ложится в коробку cover. */
.center-media canvas[data-wm] { display: block; width: 100%; aspect-ratio: 1122 / 1402; }
.help-media canvas[data-wm] { display: block; width: 100%; aspect-ratio: 1 / 1; }
@media (max-height: 950px) { .sfx-cs-center .center-media canvas[data-wm] { max-height: 42svh; } }