/*
 * ТЕеАТР: публичная афиша («программка»).
 * Ось: на широком экране слева колонка с датой, справа строки программы; на узком ось сворачивается в липкую шапку дня.
 */
.site {
  --gutter: var(--s-4);
  --axis: 0px;
  --axis-gap: 0px;
  --ctrl-h: 60px;
  min-height: 100vh; /* taste-skill-ignore: запасное значение перед 100dvh */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
@media (min-width: 720px) { .site { --gutter: var(--s-5); } }
@media (min-width: 1200px) {
  .site { --gutter: var(--s-6); --axis: clamp(200px, 17vw, 248px); --axis-gap: var(--s-6); }
}

.wrap { width: 100%; max-width: 1480px; margin-inline: auto; padding-inline: var(--gutter); }

/* ── Шапка: чайное поле ────────────────────────────────────── */
.mast { background: var(--tea); color: var(--on-tea); --focus: var(--on-tea); }
.mast-in { position: relative; padding-block: var(--s-4); display: grid; gap: var(--s-2); }
@media (min-width: 720px) {
  .mast-in { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-6); align-items: center; padding-block: var(--s-4); padding-right: calc(2 * var(--control) + 108px + var(--s-6)); }
}
@media (min-width: 1200px) {
  .mast-in { grid-template-columns: var(--axis) minmax(0, 1fr); column-gap: var(--axis-gap); }
}

.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: inherit; min-height: var(--control); width: max-content; }
.brand-cup { width: 40px; height: 40px; flex: none; }
.brand-name { font: 700 var(--step-4) / 1 var(--font-display); letter-spacing: -0.01em; }
.brand-ee { color: #f08f76; }

.mast-tools { position: absolute; top: var(--s-4); right: 0; display: flex; gap: var(--s-2); }
@media (min-width: 720px) { .mast-tools { top: 50%; margin-top: calc(-0.5 * var(--control)); } .mast-live { margin-top: 0; } }
.tool {
  width: var(--control);
  height: var(--control);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: rgba(243, 248, 244, 0.12);
  color: var(--on-tea);
  transition: background var(--dur-2), transform var(--dur-1);
}
.tool svg { width: 20px; height: 20px; }
.tool-text { display: inline-flex; align-items: center; justify-content: center; width: auto; gap: var(--s-2); padding: 0 var(--s-4); font-weight: 700; text-decoration: none; }
@media (max-width: 460px) { .tool-text span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .tool-text { width: var(--control); padding: 0; } }
@media (hover: hover) { .tool:hover { background: rgba(243, 248, 244, 0.22); } }
.tool:active { transform: translateY(1px); }

.mast-title {
  font: 600 var(--step-5) / 1 var(--font-display);
  letter-spacing: -0.03em;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-3);
}
.mast-title .line { display: inline-block; overflow: hidden; padding-bottom: var(--s-1); margin-bottom: calc(-1 * var(--s-1)); }
.mast-title .line > span { display: inline-block; }
.mast-lead { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-5); row-gap: var(--s-1); min-width: 0; }
.mast-live { flex: 1 1 280px; margin-top: var(--s-2); font-size: var(--step-2); line-height: 1.35; color: var(--on-tea-2); max-width: 52ch; min-height: 1.35em; }
.mast-live b { color: var(--on-tea); font-weight: 700; }

/* ── Управление ────────────────────────────────────────────── */
.ctrl { position: sticky; top: 0; z-index: 50; background: var(--paper); transition: background var(--dur-2); }
.ctrl.scrolled { background: var(--paper-2); }
.ctrl-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding-block: var(--s-2); }
@media (min-width: 1200px) { .ctrl-in { padding-left: calc(var(--axis) + var(--axis-gap)); } }
@media (max-width: 719px) { .ctrl { position: static; } }

.tabs { position: relative; display: inline-flex; background: var(--paper-2); padding: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ctrl.scrolled .tabs { background: var(--paper-3); }
.tabs::-webkit-scrollbar { display: none; }
.tabs-glide { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--tea); transition: transform var(--dur-3) var(--ease-tab), width var(--dur-3) var(--ease-tab); pointer-events: none; }
.tab {
  position: relative;
  min-height: var(--control);
  padding: 0 var(--s-4);
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur-2);
}
.tab[aria-pressed="true"] { color: var(--on-tea); }
.tab:not([aria-pressed="true"]):hover { color: var(--ink); }
.tabs.no-js-glide .tab[aria-pressed="true"] { background: var(--tea); }

