/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--color-bg);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; }
ul { list-style: none; }

/* ===== Stage (размеры и scale выставляет main.js) ===== */
.stage {
  position: fixed;
  left: 0;
  top: 0;
  width: 1440px;
  height: 900px;
  transform-origin: top left;
  background: var(--color-bg);
  overflow: hidden;
}

/* ===== Helpers ===== */
.gold-text {
  background-image: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ===== Декор ===== */
/* Зерно-оверлей на весь вьюпорт (как узел Grain в pencil-макетах): div
   лежит после .stage (см. renderLandingStage), т.к. stage масштабируется
   с letterbox-полями — fixed относительно вьюпорта закрывает и их.
   noise.svg — белые и чёрные вкрапления с прозрачной серединой (средний
   вклад нулевой, фон не отмывается), без blend-mode: overlay/soft-light
   на почти чёрном фоне тёмных тем дают <1% модуляции. */
.grain { position: fixed; inset: 0; z-index: 50; pointer-events: none; background: url("../assets/noise.svg") repeat; background-size: 240px 240px; opacity: 0.18; }
/* Выделение текста — системное: globals.css приложения красит ::selection
   в акцент (в @layer base), здесь откатываем к дефолту браузера. */
::selection { background: revert; color: revert; }
.decor-glow { position: absolute; left: 640px; top: 300px; width: 740px; height: 640px; border-radius: 50%; background-image: var(--glow-main); }
.ghost { position: absolute; left: 1010px; top: 10px; font-family: var(--font-display); font-size: 170px; font-weight: 700; color: transparent; white-space: nowrap; user-select: none; }
.inset-frame { position: absolute; left: 20px; top: 20px; width: 1400px; height: 860px; border-radius: var(--radius-frame); outline: 1px solid var(--border-frame); outline-offset: -0.5px; pointer-events: none; }
.plus { position: absolute; font-size: 14px; color: var(--color-accent); user-select: none; }
.plus--1 { left: 64px; top: 824px; }
.plus--2 { left: 1340px; top: 120px; }
.sparkle { position: absolute; color: var(--color-accent); }
.sparkle svg { width: 100%; height: 100%; }
.sparkle--1 { left: 1348px; top: 344px; width: 18px; height: 18px; }
.sparkle--2 { left: 1062px; top: 91px; width: 18px; height: 18px; }
.sparkle--3 { left: 676px; top: 763px; width: 14px; height: 14px; }

/* ===== Header ===== */
/* Пилюля таймера анкорится за правый край, а не за left: её ширина зависит
   от состояния (цифры / «Эфир идёт» / «Эфир завершён»), а на месте должен
   оставаться именно правый край. В мобильной раскладке — центрирование. */
.logo { position: absolute; left: 38px; top: 38px; width: 167px; height: 30px; }
.timer { position: absolute; right: 38px; top: 38px; height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-radius: var(--radius-timer); outline: 1px solid var(--border-default); outline-offset: -0.5px; }
.timer__label { font-size: 9px; letter-spacing: 2px; color: var(--color-text-muted); white-space: nowrap; }
.timer__digits { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); }
.timer__digits b { font-size: 18px; font-weight: 700; width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.timer__digits i { font-style: normal; font-size: 16px; font-weight: 700; color: var(--color-accent); }

/* ===== Hero ===== */
.kicker { position: absolute; left: 0; top: 119px; width: 1440px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 3px; color: var(--color-accent); white-space: nowrap; }
.headline { position: absolute; left: 270px; top: 155px; width: 900px; text-align: center; font-family: var(--font-display); font-size: 38px; font-weight: 700; line-height: 42px; }
.chip { position: absolute; left: 50%; top: 279px; transform: translateX(-50%); padding: 10px 20px; border-radius: var(--radius-pill); outline: 1px solid var(--border-default); outline-offset: -0.5px; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--color-accent); white-space: nowrap; }

