/* =========================================================
   RED ZONE — «КИНОПОСТЕР»: чёрный, сигнальный красный, бумага.
   Высокий узкий гротеск, зерно плёнки, полутон, срезы-глитчи, свечение.
   Подключается после style.css и room.css и переопределяет их.
   ========================================================= */
:root {
  --ink: #0a0807;
  --ink-2: #131010;
  --ink-3: #1c1717;
  --red: #e3121b;          /* сигнальный красный */
  --red-2: #ff2a2a;
  --red-deep: #830101;     /* цвет логотипа */
  --paper: #f2ece2;
  --paper-2: #d9d1c4;
  --bg: var(--ink); --bg-2: var(--ink-2); --bg-3: var(--ink-3); --card: var(--ink-2);
  --white: var(--paper); --cream: var(--paper);
  --line: rgba(242, 236, 226, .1);
  --line-2: rgba(242, 236, 226, .18);
  --muted: rgba(242, 236, 226, .64);
  --dim: rgba(242, 236, 226, .4);
  --display: "Oswald", "Arial Narrow", sans-serif;
  --script: "JetBrains Mono", monospace;
  --body: "Inter Tight", system-ui, -apple-system, sans-serif;
  --light: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --f-display: var(--display); --f-body: var(--body); --f-script: var(--script);
  --gutter: clamp(16px, 4vw, 64px);
  --header-h: 68px;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --scratch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .5' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 -6.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}

html { background: var(--ink); scrollbar-color: var(--red) var(--ink); }
body { background: var(--ink); color: var(--paper); font: 400 16px/1.5 var(--body); letter-spacing: -.005em; }
::selection { background: var(--red); color: var(--paper); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
main, .footer { position: relative; z-index: 1; }

/* зерно плёнки: лёгкое, анимированное, без затемнения */
.grain { position: fixed; inset: 0; z-index: 650; pointer-events: none; opacity: .09; background-image: var(--noise); background-size: 220px; animation: grain .9s steps(4) infinite; mix-blend-mode: overlay; }
@keyframes grain { 0% { background-position: 0 0; } 25% { background-position: -60px 40px; } 50% { background-position: 50px -70px; } 75% { background-position: -30px -20px; } }

/* ---------- типографика и эффекты шрифта ---------- */
.kicker { font: 500 11px/1.4 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--red); }
.display { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .84; letter-spacing: -.01em; }

/* 1. красная заливка с зерном и царапинами (REQUIEM) */
.fx-grain {
  color: var(--red);
  background: var(--scratch), var(--noise), linear-gradient(180deg, #ff2b2b 0%, var(--red) 45%, #b20a10 100%);
  background-size: 600px 300px, 160px, 100% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.fx-paper { color: var(--paper); background: var(--noise), linear-gradient(180deg, #fff, var(--paper) 60%, var(--paper-2)); background-size: 160px, 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* 2. свечение со строками развёртки (BLUR / FITMHT) */
.fx-glow {
  color: #ffd9cc;
  background: repeating-linear-gradient(180deg, #ffe7dd 0 2px, #ff4a3d 2px 4px);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(255, 40, 30, .9)) drop-shadow(0 0 28px rgba(227, 18, 27, .7)) drop-shadow(0 0 70px rgba(227, 18, 27, .45));
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe { 50% { filter: drop-shadow(0 0 4px rgba(255, 40, 30, .8)) drop-shadow(0 0 18px rgba(227, 18, 27, .55)) drop-shadow(0 0 46px rgba(227, 18, 27, .3)); } }
/* 3. контур */
.fx-outline { color: transparent; -webkit-text-stroke: 1.5px var(--paper); }
/* 4. срезы (MURMUR): копии текста в вертикальных полосах, которые съезжают по Y */
.fx-slices { position: relative; display: inline-block; }
.fx-slices > .sl-base { visibility: hidden; display: block; }
.fx-slices > .sl { position: absolute; inset: 0; display: block; will-change: transform; }
.fx-slices.is-split > .sl-base { visibility: hidden; }
/* 5. буквы */
.char { display: inline-block; will-change: transform, filter, opacity; }
.word { display: inline-block; white-space: nowrap; }
/* 6. «расшифровка» моно-подписей */
[data-scramble] { white-space: pre-wrap; }

/* ---------- логотип: M в скруглённом квадрате ---------- */
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--paper); }
.logo:hover { transform: none; }
.logo-sq { --s: 40px; flex: none; width: var(--s); height: var(--s); display: grid; place-items: center; border-radius: calc(var(--s) * .26);
  background: linear-gradient(145deg, var(--red-2), var(--red) 45%, var(--red-deep)); color: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 6px rgba(0, 0, 0, .35), 0 8px 24px -10px rgba(227, 18, 27, .8);
  position: relative; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s; }
.logo-sq::after { content: ""; position: absolute; inset: 0; background: var(--noise); background-size: 120px; opacity: .35; mix-blend-mode: overlay; }
.logo-sq .logo__m { width: 62%; height: auto; }
.logo:hover .logo-sq { transform: rotate(-6deg) scale(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 34px -8px rgba(227, 18, 27, 1); }
.logo__word { font: 700 22px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.logo img { height: 40px; border-radius: 10px; }
.logo-sq.logo-sq--big { --s: 92px; }

/* ---------- шапка: прозрачная над рекламой, тёмная при прокрутке ---------- */
.header { height: var(--header-h); background: transparent; border-bottom: 1px solid transparent; transition: background .4s, border-color .4s, -webkit-backdrop-filter .4s, backdrop-filter .4s; }
.header.is-solid, .header.menu-open { background: rgba(10, 8, 7, .82); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.header__inner { padding-inline: var(--gutter); gap: clamp(12px, 2vw, 28px); }
.header__nav { gap: clamp(18px, 2.4vw, 40px); margin-right: 0; }
.nav-link { font: 500 14px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.nav-link::after { background: var(--red); height: 2px; bottom: -10px; border-radius: 0; }
.header a:hover .roll, .header button:hover .roll, .mobile-menu a:hover .roll, a:hover .roll, button:hover .roll { color: var(--red); }
.header__search { color: var(--paper); border-radius: 12px; }
.header__search:hover { background: rgba(242, 236, 226, .1); color: var(--red); }
.header__burger span { background: var(--paper) !important; }

.lang-sw { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); background: rgba(10, 8, 7, .35); flex: none; }
.lang-sw button { height: 28px; min-width: 38px; padding: 0 10px; border-radius: 999px; font: 600 11px/1 var(--mono); letter-spacing: .12em; color: var(--muted); transition: background .3s, color .3s; }
.lang-sw button:hover { color: var(--paper); }
.lang-sw button[aria-pressed="true"] { background: var(--red); color: var(--paper); }
.header__inner > .lang-sw { margin-left: 8px; }
@media (max-width: 900px) {
  .header__inner > .lang-sw { display: none; }
  .mobile-menu { background: rgba(10, 8, 7, .97); gap: 22px; }
  .mobile-menu .nav-link { font: 700 clamp(34px, 10vw, 52px)/1 var(--display); letter-spacing: 0; }
  .mobile-menu .lang-sw { margin-top: 26px; }
  .mobile-menu .lang-sw button { height: 40px; min-width: 64px; font-size: 13px; }
  .logo__word { font-size: 19px; }
  .logo-sq { --s: 36px; }
}

/* ---------- загрузка ---------- */
.loader { background: var(--ink); gap: 26px; }
.loader__track { width: min(360px, 70vw); height: 2px; padding: 0; background: var(--line-2); border-radius: 0; }
.loader__fill { background: var(--red); border-radius: 0; box-shadow: 0 0 14px var(--red); }
.loader__text { display: flex; gap: 18px; font: 500 11px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.loader__pct { color: var(--red); }
.loader .logo-sq { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.94); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 60px -6px rgba(227, 18, 27, .9); } }

/* ---------- курсор: красное кольцо-прицел ---------- */
.cursor__lens { width: 14px; height: 14px; background: var(--red); border: 0; box-shadow: 0 0 18px rgba(227, 18, 27, .8); -webkit-backdrop-filter: none; backdrop-filter: none; mix-blend-mode: normal; }
.cursor.is-hover .cursor__lens { width: 74px; height: 74px; background: transparent; border: 1px solid var(--red); box-shadow: none; -webkit-backdrop-filter: invert(1) grayscale(1); backdrop-filter: invert(1) grayscale(1); }
.cursor__label { font: 600 10px var(--mono); letter-spacing: .16em; color: var(--paper); }
.cursor__ripple { border-color: var(--red); }

/* ---------- кнопки ---------- */
.btn-cut, .btn {
  clip-path: none; border-radius: 0; background: transparent; color: var(--paper); height: 50px; min-width: 0; padding: 0 26px;
  font: 600 13px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 0 0 1px var(--line-2); transition: color .35s var(--ease), box-shadow .35s, transform .3s var(--ease);
}
.btn-cut::before, .btn::before { content: ""; display: block; position: absolute; inset: 0; z-index: -1; background: var(--red); clip-path: none; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.btn-cut::after, .btn::after { display: none; }
@media (hover: hover) {
  .btn-cut:hover, .btn:hover { color: var(--paper); box-shadow: inset 0 0 0 1px var(--red); }
  .btn-cut:hover::before, .btn:hover::before { transform: scaleX(1); transform-origin: left; }
  .btn-cut:hover .roll { color: var(--paper); }
}
/* основная кнопка: сплошной красный, при наведении бумага */
.btn-cut--solid, .btn:not(.ghost):not(.light):not(.sm), .btn.solid { background: var(--red); box-shadow: 0 14px 40px -16px rgba(227, 18, 27, .9); }
.btn-cut--solid::before, .btn:not(.ghost):not(.light):not(.sm)::before, .btn.solid::before { background: var(--paper); }
@media (hover: hover) {
  .btn-cut--solid:hover, .btn:not(.ghost):not(.light):not(.sm):hover, .btn.solid:hover { color: var(--ink); }
  .btn-cut--solid:hover .roll { color: var(--ink); }
}
.btn.light { background: var(--paper); color: var(--ink); }
.btn.light::before { background: var(--red); }
@media (hover: hover) { .btn.light:hover { color: var(--paper); } }
.btn.ghost::before { background: var(--red); }
.btn.sm { height: 36px; padding: 0 14px; font-size: 11px; letter-spacing: .16em; border-radius: 0; }
.btn.sm:not(.ghost) { background: var(--red); }
.btn svg { width: 15px; height: 15px; }
.ripple { display: none; }

.chip { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.chip:hover { color: var(--paper); border-color: var(--paper); }
.chip.on { background: var(--red); border-color: var(--red); color: var(--paper); }
.chip .n { opacity: .6; margin-left: 6px; }
.badge { clip-path: none; border-radius: 4px; background: var(--red); color: var(--paper); font: 700 10px/1 var(--mono); letter-spacing: .1em; }
.badge.outline { background: rgba(10, 8, 7, .6); box-shadow: inset 0 0 0 1px var(--line-2); }
.badge.cream { background: var(--paper); color: var(--ink); }

/* ---------- поля ввода с «рамкой кадра» ---------- */
.cut-field { clip-path: none; border-radius: 0; height: 58px; background: rgba(10, 8, 7, .72); box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: box-shadow .3s; }
.cut-field input { color: var(--paper); font: 500 17px var(--body); padding-left: 22px; }
.cut-field input::placeholder { color: var(--dim); }
.cut-field button { width: auto; aspect-ratio: 1; margin: 6px; background: var(--red); color: var(--paper); transition: background .3s, color .3s; }
.cut-field button:hover { background: var(--paper); color: var(--ink); }
.cut-field:focus-within { box-shadow: inset 0 0 0 1px var(--red), 0 0 0 4px rgba(227, 18, 27, .14); }
.frame-marks { position: relative; padding: 14px; }
.frame-marks::before, .frame-marks::after, .frame-marks > .fm::before, .frame-marks > .fm::after { content: ""; position: absolute; width: 18px; height: 18px; border: 0 solid var(--red); pointer-events: none; }
.frame-marks::before { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.frame-marks::after { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.frame-marks > .fm::before { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.frame-marks > .fm::after { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.input { clip-path: none; border-radius: 0; background: rgba(10, 8, 7, .8); color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
.input:focus { box-shadow: inset 0 0 0 1px var(--red); }
select.input option { background: var(--ink-2); }
.field label { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* =========================================================
   РЕКЛАМА: 3D‑скролл кадров. Без затемнения: текст поверх видео.
   ========================================================= */
.hero { height: 460vh; }
.hero__sticky { background: var(--ink); }
.hero__canvas { inset: -2%; }
.hero__shade, .hero__vignette { display: none; }
/* затемнение только в одном моменте: перед финальным заголовком, и только снизу */
.hero__fade { position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(0deg, rgba(10, 8, 7, .85), transparent); opacity: 0; pointer-events: none; }

.hero__credits { position: absolute; top: calc(var(--header-h) + 18px); left: var(--gutter); right: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start;
  font: 600 clamp(11px, 1vw, 14px)/1.25 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--red); text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.hero__credits > :nth-child(2) { text-align: center; } .hero__credits > :last-child { text-align: right; }

.hero__heading { top: 50%; width: 100%; padding-inline: var(--gutter); align-items: center; text-align: center; pointer-events: none; }
.hero__pre { font: 600 clamp(12px, 1.2vw, 16px)/1 var(--mono); letter-spacing: .5em; text-transform: uppercase; color: var(--paper); margin-bottom: clamp(6px, 1vw, 14px); padding-left: .5em; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
.hero__title { display: block; font: 700 clamp(84px, 19vw, 360px)/.8 var(--display); letter-spacing: -.015em; text-transform: uppercase; white-space: nowrap; }
.hero__title .sl { -webkit-text-fill-color: transparent; }
.hero__sub { margin-top: clamp(10px, 1.6vw, 22px); font: 500 clamp(11px, 1vw, 13px)/1.4 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--paper); text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }

/* финальный экран рекламы (тёмные кадры в конце видео) */
.hero__final { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 0 var(--gutter); pointer-events: none; opacity: 0; }
.hero__final-title { font: 700 clamp(80px, 18vw, 330px)/.8 var(--display); letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.hero__final-pre { font: 600 clamp(12px, 1.2vw, 15px)/1 var(--mono); letter-spacing: .5em; color: var(--paper); margin-bottom: 18px; text-transform: uppercase; }
.hero__final .hero__cta { position: static; margin-top: clamp(26px, 4vw, 48px); pointer-events: auto; justify-content: center; }

.hero__billing { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; }
.hero__about { max-width: 46ch; font: 500 clamp(10px, .85vw, 12px)/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.hero__cta { display: flex; gap: 10px; }
.hero__billing .hero__cta { justify-self: end; }
.hero__progress { position: static; display: flex; align-items: center; gap: 10px; font: 600 11px/1 var(--mono); letter-spacing: .14em; color: var(--paper); justify-self: center; }
.hero__progress-bar { width: 90px; height: 2px; background: rgba(242, 236, 226, .25); }
.hero__progress-bar::after { background: var(--red); box-shadow: 0 0 8px var(--red); }
.hero__scroll { display: none; }
.hero__side { position: absolute; top: 50%; right: 18px; translate: 0 -50%; writing-mode: vertical-rl; font: 600 11px/1 var(--mono); letter-spacing: .5em; color: var(--red); text-transform: uppercase; }
.hero__side::before { content: ""; display: inline-block; width: 1px; height: 60px; background: var(--red); margin-bottom: 14px; vertical-align: middle; }

@media (max-width: 900px) {
  .hero { height: 380vh; }
  .hero__credits { grid-template-columns: 1fr 1fr; font-size: 10px; letter-spacing: .14em; }
  .hero__credits > :nth-child(2) { display: none; }
  .hero__title { font-size: clamp(64px, 23vw, 160px); }
  .hero__final-title { font-size: clamp(64px, 22vw, 150px); }
  .hero__billing { grid-template-columns: 1fr; justify-items: stretch; bottom: 16px; gap: 12px; }
  .hero__about { display: none; }
  .hero__progress { justify-self: start; order: -1; }
  .hero__billing .hero__cta { justify-self: stretch; }
  .hero__cta .btn-cut { flex: 1; height: 50px; padding: 0 12px; }
  .hero__final .hero__cta { width: 100%; }
  .hero__side { display: none; }
}

/* =========================================================
   НАЙТИ ФИЛЬМ — единственный блок после рекламы
   ========================================================= */
.find-sec { position: relative; min-height: 100svh; display: grid; place-items: center; padding: calc(var(--header-h) + 60px) 0 80px; overflow: hidden; text-align: center; }
/* сетка скруглённых плиток, подсвеченная красным изнутри (как на higgsfield.ai) */
.find-sec::before { content: none; }
/* сетка плиток: каждая плитка — скруглённый квадрат; у курсора наклоняется, поднимается и загорается */
.tiles { position: absolute; display: grid; gap: 0; pointer-events: none; z-index: 0;
  -webkit-mask: radial-gradient(65% 60% at 50% 45%, #000 0%, rgba(0,0,0,.6) 50%, transparent 90%); mask: radial-gradient(65% 60% at 50% 45%, #000 0%, rgba(0,0,0,.6) 50%, transparent 90%); }
.tiles i { --k: 0; display: block; width: var(--s); height: var(--s); padding: 4px; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.tiles i::before { content: ""; display: block; height: 100%; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, calc(.02 + var(--k) * .05)), rgba(0, 0, 0, .25)), #120c0c;
  box-shadow: inset 0 0 0 1px rgba(255, 64, 64, calc(.26 + var(--k) * .7)),
    inset 0 1px 0 rgba(255, 140, 140, calc(var(--k) * .55)),
    0 calc(var(--k) * 26px) calc(var(--k) * 40px) -10px rgba(0, 0, 0, .9),
    0 0 calc(var(--k) * 36px) rgba(227, 18, 27, calc(var(--k) * .45));
  transition: box-shadow .4s; }
@media (max-width: 600px) { .tiles i::before { border-radius: 16px; } }

.find-sec::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(38% 30% at 50% 42%, rgba(227, 18, 27, .32), transparent 70%),
    conic-gradient(from 200deg at 50% 42%, transparent 0 40deg, rgba(227, 18, 27, .1) 48deg, transparent 60deg 160deg, rgba(227, 18, 27, .08) 170deg, transparent 182deg); }
.find-sec__inner { position: relative; z-index: 2; width: min(1100px, calc(100% - 2 * var(--gutter))); display: flex; flex-direction: column; align-items: center; }
.find-sec__title { display: flex; flex-direction: column; align-items: center; font: 700 clamp(76px, 15vw, 250px)/.82 var(--display); letter-spacing: -.01em; text-transform: uppercase; }
.find-sec__title > span { display: block; }
.find-sec__text { max-width: 560px; margin-top: clamp(20px, 3vw, 34px); font: 400 clamp(15px, 1.25vw, 18px)/1.5 var(--body); color: var(--muted); }
.find-sec form { width: min(760px, 100%); margin-top: clamp(34px, 4.5vw, 56px); }
.find-sec .cut-field { height: 66px; }
.find-sec .cut-field input { font-size: 18px; }
.find__status { min-height: 1.4em; margin-top: 8px; font: 500 12px var(--mono); color: var(--red); letter-spacing: .1em; }
.pref { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 6px; }
.pref__t { font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin-right: 6px; }
.find-sec__vert { position: absolute; left: var(--gutter); top: 50%; translate: 0 -50%; writing-mode: vertical-rl; rotate: 180deg; font: 700 clamp(40px, 5vw, 86px)/1 var(--display); letter-spacing: .06em; color: transparent; -webkit-text-stroke: 1px rgba(227, 18, 27, .55); text-transform: uppercase; pointer-events: none; z-index: 1; }
@media (max-width: 900px) { .find-sec__vert { display: none; } .find-sec .cut-field { height: 58px; } .find-sec .cut-field input { font-size: 16px; } }

/* ---------- футер: одна строка ---------- */
.footer { background: var(--ink); border-top: 1px solid var(--line); }
.footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 22px var(--gutter); }
.footer__bar .logo-sq { --s: 34px; }
.footer__legal { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.footer__right { display: flex; align-items: center; gap: 16px; }
.footer__copy { font: 600 11px var(--mono); letter-spacing: .14em; color: var(--muted); }
@media (max-width: 700px) { .footer__bar { justify-content: center; text-align: center; } }

/* ---------- поиск поверх страницы ---------- */
.search-ov__backdrop { background: rgba(10, 8, 7, .82); }
.search-ov__panel { clip-path: none; border-radius: 0; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 120px -30px #000; padding: 34px 30px 26px; }
.search-ov__panel::before { background: var(--red); height: 2px; }
.search-ov__panel .kicker { text-align: center; margin-bottom: 10px; }
.search-ov__title { font: 700 clamp(44px, 7vw, 72px)/.86 var(--display); text-transform: uppercase; color: var(--red); margin-bottom: 22px; }
.search-ov__hint { color: var(--dim); font-family: var(--body); }
.suggest a, .suggest button { border-radius: 0; }
.suggest a:hover, .suggest a.active, .suggest button:hover, .suggest button.active { background: rgba(227, 18, 27, .12); }
.suggest .t { font: 600 16px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.suggest .ico { clip-path: none; border-radius: 10px; background: var(--red); color: var(--paper); }
.x-btn span { background: var(--paper); }
.x-btn:hover span { background: var(--red); }

/* =========================================================
   Страницы: фильм, поиск, комнаты
   ========================================================= */
.page { padding-top: calc(var(--header-h) + 30px); }
.wrap, .container { width: min(1320px, calc(100% - 2 * var(--gutter))); }
.sec-title { font: 700 clamp(44px, 7vw, 120px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.sec-title em { font: 600 .3em var(--mono); letter-spacing: .1em; color: var(--red); vertical-align: top; margin-left: .3em; font-style: normal; }
.sec-head p { color: var(--muted); }
.empty, .robot-run { clip-path: none; border-radius: 0; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.empty h3, .robot-run h3 { font: 700 clamp(28px, 3.4vw, 44px)/.95 var(--display); text-transform: uppercase; color: var(--paper); }
.robot-run li.on i { border-color: var(--red); border-top-color: transparent; }
.robot-run li.done i { background: var(--red); border-color: var(--red); }

.m-hero .bg { filter: grayscale(1) contrast(1.15) brightness(.5) blur(2px); inset: 0; }
.m-hero .bg::after { background: linear-gradient(180deg, rgba(10, 8, 7, .2), rgba(10, 8, 7, .6) 55%, var(--ink)); }
.m-poster { clip-path: none; border-radius: 0; box-shadow: 0 0 0 1px var(--line-2), 0 40px 80px -30px #000; overflow: hidden; }
.m-poster img { filter: contrast(1.05); }
.m-title { font: 700 clamp(48px, 7.5vw, 132px)/.84 var(--display); letter-spacing: -.01em; text-transform: uppercase; }
.m-orig { font: 500 13px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.m-meta { font: 600 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.rating-big { color: var(--paper); }
.block h2 { font: 700 clamp(26px, 2.6vw, 40px)/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.block h2 .mono { color: var(--red); font-size: 12px; vertical-align: super; }
.desc { color: var(--muted); }
.person { clip-path: none; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.person:hover, .person.dir { background: rgba(227, 18, 27, .14); box-shadow: inset 0 0 0 1px var(--red); }
.player-wrap { clip-path: none; border-radius: 0; box-shadow: 0 0 0 1px var(--line-2), 0 40px 100px -40px rgba(227, 18, 27, .5); overflow: hidden; }

/* версии по языкам */
.variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.variant { position: relative; display: grid; gap: 10px; padding: 18px 18px 16px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); text-align: left; transition: box-shadow .3s, transform .3s var(--ease), background .3s; overflow: hidden; }
.variant:hover { box-shadow: inset 0 0 0 1px var(--red); transform: translateY(-3px); }
.variant.is-best { background: linear-gradient(160deg, rgba(227, 18, 27, .22), var(--ink-2) 60%); box-shadow: inset 0 0 0 1px var(--red); }
.variant.is-missing { opacity: .45; pointer-events: none; }
.variant__lang { font: 600 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.variant__q { font: 700 clamp(44px, 4vw, 64px)/.85 var(--display); text-transform: uppercase; }
.variant__src { font-size: 13px; color: var(--muted); }
.variant__go { position: absolute; right: 16px; top: 16px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: var(--paper); }
.variant__go svg { width: 14px; height: 14px; }

.robot-card { clip-path: none; border-radius: 0; background: var(--red); box-shadow: 0 30px 80px -40px rgba(227, 18, 27, .8); overflow: hidden; }
.robot-card .top { color: var(--paper); background: var(--noise), linear-gradient(160deg, var(--red-2), var(--red) 50%, var(--red-deep)); background-size: 160px, 100%; }
.robot-card .q { font: 700 clamp(72px, 7vw, 110px)/.82 var(--display); color: var(--paper); }
.robot-card .reasons { background: var(--ink-2); }
.robot-card li::before { color: var(--red); }
.robot-card li.bad::before { color: #ffb35c; }
.robot-card .scan { color: var(--dim); }

.src-filters { display: grid; gap: 10px; margin-bottom: 16px; }
.frow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.frow__t { font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); min-width: 86px; }
.frow .filters { margin: 0; padding: 0; flex-wrap: wrap; display: flex; gap: 6px; }
.src { clip-path: none; border-radius: 0; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.src:hover { background: var(--ink-3); }
.src.best { background: linear-gradient(90deg, rgba(227, 18, 27, .2), var(--ink-2) 60%); box-shadow: inset 2px 0 0 var(--red), inset 0 0 0 1px var(--line-2); }
.src.current { box-shadow: inset 0 0 0 2px var(--paper); }
.src[hidden] { display: none !important; }
.src .ql { font: 700 24px/1 var(--display); }
.langs { display: inline-flex; gap: 4px; }
.langs b { font: 700 10px/1 var(--mono); letter-spacing: .08em; padding: 4px 6px; border-radius: 3px; background: var(--paper); color: var(--ink); }
.langs b.sub { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
.hint { font: 13px/1.45 var(--body); color: var(--muted); }

.more-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 6px; margin-top: 14px; }
.site { position: relative; display: grid; gap: 4px; padding: 14px 40px 14px 16px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s, background .25s; }
.site:hover { background: rgba(227, 18, 27, .1); box-shadow: inset 0 0 0 1px var(--red); }
.site__name { font: 600 15px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.site__meta { font: 12px/1.3 var(--body); color: var(--dim); }
.site__go { position: absolute; right: 14px; top: 50%; translate: 0 -50%; color: var(--red); font-size: 18px; }
details.more summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: "+"; font: 400 34px/1 var(--display); color: var(--red); transition: transform .3s; }
details.more[open] summary::after { transform: rotate(45deg); }

.vcard__link { border-radius: 0; border-color: var(--line-2); }
.vcard__img { filter: grayscale(.6) contrast(1.1); }
.vcard__link:hover .vcard__img { filter: none; }

/* модалка, тосты */
.modal { background: rgba(10, 8, 7, .8); }
.modal .box { clip-path: none; border-radius: 0; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.modal .box::before { background: var(--red); height: 2px; }
.modal h3 { font: 700 34px/.95 var(--display); }
.toast { clip-path: none; border-radius: 0; background: var(--paper); color: var(--ink); font: 600 13px/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.toast.error { background: var(--red); color: var(--paper); }

/* комната */
.panel { clip-path: none; border-radius: 0; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.tabs button { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.tabs button.on::after { background: var(--red); }
.msg.mine .txt { background: var(--red); color: var(--paper); }
.msg .who .host { background: var(--red); }
.live { color: var(--red); } .live::before { background: var(--red); }
.chat-form button { background: var(--red); color: var(--paper); }
.toggle input:checked { background: var(--red); border-color: var(--red); }

@media (prefers-reduced-motion: reduce) { .grain, .find-sec::before, .fx-glow, .loader .logo-sq { animation: none; } }

/* room for accents above capitals (Й, Ё, Oʻ): the text-clipped background must cover them */
.find-sec__title > span, .sec-title > span { padding-top: .26em; }
.find-sec__title > span + span { margin-top: -.14em; } /* a little air between the two lines */
.fx-slices > .sl { padding: inherit; box-sizing: border-box; }
/* blur on the header would make it the containing block of the fixed mobile menu (menu 0px tall) */
.header.menu-open { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--ink); }
.src .row2 span:has(.dub) { white-space: normal; }
.m-hero { overflow: hidden; }
.m-title { padding-block: .12em 0; margin-block: 4px 10px; }

/* Text filled through background-clip only shows inside the element's box. With the tight line-height the round
   letters (O, Q, S) and accents stick out of it and got cut / looked hollow — so every filled title gets room. */
.fx-grain, .fx-paper, .fx-glow { padding-block: .2em .16em; margin-block: -.2em -.16em; }
.hero__final-title { margin-top: 0; }

/* billing: the button mirrors the small text on the left (same bottom line, same edge distance) */
.hero__billing .hero__cta { position: static; justify-self: end; align-self: end; }
.hero__about { align-self: end; }
/* frame 142: the MilliyBiz logo glows like the neon title (scanlines + red light) */
.hero__final-logo { display: block; width: min(72vw, 980px); aspect-ratio: 1167 / 250;
  -webkit-mask: url("/img/logo-cinema.svg") center / contain no-repeat; mask: url("/img/logo-cinema.svg") center / contain no-repeat;
  background: repeating-linear-gradient(180deg, #ffe7dd 0 2px, #ff4a3d 2px 4px); }
.hero__final { filter: drop-shadow(0 0 6px rgba(255, 40, 30, .9)) drop-shadow(0 0 28px rgba(227, 18, 27, .7)) drop-shadow(0 0 70px rgba(227, 18, 27, .45)); }
@media (max-width: 900px) { .hero__final-logo { width: 84vw; } }
@media (max-width: 900px) { .hero__billing .hero__cta { justify-self: stretch; } }
/* neon catches once when the logo has fully come out */
.hero__final-logo.is-lit { animation: neon 1.2s steps(1) 1; }
@keyframes neon { 0%, 18%, 30%, 100% { opacity: 1; } 10%, 24% { opacity: .35; } }

/* site: no browser scrollbar (the ad shows its own progress); the admin keeps it */
html.lenis { scrollbar-width: none; }
html.lenis::-webkit-scrollbar { display: none; }

/* ---------- адаптивность: планшеты, альбомный телефон, вырез iPhone ---------- */
.hero__billing { bottom: max(22px, env(safe-area-inset-bottom)); }
@media (max-width: 900px) {
  .hero__title { font-size: clamp(64px, 23vw, 220px); }
  .hero__final-logo { width: min(86vw, 640px); }
}
/* планшет: кнопка не во всю ширину, а справа, напротив счётчика кадров */
@media (min-width: 601px) and (max-width: 900px) {
  .hero__billing { grid-template-columns: 1fr auto; align-items: center; }
  .hero__progress { order: 0; }
  .hero__billing .hero__cta { justify-self: end; }
  .hero__cta .btn-cut { flex: none; padding: 0 28px; }
}
/* телефон боком: экран низкий, всё по высоте */
@media (orientation: landscape) and (max-height: 520px) {
  .hero__title, .hero__final-title { font-size: min(19vw, 30vh); }
  .hero__pre, .hero__sub { font-size: 10px; margin: 4px 0; }
  .hero__credits { top: calc(var(--header-h) + 6px); }
  .hero__credits > :nth-child(2) { display: none; }
  .hero__billing { grid-template-columns: 1fr auto; align-items: center; bottom: 12px; }
  .hero__about { display: none; }
  .hero__progress { order: 0; justify-self: start; }
  .hero__billing .hero__cta { justify-self: end; }
  .hero__cta .btn-cut { flex: none; height: 42px; padding: 0 22px; }
  .hero__final-logo { width: min(60vw, 52vh * 4.67); }
  .find-sec { min-height: auto; padding: calc(var(--header-h) + 30px) 0 50px; }
  .find-sec__title { font-size: min(14vw, 22vh); }
  .mobile-menu { gap: 10px; justify-content: center; }
  .mobile-menu .nav-link { font-size: 28px; }
  .mobile-menu .lang-sw { margin-top: 10px; }
}
/* маленькие телефоны */
@media (max-width: 380px) {
  .logo__word { font-size: 17px; }
  .logo { gap: 9px; }
  .pref__t { width: 100%; text-align: center; margin: 0 0 4px; }
  .chip { padding: 0 12px; }
}
@media (max-width: 900px) and (orientation: portrait) { .find-sec__title { font-size: clamp(76px, 21vw, 230px); } }

.hero__credits a { color: inherit; transition: color .3s, text-shadow .3s; }
.hero__credits a:hover { color: var(--paper); text-shadow: 0 0 14px rgba(227, 18, 27, .9); }

.src-link { color: var(--red); white-space: nowrap; } .src-link:hover { color: var(--paper); }

/* the ad heading: three lines that never touch — «IN THE», the title, «ANOTHER DAY» with equal gaps */
.hero__heading { gap: clamp(10px, 1.4vw, 22px); }
.hero__heading .hero__title { margin: 0; padding-block: .14em .1em; line-height: .78; }
.hero__heading .hero__pre { margin: 0; padding-left: .5em; }
.hero__heading .hero__sub { margin: 0; padding-left: .3em; }
.hero__heading .hero__title { margin-top: -.07em; } /* the top padding only holds accents: even the visual gaps */

/* hover cursor: a thin red ring, see-through — the text and icons under it stay readable */
.cursor.is-hover .cursor__lens { width: 56px; height: 56px; background: rgba(227, 18, 27, .08); border: 1.5px solid var(--red); box-shadow: 0 0 18px rgba(227, 18, 27, .45); -webkit-backdrop-filter: none; backdrop-filter: none; }