/* =====================================================================
   STORYVERSE FX — слой эффектов поверх основного сайта
   Подключается после style.css. Порядок — сверху вниз по странице.
   Каждое свойство задаётся один раз; адаптив и reduced-motion — в конце.
   ===================================================================== */

:root {
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --fx-red: #ff3b30;
  --fx-core: #ff2a2a;
}


/* ---------- Плёнка: зерно + виньетка (лёгкие: без режима наложения над видео) ---------- */
.fx-film {
  position: fixed; inset: -120px; z-index: 9990; pointer-events: none;
  background-size: 180px 180px; opacity: 0.09;
  animation: fx-grain 0.5s steps(5) infinite;
}
@keyframes fx-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-60px, 30px); } 40% { transform: translate(40px, -50px); }
  60% { transform: translate(-25px, 60px); } 80% { transform: translate(60px, -15px); } 100% { transform: translate(0, 0); }
}
.fx-vignette {
  position: fixed; inset: 0; z-index: 9989; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 45%, transparent 62%, rgba(0,0,0,0.32) 100%);
}
body.fx-playing .fx-film, body.fx-playing .fx-vignette { opacity: 0; animation: none; transition: opacity 0.4s; }

/* ---------- Лоадер (показывается, только если загрузка дольше 0.6 с) ---------- */
.fx-loader {
  position: fixed; inset: 0; z-index: 10001; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: #050505; opacity: 0; visibility: hidden; transition: opacity 0.6s var(--fx-ease), visibility 0s 0.6s;
}
.fx-loader.is-on { opacity: 1; visibility: visible; transition: opacity 0.3s; }
.fx-loader.is-done { opacity: 0; visibility: hidden; transition: opacity 0.8s var(--fx-ease), visibility 0s 0.8s; }
.fx-loader img { width: min(260px, 60vw); height: auto; animation: fx-ld 1.8s ease-in-out infinite; }
@keyframes fx-ld { 50% { opacity: 0.45; } }
.fx-loader__bar { width: 160px; height: 1px; background: rgba(255,255,255,0.15); }
.fx-loader__bar i { display: block; height: 100%; width: 0; background: #fff; transition: width 0.2s linear; }
.fx-loader__pct { font-family: var(--fx-mono); font-size: 10px; letter-spacing: 0.2em; color: rgba(255,255,255,0.5); }

/* ---------- Переход CRT между Production и Core ---------- */
.fx-crt { position: fixed; inset: 0; z-index: 10000; pointer-events: none; background: #000; opacity: 0; }
.fx-crt::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: #fff; box-shadow: 0 0 24px 6px rgba(255,255,255,0.7); transform: scaleX(0);
}
html.fx-crt-off body > *:not(.fx-crt):not(.fx-film):not(.fx-vignette) { animation: fx-crtOff 0.55s cubic-bezier(0.7, 0, 0.84, 0) forwards; }
html.fx-crt-off .fx-crt { animation: fx-veil 0.55s forwards; }
html.fx-crt-off .fx-crt::after { animation: fx-line 0.55s forwards; }
@keyframes fx-crtOff { 0% { transform: scale(1, 1); filter: brightness(1); } 55% { transform: scale(1, 0.004); filter: brightness(3); } 100% { transform: scale(0, 0.004); filter: brightness(6); } }
@keyframes fx-veil { 0% { opacity: 0; } 35%, 100% { opacity: 1; } }
@keyframes fx-line { 0%, 50% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* ---------- Шапка + переключатель PRODUCTION / CORE ---------- */
.fx-hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 16px clamp(16px, 3vw, 40px);
  transition: background 0.4s, opacity 0.9s var(--fx-ease) 0.35s, transform 0.9s var(--fx-ease) 0.35s;
}
.fx-hdr.is-solid { background: rgba(6,6,6,0.86); }   /* без backdrop-filter: размытие над движущимися видео пересчитывается каждый кадр — фризы */
body.fx-playing .fx-hdr { opacity: 0; transform: translateY(-24px); pointer-events: none; transition-delay: 0s; transition-duration: 0.4s; }
.fx-hdr__logo img { height: 36px; width: auto; display: block; }
.fx-hdr__right { justify-self: end; display: flex; align-items: center; gap: 22px; }
.fx-hdr__cta {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.16); padding: 10px 15px; border-radius: 999px;
  transition: border-color 0.3s, background 0.3s;
}
.fx-hdr__cta:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.fx-tc { font-family: var(--fx-mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }
.fx-tc--rec::before { content: "●"; color: var(--fx-red); margin-right: 8px; animation: fx-blink 1.6s steps(1) infinite; }
@keyframes fx-blink { 50% { opacity: 0; } }

.fx-switch {
  position: relative; display: flex; padding: 3px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(10,10,10,0.72);
}
.fx-switch a {
  position: relative; z-index: 1; font-family: "Suisse Intl", "Inter", system-ui, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; padding: 9px 16px; border-radius: 999px;
  color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.4s var(--fx-ease);
}
.fx-switch a:hover { color: #fff; }
.fx-switch a.is-on { color: #000; }
.fx-switch a[data-core].is-on { color: #fff; }
.fx-switch a:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.fx-switch__pill {
  position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 999px; background: #f2f2f2;
  transition: transform 0.55s var(--fx-ease), width 0.55s var(--fx-ease), background 0.4s;
}
.fx-switch.to-core .fx-switch__pill { background: var(--fx-core); }

/* ---------- Видоискатель: 4 уголка + подписи (общий компонент) ---------- */
.fx-vf { position: absolute; inset: var(--vf-inset, 16px); z-index: 4; pointer-events: none; }
.fx-vf i { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(255,255,255,0.75); transition: transform 0.5s var(--fx-ease), opacity 0.4s; }
.fx-vf i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.fx-vf i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.fx-vf i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.fx-vf i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.fx-vf__lbl { position: absolute; font-family: var(--fx-mono); font-size: 10px; letter-spacing: 0.1em; color: rgba(255,255,255,0.8); white-space: nowrap; }
.fx-vf__lbl--tl { top: 4px; left: 26px; } .fx-vf__lbl--tr { top: 4px; right: 26px; }
.fx-vf__lbl--bl { bottom: 4px; left: 26px; } .fx-vf__lbl--br { bottom: 4px; right: 26px; }
.fx-vf__rec::before { content: "●"; color: var(--fx-red); margin-right: 6px; animation: fx-blink 1.6s steps(1) infinite; }
/* вариант «по наведению»: уголки выезжают, подписи проявляются */
.fx-vf--hover i, .fx-vf--hover .fx-vf__lbl { opacity: 0; }
.fx-vf--hover .fx-vf__lbl { transition: opacity 0.4s; }
.fx-vf--hover i:nth-child(1) { transform: translate(-8px, -8px); }
.fx-vf--hover i:nth-child(2) { transform: translate(8px, -8px); }
.fx-vf--hover i:nth-child(3) { transform: translate(-8px, 8px); }
.fx-vf--hover i:nth-child(4) { transform: translate(8px, 8px); }
:is(.works-image, .video-preview):hover .fx-vf--hover i { opacity: 1; transform: none; }
:is(.works-image, .video-preview):hover .fx-vf--hover .fx-vf__lbl { opacity: 1; }

/* ---------- Заголовки секций: скрыты до появления, потом «прописываются» ---------- */
.section-title:not(.fx-in) .title-accent { clip-path: inset(0 100% 0 0); }
.section-title:not(.fx-in) .title-main { opacity: 0; }
.section-title.fx-in .title-accent { animation: fx-wipe 0.9s cubic-bezier(0.7, 0, 0.2, 1) both; }
.section-title.fx-in .title-main { animation: fx-title 1.4s var(--fx-ease) 0.3s both; }
@keyframes fx-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fx-title { from { opacity: 0; filter: blur(10px); letter-spacing: 0.3em; } to { opacity: 1; filter: blur(0); letter-spacing: 0.05em; } }
@keyframes fx-title-m { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }
/* на узких экранах разрядка не анимируется: иначе длинный заголовок сначала переносится на 2 строки и потом прыгает */
@media (max-width: 768px) { .section-title.fx-in .title-main { animation-name: fx-title-m; } }

/* ---------- Текст «проявляется» по словам при скролле ---------- */
.fx-w { opacity: 0.22; transition: opacity 0.5s ease; }
.fx-w.on { opacity: 1; }

/* ---------- «Проявка» кадров при появлении (портфолио, FAQ) ---------- */
.fx-dev { opacity: 0; }
.fx-dev.is-in { animation: fx-develop 0.9s var(--fx-ease) calc(var(--i, 0) * 60ms) both; }
@keyframes fx-develop {
  0% { opacity: 0; filter: brightness(0) contrast(1.6) grayscale(1); transform: translateY(24px) scale(0.985); }
  40% { opacity: 1; filter: brightness(1.2) contrast(1.15) grayscale(0.6); }
  100% { opacity: 1; filter: none; transform: none; }
}

/* =====================================================================
   1. ПЕРВЫЙ ЭКРАН
   ===================================================================== */
.fx-lens { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 1; transition: opacity 1.4s var(--fx-ease) 0.1s; }
.fx-lens.is-off { opacity: 0; transition: opacity 0.35s var(--fx-ease); }
.hero__content:not(.hidden) { transition: opacity 1.1s var(--fx-ease) 0.2s !important; }
.hero__overlay { transition: opacity 1.2s ease !important; }
.scroll-hint > * { opacity: 0.5; }

.hero .fx-vf { --vf-inset: 84px clamp(16px, 3vw, 40px) 26px; z-index: 3; transition: opacity 0.9s var(--fx-ease) 0.35s; }
body.fx-playing .hero .fx-vf { opacity: 0; transition: opacity 0.4s; }
.hero .fx-vf i { width: 26px; height: 26px; border-color: rgba(255,255,255,0.45); }
.hero .fx-vf__lbl { color: rgba(255,255,255,0.55); font-size: 11px; }
.hero .fx-vf__lbl--tl, .hero .fx-vf__lbl--tr { top: 12px; }
.hero .fx-vf__lbl--bl, .hero .fx-vf__lbl--br { bottom: 12px; }
.hero .fx-vf__lbl--tl, .hero .fx-vf__lbl--bl { left: 46px; }
.hero .fx-vf__lbl--tr, .hero .fx-vf__lbl--br { right: 46px; }

#playReel.hero__button {
  font-size: 12px; letter-spacing: 0.24em; padding: 16px 30px;
  border: 1px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.08);
  transition: background 0.3s, border-color 0.3s, transform 0.4s var(--fx-ease);
}
#playReel.hero__button:hover { background: rgba(255,255,255,0.18); border-color: #fff; }

/* логотип: «линза» при приближении курсора (переменные ставит JS) */
.hero__title-logo {
  --dx: 0; --dy: 0; --near: 0;
  translate: calc(var(--dx) * var(--near) * -10px) calc(var(--dy) * var(--near) * -6px);
  filter:
    drop-shadow(calc(var(--dx) * -4px) calc(var(--dy) * -2px) 0 rgba(255, 45, 45, calc(var(--near) * 0.55)))
    drop-shadow(calc(var(--dx) * 4px) calc(var(--dy) * 2px) 0 rgba(70, 170, 255, calc(var(--near) * 0.5)))
    drop-shadow(0 0 calc(10px + var(--near) * 26px) rgba(255, 150, 100, calc(0.12 + var(--near) * 0.4)));
  transition: translate 0.5s var(--fx-ease), filter 0.35s ease;
}

/* панель управления шоурилом (видна при просмотре на месте) */
.fx-ctl {
  position: absolute; left: 50%; bottom: clamp(64px, 9vh, 92px); z-index: 7; transform: translate(-50%, 16px);
  width: min(880px, calc(100% - 32px)); display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(8,8,8,0.62);
  font-family: var(--fx-mono); font-size: 11px; letter-spacing: 0.08em; color: #fff;
  opacity: 0; pointer-events: none; transition: opacity 0.45s var(--fx-ease), transform 0.45s var(--fx-ease);
}
body.fx-playing .fx-ctl.is-awake { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.fx-ctl__b { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: #fff; cursor: pointer; transition: background 0.3s; }
.fx-ctl__b:hover, .fx-ctl__b:focus-visible { background: rgba(255,255,255,0.12); outline: none; }
.fx-ctl__b svg { width: 15px; height: 15px; fill: currentColor; }
.fx-ctl__play .i-play, .fx-ctl.is-paused .fx-ctl__play .i-pause { display: none; }
.fx-ctl.is-paused .fx-ctl__play .i-play { display: inline; }
.fx-ctl__mute .i-x, .fx-ctl.is-muted .fx-ctl__mute .i-wave { display: none; }
.fx-ctl.is-muted .fx-ctl__mute .i-x { display: inline; }
.fx-ctl__t { flex: none; color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; }
.fx-ctl__t b { color: #fff; font-weight: 500; }
.fx-ctl__bar { position: relative; flex: 1; height: 18px; cursor: pointer; outline: none; }
.fx-ctl__bar::before, .fx-ctl__buf, .fx-ctl__pos { content: ""; position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.fx-ctl__bar::before { right: 0; background: rgba(255,255,255,0.15); }
.fx-ctl__buf { width: 0; background: rgba(255,255,255,0.25); }
.fx-ctl__pos { width: 0; background: linear-gradient(90deg, #fff, var(--fx-red)); }
.fx-ctl__pos::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(255,59,48,0.8); transform: scale(0); transition: transform 0.2s; }
.fx-ctl__bar:hover .fx-ctl__pos::after, .fx-ctl__bar:focus-visible .fx-ctl__pos::after { transform: scale(1); }
.fx-ctl__vol { flex: none; width: 76px; accent-color: var(--fx-red); cursor: pointer; }
.hero:fullscreen { width: 100vw; height: 100vh; }

/* =====================================================================
   2. О РАБОТЕ / ПРИОРИТЕТЫ
   Параллакс (наклон блока, сдвиг фото и текста) — в fx.js инлайн-стилями:
   так он не зависит от спорящих CSS-правил style.css.
   ===================================================================== */
.about-rotator--concept .about-panel__card .fx-vf { --vf-inset: 16px; }
.about-rotator.fx-focus .about-rotator__viewport { transform-style: preserve-3d; will-change: transform; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.about-rotator__viewport.fx-drag { cursor: grabbing; }
@media (hover: hover) { .about-rotator__viewport { cursor: grab; } }
/* смена слайда — как перевод фокуса: старый уходит в размытие, новый выходит в резкость */
.about-rotator.fx-focus .about-panel {
  filter: blur(16px); transform: scale(1.04);
  transition: opacity 0.8s var(--fx-ease), filter 0.8s var(--fx-ease), transform 1.1s var(--fx-ease), visibility 0s linear 0.8s;
}
.about-rotator.fx-focus .about-panel.is-active {
  filter: blur(0); transform: none;
  transition: opacity 0.9s var(--fx-ease) 0.15s, filter 1s var(--fx-ease) 0.15s, transform 1.2s var(--fx-ease) 0.15s, visibility 0s;
}
/* фото: ч/б и размыто → при наведении «фокусируется» в цвет */
@media (hover: hover) and (pointer: fine) {
  .about-rotator.about-rotator--concept .about-panel.is-active .about-panel__card .about-panel__photo img { transition: filter 0.9s var(--fx-ease), transform 1.4s var(--fx-ease) !important; }
  .about-rotator.about-rotator--concept .about-panel.is-active .about-panel__card:hover .about-panel__photo img { filter: grayscale(0) saturate(1) brightness(0.5) blur(0) !important; transform: scale(1.04); }
  .about-panel__title, .about-panel__lead { transition: scale 0.9s var(--fx-ease), color 0.6s, letter-spacing 0.9s var(--fx-ease); }
  .about-panel.is-active .about-panel__card:hover .about-panel__title { scale: 1.05; letter-spacing: 0.01em; }
  .about-panel.is-active .about-panel__card:hover .about-panel__lead { color: #fff; }
}
/* текст слайда поднимается строками (через translate — не ломает родные transform счётчика 03 / 04) */
.about-panel.is-active .about-panel__step { animation: fx-fade 0.9s var(--fx-ease) 0.3s both; }
.about-panel.is-active .about-panel__title { animation: fx-rise 0.9s var(--fx-ease) 0.4s both; }
.about-panel.is-active .about-panel__divider { animation: fx-line-in 0.9s var(--fx-ease) 0.5s both; }
.about-panel.is-active .about-panel__lead { animation: fx-rise 0.9s var(--fx-ease) 0.58s both; }
@keyframes fx-rise { from { opacity: 0; translate: 0 18px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: none; } }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (min-width: 901px) { .about-rotator.about-rotator--concept .about-panel__step { right: 52px; top: 22px; } }
/* стрелки: всегда видны, красные */
.about-rotator .about-rotator__hit { z-index: 6; }
.about-rotator .about-rotator__hit::before { opacity: 1 !important; transform: translateY(-50%) scale(1) !important; width: 46px; height: 46px; background: #d91f1f; border-color: var(--fx-red); box-shadow: 0 0 24px rgba(255,40,40,0.35); transition: transform 0.3s var(--fx-ease), box-shadow 0.3s; }
.about-rotator .about-rotator__hit::after { opacity: 1 !important; color: #fff; }
.about-rotator .about-rotator__hit--prev::before { left: calc(10% - 17px); }
.about-rotator .about-rotator__hit--next::before { right: calc(10% - 17px); }
.about-rotator .about-rotator__hit:hover::before { transform: translateY(-50%) scale(1.1) !important; box-shadow: 0 0 34px rgba(255,40,40,0.6); }
/* точки → полоски прогресса как в сторис */
.about-rotator__dots { gap: 8px !important; }
.about-rotator .about-rotator__dot {
  position: relative; width: 42px !important; height: 3px !important; padding: 10px 0 !important; border: 0 !important; border-radius: 2px !important; box-shadow: none !important; cursor: pointer;
  background: linear-gradient(rgba(255,255,255,0.18), rgba(255,255,255,0.18)) center / 100% 3px no-repeat !important;
}
.about-rotator .about-rotator__dot::after { content: ""; position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; width: 0; border-radius: 2px; background: #fff; }
.about-rotator .about-rotator__dot.is-active::after { animation: fx-story 5.5s linear forwards; background: var(--fx-red); }
.about-rotator:hover .about-rotator__dot.is-active::after { animation-play-state: paused; }
@keyframes fx-story { to { width: 100%; } }

/* ---------- Серые подложки («О работе», «Этапы»): сетка кадра, луч, водяной знак, кромка ---------- */
.about > .container, .production > .container { position: relative; z-index: 1; }
.fx-sub { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx-sub__beam {
  position: absolute; inset: -30%;
  background: radial-gradient(38% 30% at 30% 30%, rgba(255,255,255,0.045), transparent 70%), radial-gradient(30% 26% at 72% 64%, rgba(255,120,90,0.035), transparent 70%);
  animation: fx-beam 26s ease-in-out infinite alternate;
}
@keyframes fx-beam { to { transform: translate(8%, -6%) rotate(6deg); } }
.fx-sub__grid {
  position: absolute; inset: 60px clamp(16px, 4vw, 60px);
  background:
    linear-gradient(90deg, transparent calc(33.333% - 0.5px), rgba(255,255,255,0.045) calc(33.333% - 0.5px) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px) calc(66.666% - 0.5px), rgba(255,255,255,0.045) calc(66.666% - 0.5px) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
    linear-gradient(180deg, transparent calc(33.333% - 0.5px), rgba(255,255,255,0.035) calc(33.333% - 0.5px) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px) calc(66.666% - 0.5px), rgba(255,255,255,0.035) calc(66.666% - 0.5px) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.fx-sub__word { position: absolute; left: -2%; bottom: 4%; white-space: nowrap; font-size: clamp(90px, 16vw, 260px); font-weight: 900; line-height: 1; letter-spacing: 0.02em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.09); will-change: transform; }
.fx-sub__edge { position: absolute; top: 50%; white-space: nowrap; font-family: var(--fx-mono); font-size: 10px; letter-spacing: 0.3em; color: rgba(255,255,255,0.13); text-transform: uppercase; }
.fx-sub__edge--l { left: 18px; transform: translate(-50%, -50%) rotate(-90deg); }
.fx-sub__edge--r { right: 18px; transform: translate(50%, -50%) rotate(90deg); }
.fx-sub__x { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; opacity: 0.22; }
.fx-sub__x::before, .fx-sub__x::after { content: ""; position: absolute; background: #fff; }
.fx-sub__x::before { left: 6.5px; top: 0; width: 1px; height: 14px; }
.fx-sub__x::after { top: 6.5px; left: 0; height: 1px; width: 14px; }

/* =====================================================================
   3. ПОРТФОЛИО
   ===================================================================== */
.works-image .fx-vf { --vf-inset: 12px; }
@media (hover: hover) {
  .works-grid .works-image { transition: transform 1.2s var(--fx-ease), filter 0.9s var(--fx-ease), box-shadow 0.9s; }
  .works-grid:hover .works-image:not(:hover) { filter: brightness(0.45) saturate(0.4) blur(1px); }
  .works-grid .works-image:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,0.55); }
}
/* подписи: название фильма и жанр как титры */
.works-text .works-name {
  font-family: "Clash Display", "Suisse Intl Expanded", "Inter", sans-serif; font-weight: 600;
  font-size: clamp(15px, 1.45vw, 21px); letter-spacing: 0.03em; line-height: 1.15; text-transform: uppercase;
  transition: letter-spacing 0.6s var(--fx-ease), color 0.4s;
}
.works-item:hover .works-name { letter-spacing: 0.07em; }
.works-text .works-category { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-family: var(--fx-mono); font-size: 10px !important; font-weight: 400 !important; letter-spacing: 0.16em !important; color: rgba(255,255,255,0.5) !important; }
.fx-genre { display: inline-flex; align-items: center; gap: 7px; }
.fx-genre::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--fx-red); box-shadow: 0 0 8px rgba(255,59,48,0.7); }
.fx-year { padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.18); }
.fx-sep { display: none; }

/* =====================================================================
   4. ПОТОК — проходные работы
   ===================================================================== */
.fx-flow { position: relative; z-index: 1; padding: clamp(60px, 8vw, 110px) 0 clamp(80px, 10vw, 140px); overflow: hidden; }
.fx-flow .works__header { margin-bottom: 18px; }
.fx-flow__meta { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; font-family: var(--fx-mono); font-size: 11px; letter-spacing: 0.14em; color: rgba(255,255,255,0.5); text-transform: uppercase; margin-bottom: clamp(40px, 5vw, 64px); }
.fx-flow__meta b { color: #fff; font-weight: 500; }
.fx-reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--fx-ease), transform 1.1s var(--fx-ease); }
.fx-reveal.is-in { opacity: 1; transform: none; }
.fx-flow__stage { transform: rotate(-3.5deg) scale(1.06); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.fx-flow__row { display: flex; gap: 12px; width: max-content; margin-bottom: 12px; will-change: transform; }
.fx-tile { position: relative; flex: none; margin: 0; padding: 0; border: 0; cursor: pointer; width: clamp(220px, 24vw, 380px); aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: #0d0d0d; transition: transform 0.6s var(--fx-ease), filter 0.6s var(--fx-ease), opacity 0.6s; }
.fx-flow__row--v .fx-tile { width: clamp(140px, 13vw, 200px); aspect-ratio: 9/16; }
.fx-tile img, .fx-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fx-tile video { opacity: 0; transition: opacity 0.35s; }
/* «Поток»: мягкий цвет поверх видео (исходники не трогаем) — сила регулируется одной переменной */
.fx-flow { --fx-grade: contrast(1.08) saturate(1.18) brightness(1.03); }
.fx-tile img, .fx-tile video { filter: var(--fx-grade); }
.fx-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.32) 100%); }
.fx-tile.is-playing video { opacity: 1; }
.fx-tile::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.45), transparent 22%, transparent 78%, rgba(0,0,0,0.55)); }
.fx-tile__tag { position: absolute; left: 10px; bottom: 9px; z-index: 2; font-family: var(--fx-mono); font-size: 10px; letter-spacing: 0.1em; color: rgba(255,255,255,0.85); opacity: 0; transform: translateY(4px); transition: 0.4s var(--fx-ease); }
.fx-tile__idx { position: absolute; right: 10px; top: 8px; z-index: 2; font-family: var(--fx-mono); font-size: 10px; color: rgba(255,255,255,0.55); }
.fx-flow__stage:hover .fx-tile { filter: brightness(0.45) saturate(0.5); }
.fx-flow__stage .fx-tile:hover { filter: none; transform: scale(1.06); z-index: 2; }
.fx-tile:hover .fx-tile__tag { opacity: 1; transform: none; }
.fx-tile:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }

/* =====================================================================
   5. ЭТАПЫ РАБОТЫ
   ===================================================================== */
.production__stages { position: relative; }
.fx-rail { position: absolute; left: 50%; top: 40px; bottom: 40px; width: 2px; background: rgba(255,255,255,0.14); transform: translateX(-50%); pointer-events: none; }
.fx-rail::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: calc(var(--p, 0) * 100%); background: linear-gradient(#fff, var(--fx-red)); box-shadow: 0 0 10px rgba(255,59,48,0.6); }
.fx-rail::after { content: ""; position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,59,48,0.25), 0 0 18px 4px rgba(255,59,48,0.6); }
.production-stage .stage-number { transition: color 0.6s, text-shadow 0.6s; }
.production-stage.fx-on .stage-number { color: rgba(255,255,255,0.9); text-shadow: 0 0 24px rgba(255,255,255,0.25); }
.stage-line { transform-origin: left; transform: scaleX(0); transition: transform 1s var(--fx-ease) 0.2s; }
.stage-right .stage-line { transform-origin: right; }
.production-stage.fx-on .stage-line { transform: scaleX(1); }
/* шторка: видео раскрывается от узкой полосы (не с нуля — иначе браузер ставит немое видео на паузу) */
.stage-media { clip-path: inset(36% 0 36% 0 round 15px); transition: clip-path 1.2s cubic-bezier(0.7, 0, 0.2, 1) 0.1s; }
.production-stage.fx-on .stage-media { clip-path: inset(0 0 0 0 round 15px); }
.video-preview .fx-vf { --vf-inset: 14px; z-index: 10; }

/* =====================================================================
   6. ОСНОВА — лента (десктоп: прилипает, скролл двигает вбок; телефон: карусель)
   ===================================================================== */
.benefits-contacts { padding-top: clamp(50px, 7vw, 90px) !important; padding-bottom: clamp(40px, 5vw, 70px) !important; }
.benefits-title-logo { width: min(620px, 80vw) !important; height: auto !important; margin: 0 auto !important; display: block; }
.benefits__header .benefits-title-main--logo { margin: 12px 0 0 !important; }
.fx-rib { position: relative; margin: 0 calc(50% - 50vw); }   /* высоту ставит JS: содержимое + длина прокрутки */
.fx-rib__sticky { position: sticky; top: 76px; overflow: hidden; display: flex; flex-direction: column; gap: clamp(20px, 3vh, 40px); padding: 12px 0 28px; }
.fx-rib__sticky .benefits__header { margin: 0 !important; padding: 0 16px; }
.fx-rib__sticky .section-title { margin-bottom: 0 !important; }
.fx-rib__track { display: flex; gap: 24px; padding: 0 max(16px, calc(50vw - 600px)); will-change: transform; }
.fx-rib__bar { margin: 0 max(16px, calc(50vw - 600px)); height: 2px; background: rgba(255,255,255,0.12); }
.fx-rib__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #fff, var(--fx-red)); }
.fx-rib__hint { display: none; }
.fx-rc {
  position: relative; flex: none; width: min(560px, 80vw); aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; outline: none;
  border: 1px solid rgba(255,255,255,0.12); background: radial-gradient(120% 90% at 80% 10%, rgba(255,255,255,0.06), transparent 60%), #0b0b0b;
  transition: border-color 0.5s, background-color 0.5s;
}
.fx-rc:hover, .fx-rc.is-on { border-color: rgba(255,255,255,0.28); }
.fx-rc__scene { position: absolute; top: 18px; left: 22px; font-family: var(--fx-mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(255,255,255,0.45); }
.fx-rc__big { position: absolute; top: 4px; right: 18px; font-size: clamp(90px, 11vw, 150px); font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.3); transition: color 0.6s var(--fx-ease), -webkit-text-stroke-color 0.6s, text-shadow 0.6s; }
.fx-rc:is(:hover, :focus, .is-on) .fx-rc__big { color: var(--fx-core); -webkit-text-stroke-color: var(--fx-core); text-shadow: 0 0 40px rgba(255,42,42,0.45); }
.fx-rc__art { position: absolute; left: 22px; right: 22px; top: 22%; height: 38%; display: grid; place-items: center start; }
.fx-rc__t { position: absolute; left: 24px; right: 24px; bottom: 22px; }
.fx-rc__t h3 { margin: 0 0 10px; font-size: clamp(19px, 2.2vw, 28px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.fx-rc__t p { margin: 0; color: rgba(255,255,255,0.75); line-height: 1.5; max-width: 440px; }
/* иллюстрации в карточках: играют, когда карточка активна или под курсором */
.fx-art { width: 100%; max-width: 340px; height: 100%; overflow: visible; font-family: var(--fx-mono); }
.fx-art text { fill: rgba(255,255,255,0.55); font-size: 9px; letter-spacing: 0.12em; text-anchor: middle; }
.fx-art .bg { fill: none; stroke: rgba(255,255,255,0.15); stroke-width: 1; }
.fx-rc .fx-art * { animation-play-state: paused; }
.fx-rc:is(.is-on, :hover, :focus) .fx-art * { animation-play-state: running; }
.fx-art--steps .fill { stroke: var(--fx-red); stroke-width: 2; stroke-dasharray: 280; stroke-dashoffset: 280; animation: fx-steps 5s var(--fx-ease) infinite; }
.fx-art--steps circle { fill: #0b0b0b; stroke: rgba(255,255,255,0.35); stroke-width: 1.5; animation: fx-node 5s infinite; animation-delay: calc(var(--k) * 0.8s); }
@keyframes fx-steps { 0% { stroke-dashoffset: 280; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes fx-node { 0% { fill: #0b0b0b; stroke: rgba(255,255,255,0.35); } 8%, 70% { fill: var(--fx-red); stroke: var(--fx-red); } 85%, 100% { fill: #0b0b0b; stroke: rgba(255,255,255,0.35); } }
.fx-art--lens .ring { fill: none; stroke: rgba(255,255,255,0.4); stroke-width: 1.5; stroke-dasharray: 2 6; animation: fx-rot 12s linear infinite; }
.fx-art--lens .scale { fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 8; stroke-dasharray: 1 9; animation: fx-rot 20s linear infinite reverse; }
.fx-art--lens .iris { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.5); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: fx-iris 3.2s ease-in-out infinite; }
.fx-art--lens .dot { fill: var(--fx-red); }
.fx-art--lens text { text-anchor: start; font-size: 12px; fill: rgba(255,255,255,0.7); }
.fx-art--lens .rec { fill: var(--fx-red); animation: fx-blink 1.6s steps(1) infinite; }
.fx-art--cycle .orbit { animation: fx-rot 6s linear infinite; }
.fx-art--cycle .dot { fill: var(--fx-red); filter: drop-shadow(0 0 6px var(--fx-red)); }
.fx-art--radar .sweep { fill: rgba(255,59,48,0.18); transform-origin: 0 0; animation: fx-rot 4s linear infinite; }
.fx-art--radar .pt { fill: #fff; animation: fx-ping 4s infinite; animation-delay: calc(var(--k) * 0.8s); }
.fx-art--radar text { text-anchor: start; font-size: 8px; }
@keyframes fx-rot { to { transform: rotate(360deg); } }
@keyframes fx-iris { 50% { transform: scale(0.55); } }
@keyframes fx-ping { 0%, 100% { fill: rgba(255,255,255,0.3); } 10% { fill: var(--fx-red); } }

/* =====================================================================
   7. FAQ — узкий блок на чёрном, сзади дым
   ===================================================================== */
.fx-faq { position: relative; z-index: 1; padding: clamp(60px, 8vw, 110px) 0 clamp(50px, 6vw, 90px); }
.fx-faq::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 45% at 50% 55%, rgba(255,255,255,0.045), transparent 70%); }
.fx-faq .section-title { text-align: center; margin-bottom: clamp(28px, 4vw, 48px) !important; }
.fx-faq__list { max-width: 720px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.12); }
.fx-faq__item { border-bottom: 1px solid rgba(255,255,255,0.12); transition: background 0.5s; }
.fx-faq__item.is-open { background: linear-gradient(90deg, rgba(255,59,48,0.06), transparent 60%); }
.fx-faq__h { margin: 0; font: inherit; }
.fx-faq__q { width: 100%; display: grid; grid-template-columns: 52px 1fr 22px; align-items: center; gap: 12px; padding: 20px 6px; background: none; border: 0; color: #fff; text-align: left; cursor: pointer; font-size: clamp(15px, 1.5vw, 18px); font-weight: 600; letter-spacing: 0.01em; line-height: 1.35; }
.fx-faq__q:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.fx-faq__n { font-family: var(--fx-mono); font-size: 11px; letter-spacing: 0.12em; color: rgba(255,255,255,0.4); transition: color 0.4s; }
.fx-faq__item.is-open .fx-faq__n, .fx-faq__q:hover .fx-faq__n { color: var(--fx-red); }
.fx-faq__t { transition: transform 0.5s var(--fx-ease); }
.fx-faq__q:hover .fx-faq__t { transform: translateX(4px); }
.fx-faq__ic { position: relative; width: 14px; height: 14px; justify-self: end; }
.fx-faq__ic::before, .fx-faq__ic::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1.5px; background: currentColor; transition: transform 0.5s var(--fx-ease); }
.fx-faq__ic::after { transform: rotate(90deg); }
.fx-faq__item.is-open .fx-faq__ic::after { transform: rotate(0deg); }
.fx-faq__item.is-open .fx-faq__ic::before { transform: rotate(180deg); }
.fx-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--fx-ease); }
.fx-faq__a > div { overflow: hidden; }
.fx-faq__a p { margin: 0; padding: 0 6px 22px 70px; max-width: 620px; color: rgba(255,255,255,0.72); line-height: 1.65; font-size: clamp(14px, 1.25vw, 16px); opacity: 0; transform: translateY(-6px); transition: opacity 0.4s, transform 0.5s var(--fx-ease); }
.fx-faq__item.is-open .fx-faq__a { grid-template-rows: 1fr; }
.fx-faq__item.is-open .fx-faq__a p { opacity: 1; transform: none; transition-delay: 0.12s; }

/* =====================================================================
   8. КОНТАКТЫ
   ===================================================================== */
.contacts-contacts { padding-bottom: 36px !important; }
.contact-simple.fx-cs { position: relative; max-width: 980px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) clamp(16px, 4vw, 56px) 12px; }
.fx-cs .contact-simple__subtitle { font-size: clamp(15px, 1.9vw, 22px) !important; letter-spacing: 0.14em !important; font-weight: 400 !important; line-height: 1.6 !important; color: #fff !important; }
.fx-cs .production__button-contacts, .fx-cs .contact-simple__subtitle_bk { display: none !important; }
/* фото: кольца объектива, эфирные волны, красное свечение */
.photo-circle { position: relative; overflow: visible !important; isolation: isolate; }
.photo-circle .photo-circle__img { border-radius: 50%; }
.photo-circle::before { content: ""; position: absolute; inset: -60%; z-index: -2; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(220,30,30,0.22), transparent 62%); animation: fx-glow 2.4s ease-in-out infinite; }
@keyframes fx-glow { 50% { opacity: 0.6; } }
.fx-ring {
  position: absolute; inset: -18px; border-radius: 50%; pointer-events: none; opacity: 0.8;
  background: repeating-conic-gradient(rgba(255,255,255,0.5) 0 0.6deg, transparent 0.6deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 7px), #000 calc(50% - 6px), #000 50%, transparent calc(50% + 1px));
          mask: radial-gradient(circle, transparent calc(50% - 7px), #000 calc(50% - 6px), #000 50%, transparent calc(50% + 1px));
  transform: rotate(var(--rot, 0deg));
}
.fx-ring--2 { inset: -34px; opacity: 0.35; background: repeating-conic-gradient(rgba(255,255,255,0.7) 0 0.4deg, transparent 0.4deg 15deg); transform: rotate(calc(var(--rot, 0deg) * -0.6)); }
.fx-wave { position: absolute; inset: 0; z-index: -1; border-radius: 50%; pointer-events: none; border: 1px solid rgba(255,40,40,0.45); animation: fx-wave 4.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.fx-wave:nth-child(2) { animation-delay: 1.6s; } .fx-wave:nth-child(3) { animation-delay: 3.2s; }
@keyframes fx-wave { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.6); opacity: 0; } }
/* Instagram: звёздочка + сноска про Meta */
.side-icon.fx-ast { position: relative; overflow: visible; }
.side-icon.fx-ast::after { content: "*"; position: absolute; top: -6px; right: -8px; font-size: 14px; line-height: 1; color: rgba(255,255,255,0.7); }
.fx-note { max-width: 560px; margin: 34px auto 0; font-size: 10px; line-height: 1.5; color: rgba(255,255,255,0.2); text-align: center; }
/* плитки каналов связи */
.fx-sheet { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: clamp(34px, 4vw, 52px) auto 0; max-width: 760px; padding: 14px; }
.fx-sheet > .fx-vf { --vf-inset: 0; }
.fx-sheet > .fx-vf i { width: 12px; height: 12px; border-color: rgba(255,255,255,0.3); }
.fx-sheet__cell {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k go" "v go" "note go";
  gap: 6px 14px; align-items: center; text-align: left; text-decoration: none; color: #fff;
  padding: 20px 22px; border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; background: rgba(255,255,255,0.025);
  transition: color 0.45s var(--fx-ease), border-color 0.45s;
}
.fx-sheet__cell::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--fx-ease); }
.fx-sheet__cell:hover, .fx-sheet__cell:focus-visible { color: #000; border-color: #fff; outline: none; }
.fx-sheet__cell:hover::before, .fx-sheet__cell:focus-visible::before { transform: scaleX(1); }
.fx-sheet__k { grid-area: k; font-family: var(--fx-mono); font-size: 10px; letter-spacing: 0.18em; opacity: 0.55; }
.fx-sheet__v { grid-area: v; font-size: clamp(16px, 1.7vw, 20px); font-weight: 600; letter-spacing: 0.02em; word-break: break-all; }
.fx-sheet__note { grid-area: note; font-family: var(--fx-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.5; }
.fx-sheet__go { grid-area: go; font-size: 22px; transition: transform 0.45s var(--fx-ease); }
.fx-sheet__cell:hover .fx-sheet__go { transform: translate(4px, -4px); }
.fx-sheet__cell:first-child .fx-sheet__k::before { content: "●"; color: #35d46a; margin-right: 6px; }
.fx-sheet__swap { grid-area: v; display: grid; overflow: hidden; }
.fx-sheet__swap > * { grid-area: 1 / 1; align-self: center; transition: transform 0.55s var(--fx-ease), opacity 0.4s; }
.fx-sheet__name { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; letter-spacing: 0.08em; }
.fx-sheet__kn { display: none; }
@media (hover: hover) {
  .fx-sheet__v { transform: translateY(105%); opacity: 0; }
  .fx-sheet__note { opacity: 0 !important; transition: opacity 0.4s 0.1s; }
  .fx-sheet__cell:is(:hover, :focus-visible) .fx-sheet__name { transform: translateY(-105%); opacity: 0; }
  .fx-sheet__cell:is(:hover, :focus-visible) .fx-sheet__v { transform: none; opacity: 1; }
  .fx-sheet__cell:is(:hover, :focus-visible) .fx-sheet__note { opacity: 0.6 !important; }
}
@media (hover: none) {   /* телефон: наведения нет, касание сразу открывает — показываем контакт сразу */
  .fx-sheet__name { display: none; }
  .fx-sheet__kn { display: inline; }
}

/* =====================================================================
   9. ПОДВАЛ — портал на Core
   ===================================================================== */
.footer-compact.footer-tape-layout { position: relative; min-height: clamp(460px, 70vh, 700px) !important; padding-top: clamp(70px, 9vh, 110px) !important; padding-bottom: clamp(110px, 13vh, 140px) !important; }
.footer-compact.footer-tape-layout .footer-video { filter: grayscale(1) contrast(1.25) brightness(0.42) !important; transform: scale(1.08); }
.footer-compact.footer-tape-layout .footer-video-overlay { background: radial-gradient(62% 62% at 50% 50%, transparent, #050505 96%) !important; }
.footer-video-layer::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 3px); }
.footer-compact.footer-tape-layout .footer-creator { transform: none !important; gap: clamp(16px, 2.6vh, 30px) !important; }
.footer-compact.footer-tape-layout .footer-creator__sub { margin-bottom: clamp(8px, 1.5vh, 18px); }
.footer-compact.footer-tape-layout .footer-creator__title-logo-mobile { width: min(560px, 78vw) !important; height: auto !important; margin: 0 auto clamp(8px, 2vh, 20px) !important; }
.footer-tape-layout > .fx-vf { --vf-inset: clamp(28px, 4vh, 44px) clamp(16px, 3vw, 40px) clamp(64px, 8vh, 86px); z-index: 3; }
.footer-tape-layout > .fx-vf i { width: 26px; height: 26px; border-color: rgba(255,255,255,0.4); }
.footer-tape-layout > .fx-vf .fx-vf__lbl { color: rgba(255,255,255,0.55); font-size: 11px; }

/* =====================================================================
   АДАПТИВ
   ===================================================================== */
/* низкие экраны ноутбуков: карточки «Основы» компактнее */
@media (min-width: 768px) and (max-height: 820px) { .fx-rc { width: min(460px, 70vw); } .fx-rc__t p { font-size: 14px; } }
@media (min-width: 768px) and (max-height: 720px) { .fx-rc { width: min(400px, 60vw); } .fx-rc__art { top: 17%; height: 25%; } .fx-rc__big { font-size: 80px; } .fx-rc__t h3 { font-size: 18px; } .fx-rc__t p { font-size: 13px; } }

@media (max-width: 900px) {
  .fx-hdr { grid-template-columns: auto 1fr; }
  .fx-hdr__right { display: none; }
  .fx-hdr .fx-switch { justify-self: end; }
  .fx-rail { display: none; }
  .hero .fx-vf { --vf-inset: 70px 14px 20px; }
  .hero .fx-vf__lbl--tr, .hero .fx-vf__lbl--br, .hero .fx-vf__lbl--bl,
  .footer-tape-layout > .fx-vf .fx-vf__lbl--br { display: none; }
}
@media (max-width: 768px) {
  .fx-switch a { padding: 8px 12px; font-size: 10px; letter-spacing: 0.14em; }
  .fx-flow__stage { transform: rotate(-3deg) scale(1.1); }
  .fx-sub__edge { display: none; }
}
@media (max-width: 767px) {
  /* «Основа»: карусель со свайпом, справа виден край следующей карточки */
  .fx-rib { height: auto !important; margin: 0; }
  .fx-rib__sticky { position: static; overflow: visible; gap: 22px; padding: 0; }
  .fx-rib__track { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 12px; margin: 0 -16px; padding: 4px 16px 12px; scroll-padding: 0 16px; }
  .fx-rib__track::-webkit-scrollbar { display: none; }
  .fx-rc { width: 78vw; aspect-ratio: auto; min-height: 380px; scroll-snap-align: start; }
  .fx-rc__big { font-size: 72px; }
  .fx-rc__art { top: 16%; height: 30%; }
  .fx-rib__bar { margin: 0 16px; }
  .fx-rib__hint { display: block; align-self: flex-end; margin: -8px 0 -10px; font-family: var(--fx-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
  /* «Поток»: меньше пустоты сверху */
  .fx-flow { padding-top: 36px; }
  .fx-flow .works__header .section-title { margin-bottom: 8px !important; }
  .fx-flow__meta { margin-bottom: 28px; gap: 12px; }
}
@media (max-width: 640px) {
  .fx-ctl__vol, .fx-ctl__t { display: none; }
  .fx-ctl { gap: 8px; }
  .about-rotator--concept .fx-vf__lbl--bl { display: none; }
  .about-rotator .about-rotator__hit::before { width: 30px !important; height: 30px !important; }
  .about-rotator .about-rotator__hit::after { width: 8px !important; height: 8px !important; }
  .about-rotator .about-rotator__hit--prev::before { left: calc(10% - 9px) !important; }
  .about-rotator .about-rotator__hit--next::before { right: calc(10% - 9px) !important; }
  .fx-sub__word { font-size: 72px; }
  .fx-faq__q { grid-template-columns: 40px 1fr 18px; padding: 18px 2px; }
  .fx-faq__a p { padding-left: 54px; }
  .contacts-contacts .side-icon { width: 40px !important; height: 40px !important; font-size: 16px !important; }
  .fx-sheet { grid-template-columns: 1fr; }
  .footer-compact.footer-tape-layout { padding-bottom: 150px !important; }
  .footer-tape-layout > .fx-vf { --vf-inset: 24px 14px 112px; }
}

/* =====================================================================
   УМЕНЬШЕННОЕ ДВИЖЕНИЕ (системная настройка)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fx-film, .fx-sub__beam, .fx-art *, .fx-wave, .photo-circle::before { animation: none !important; }
  .fx-wave, .photo-circle::before { opacity: 0; }
  html.fx-crt-off body > * { animation: none !important; }
  .fx-reveal, .fx-dev { opacity: 1; transform: none; }
  .fx-dev.is-in { animation: none; }
  .section-title:not(.fx-in) .title-accent { clip-path: none; }
  .section-title:not(.fx-in) .title-main { opacity: 1; }
  .section-title.fx-in .title-accent, .section-title.fx-in .title-main, .about-panel.is-active * { animation: none !important; }
  .about-rotator .about-rotator__dot.is-active::after { animation: none; width: 100%; }
  .stage-media { clip-path: none; }
  .stage-line { transform: none; }
}
.fx-tile--loop { cursor: default; }   /* рилс без полной версии на сайте — просто играет в плитке */

/* ---------- Курсор не «мигает» на кнопках ----------
   Элемент при наведении поднимался на 3–10px: курсор у нижнего края оказывался вне его → наведение снималось → элемент опускался → снова наведение.
   Где края обрезаются (overflow: hidden) — подъём убран (тень и цвет остаются); где нет — невидимая полоска снизу держит наведение. */
.works-grid .works-image:hover, .works-image:hover, .production__button:hover, .production__button-contacts:hover { transform: none !important; }
:is(.benefit-item, .hero__button):hover::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }

/* ---------- Защита от копирования ----------
   Водяной знак — поверх плееров (в сами видео не вшит, качество не страдает). Полностью запретить скачивание в браузере нельзя — только усложнить. */
.portfolio-modal__video::after, .showreel-modal__frame::after, .video-modal__player::after, body.fx-playing .hero::after {
  content: ""; position: absolute; z-index: 5; top: clamp(12px, 2vw, 24px); left: clamp(12px, 2vw, 24px);   /* слева: справа сверху кнопка закрытия */
  width: clamp(90px, 10vw, 150px); aspect-ratio: 1400 / 193; pointer-events: none;
  background: url('images/storyverse_logo.png') center / contain no-repeat; opacity: 0.3;
}
img, video { -webkit-user-drag: none; }

/* ---------- Подвал: кнопки ведут в Core (эффект «СКОРО» снят — заготовка в _инструменты/заготовки) ---------- */
.footer-compact.footer-tape-layout .footer-creator__toolkit { text-decoration: none; cursor: pointer; }
.footer-compact.footer-tape-layout .footer-creator__toolkit-text::after, .footer-compact.footer-tape-layout .footer-creator__portal-text::after { content: none !important; }
.footer-compact.footer-tape-layout .footer-creator__toolkit:hover .footer-creator__toolkit-text { color: #fff !important; }
/* «Перейти на сайт» — заметная кнопка: пилюля, стрелка, мягкий пульс и искры по контуру */
.footer-compact.footer-tape-layout .footer-creator__portal {
  position: relative; flex-direction: row !important; gap: 12px !important; padding: 14px 28px !important; min-height: 50px;
  border: 1px solid rgba(255,255,255,0.4) !important; border-radius: 999px !important; background: rgba(255,255,255,0.05) !important;
  color: #fff !important; text-decoration: none; cursor: pointer; animation: fx-portal 2.8s ease-in-out infinite;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s !important;
}
.footer-compact.footer-tape-layout .footer-creator__portal-text { font-size: 0.82rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; color: #fff !important; }
.footer-creator__portal-arrow { font-size: 1.1rem; line-height: 1; transition: transform 0.35s var(--fx-ease); }
.footer-compact.footer-tape-layout .footer-creator__portal:hover, .footer-compact.footer-tape-layout .footer-creator__portal:focus-visible { background: var(--fx-core) !important; border-color: var(--fx-core) !important; box-shadow: 0 0 34px rgba(255,42,42,0.55) !important; text-shadow: none !important; animation: none; }
.footer-creator__portal:hover .footer-creator__portal-arrow { transform: translateX(5px); }
@keyframes fx-portal { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,42,42,0); } 50% { box-shadow: 0 0 22px 2px rgba(255,42,42,0.35); } }
.fx-spark { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; pointer-events: none; opacity: 0; animation: fx-spark var(--d, 2.4s) linear infinite; animation-delay: var(--dl, 0s); }
.footer-creator__portal:hover .fx-spark { --d: 1.2s; }
@keyframes fx-spark { 0% { transform: translate(var(--x0), var(--y0)) scale(1); opacity: 0; } 15% { opacity: 0.95; } 100% { transform: translate(var(--x1), var(--y1)) scale(0.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .footer-compact.footer-tape-layout .footer-creator__portal, .fx-spark { animation: none; } }