/* ===== Видео-постер ===== */
.video-glow { position: absolute; left: 690px; top: 330px; width: 640px; height: 420px; border-radius: 50%; background-image: var(--glow-video); pointer-events: none; }
.poster { position: absolute; left: 740px; top: 372px; width: 540px; height: 304px; border-radius: var(--radius-poster); outline: 1px solid var(--border-poster); outline-offset: -0.5px; background: url("../assets/poster.webp") center / cover no-repeat; overflow: hidden; }
.poster__top { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: var(--overlay-top); border-bottom: 1px solid var(--border-subtle); }
.poster__tg { display: flex; align-items: center; gap: 8px; }
.poster__tg--right { gap: 6px; }
.poster__tg--right svg { width: 11px; height: 11px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
.live { font-size: 9px; font-weight: 700; letter-spacing: 2px; color: var(--color-accent); }
.sep { font-size: 9px; color: var(--color-sep); }
.ptitle { font-size: 9px; letter-spacing: 2px; color: var(--color-text-secondary); }
.viewers, .time { font-size: 10px; font-weight: 700; color: var(--color-text); white-space: nowrap; }

.play { position: absolute; left: 200px; top: 80px; width: 140px; height: 140px; padding: 0; border: 0; background: none; cursor: pointer; }
.play__glow { position: absolute; inset: 0; border-radius: 50%; background-image: var(--glow-play); }
.play__pulse { position: absolute; left: 10px; top: 10px; width: 120px; height: 120px; border-radius: 50%; outline: 1px solid var(--color-accent-25); outline-offset: -0.5px; animation: play-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; }
.play__ring { position: absolute; left: 20px; top: 20px; width: 100px; height: 100px; border-radius: 50%; outline: 1px solid var(--color-accent); outline-offset: -0.5px; animation: play-ping 2.4s cubic-bezier(0, 0, 0.2, 1) 1.2s infinite; }
.play__circle { position: absolute; left: 30px; top: 30px; width: 80px; height: 80px; border-radius: 50%; background: var(--color-gold-light); box-shadow: var(--shadow-play); transition: transform 0.2s ease; }

/* Пульс: кольца расходятся и гаснут. Только transform/opacity — без перерисовок layout. */
@keyframes play-ping {
  0% { transform: scale(0.82); opacity: 0.9; }
  70%, 100% { transform: scale(1.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .play__pulse, .play__ring { animation: none; }
}
.play:hover .play__circle { transform: scale(1.06); }
.play > svg { position: absolute; left: 56px; top: 56px; width: 28px; height: 28px; }

.poster__bottom { position: absolute; left: 0; top: 262px; z-index: 2; width: 100%; height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--overlay-bottom); border-top: 1px solid var(--border-subtle); }
.poster__bottom svg { flex-shrink: 0; width: 13px; height: 13px; }
.ctrl { display: flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; flex-shrink: 0; transition: opacity 0.15s ease; }
.ctrl:hover { opacity: 0.75; }
.ctrl-play svg { width: 12px; height: 12px; }
.ctrl-play .svg-pause { display: none; }
.poster.is-playing .ctrl-play .svg-play { display: none; }
.poster.is-playing .ctrl-play .svg-pause { display: block; }
.ctrl-vol.is-muted { opacity: 0.4; }
.spacer { flex: 1; }
.track { position: absolute; left: 0; top: 300px; z-index: 2; width: 100%; height: 4px; background: var(--color-track); cursor: pointer; }
/* Нижний бар и трек — контролы настоящего плеера: на статичном постере скрыты */
.poster:not(.has-video) .poster__bottom,
.poster:not(.has-video) .track { display: none; }
.progress { width: 190px; height: 100%; background: var(--color-accent); }
.knob { position: absolute; left: 185px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-gold-light); }
.poster__video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: var(--color-bg); }