.dates { position: relative; }
.dates-btn {
  min-height: var(--control);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-4);
  border: 0;
  background: var(--paper-2);
  font-weight: 600;
  transition: background var(--dur-2), transform var(--dur-1);
}
.ctrl.scrolled .dates-btn { background: var(--paper-3); }
.dates-btn svg { width: 18px; height: 18px; }
@media (hover: hover) { .dates-btn:hover { background: var(--paper-3); } }
.dates-btn:active { transform: translateY(1px); }
.dates-btn[aria-expanded="true"] { background: var(--paper-3); }
.dates-panel {
  position: absolute;
  top: calc(100% + var(--s-2));
  left: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  width: min(360px, calc(100vw - 2 * var(--gutter)));
  padding: var(--s-4);
  background: var(--paper);
  box-shadow: 0 16px 40px rgba(20, 35, 30, 0.18); /* taste-skill-ignore: всплывающая панель */
  animation: pop-in var(--dur-2) var(--ease-glide);
}
.dates-panel[hidden] { display: none; }
.dates-panel label { display: grid; gap: var(--s-1); font-size: var(--step-1); color: var(--ink-2); font-weight: 600; }
.dates-panel input { width: 100%; min-height: var(--control); padding: 0 var(--s-3); border: 0; background: var(--paper-2); font-variant-numeric: tabular-nums; }
.dates-panel .hint { grid-column: 1 / -1; font-size: var(--step-1); color: var(--ink-2); }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.search { position: relative; flex: 1 1 240px; max-width: 360px; min-width: 200px; }
.search svg { position: absolute; left: var(--s-3); top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--ink-2); pointer-events: none; }
.search input {
  width: 100%;
  min-height: var(--control);
  padding: 0 var(--s-3) 0 calc(var(--s-3) + 28px);
  border: 0;
  background: var(--paper-2);
  transition: background var(--dur-2);
}
.ctrl.scrolled .search input { background: var(--paper-3); }
.search input::placeholder { color: var(--ink-2); opacity: 1; }
.search input:focus { background: var(--paper-3); }

.reset {
  min-height: var(--control);
  padding: 0 var(--s-3);
  border: 0;
  background: transparent;
  color: var(--coral-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.reset[hidden] { display: none; }

.cats { padding-block: 0 var(--s-1); }
.cats-in { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; }
@media (min-width: 1200px) { .cats-in { padding-left: calc(var(--axis) + var(--axis-gap)); } }
.cats-in::-webkit-scrollbar { display: none; }
.cat {
  min-height: var(--control);
  padding: 0 var(--s-4);
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur-2), color var(--dur-2), transform var(--dur-1);
}
.cat .n { margin-left: var(--s-1); font-weight: 400; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .cat:hover { background: var(--paper-2); color: var(--ink); } }
.cat:active { transform: translateY(1px); }
.cat[aria-pressed="true"] { background: var(--paper-3); color: var(--ink); }
.cat[aria-pressed="true"] .n { color: var(--coral-ink); font-weight: 700; }

/* ── Программа ─────────────────────────────────────────────── */
.main { flex: 1; padding-block: 0 var(--s-8); }
#out:focus { outline: none; }

.day { padding-block: var(--s-2) var(--s-5); }
@media (min-width: 1200px) {
  .day { display: grid; grid-template-columns: var(--axis) minmax(0, 1fr); column-gap: var(--axis-gap); align-items: start; padding-block: var(--s-3) var(--s-6); }
}

.day-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--s-3);
  margin: 0 calc(-1 * var(--gutter)) var(--s-1);
  padding: var(--s-2) var(--gutter);
  background: var(--paper);
  font: inherit;
}
.day-num { font: 700 var(--step-4) / 1 var(--font-display); color: var(--coral); font-variant-numeric: lining-nums; }
.day-name { font-weight: 700; font-size: var(--step-3); }
.day-month { color: var(--ink-2); }
.day-count { margin-left: auto; color: var(--ink-2); font-size: var(--step-1); font-variant-numeric: tabular-nums; }
@media (min-width: 1200px) {
  .day-head {
    top: calc(var(--ctrl-h) + var(--s-4));
    display: grid;
    gap: var(--s-1);
    margin: 0;
    padding: 0;
    background: transparent;
  }
  .day-num { font-size: clamp(4.5rem, 3rem + 4vw, 6.5rem); letter-spacing: -0.03em; }
  .day-count { margin: var(--s-2) 0 0; }
}

.rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2) var(--s-5); }
@media (min-width: 960px) { .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.row {
  position: relative;
  display: grid;
  grid-template-columns: 64px 48px minmax(0, 1fr) var(--control);
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3);
  min-height: 96px;
  transition: background var(--dur-2);
}
@media (hover: hover) { .row:hover { background: var(--paper-2); } }
.row-hit { position: absolute; inset: 0; z-index: 1; }
.row-hit:focus-visible { outline-offset: -2px; }

.row-time { display: grid; gap: var(--s-1); align-content: start; font-variant-numeric: tabular-nums; }
.t { font: 700 var(--step-3) / 1.15 var(--font-text); }
.t-unk { color: var(--ink-2); font-weight: 400; }
.t-hours { font-size: var(--step-2); }
.t-note { font-size: var(--step-1); line-height: 1.3; color: var(--ink-2); }
.row.soon .t, .row.soon .t-note { color: var(--coral-ink); }
.row.soon .t-note { font-weight: 700; }

.row-pic {
  position: relative;
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: var(--paper-3);
  background: color-mix(in srgb, var(--tint, var(--tea)) 16%, var(--paper-2));
}
.row-pic img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-glide); }
@media (hover: hover) { .row:hover .row-pic img { transform: scale(1.07); } }
.ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--tea); }
html[data-theme="dark"] .ph { color: var(--action); }
.ph svg { width: 24px; height: 24px; stroke-width: 1.75; }

