/* =====================================================================
   TT2S — витринные компоненты (план 2809, задача 5).
   Подключается после brand.css только на витрине (лендинг, /v/, /d/) и
   служебных страницах стримера. В кабинете, доках, админке и виджетах —
   не нужен: там «тихий инструмент» без пятна, лент и стикеров.
   Все @keyframes пятна, ленты, волны и мигания живут только здесь.
   Показаны на /styleguide.html.
   ===================================================================== */

/* --- пятно света за страницей. Неподвижное; плавает только с .is-float
   (лендинг). Контент страницы кладётся поверх: main/.tt-foot —
   position: relative; z-index: 1 (в стилях самой страницы). --- */
.tt-ambient { position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(700px 560px at 82% 12%, color-mix(in srgb, var(--tt-accent) 20%, transparent), transparent 70%),
    radial-gradient(600px 520px at 8% 70%, color-mix(in srgb, var(--tt-violet) 12%, transparent), transparent 70%); }
html[data-theme="light"] .tt-ambient { opacity: .55; }
.tt-ambient.is-float { animation: tt-ambient-float 30s ease-in-out infinite; }
@keyframes tt-ambient-float { 0%, 100% { transform: translate3d(-2%, -3%, 0); } 50% { transform: translate3d(3%, 4%, 0); } }

/* --- бегущая лента: .tt-ribbons (полоса, высоту задаёт страница) >
   .tt-ribbon > два одинаковых .tt-ribbon-track > span. Одна, розовая,
   только на лендинге. Дорожка должна быть шире полосы (110% экрана),
   иначе в конце круга справа видна пустая полоса и текст «прыгает»:
   слова в дорожке повторены трижды — хватает до экранов шириной ~4800px.
   По высоте не обрезаем: наклонённая полоса на широком экране выше блока. --- */
.tt-ribbons { position: relative; height: 250px; overflow: hidden; overflow: clip visible; }
.tt-ribbon { position: absolute; left: -5%; right: -5%; top: 50%; z-index: 2; display: flex; overflow: hidden; padding: 16px 0; white-space: nowrap;
  background: var(--tt-accent); color: var(--tt-accent-ink); transform: translateY(-50%) rotate(-3deg); }
.tt-ribbon-track { display: flex; flex-shrink: 0; gap: 40px; padding-right: 40px; font-family: var(--tt-font-display); font-weight: 900; font-size: clamp(22px, 3vw, 36px); text-transform: uppercase; letter-spacing: -0.01em; animation: tt-marquee 96s linear infinite; }
.tt-ribbon-track span { display: inline-flex; align-items: center; gap: 40px; }
/* звёздочка-разделитель */
.tt-ribbon-track span::after { content: ''; width: .55em; height: .55em; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 6.4 5.6 11.2 12 12-6.4.8-11.2 5.6-12 12-.8-6.4-5.6-11.2-12-12C6.4 11.2 11.2 6.4 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 6.4 5.6 11.2 12 12-6.4.8-11.2 5.6-12 12-.8-6.4-5.6-11.2-12-12C6.4 11.2 11.2 6.4 12 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes tt-marquee { to { transform: translateX(-100%); } }
@media (max-width: 760px) {
  .tt-ribbons { height: 170px; }
  .tt-ribbon { padding: 12px 0; }
}

/* --- стикер: наклонная плашка поверх иллюстрации. Место и наклон задаёт
   страница (right/top…, --tilt). Без модификатора — розовый. --- */
.tt-sticker { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 16px; line-height: 1;
  font-family: var(--tt-font-display); font-weight: 800; font-size: 14px;
  background: var(--tt-accent); color: var(--tt-accent-ink); box-shadow: var(--tt-shadow-card); transform: rotate(var(--tilt, 4deg)); }
.tt-sticker svg { display: block; flex-shrink: 0; }
.tt-sticker .tt-ico { width: 16px; height: 16px; }
.tt-sticker--ink { background: var(--tt-ink); color: var(--tt-bg); }
.tt-sticker--ink svg { color: var(--tt-accent); }
/* тёмный текст на фиолетовом: 5.3:1 (белый — только 3.7:1) */
.tt-sticker--violet { background: var(--tt-violet); color: var(--tt-accent-ink); }

/* --- «в эфире»: красная мигающая точка перед текстом --- */
.tt-live { display: inline-flex; align-items: center; gap: 8px; color: var(--tt-live); }
.tt-live::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: tt-blink 1.6s ease-in-out infinite; }
/* мигающая точка у статуса (.tt-status в brand.css) — «ждём» */
.tt-status--pulse::before { animation: tt-blink 1.6s ease-in-out infinite; }
@keyframes tt-blink { 50% { opacity: .35; } }