/* ===== Буллеты ===== */
.side { position: absolute; left: 150px; top: 351px; width: 456px; }
.side__title { position: absolute; left: 16px; top: 0; width: 440px; font-size: 16px; font-weight: 700; line-height: 24px; color: var(--color-text); }
.side__bar { position: absolute; left: 0; top: 2px; width: 3px; height: 44px; border-radius: 2px; background: var(--color-accent); }
.bullets { position: absolute; left: 0; top: 66px; width: 440px; display: flex; flex-direction: column; gap: 10px; }
.bullet { display: flex; align-items: center; gap: 14px; }
.bullet__chip { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-chip); background: var(--color-chip); outline: 1px solid var(--border-default); outline-offset: -0.5px; }
.bullet__chip svg { width: 16px; height: 16px; }
.bullet p { font-size: 13px; line-height: 19px; color: var(--color-text-secondary); }
.micro { position: absolute; left: 0; top: 312px; display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--color-chip); outline: 1px solid var(--border-default); outline-offset: -0.5px; font-size: 11px; color: var(--color-text); white-space: nowrap; }
.micro svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ===== Низ ===== */
.rule { position: absolute; left: 48px; top: 736px; width: 1344px; height: 1px; background: var(--border-subtle); }
.bottom-text { position: absolute; left: 150px; top: 760px; width: 503px; font-size: 15px; line-height: 23px; color: var(--color-text); }
.cta { position: absolute; left: 808px; top: 762.5px; height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 26px 0 36px; border-radius: var(--radius-cta); background: var(--color-surface); outline: 1px solid var(--color-accent); outline-offset: -0.5px; text-decoration: none; transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
/* Золотая заливка — отдельный слой с плавным crossfade (градиенты не transition-ятся напрямую) */
.cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--gradient-gold); opacity: 0; transition: opacity 0.35s ease; }
.cta > * { position: relative; }
.cta:hover, .cta:focus-visible { box-shadow: var(--shadow-play); transform: translateY(-2px); }
.cta:hover::before, .cta:focus-visible::before { opacity: 1; }
.cta:hover .cta__label, .cta:focus-visible .cta__label { background: none; -webkit-text-fill-color: var(--color-on-accent); color: var(--color-on-accent); }
.cta:hover .cta__divider, .cta:focus-visible .cta__divider { background: var(--border-on-gold); }
.cta:hover svg path, .cta:focus-visible svg path { fill: var(--color-on-accent); }
.cta:hover svg, .cta:focus-visible svg { transform: translateX(3px); }
.cta__label { font-size: 15px; font-weight: 800; white-space: nowrap; transition: color 0.35s ease; }
.cta__divider { width: 1px; height: 26px; background: var(--color-accent-25); transition: background 0.35s ease; }
.cta svg { width: 18px; height: 18px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.cta svg path { transition: fill 0.35s ease; }
.trust { position: absolute; left: 808px; top: 839px; width: 399px; text-align: center; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.trust__icon { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; }

/* ============================================================
   Mobile (390×844) — .is-mobile выставляет main.js
   ============================================================ */
.stage.is-mobile { width: 390px; height: 844px; }
.stage.is-mobile .ghost,
.stage.is-mobile .inset-frame,
.stage.is-mobile .rule,
.stage.is-mobile .bottom-text,
.stage.is-mobile .plus,
.stage.is-mobile .sparkle,
.stage.is-mobile .side__title,
.stage.is-mobile .side__bar,
.stage.is-mobile .micro { display: none; }

.stage.is-mobile .decor-glow { left: -80px; top: 160px; width: 600px; height: 500px; }
.stage.is-mobile .logo { left: 139.5px; top: 20px; width: 111px; height: 20px; }
.stage.is-mobile .timer { left: 0; right: 0; width: max-content; margin-inline: auto; top: 67px; height: 30px; padding: 0 12px; gap: 12px; border-radius: 6px; }
.stage.is-mobile .timer__label { font-size: 7px; }
.stage.is-mobile .timer__digits b { font-size: 14px; }
.stage.is-mobile .timer__digits i { font-size: 12px; }
.stage.is-mobile .kicker { top: 138px; width: 390px; font-size: 9px; letter-spacing: 2px; }
.stage.is-mobile .headline { left: 20px; top: 164px; width: 350px; font-size: 20px; line-height: 22px; }
.stage.is-mobile .chip { top: 268px; padding: 10px 12px; font-size: 9px; }
.stage.is-mobile .video-glow { left: -40px; top: 260px; width: 480px; height: 380px; }
.stage.is-mobile .poster { left: 20px; top: 310px; width: 350px; height: 180px; }
.stage.is-mobile .play { left: 129px; top: 44px; width: 91px; height: 91px; }
.stage.is-mobile .play__pulse { left: 7px; top: 7px; width: 78px; height: 78px; }
.stage.is-mobile .play__ring { left: 13px; top: 13px; width: 65px; height: 65px; }
.stage.is-mobile .play__circle { left: 20px; top: 20px; width: 52px; height: 52px; }
.stage.is-mobile .play > svg { left: 37px; top: 37px; width: 18px; height: 18px; }
.stage.is-mobile .poster__bottom { top: 138px; }
.stage.is-mobile .track { top: 176px; }
.stage.is-mobile .progress { width: 123px; }
.stage.is-mobile .knob { left: 118px; }
.stage.is-mobile .side { left: 28px; top: 510px; width: 334px; }
.stage.is-mobile .bullets { position: static; width: 334px; gap: 8px; }
.stage.is-mobile .bullet p { font-size: 12px; line-height: 16px; }
.stage.is-mobile .cta { left: 29px; top: 736px; height: 52px; gap: 12px; padding: 0 20px 0 24px; }
.stage.is-mobile .cta__label { font-size: 13px; }
.stage.is-mobile .cta__divider { height: 20px; }
.stage.is-mobile .cta svg { width: 16px; height: 16px; }
.stage.is-mobile .trust { left: 0; top: 800px; width: 390px; font-size: 11px; }

/* ===== Статусы эфира (управляет main.js по LANDING_CONFIG) ===== */
.timer__status { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--color-accent); white-space: nowrap; }
.cta.is-disabled { opacity: 0.45; pointer-events: none; }

/* ===== Интеграция с root layout приложения (Next) =====
   Глобальный layout вешает на <body> utility-классы (bg-bg, text-fg,
   font-body), а globals.css задаёт :root-переменные с теми же именами
   (--font-body, --font-display): у класса специфичность выше селектора
   body, а порядок загрузки таблиц не гарантирован. Селектор body.font-body
   специфичнее utility-класса, а переменные на body перекрывают :root для
   всего содержимого страницы — шаблон выглядит одинаково независимо от
   порядка CSS. */
body.font-body {
  --font-display: "Geologica", system-ui, sans-serif;
  --font-body: "Golos Text", system-ui, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: normal; /* у globals.css @layer base body { line-height: 1.62 } */
}

/* ===== Темы: перекраска SVG-иконок эталона через токены =====
   CSS-свойство fill приоритетнее презентационного атрибута fill,
   поэтому разметка stage-template.ts не меняется. */
.sparkle svg path { fill: var(--color-accent); }
.poster__tg--right svg path { fill: var(--color-text-secondary); }
.play > svg path { fill: var(--color-on-accent); }
.ctrl-play svg path { fill: var(--color-accent); }
.ctrl-vol svg path, .ctrl-full svg path { fill: var(--color-text-secondary); }
.micro svg path { fill: var(--color-accent); }
.cta svg path { fill: var(--color-accent); }
/* Иконки буллетов — stroke-иконки mynaui с currentColor: красим через color. */
.bullet__chip svg { color: var(--color-accent); }