/* ============================================================
   ВАРИАНТ C — «АФИША»  (основной вариант проекта)
   Кабаре-плакат: чёрное поле, гигантская типографика, бегущие строки,
   коллажная сетка с наклонами, номера актов как на театральной программке.
   ============================================================ */

[data-theme="playbill"] {
  --bg:       #070606;
  --bg-2:     #100d0d;
  --bg-3:     #191414;
  --ink:      #fbf7f4;
  --ink-2:    #b9aca7;
  --muted:    #7c6e69;
  --accent:   #f0a9b6;
  --accent-2: #d2707f;
  --gold:     #d9b26a;
  --line:     rgba(251, 247, 244, .16);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --display-weight: 500;
  --tracking-display: -0.035em;
  --fs-hero: clamp(3.5rem, 15vw, 15rem);
  --fs-h2:   clamp(2.6rem, 7vw, 6.5rem);
  --tracking-kicker: .5em;

  --radius: 999px;
  --img-radius: 3px;
  --grid-cols: 4;
  --grid-gap: clamp(.4rem, .8vw, .75rem);
  --section-y: clamp(4.5rem, 9vh, 8rem);
  color-scheme: dark;
}

/* Зерно печати: плакат не бывает идеально гладким.
   Шум генерируется самим SVG — внешних файлов нет. */