.row-main { min-width: 0; display: grid; gap: var(--s-1); align-content: start; }
.row-title { font: 600 var(--step-3) / 1.2 var(--font-display); letter-spacing: -0.005em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.row-meta { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); }
.row-meta .venue { color: var(--ink); font-weight: 600; }
.row-meta .dot::before { content: "\00a0·\00a0"; }
.row-price { font-size: var(--step-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.row-price.none { font-weight: 400; color: var(--ink-2); }
.row-price .age { font-weight: 400; color: var(--ink-2); }
.row-price .age::before { content: "\00a0·\00a0"; }

.ses-row { position: relative; z-index: 2; grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.ses {
  display: inline-flex;
  align-items: center;
  min-height: var(--control);
  min-width: 60px;
  justify-content: center;
  padding: 0 var(--s-2);
  background: var(--paper-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background var(--dur-2), color var(--dur-2), transform var(--dur-1);
}
@media (hover: hover) { a.ses:hover { background: var(--tea); color: var(--on-tea); } }
a.ses:active { transform: translateY(1px); }

.row-side { position: relative; z-index: 2; align-self: center; }
.go, .buy {
  min-height: var(--control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  width: var(--control);
  padding: 0;
  border: 0;
  background: var(--paper-3);
  color: var(--ink);
  font-weight: 700;
  transition: background var(--dur-2), color var(--dur-2), transform var(--dur-1);
}
.go svg { width: 18px; height: 18px; }
.buy { flex-direction: column; gap: 0; font-size: var(--step-1); line-height: 1.1; }
.buy svg { width: 16px; height: 16px; }
.buy .n { font-variant-numeric: tabular-nums; }
.row:hover .go { background: var(--tea); color: var(--on-tea); }
@media (hover: none) { .row:hover .go { background: var(--paper-3); color: var(--ink); } }
@media (hover: hover) { .buy:hover { background: var(--action); color: var(--on-action); } }
.buy:active { transform: translateY(1px); }

@media (max-width: 719px) {
  .row { grid-template-columns: 56px minmax(0, 1fr) var(--control); padding-inline: var(--s-2); }
  .row-pic { display: none; }
  .ses-row { grid-column: 2 / -1; }
}

/* ── Состояния ─────────────────────────────────────────────── */
.err-b { display: none; margin-bottom: var(--s-4); padding: var(--s-4); background: var(--paper-2); color: var(--danger); font-weight: 600; }
.err-retry, .em-reset {
  min-height: var(--control);
  padding: 0 var(--s-5);
  border: 0;
  background: var(--action);
  color: var(--on-action);
  font-weight: 700;
  transition: transform var(--dur-1), opacity var(--dur-2);
}
.err-retry { margin-left: var(--s-3); }
@media (hover: hover) { .err-retry:hover, .em-reset:hover { opacity: 0.88; } }
.err-retry:active, .em-reset:active { transform: translateY(1px); }

.ld { padding-block: var(--s-4); }
.ld .lt { font: 600 var(--step-3) / 1.3 var(--font-display); margin-bottom: var(--s-4); }
.ld .sk { display: grid; gap: var(--s-2); }
.ld .sk i { display: block; height: 80px; background: var(--paper-2); }
@media (min-width: 960px) { .ld .sk { grid-template-columns: repeat(2, 1fr); } }

.em { padding: var(--s-8) 0; text-align: left; max-width: 56ch; }
.em h2 { font: 600 var(--step-4) / 1.15 var(--font-display); margin-bottom: var(--s-2); }
.em p { color: var(--ink-2); margin-bottom: var(--s-5); }
@media (min-width: 1200px) { .em { margin-left: calc(var(--axis) + var(--axis-gap)); } }

.scroll-loader { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-6); color: var(--ink-2); font-size: var(--step-1); }
@media (min-width: 1200px) { .scroll-loader { padding-left: calc(var(--axis) + var(--axis-gap)); } }
.scroll-loader[hidden] { display: none; }
.scroll-spinner { width: 16px; height: 16px; border: 2px solid var(--paper-3); border-top-color: var(--action); border-radius: 50%; opacity: 0; }
.scroll-loader.loading .scroll-spinner { opacity: 1; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Подвал: чайное поле ───────────────────────────────────── */
.foot { background: var(--tea); color: var(--on-tea); --focus: var(--on-tea); }
.foot-in { padding-block: var(--s-7); display: grid; gap: var(--s-5); }
@media (min-width: 1200px) { .foot-in { grid-template-columns: var(--axis) minmax(0, 1fr); column-gap: var(--axis-gap); } }
.foot .brand-name { font-size: var(--step-3); }
.foot-body { display: grid; gap: var(--s-3); max-width: 62ch; }
.foot-body h2 { font: 600 var(--step-4) / 1.15 var(--font-display); }
.foot-body p { color: var(--on-tea-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.foot a { color: var(--on-tea); font-weight: 700; text-underline-offset: 4px; }
.foot-links a { display: inline-flex; align-items: center; min-height: var(--control); }
.foot small { color: var(--on-tea-2); font-size: var(--step-1); }

/* ── Окно «О проекте» и выбор источника ────────────────────── */
.about-layer, .source-picker-layer { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--s-4); background: rgba(10, 20, 16, 0.55); animation: fade-in var(--dur-2); }
.about-layer[hidden], .source-picker-layer[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.about-pop, .source-picker-panel {
  width: min(520px, 100%);
  max-height: calc(100dvh - 2 * var(--s-4));
  overflow: auto;
  padding: var(--s-6);
  background: var(--paper);
  animation: pop-in var(--dur-3) var(--ease-glide);
}
.about-head, .source-picker-head { display: flex; justify-content: space-between; align-items: start; gap: var(--s-3); margin-bottom: var(--s-3); }
.about-mark { display: none; }
.about-pop h2, #sourcePickerTitle { font: 600 var(--step-4) / 1.15 var(--font-display); }
.source-picker-heading { display: grid; gap: var(--s-1); min-width: 0; }
.about-pop p { color: var(--ink-2); margin-top: var(--s-3); }
.about-pop p:first-of-type { color: var(--ink); }
.about-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.about-actions a {
  min-height: var(--control);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-4);
  background: var(--paper-3);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur-2), color var(--dur-2);
}
.about-actions a:first-child { background: var(--action); color: var(--on-action); }
@media (hover: hover) { .about-actions a:hover { background: var(--tea); color: var(--on-tea); } }
.about-actions svg { width: 16px; height: 16px; }
.about-close, .source-picker-close { width: var(--control); height: var(--control); flex: none; display: grid; place-items: center; border: 0; background: var(--paper-2); transition: background var(--dur-2), transform var(--dur-1); }
@media (hover: hover) { .about-close:hover, .source-picker-close:hover { background: var(--paper-3); } }
.about-close:active, .source-picker-close:active { transform: translateY(1px); }
body.about-open, body.source-picker-open { overflow: hidden; }

#sourcePickerEvent { color: var(--ink-2); font-size: var(--step-2); overflow-wrap: anywhere; }
.source-picker-list { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.source-picker-link { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; min-height: 56px; padding: var(--s-3); background: var(--paper-2); text-decoration: none; transition: background var(--dur-2); }
@media (hover: hover) { .source-picker-link:hover { background: var(--paper-3); } }
.source-picker-link-icon { color: var(--tea); display: grid; }
html[data-theme="dark"] .source-picker-link-icon { color: var(--action); }
.source-picker-link-icon svg { width: 18px; height: 18px; }
.source-picker-link-text { display: grid; }
.source-picker-link-text span { font-size: var(--step-1); color: var(--ink-2); }
.source-picker-official { font-size: var(--step-1); font-weight: 700; color: var(--ok); }
@media (max-width: 719px) {
  .source-picker-layer { align-items: end; padding: 0; }
  .source-picker-panel { padding: var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom)); }
}

/* ── Объявление ────────────────────────────────────────────── */
.ad-pop {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 150;
  width: min(360px, calc(100vw - 2 * var(--s-4)));
  padding: var(--s-5);
  background: var(--tea);
  color: var(--on-tea);
  --focus: var(--on-tea);
  box-shadow: 0 16px 40px rgba(10, 20, 16, 0.3); /* taste-skill-ignore: всплывающее объявление */
  animation: pop-in var(--dur-3) var(--ease-glide);
}
.ad-pop[hidden] { display: none; }
.ad-pop h3 { font: 600 var(--step-3) / 1.2 var(--font-display); padding-right: var(--s-6); }
.ad-pop p { margin-top: var(--s-2); color: var(--on-tea-2); }
.ad-pop a { display: inline-flex; align-items: center; min-height: var(--control); margin-top: var(--s-3); padding: 0 var(--s-4); background: var(--on-tea); color: var(--tea); font-weight: 700; text-decoration: none; }
.ad-x { position: absolute; top: var(--s-2); right: var(--s-2); width: var(--control); height: var(--control); border: 0; background: transparent; color: var(--on-tea); font-size: var(--step-4); line-height: 1; }

/* ── Логотип: пар поднимается при загрузке и при наведении, без бесконечных циклов ── */
.brand-cup-svg { width: 100%; height: 100%; overflow: visible; }
.brand-cup-fill, .brand-rim { fill: #fffdf8; stroke: #62a33d; stroke-width: 4; stroke-linejoin: round; }
.brand-coffee-line { fill: none; stroke: #df7a2d; stroke-width: 4; stroke-linecap: round; }
.brand-handle { fill: none; stroke: #62a33d; stroke-width: 6; stroke-linecap: round; }
.brand-cup-letter { fill: #df7a2d; font: 700 40px / 1 var(--font-display); }
.brand-saucer { fill: none; stroke: #74a942; stroke-width: 5; stroke-linecap: round; }
.brand-leaf-fill { fill: #5f9638; }
.brand-leaf-vein { fill: none; stroke: #eff8e8; stroke-width: 2.5; stroke-linecap: round; }
.brand-steam { color: #9bd07a; }
.brand-steam path { stroke-dasharray: 38; animation: steam 2.6s var(--ease-glide) 0.6s 1 both; }
.brand-steam-two { animation-delay: 0.9s !important; }
@media (hover: hover) { .brand:hover .brand-steam path { animation: steam 1.8s var(--ease-glide) 1 both; } }
@keyframes steam {
  0% { opacity: 0; stroke-dashoffset: 38; transform: translateY(7px); }
  40% { opacity: 0.9; stroke-dashoffset: 8; }
  100% { opacity: 0.55; stroke-dashoffset: 0; transform: none; }
}

/* ── Телефон: панель управления в два ряда ──────────────────── */
@media (max-width: 719px) {
  .ctrl-in { gap: var(--s-2); padding-block: var(--s-3) var(--s-2); }
  .tabs { flex: 1 1 100%; }
  .tab { flex: 1 0 auto; padding: 0 var(--s-3); }
  .dates-btn { padding: 0 var(--s-3); }
  .search { flex: 1 1 0; min-width: 0; max-width: none; }
  .reset { flex: none; }
}

/* ── Движение: заголовок, появление дней ───────────────────── */
.js .mast-title .line > span { transform: translateY(105%); animation: line-up 0.9s var(--ease-glide) forwards; }
.js .mast-title .line:nth-child(2) > span { animation-delay: 0.11s; }
.js .mast-live { opacity: 0; animation: fade-up 0.6s var(--ease-glide) 0.45s forwards; }
@keyframes line-up { to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.js .day.ui-reveal .row { opacity: 0; transform: translateY(16px); }
.js .day.ui-visible .row { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-glide), transform 0.5s var(--ease-glide), background var(--dur-2); transition-delay: calc(var(--i, 0) * 45ms), calc(var(--i, 0) * 45ms), 0s; }

@media (prefers-reduced-motion: reduce) {
  .js .mast-title .line > span { transform: none; animation: none; }
  .js .mast-live { opacity: 1; animation: none; }
  .js .day.ui-reveal .row { opacity: 1; transform: none; }
  .brand-steam path { animation: none; opacity: 0.7; stroke-dashoffset: 0; }
  .tabs-glide { transition: none; }
}

.about-close svg, .source-picker-close svg { width: 18px; height: 18px; }