/* --- волна «звучит»: .tt-wave > 5 × span --- */
.tt-wave { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.tt-wave span { width: 3px; height: 40%; border-radius: 2px; background: var(--tt-accent); animation: tt-wave .9s ease-in-out infinite; }
.tt-wave span:nth-child(2) { animation-delay: .1s; }
.tt-wave span:nth-child(3) { animation-delay: .2s; }
.tt-wave span:nth-child(4) { animation-delay: .3s; }
.tt-wave span:nth-child(5) { animation-delay: .4s; }
@keyframes tt-wave { 0%, 100% { height: 25%; } 50% { height: 100%; } }
/* .is-idle — волна стоит (низкие столбики), пока ничего не звучит */
.tt-wave.is-idle span { animation: none; height: 25%; }

/* --- круглая кнопка «послушать»: .tt-play > svg (треугольник). Размер —
   --play-size, цвет — --play-bg / --play-ink (по умолчанию акцент).
   .is-playing — кольцо расходится, пока звучит. --- */
.tt-play { position: relative; flex: none; display: grid; place-items: center; width: var(--play-size, 64px); height: var(--play-size, 64px); border-radius: 50%;
  background: var(--play-bg, var(--tt-accent)); color: var(--play-ink, var(--tt-accent-ink)); transition: transform var(--tt-dur-2) var(--tt-ease); }
/* треугольник — M7 5v14l11-7z: рамка 7–18 (на 0.5 правее центра) — лёгкая
   оптическая компенсация уже в самом пути, CSS-сдвиг не нужен.
   --play-icon — целый размер значка той же чётности, что и кнопка: 40% от
   56 = 22.4px ложится между пикселями, и треугольник съезжает влево-вверх */
.tt-play svg { display: block; width: var(--play-icon, 40%); height: var(--play-icon, 40%); }
.tt-play.is-playing::after { content: ''; position: absolute; inset: 0; border-radius: 50%; animation: tt-play-ring 1.4s ease-out infinite; }
@keyframes tt-play-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--play-bg, var(--tt-accent)) 50%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }

/* --- раскладка «заголовок слева, карточка справа» служебных страниц.
   Ширину карточки меняет --split-side; h1 — общий .tt-h1 (--tt-fs-h1),
   размер на странице не переопределяем. --- */
.tt-split { width: 100%; max-width: 1200px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--split-side, 500px)); gap: clamp(32px, 6vw, 96px); align-items: center; }
.tt-split-head .tt-lead { margin-top: 24px; max-width: 470px; }
/* маскот-стикер на верхнем крае карточки (.tt-split-card — position: relative);
   карточке сверху справа нужен свободный угол под него */
.tt-split-card { position: relative; }
.tt-split-mascot { position: absolute; z-index: 1; top: -46px; right: 18px; --m-size: 84px; pointer-events: none; }
@media (max-width: 1080px) {
  .tt-split { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 28px; }
  .tt-split-head .tt-lead { margin-top: 16px; }
}
@media (max-width: 480px) {
  .tt-split-mascot { top: -38px; right: 12px; --m-size: 68px; }
}

/* --- страница ошибки: маскот, заголовок, текст, кнопки по центру ---
   404, 500, login-error и «музыка выключена» на /youtube. Заголовок мельче
   общего --tt-fs-h1 (60px): колонка узкая (560) и по центру, главный здесь
   маскот — при 60px капсом длинные заголовки входа ломаются на много строк */
.tt-errpage { max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.tt-errpage .tt-mascot-box { --m-size: clamp(140px, 36vw, 200px); margin-bottom: 18px; }
.tt-errpage .tt-h1 { font-size: clamp(28px, 6vw, 48px); margin: 12px 0 14px; overflow-wrap: anywhere; }
.tt-errpage p { color: var(--tt-ink-soft); font-size: 16px; line-height: 1.6; margin: 0 0 26px; }
/* код сбоя на 500 (lib/errorPages.js) — мельче основного текста, над кнопками */
.tt-errpage p.tt-errpage-code { font-size: 14px; color: var(--tt-ink-muted); margin: -12px 0 26px; }
.tt-errpage-code b { font-family: var(--tt-font-mono); font-weight: 500; color: var(--tt-ink); letter-spacing: .06em; }
.tt-errpage-code a { color: var(--tt-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.tt-errpage-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  .tt-ambient.is-float, .tt-ribbon-track, .tt-live::before, .tt-status--pulse::before, .tt-wave span, .tt-play.is-playing::after { animation: none; }
}