/* «Билет» — по карточке Эйча: верхний блок со скруглёнными углами и чётким небом на весь блок,
   огромный белый гротеск в три строки, белая таблетка-ярлык, пунктирная линия отрыва,
   нижний блок светлее неба с текстом и счётчиком «◀ 1 ▶». */

:root {
  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --hdr: 50px;
  --tl: 58px;
  --cardw: min(1320px, calc((100svh - var(--hdr) - var(--tl)) * 1.02));
  --side: max(12px, calc((100vw - var(--cardw)) / 2));
  --bot: clamp(118px, 17vh, 168px);
  --gap: 14px;
  --r: clamp(22px, 2.4vw, 34px);
  --pad: clamp(20px, 3.4vw, 54px);
  --stub: color-mix(in srgb, var(--tint-strong) 78%, #ffffff);
  --swap-out: 300ms;
  --p-font: var(--font); --p-radius: 26px; --p-accent: #2f7cf6; --p-btn-bg: #2f7cf6;
  --p-top: calc(var(--hdr) + 12px + var(--sat)); --p-right: calc(var(--side) + 12px);
  --g-bg: #1d4fb8; --g-accent: #fff; --g-ink: rgba(255, 255, 255, .85); --g-line: rgba(255, 255, 255, .18);
}
html, body { background: #fff; }
body { font-family: var(--font); color: #fff; }

/* ——— верхняя строка на белом ——— */
.top { position: fixed; z-index: 30; top: var(--sat); left: var(--side); right: var(--side); height: var(--hdr); display: flex; align-items: center; justify-content: space-between; padding: 0 6px; color: #1b2a44; }
.brand { font: 600 16px/1 var(--font); letter-spacing: -.01em; color: #1b2a44; }
.links { display: flex; gap: 22px; }
.links button { font: 500 15px/1 var(--font); color: #1b2a44; opacity: .7; }
.links button:hover, .links button[aria-pressed="true"] { opacity: 1; }

/* ——— билет ——— */
.ticket-top {
  position: fixed; z-index: 1; overflow: hidden; isolation: isolate;
  left: var(--side); right: var(--side);
  top: calc(var(--hdr) + var(--sat));
  bottom: calc(var(--tl) + var(--bot) + var(--gap) + var(--sab));
  border-radius: var(--r);
  background: #3b82f6;
  transition: top .7s var(--ease-film), bottom .7s var(--ease-film), left .7s var(--ease-film), right .7s var(--ease-film), border-radius .7s var(--ease-film);
}
.ticket-top .ph.is-on img.is-ready { animation: none; }
body.is-sky .ticket-top { top: 0; bottom: 0; left: 0; right: 0; border-radius: 0; }
.ticket-cut {
  position: fixed; z-index: 2; left: calc(var(--side) + var(--r)); right: calc(var(--side) + var(--r));
  bottom: calc(var(--tl) + var(--bot) + var(--gap) / 2 - 1.5px + var(--sab)); height: 3px;
  background: repeating-linear-gradient(90deg, var(--stub) 0 16px, transparent 16px 28px);
  transition: background .9s;
}
.ticket-bottom {
  position: fixed; z-index: 1; left: var(--side); right: var(--side);
  bottom: calc(var(--tl) + var(--sab)); height: var(--bot);
  border-radius: var(--r); background: var(--stub);
  transition: background .9s var(--ease);
}

/* ——— экраны ——— */
.screen { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.screen > * { pointer-events: auto; }
.tag {
  position: absolute; left: calc(var(--side) + var(--pad)); top: calc(var(--hdr) + var(--sat) + var(--pad));
  margin: 0; max-width: calc(100vw - 2 * var(--side) - 2 * var(--pad));
  padding: 9px 20px 10px; border-radius: 999px; background: #fff; color: #1b2230;
  font: 500 clamp(15px, 1.5vw, 22px)/1.15 var(--font); letter-spacing: -.01em;
}
.big {
  position: absolute; left: calc(var(--side) + var(--pad)); right: calc(var(--side) + var(--pad));
  bottom: calc(var(--tl) + var(--bot) + var(--gap) + var(--pad) * .8 + var(--sab));
  margin: 0; font: 500 clamp(44px, 9.6vw, 160px)/.96 var(--font); letter-spacing: -.035em; color: #fff;
  text-wrap: balance; max-width: 15ch;
  text-shadow: 0 2px 30px rgba(10, 40, 100, .12);
}
.finale .big { max-width: 16ch; }
.stub {
  position: absolute; left: var(--side); right: var(--side); bottom: calc(var(--tl) + var(--sab)); height: var(--bot);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding: 0 var(--pad) calc(var(--pad) * .8);
}
.stub-text { margin: 0; max-width: 30ch; font: 500 clamp(16px, 1.9vw, 27px)/1.12 var(--font); letter-spacing: -.02em; color: #fff; text-wrap: pretty; }
.pager { display: flex; align-items: center; gap: 12px; flex: none; font: 500 clamp(26px, 3vw, 44px)/1 var(--font); color: #fff; }
.pager-prev, .pager-next { font-size: .72em; line-height: 1; padding: 6px; color: #fff; }
.pager-prev { opacity: .5; }
.pager-num { min-width: .7em; text-align: center; font-variant-numeric: tabular-nums; }
.pager--start { gap: 14px; font-size: clamp(20px, 2.2vw, 34px); padding: 4px 0; }
.pager--start i { font-style: normal; font-size: .8em; }
body[data-mode="scene"] .ticket-top { cursor: default; }

[data-swap].is-out { transform: translateY(10px); }

/* ——— таймлайн: ряд под билетом ——— */
.tl { position: fixed; z-index: 20; left: var(--side); right: var(--side); bottom: var(--sab); height: var(--tl); display: flex; align-items: center; }
.tl-line { display: none; }
.tl-track { gap: 6px; width: 100%; padding: 0 2px; }
.tl-dot { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; border-radius: 999px; color: #5a6b86; background: #f1f5fb; transition: background .3s, color .3s; }
.tl-pin { width: 8px; height: 8px; border-radius: 50%; background: var(--dot-strong, #2f7cf6); flex: none; }
.tl-label { display: flex; gap: 8px; font: 500 14px/1 var(--font); white-space: nowrap; }
.tl-num { display: inline; font-variant-numeric: tabular-nums; opacity: .6; }
.tl-date:not(:empty)::after { content: " ·"; }
.tl-dot.is-active { background: var(--stub); color: #fff; }
.tl-dot.is-active .tl-pin { background: #fff; }
.tl-dot:hover { color: #1b2a44; }
.tl-dot.is-active:hover { color: #fff; }

/* ——— телефон ——— */
@media (max-width: 700px) {
  :root { --hdr: 46px; --tl: 56px; --bot: 128px; --gap: 12px; --r: 24px; --pad: 20px; }
  .links { gap: 14px; }
  .links button { font-size: 13.5px; }
  .brand { font-size: 14px; }
  .big { font-size: 46px; }
  .stub-text { font-size: 17px; }
  .pager { font-size: 30px; }
  .pager--start { font-size: 19px; }
}
@media (max-height: 520px) {
  :root { --hdr: 40px; --tl: 46px; --bot: 84px; --gap: 8px; --pad: 16px; --cardw: calc(100vw - 24px); }
  .big { font-size: 32px; max-width: 24ch; }
  .links button { font-size: 13px; }
  .tag { padding: 6px 14px; font-size: 13px; }
  .stub-text { font-size: 14px; }
  .tl-dot { height: 32px; }
}