/* Карточки блока «Ближайшее» на главной.
   Раньше это были нарисованные картинки: название, описание, дата и зал
   впечатаны прямо в файл. Красиво, но каждая смена даты требовала заново
   рисовать карточку — и блок отстал от репертуара на целый сезон.
   Теперь фотография остаётся картинкой, а весь текст берётся из реестра. */

/* Лента — во всю ширину страницы, а не колонки. В покое карточки стоят по
   краю колонки Тильды (--поле повторяет её отступы), при прокрутке уходят в
   поля страницы.

   Края не растворяем: растворение — это прозрачность, а под ней белая
   страница, поэтому на белом фоне любой фейд читается как белая вуаль поверх
   снимка. Оставляем честный обрез по краю колонки — как в лентах Netflix
   и Apple. Пробовали и маску на ленте, и прозрачность карточек: см. сравнение
   четырёх вариантов, выбран «без растворения». */
.upc {
    display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory;
    --поле: max(20px, calc((100% - 1200px) / 2));
    padding: 4px var(--поле) 16px;
    scroll-padding-inline: var(--поле);
}
@media (max-width: 1200px) { .upc { --поле: max(20px, calc((100% - 960px) / 2)); } }
@media (max-width: 960px)  { .upc { --поле: max(20px, calc((100% - 640px) / 2)); } }
.upc::-webkit-scrollbar { height: 6px; }
.upc::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }

.upc__card {
    /* На 20% крупнее прежних 280–440px. */
    position: relative; flex: 0 0 clamp(336px, 48vw, 528px);
    aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden;
    background: #0d0d0d; scroll-snap-align: start;
    display: flex; flex-direction: column; justify-content: flex-end;
    text-decoration: none; color: #fff;
}
.upc__photo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: .82;
    transition: transform .5s cubic-bezier(.2,.6,.2,1), opacity .35s ease;
}
.upc__card:hover .upc__photo { transform: scale(1.04); opacity: .92; }

/* Вступительная карточка: цитата один раз проступает поверх фотографии зала
   и уходит. Дальше её держит наведение — см. custom/js/theater-upcoming.js.

   Строки стартуют с одинаковой длительностью, но разной задержкой: так они
   проявляются одна за другой и не расходятся между собой. Общей видимостью
   правит родитель .upc__quote, строки только выходят и остаются на месте. */
.upc__quote {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; justify-content: center;
    gap: 2px; padding: 0 clamp(20px, 6%, 46px);
    font-family: var(--f-name, Montserrat, sans-serif);
    font-size: clamp(21px, 3.1vw, 34px); font-weight: 300; line-height: 1.24;
    color: #fff; text-align: left; pointer-events: none;
    animation: upc-показ 8.4s ease both;
}
/* Затемнение под текстом — отдельным слоем, гаснет вместе с ним. */
.upc__quote::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: rgba(0,0,0,.72);
}
.upc__line {
    display: block; opacity: 0;
    animation: upc-строка .9s ease both;
    animation-delay: calc(1s + var(--шаг, 0) * .34s);
}
/* Подчёркивание — тонкая красная черта, как на прежней рисованной карточке. */
.upc__line_mark { position: relative; }
.upc__line_mark::after {
    content: ''; position: absolute; left: 0; bottom: -2px; width: 78%; height: 1px;
    background: linear-gradient(90deg, rgba(182,0,0,.9), rgba(182,0,0,.15));
}

@keyframes upc-показ {
    0%        { opacity: 0; }
    16%, 76%  { opacity: 1; }
    100%      { opacity: 0; }
}
/* Только прозрачность, без сдвига: текст всегда стоит на одном месте —
   и при автопоказе, и по наведению. */
@keyframes upc-строка {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Отыграла — анимацию снимаем насовсем, дальше решает наведение. */
.upc__quote_отыграла {
    animation: none;
    opacity: 0;
    transition: opacity .45s ease;
}
.upc__card_intro:hover .upc__quote_отыграла,
.upc__card_intro:focus-visible .upc__quote_отыграла,
.upc__card_intro:focus-within .upc__quote_отыграла { opacity: 1; }

.upc__card_intro::after { background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.14) 42%, transparent 70%); }
.upc__card_intro .upc__body { padding-bottom: 24px; }
.upc__card_intro .upc__buy { position: relative; z-index: 2; }

/* Кому движение мешает — показываем цитату сразу и без выхода. */
@media (prefers-reduced-motion: reduce) {
    .upc__quote, .upc__line { animation: none; }
    .upc__line { opacity: 1; }
}

/* Затемнение снизу: текст ложится на фотографию любой яркости. */
.upc__card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.06) 70%);
}

.upc__body { position: relative; z-index: 1; padding: 20px 22px 22px; }

.upc__name {
    display: block; margin: 0 0 6px;
    font-family: var(--f-name, Montserrat, sans-serif);
    font-size: clamp(19px, 2.4vw, 27px); font-weight: 700; line-height: 1.08;
    letter-spacing: .01em; text-transform: uppercase; text-wrap: balance;
}
.upc__genre {
    display: block; margin: 0 0 12px; font-size: 13px; line-height: 1.4;
    opacity: .72; max-width: 46ch;
}
.upc__when {
    display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
    font-family: var(--f-mono, ui-monospace, monospace);
    font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; opacity: .8;
}
.upc__date { font-weight: 500; }
.upc__prem { color: #ffc2b3; }

.upc__acts { display: flex; gap: 12px; align-items: center; margin-top: 15px; }

/* Кнопка — тот же вид, что была на нарисованных карточках. */
.upc__buy {
    display: inline-block; padding: 9px 19px; border-radius: 6px;
    font-family: var(--f-name, Montserrat, sans-serif);
    font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
    color: #fff; text-decoration: none;
    background-image: linear-gradient(.75turn, rgba(255,194,179,1) 0%, rgba(182,0,0,1) 100%);
    box-shadow: 0 5px 15px rgba(255,148,21,.34);
    transition: color .35s ease, box-shadow .35s ease;
}
.upc__buy:hover { color: #000; box-shadow: 0 6px 18px rgba(255,148,21,.5); }
.upc__more {
    font-family: var(--f-mono, ui-monospace, monospace);
    font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; opacity: .78; text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px;
}
.upc__more:hover { opacity: 1; }
.upc__soon {
    font-family: var(--f-mono, ui-monospace, monospace);
    font-size: 11px; letter-spacing: .07em; text-transform: uppercase; opacity: .6;
}

.upc__card:focus-visible { outline: 3px solid #ffc2b3; outline-offset: 3px; }

@media (max-width: 640px) {
    .upc { gap: 14px; --поле: 20px; }
    .upc__card { flex-basis: 84vw; }
    .upc__body { padding: 16px 17px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .upc__photo { transition: none; }
    .upc__card:hover .upc__photo { transform: none; }
}