[data-theme="playbill"] body::after {
  content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { [data-theme="playbill"] body::after { display: none; } }

/* ---------- герой: имя во всю ширину, видео просвечивает сквозь буквы ---------- */
[data-theme="playbill"] .hero { min-height: 100svh; }
[data-theme="playbill"] .hero__inner { justify-items: center; text-align: center; gap: .5rem; }
[data-theme="playbill"] .hero__scrim {
  background:
    linear-gradient(to bottom, rgba(7,6,6,.55), rgba(7,6,6,.30) 45%, var(--bg) 96%),
    repeating-linear-gradient(to bottom, rgba(7,6,6,.22) 0 2px, transparent 2px 4px);
}
[data-theme="playbill"] .hero__media video, [data-theme="playbill"] .hero__media img { filter: grayscale(.35) contrast(1.15); }
[data-theme="playbill"] .hero__logo { width: clamp(48px, 6vw, 72px); margin-bottom: .75rem; }
[data-theme="playbill"] .hero__title {
  font-weight: 600; line-height: .82; text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}
/* script-слово теперь стоит ПОД именем (заставка читается «VERVE show») */
[data-theme="playbill"] .hero__script { color: var(--accent); transform: rotate(-4deg); margin-top: -1.2rem; }
[data-theme="playbill"] .hero__sub { border-block: 1px solid var(--line); padding-block: .7rem; margin-top: 1.2rem; }
/* хиро-композиция центрована, а у кнопок width:100% — центруем и их */
[data-theme="playbill"] .hero__actions { justify-content: center; }

/* Плакатная рамка по краю первого экрана — как поле у печатной афиши */
[data-theme="playbill"] .hero::after {
  content: ''; position: absolute; z-index: 3; pointer-events: none;
  inset: var(--frame);
  border: 1px solid rgba(251, 247, 244, .13);
}
/* Шапка стоит на тех же двадцати с небольшим пикселях, что и рамка, поэтому
   верхняя линия проходила прямо через кнопку «Пригласить». Пока шапка не
   прижата прокруткой — опускаем её внутрь рамки. Прижатую не трогаем:
   там первый экран уже ушёл и рамки на месте нет. */
[data-theme="playbill"] .nav:not(.is-stuck) {
  padding-top: calc(var(--frame) + var(--frame-gap));
}

/* ---------- бегущая строка ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: .9rem; display: none; }
[data-theme="playbill"] .marquee { display: block; }
.marquee__track { display: flex; gap: 2.5rem; width: max-content; animation: marquee 34s linear infinite; }
.marquee span {
  font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 2.1rem);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; color: var(--ink);
}
.marquee span:nth-child(even) { color: var(--accent); font-style: italic; }
.marquee--alt .marquee__track { animation-duration: 46s; animation-direction: reverse; }
[data-theme="playbill"] .marquee--alt { background: var(--accent); border-color: var(--accent); }
[data-theme="playbill"] .marquee--alt span { color: var(--bg); }
[data-theme="playbill"] .marquee--alt span:nth-child(even) { color: rgba(7,6,6,.55); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- заголовки секций: крупно, капсом, с линейкой ---------- */
[data-theme="playbill"] .section h2 {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  font-weight: 600;
  line-height: .9;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
[data-theme="playbill"] .kicker {
  display: flex; align-items: center; gap: 1rem;
  color: var(--accent); margin-bottom: 1rem;
}
[data-theme="playbill"] .kicker::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---------- о коллективе ---------- */
[data-theme="playbill"] .stat b { font-style: italic; font-size: clamp(2.6rem, 5vw, 4.5rem); }
[data-theme="playbill"] .stats { background: var(--accent); }
[data-theme="playbill"] .stat { background: var(--bg); }

/* ---------- галерея: коллаж с наклонами ---------- */
[data-theme="playbill"] .grid { grid-auto-flow: dense; }
[data-theme="playbill"] .tile { transition: transform .5s var(--ease), filter .5s; }
[data-theme="playbill"] .tile:nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; }
[data-theme="playbill"] .tile:nth-child(7n + 5) { grid-row: span 2; }
[data-theme="playbill"] .tile:nth-child(3n)     { transform: rotate(-1.1deg); }
[data-theme="playbill"] .tile:nth-child(4n)     { transform: rotate(.9deg); }
[data-theme="playbill"] .tile img { filter: contrast(1.08) saturate(.92); }
[data-theme="playbill"] .tile:hover { transform: rotate(0) scale(1.015); z-index: 2; }
@media (max-width: 719px) {
  [data-theme="playbill"] .tile:nth-child(7n + 1),
  [data-theme="playbill"] .tile:nth-child(7n + 5) { grid-column: auto; grid-row: auto; }
  [data-theme="playbill"] .tile:nth-child(3n),
  [data-theme="playbill"] .tile:nth-child(4n) { transform: none; }
}
[data-theme="playbill"] .filters button { border-radius: 999px; }

/* ---------- форматы: билетные корешки ---------- */
[data-theme="playbill"] .formats { background: transparent; gap: clamp(.75rem, 1.5vw, 1.25rem); }
[data-theme="playbill"] .format {
  position: relative; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 4px;
  padding-top: clamp(2.4rem, 3.5vw, 3.2rem);
}
/* перфорация по верхнему краю — корешок билета */
[data-theme="playbill"] .format::before {
  content: ''; position: absolute; left: 0; right: 0; top: 1.5rem; height: 1px;
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1.2px);
  background-size: 9px 1px; background-repeat: repeat-x;
}
[data-theme="playbill"] .format h3 { text-transform: uppercase; letter-spacing: -.02em; }
[data-theme="playbill"] .format:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
[data-theme="playbill"] .format:hover p,
[data-theme="playbill"] .format:hover span { color: var(--bg); }
[data-theme="playbill"] .format:hover::before { background-image: radial-gradient(circle, rgba(7,6,6,.45) 1px, transparent 1.2px); }

/* ---------- видео ---------- */
[data-theme="playbill"] .vcard { border: 1px solid var(--line); }
[data-theme="playbill"] .vcard__meta b { text-transform: uppercase; letter-spacing: -.02em; }

/* ---------- контакты и подвал ---------- */
[data-theme="playbill"] .contact__links a { text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.6rem); }
[data-theme="playbill"] .nav__cta,
[data-theme="playbill"] .btn { border-radius: 999px; }
[data-theme="playbill"] .footer { border-top: 2px solid var(--ink); }
[data-theme="playbill"] .footer small { letter-spacing: .2em; }