/* Эфир показа фильма. Стиль «иней и киноварь»: морозный свет афиши, киноварь заголовка,
   золото фресок. Сцена 1920×1080, масштабируется целиком под любой экран. */
:root {
  --night: #0b1320;
  --night2: #14233a;
  --ivory: #f4efe4;
  --frost: #dfe8ef;
  --frost2: #b9c9d6;
  --cinnabar: #c3282e;
  --cinnabar-d: #9e1c22;
  --gold: #d3ab5c;
  --muted: rgba(244, 239, 228, .62);
  --f-cond: 'Oswald', 'Arial Narrow', sans-serif;
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-old: 'Ruslan Display', 'Oswald', serif;
  --safe: 96px;          /* поля: LED-экраны и проекторы подрезают края */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; cursor: none; }
body { color: var(--ivory); -webkit-font-smoothing: antialiased; }

#stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform-origin: 50% 50%; overflow: hidden; background: var(--night);
}
#scenes, .scene { position: absolute; inset: 0; }
.scene { opacity: 0; transition: opacity .9s ease; background: var(--night); }
.scene.on { opacity: 1; }
.scene.light { background: var(--frost); color: var(--night); }

/* ---------- анимации, привязанные ко времени: --e = −прошедшее время сцены ---------- */
.a { animation-fill-mode: both; animation-duration: .9s; animation-timing-function: cubic-bezier(.2,.7,.2,1);
     animation-delay: calc(var(--e, 0s) + var(--d, 0s)); }
.a-up    { animation-name: up; }
.a-fade  { animation-name: fade; }
.a-left  { animation-name: left; }
.a-grow  { animation-name: grow; transform-origin: 0 50%; }
.a-scale { animation-name: scale; }
@keyframes up    { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes left  { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes scale { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* набор текста по буквам */
.type .ch { opacity: 0; }
.type .ch.v { opacity: 1; }
@keyframes ch { to { opacity: 1; } }

/* медленный наезд на фото */
.kb { position: absolute; inset: 0; overflow: hidden; background: var(--night2); }
.kb img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover;
  animation: kb var(--dur, 20s) linear both; animation-delay: var(--e, 0s); }
.kb.k1 img { animation-name: kb1; } .kb.k2 img { animation-name: kb2; } .kb.k3 img { animation-name: kb3; }
@keyframes kb  { from { transform: scale(1.0) translate(0,0); }      to { transform: scale(1.09) translate(-1.5%, -1%); } }
@keyframes kb1 { from { transform: scale(1.1) translate(1.5%,0); }   to { transform: scale(1.0) translate(-1%, 0); } }
@keyframes kb2 { from { transform: scale(1.02) translate(0,1.5%); }  to { transform: scale(1.1) translate(0,-1%); } }
@keyframes kb3 { from { transform: scale(1.08) translate(-1%,-1%); } to { transform: scale(1.0) translate(1%,1%); } }
.shade-l { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,19,32,.94) 0%, rgba(11,19,32,.78) 38%, rgba(11,19,32,.1) 72%); }
.shade-b { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,19,32,.92) 0%, rgba(11,19,32,.35) 45%, rgba(11,19,32,.15) 100%); }
.shade-all { position: absolute; inset: 0; background: rgba(11,19,32,.62); }

/* ---------- общие элементы ---------- */
.chip { display: inline-flex; align-items: center; gap: 18px; font: 500 30px/1 var(--f-cond); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.chip::before { content: ''; width: 18px; height: 18px; background: var(--cinnabar); transform: rotate(45deg); }
.rule { height: 3px; width: 160px; background: var(--gold); margin: 36px 0; }
.h-big { font: 500 124px/1.02 var(--f-cond); text-transform: uppercase; letter-spacing: .01em; }
.h-mid { font: 500 88px/1.05 var(--f-cond); text-transform: uppercase; }
.body-serif { font: 500 54px/1.28 var(--f-serif); color: var(--ivory); }
.url { font: 500 44px/1 var(--f-cond); letter-spacing: .08em; color: var(--gold); }
.arch { position: absolute; overflow: hidden; border-radius: 460px 460px 0 0; box-shadow: 0 0 0 3px rgba(211,171,92,.55), 0 0 0 18px rgba(11,19,32,.6); }
.pad { position: absolute; left: var(--safe); right: var(--safe); top: 110px; bottom: 120px; }
.qr { background: #fff; padding: 18px; border-radius: 10px; }
.qr img, .qr svg { display: block; width: 100%; height: 100%; }
.sponsor { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 22px; font: 400 28px/1.2 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sponsor b { color: var(--ivory); font-weight: 500; letter-spacing: .06em; font-size: 40px; text-transform: none; }

/* ---------- афиша (светлая, как постер фильма) ---------- */
.poster .kb img { filter: saturate(1.05); }
.poster .veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(223,232,239,.97) 0%, rgba(223,232,239,.9) 34%, rgba(223,232,239,.25) 62%, rgba(223,232,239,0) 80%); }
.poster .col { position: absolute; left: var(--safe); top: 92px; width: 760px; }
.poster .kicker { font: 500 34px/1.1 var(--f-cond); letter-spacing: .3em; text-transform: uppercase; color: var(--night); opacity: .8; }
.poster .title { width: 470px; color: var(--cinnabar); margin-top: 26px; }
.poster .title svg { display: block; width: 100%; height: auto; }
.poster .when { position: absolute; left: var(--safe); bottom: 250px; font: 500 64px/1 var(--f-cond); color: var(--night); text-transform: uppercase; letter-spacing: .03em; }
.poster .what { position: absolute; left: var(--safe); bottom: 190px; font: italic 500 40px/1 var(--f-serif); color: var(--night); }
.poster .count { position: absolute; right: var(--safe); top: 92px; text-align: right; color: var(--ivory); text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.poster .count .l { font: 400 28px/1 var(--f-cond); letter-spacing: .25em; text-transform: uppercase; }
.poster .count .v { font: 400 120px/1 var(--f-cond); margin-top: 10px; font-variant-numeric: tabular-nums; }
.poster .strip { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: var(--cinnabar); display: flex; align-items: center; justify-content: center; gap: 34px; }
.poster .strip .lg { width: 104px; height: 104px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.poster .strip .lg img { width: 84%; height: 84%; object-fit: contain; }
.poster .age { position: absolute; right: var(--safe); bottom: 180px; font: 500 64px/1 var(--f-cond); color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.4); }

/* ---------- факт ---------- */
.fact .arch { left: var(--safe); top: 110px; width: 820px; bottom: 0; border-radius: 410px 410px 0 0; }
.fact .txt { position: absolute; left: 1010px; right: var(--safe); top: 170px; bottom: 150px; }
.fact .h-big { margin-top: 34px; }
.fact .sponsor { bottom: -20px; }
.fact .bgglow { position: absolute; inset: 0; background: radial-gradient(1200px 800px at 80% 20%, #1b3050 0%, var(--night) 60%); }

/* ---------- партнёр ---------- */
.partner .card { position: absolute; left: 50%; top: 190px; width: 600px; height: 600px; margin-left: -300px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--gold), 0 40px 120px rgba(0,0,0,.5); }
.partner .card img { width: 74%; height: 74%; object-fit: contain; }
.partner .name { position: absolute; left: 0; right: 0; top: 850px; text-align: center; font: 500 64px/1 var(--f-cond); text-transform: uppercase; }
.partner .line { position: absolute; left: 0; right: 0; top: 930px; text-align: center; font: italic 500 38px/1 var(--f-serif); color: var(--muted); }
.partner .chipbox { position: absolute; left: 0; right: 0; top: 104px; text-align: center; }
.partner.wide .card { left: var(--safe); margin-left: 0; top: 240px; width: 560px; height: 560px; }
.partner.wide .name, .partner.wide .line, .partner.wide .chipbox { left: 760px; right: var(--safe); text-align: left; }
.partner.wide .chipbox { top: 250px; } .partner.wide .name { top: 330px; line-height: 1.05; } .partner.wide .line { top: auto; bottom: 0; position: relative; }
.partner.wide .txtcol { position: absolute; left: 760px; right: var(--safe); top: 250px; }
.partner.wide .txtcol .name, .partner.wide .txtcol .line, .partner.wide .txtcol .chipbox { position: static; text-align: left; }
.partner.wide .txtcol .name { margin-top: 36px; }
.partner.wide .txtcol .line { margin-top: 18px; }
.partner.wide .txtcol .body-serif { margin-top: 44px; }

.partners .grid { position: absolute; left: var(--safe); right: var(--safe); top: 300px; display: flex; justify-content: center; gap: 70px; flex-wrap: wrap; }
.partners .it { width: 300px; text-align: center; }
.partners .lg { width: 260px; height: 260px; margin: 0 auto; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(211,171,92,.7); }
.partners .lg img { width: 76%; height: 76%; object-fit: contain; }
.partners .nm { margin-top: 30px; font: 500 30px/1.15 var(--f-cond); text-transform: uppercase; letter-spacing: .04em; }
.partners .head { position: absolute; left: 0; right: 0; top: 130px; text-align: center; }

/* ---------- часы ---------- */
.clock1 .inner { position: absolute; left: var(--safe); bottom: 150px; }
.clock1 .time { font: 300 300px/.9 var(--f-cond); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.clock1 .city { font: 500 84px/1 var(--f-cond); text-transform: uppercase; margin-top: 20px; }
.clock1 .zone { font: 400 34px/1 var(--f-cond); letter-spacing: .2em; color: var(--gold); margin-top: 24px; text-transform: uppercase; }
.clock1 .wx { position: absolute; right: var(--safe); bottom: 150px; text-align: right; }
.clock1 .wx .t { font: 300 150px/1 var(--f-cond); }
.clock1 .wx .d { font: italic 500 42px/1.2 var(--f-serif); color: var(--ivory); }
.clock1 .wx .s { font: 400 30px/1.4 var(--f-cond); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; margin-top: 10px; }
.clock1 .line { position: absolute; right: var(--safe); top: 110px; max-width: 900px; text-align: right; font: italic 500 46px/1.25 var(--f-serif); }
.clock1 .chipbox { position: absolute; left: var(--safe); top: 110px; }

.clockN .cols { position: absolute; inset: 0; display: flex; }
.clockN .colc { position: relative; flex: 1; overflow: hidden; border-right: 2px solid rgba(211,171,92,.45); }
.clockN .colc:last-child { border-right: 0; }
.clockN .colc .in { position: absolute; left: 44px; right: 30px; bottom: 150px; }
.clockN .time { font: 300 150px/.9 var(--f-cond); font-variant-numeric: tabular-nums; }
.clockN .city { font: 500 44px/1.05 var(--f-cond); text-transform: uppercase; margin-top: 18px; min-height: 92px; }
.clockN .zone { font: 400 26px/1 var(--f-cond); letter-spacing: .18em; color: var(--gold); margin-top: 12px; }
.clockN .wx { font: italic 500 36px/1.2 var(--f-serif); margin-top: 18px; }
.clockN .chipbox { position: absolute; left: var(--safe); top: 100px; z-index: 2; }

/* ---------- программа и выступающие ---------- */
.list .head { position: absolute; left: var(--safe); top: 110px; }
.list .rows { position: absolute; left: var(--safe); right: var(--safe); top: 300px; }
.program .row { display: flex; gap: 60px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(244,239,228,.14); }
.program .row .tm { width: 200px; font: 400 58px/1 var(--f-cond); color: var(--gold); font-variant-numeric: tabular-nums; }
.program .row .tx { font: 500 52px/1.1 var(--f-serif); }
.program .row.past { opacity: .35; }
.program .row.now .tx { color: #fff; } .program .row.now .tm { color: var(--cinnabar); }
.program .row.now .tx::after { content: '  · сейчас'; font: 400 32px/1 var(--f-cond); letter-spacing: .15em; color: var(--cinnabar); text-transform: uppercase; }
.speakers .rows { columns: 2; column-gap: 110px; }
.speakers .sp { break-inside: avoid; padding: 16px 0 26px; border-top: 1px solid rgba(211,171,92,.4); }
.speakers .sp .n { font: 500 58px/1.05 var(--f-cond); text-transform: uppercase; }
.speakers .sp .r { font: italic 500 34px/1.2 var(--f-serif); color: var(--muted); margin-top: 8px; }

/* ---------- цитата ---------- */
.quote .qbox { position: absolute; left: 260px; right: 260px; top: 50%; transform: translateY(-50%); text-align: center; }
.quote .qt { font: italic 500 72px/1.25 var(--f-serif); }
.quote .qm { font: 400 220px/1 var(--f-serif); color: var(--cinnabar); height: 150px; overflow: hidden; margin-bottom: 20px; }
.quote .who { margin-top: 50px; font: 500 36px/1 var(--f-cond); letter-spacing: .25em; text-transform: uppercase; color: var(--gold); }

/* ---------- промо ---------- */
.promo .txt { position: absolute; left: var(--safe); top: 170px; width: 1000px; }
.promo .h-big { margin-top: 34px; }
.promo .body-serif { margin-top: 10px; }
.promo .foot { display: flex; align-items: center; gap: 44px; margin-top: 44px; }
.promo .foot .qr { width: 190px; height: 190px; }
.promo .body-serif { font-size: 46px; }
.promo .h-big { font-size: 108px; }
.promo .txt { top: 130px; width: 1020px; }
.promo .arch { right: var(--safe); top: 110px; width: 640px; bottom: 0; border-radius: 320px 320px 0 0; }
.promo.miron .features { position: absolute; right: var(--safe); top: 190px; width: 620px; }
.promo.miron .features div { font: 500 44px/1.1 var(--f-cond); text-transform: uppercase; padding: 22px 0; border-bottom: 1px solid rgba(211,171,92,.4); }
.promo.miron .features div span { color: var(--cinnabar); margin-right: 20px; }

/* ---------- спасибо, режимы ---------- */
.center { position: absolute; left: var(--safe); right: var(--safe); top: 50%; transform: translateY(-50%); text-align: center; }
.center .title svg { width: 560px; height: auto; color: var(--cinnabar); }
.thanks .h-mid { margin-top: 40px; }
.thanks .body-serif { margin-top: 24px; font-style: italic; }
.talk .h-big { margin-top: 30px; }
.talk .ask { margin: 60px auto 0; max-width: 1400px; padding: 44px 60px; border-left: 6px solid var(--cinnabar); background: rgba(11,19,32,.72); text-align: left; }
.talk .ask .q { font: italic 500 58px/1.25 var(--f-serif); }
.talk .ask .by { font: 400 30px/1 var(--f-cond); letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-top: 24px; }
.talk .corner-qr { position: absolute; right: var(--safe); bottom: 120px; display: flex; align-items: center; gap: 28px; font: 400 32px/1.25 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; text-align: right; }
.talk .corner-qr .qr { width: 200px; height: 200px; }

/* ---------- квиз ---------- */
.quiz .head { position: absolute; left: var(--safe); top: 100px; right: var(--safe); display: flex; justify-content: space-between; align-items: center; }
.quiz .meta { font: 400 34px/1 var(--f-cond); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.lobby .qrbig { position: absolute; left: var(--safe); top: 220px; width: 640px; height: 640px; }
.lobby .side { position: absolute; left: 860px; right: var(--safe); top: 240px; }
.lobby .side .h-big { font-size: 110px; }
.lobby .addr { font: 500 64px/1 var(--f-cond); color: var(--gold); margin-top: 50px; letter-spacing: .02em; }
.lobby .hint { font: italic 500 46px/1.3 var(--f-serif); margin-top: 30px; }
.lobby .joined { margin-top: 60px; font: 400 40px/1 var(--f-cond); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.lobby .joined b { font: 400 150px/1 var(--f-cond); color: var(--ivory); letter-spacing: 0; display: block; margin-top: 10px; }
.qq .question { position: absolute; left: var(--safe); right: var(--safe); top: 210px; font: 500 86px/1.1 var(--f-cond); text-transform: uppercase; }
.qq .opts { position: absolute; left: var(--safe); right: var(--safe); top: 560px; display: flex; gap: 40px; }
.qq .opt { flex: 1; position: relative; min-height: 250px; padding: 36px 40px; background: rgba(244,239,228,.07); border: 2px solid rgba(244,239,228,.2); overflow: hidden; }
.qq .opt .ltr { font: 500 44px/1 var(--f-cond); color: var(--gold); }
.qq .opt .ot { font: 500 58px/1.1 var(--f-serif); margin-top: 18px; position: relative; }
.qq .opt .bar { position: absolute; left: 0; bottom: 0; top: 0; background: rgba(244,239,228,.16); transform-origin: 0 50%; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.qq .opt .pc { position: absolute; right: 36px; top: 30px; font: 400 64px/1 var(--f-cond); }
.qq .opt.right { border-color: var(--gold); background: rgba(211,171,92,.16); }
.qq .opt.right .bar { background: rgba(211,171,92,.55); }
.qq .opt.wrong { opacity: .5; }
.qq .timer { position: absolute; right: var(--safe); top: 92px; font: 300 120px/1 var(--f-cond); font-variant-numeric: tabular-nums; }
.qq .timer.low { color: var(--cinnabar); }
.qq .tbar { position: absolute; left: 0; bottom: 0; height: 12px; background: var(--cinnabar); }
.qq .foot { position: absolute; left: var(--safe); bottom: 120px; font: 400 36px/1 var(--f-cond); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.qq .note { position: absolute; left: var(--safe); right: var(--safe); bottom: 130px; font: italic 500 48px/1.25 var(--f-serif); }
.results .rows { position: absolute; left: 380px; right: 380px; top: 280px; }
.results .row { display: flex; align-items: baseline; gap: 40px; padding: 18px 0; border-bottom: 1px solid rgba(211,171,92,.35); }
.results .row .pl { width: 90px; font: 400 64px/1 var(--f-cond); color: var(--gold); }
.results .row .nm { flex: 1; font: 500 64px/1 var(--f-cond); text-transform: uppercase; }
.results .row .sc { font: 300 64px/1 var(--f-cond); }
.results .row:first-child .nm { color: var(--gold); }
.results .call { position: absolute; left: 0; right: 0; bottom: 120px; text-align: center; font: italic 500 50px/1 var(--f-serif); }

/* ---------- оверлеи ---------- */
.caption { position: absolute; left: var(--safe); bottom: 110px; display: flex; align-items: stretch; opacity: 0; transform: translateX(-40px); transition: opacity .6s, transform .8s cubic-bezier(.2,.7,.2,1); z-index: 10; }
.caption.on { opacity: 1; transform: none; }
.caption .cap-rule { width: 10px; background: var(--cinnabar); }
.caption .cap-body { background: var(--ivory); color: var(--night); padding: 26px 50px 28px 40px; box-shadow: 0 20px 80px rgba(0,0,0,.45); }
.caption .cap-name { font: 500 70px/1 var(--f-cond); text-transform: uppercase; letter-spacing: .01em; }
.caption .cap-role { font: italic 500 38px/1.2 var(--f-serif); margin-top: 10px; max-width: 1300px; }
.caption .cap-role:empty { display: none; }
.notice { position: absolute; left: 0; right: 0; top: 0; height: 96px; background: var(--cinnabar); color: #fff; display: flex; align-items: center; justify-content: center; font: 500 46px/1 var(--f-cond); text-transform: uppercase; letter-spacing: .06em; transform: translateY(-100%); transition: transform .7s cubic-bezier(.2,.7,.2,1); z-index: 11; }
.notice.on { transform: none; }
.corner { position: absolute; right: 40px; bottom: 30px; display: flex; gap: 26px; align-items: baseline; font: 400 24px/1 var(--f-cond); letter-spacing: .14em; color: rgba(244,239,228,.72); z-index: 9; text-shadow: 0 1px 8px rgba(0,0,0,.6); transition: opacity .6s; }
.corner-time { font-variant-numeric: tabular-nums; }
.corner.dark { color: rgba(11,19,32,.7); text-shadow: none; }
.corner.hide, .hide-all .corner, .hide-all .caption, .hide-all .notice { opacity: 0 !important; }

.credit { position: absolute; left: 40px; bottom: 30px; font: 400 16px/1 var(--f-cond); letter-spacing: .06em; color: rgba(244,239,228,.5); z-index: 3; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.light .credit { color: rgba(11,19,32,.5); text-shadow: none; }
.promo .plogo { position: absolute; right: 200px; top: 50%; margin-top: -290px; width: 520px; height: 520px; display: flex; align-items: center; justify-content: center; }
.promo .plogo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 30px 80px rgba(0,0,0,.5)); }
.partner .card.fill img, .partners .lg.fill img, .poster .strip .lg.fill img { width: 100%; height: 100%; object-fit: cover; }

.still .kb img { inset: 0; width: 100%; height: 100%; animation-name: kbs; }
@keyframes kbs { from { transform: scale(1); } to { transform: scale(1.04); } }
.promo .arch.wide { width: 860px; border-radius: 12px; top: 200px; bottom: auto; height: 484px; }

.tmask { width: 100%; aspect-ratio: 2040 / 2480; background: currentColor; -webkit-mask: url(svg/title_v2.png) center / contain no-repeat; mask: url(svg/title_v2.png) center / contain no-repeat; }
.center .title { width: 420px; margin: 0 auto; color: var(--cinnabar); }

.shade-list { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,19,32,.97) 0%, rgba(11,19,32,.9) 60%, rgba(11,19,32,.7) 100%); }
.list .head, .list .rows { z-index: 2; }
.speakers .sp .n { font-size: 66px; }

.partners .lg, .partner .card { overflow: hidden; }

body, .body-serif, .qq .opt .ot, .caption .cap-role { font-variant-numeric: lining-nums; }
.lobby .side .chip { margin-bottom: 20px; }

.clockN .cline { font: italic 500 30px/1.25 var(--f-serif); color: var(--muted); margin-top: 16px; min-height: 76px; }

.promo.ogo .txt { width: 800px; }
.promo.ogo .h-big { font-size: 96px; }
.promo .arch.wide { width: 860px; height: 484px; top: 300px; right: var(--safe); }

.thanks .center .title { color: var(--ivory); width: 380px; }

/* ---------- обвязка: всегда видно, что это за событие, и который час ---------- */
.bug { position: absolute; left: 0; right: 0; top: 0; height: 104px; padding: 26px var(--safe) 0; display: flex; justify-content: space-between; align-items: flex-start; z-index: 8; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,19,32,.55), rgba(11,19,32,0)); transition: opacity .6s; }
.bug-l { border-left: 5px solid var(--cinnabar); padding-left: 18px; }
.bug-title { font: 500 30px/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ivory); }
.bug-sub { font: italic 500 24px/1.2 var(--f-serif); color: rgba(244,239,228,.75); margin-top: 6px; }
.bug-r { text-align: right; }
.bug-time { font: 300 58px/.9 var(--f-cond); font-variant-numeric: tabular-nums; color: var(--ivory); }
.bug-place { font: 400 16px/1 var(--f-cond); letter-spacing: .22em; text-transform: uppercase; color: rgba(244,239,228,.65); margin-top: 8px; }
.bug.dark { background: linear-gradient(180deg, rgba(223,232,239,.7), rgba(223,232,239,0)); }
.bug.dark .bug-title, .bug.dark .bug-time { color: var(--night); }
.bug.dark .bug-sub, .bug.dark .bug-place { color: rgba(11,19,32,.7); }
.hide-all .bug { opacity: 0 !important; }
/* всё, что стояло у верхнего края, опускаем под обвязку */
.poster .col { top: 150px; } .poster .col .kicker { display: none; }
.poster .count { top: 160px; }
.chipbox, .list .head, .partners .head, .clockN .chipbox, .clock1 .chipbox, .quiz .head { top: 150px !important; }
.clock1 .line { top: 150px; }
.list .rows { top: 330px; }
.qq .timer { top: 150px; }
.qq .question { top: 240px; }
.fact .arch { top: 150px; } .fact .txt { top: 200px; }
.promo .txt { top: 160px; } .promo .arch { top: 150px; } .promo.miron .features { top: 220px; }
.partner.wide .txtcol { top: 280px; }

/* ---------- часы: один кадр, города перещёлкиваются ---------- */
.clockroll .photos { position: absolute; inset: 0; }
.clockroll .photos .kb.ph { opacity: 0; transition: opacity 1.2s ease; }
.clockroll .photos .kb.ph.on { opacity: 1; }
.shade-l2 { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,19,32,.55) 0%, rgba(11,19,32,0) 55%); }
.roll { position: relative; overflow: hidden; }
.roll .sr-in { display: block; }
@keyframes srExit { to { transform: translateY(-64%); opacity: 0; } }
@keyframes srEnter { from { transform: translateY(64%); opacity: 0; } to { transform: none; opacity: 1; } }
.clockroll .inner { position: absolute; left: var(--safe); bottom: 170px; }
.clockroll .time { font: 300 300px/.95 var(--f-cond); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.clockroll .city { font: 500 92px/1.05 var(--f-cond); text-transform: uppercase; margin-top: 8px; }
.clockroll .zone { font: 400 34px/1.2 var(--f-cond); letter-spacing: .2em; color: var(--gold); margin-top: 14px; text-transform: uppercase; }
.clockroll .wx { position: absolute; right: var(--safe); bottom: 170px; text-align: right; }
.clockroll .wx .t { font: 300 150px/1 var(--f-cond); }
.clockroll .wx .d { font: italic 500 42px/1.25 var(--f-serif); }
.clockroll .wx .s { font: 400 30px/1.4 var(--f-cond); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; margin-top: 8px; }
.clockroll .line { position: absolute; right: var(--safe); top: 150px; max-width: 900px; text-align: right; font: italic 500 46px/1.3 var(--f-serif); }
.clockroll .chipbox { position: absolute; left: var(--safe); }
.clockroll .dots { position: absolute; left: var(--safe); right: var(--safe); bottom: 96px; display: flex; gap: 34px; font: 400 22px/1 var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: rgba(244,239,228,.4); }
.clockroll .dots span { padding-top: 12px; border-top: 3px solid rgba(244,239,228,.2); transition: color .6s, border-color .6s; }
.clockroll .dots span.on { color: var(--ivory); border-color: var(--cinnabar); }
/* ссылка на автора эфира */
.corner { pointer-events: auto; }
.corner-sig { color: inherit; text-decoration: none; }
body.cursor, body.cursor * { cursor: default; }
body.cursor .corner-sig { cursor: pointer; }
.corner-sig:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- кружок «7 гидов» в углу каждого кадра ---------- */
.badge7 { position: absolute; left: 36px; bottom: 22px; width: 92px; height: 92px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; z-index: 9; box-shadow: 0 0 0 2px rgba(211,171,92,.7), 0 8px 30px rgba(0,0,0,.35); transition: opacity .6s; }
.badge7 img { width: 80%; height: 80%; object-fit: contain; }
.hide-all .badge7 { opacity: 0; }
.credit { left: 150px; }
.poster .strip .lg { width: 124px; height: 124px; }
.poster .strip { gap: 40px; }

/* ---------- отбивка 7 гидов: красный дуотон Петербурга, звёзды как на знаке ---------- */
.i7g .duo { position: absolute; inset: 0; background: #a3121c; mix-blend-mode: multiply; opacity: .78; }
.i7g .card, .ivol .card { position: absolute; left: 280px; top: 280px; width: 560px; height: 560px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 0 0 4px var(--gold), 0 40px 120px rgba(0,0,0,.5); }
.i7g .card img, .ivol .card img { width: 78%; height: 78%; object-fit: contain; }
.shine::after { content: ''; position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%); transform: translateX(-120%); animation: shine 1.6s ease-in-out both; animation-delay: calc(var(--e, 0s) + 1.2s); }
@keyframes shine { to { transform: translateX(120%); } }
.ident .txtcol { position: absolute; left: 960px; right: var(--safe); top: 360px; }
.ident .name { font: 500 76px/1.05 var(--f-cond); text-transform: uppercase; margin-top: 30px; }
.ident .body-serif { margin-top: 36px; }
.star { position: absolute; width: 22px; height: 22px; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: 0;
  animation: tw 2.4s ease-in-out infinite; animation-delay: calc(var(--e, 0s) + var(--d)); filter: drop-shadow(0 0 8px rgba(255,255,255,.9)); }
@keyframes tw { 0% { opacity: 0; transform: scale(.4) rotate(0); } 30% { opacity: 1; transform: scale(1) rotate(20deg); } 60%, 100% { opacity: .15; transform: scale(.6) rotate(45deg); } }

/* ---------- отбивка Волонтёров: цветные дуги знака дорисовываются вокруг логотипа ---------- */
.ivol { background: var(--ivory) !important; color: var(--night); }
.ivol .arcs { position: absolute; inset: 0; width: 100%; height: 100%; }
.ivol .arc { fill: none; stroke-width: 22; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  transform-box: fill-box; transform-origin: center; transform: rotate(var(--rot));
  animation: arcdraw 2.2s cubic-bezier(.3,.6,.2,1) both; animation-delay: calc(var(--e, 0s) + var(--d)); }
@keyframes arcdraw { to { stroke-dashoffset: calc(var(--len) * .38); } }
.ivol .card { box-shadow: 0 30px 90px rgba(11,19,32,.25); }
.ivol .body-serif { color: var(--night); }
.ivol .chip { color: #4b2a8c; }

/* ---------- поездка «Суздальская сказка» ---------- */
.tour .txt { position: absolute; left: var(--safe); top: 170px; width: 1000px; }
.tour .h-big { margin-top: 28px; font-size: 132px; }
.tour .sub { font: italic 500 52px/1.2 var(--f-serif); color: var(--gold); margin-top: 6px; }
.tour .when { font: 400 34px/1.2 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; }
.tour .hl { margin-top: 56px; min-height: 180px; font: 500 72px/1.1 var(--f-cond); text-transform: uppercase; color: #fff; }
.tour .seats { position: absolute; right: var(--safe); bottom: 140px; display: flex; align-items: center; gap: 26px; font: 500 40px/1 var(--f-cond); text-transform: uppercase; letter-spacing: .08em; }
.tour .lg7 { width: 150px; height: 150px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--gold); }
.tour .lg7 img { width: 80%; height: 80%; object-fit: contain; }

.partners .grid { top: 330px; gap: 34px; flex-wrap: nowrap; }
.partners .it { width: 250px; }
.partners .lg { width: 220px; height: 220px; }
.partners .nm { font-size: 26px; }

.partners.many .grid { flex-wrap: wrap; top: 250px; row-gap: 26px; column-gap: 60px; padding: 0 180px; }
.partners.many .it { width: 300px; }
.partners.many .lg { width: 190px; height: 190px; }
.partners.many .nm { font-size: 24px; margin-top: 18px; min-height: 58px; }
.poster .strip { gap: 30px; }
.poster .strip .lg { width: 116px; height: 116px; }

.partners.many .grid { padding: 0; left: 200px; right: 200px; }

.program .row .tm { width: 340px; }

.no-badge .badge7 { opacity: 0; }
.credit { font-size: 13px; letter-spacing: .08em; }
.no-badge .credit { left: 40px; }

/* «рубрику готовит» — тихая строка, не соперничает с фактом */
.fact .sponsor { font-size: 20px; letter-spacing: .14em; gap: 14px; bottom: -10px; }
.fact .sponsor b { font-size: 24px; letter-spacing: .04em; color: var(--gold); }
/* широкая рамка: обложка видна целиком, без наезда */
.promo .arch.wide { border-radius: 14px; }
.promo.teatr .arch.wide { width: 860px; height: 452px; top: 300px; }
.promo .arch.wide .kb img { inset: 0; width: 100%; height: 100%; animation: none; }
.promo.teatr .txt { width: 820px; }

.url.site { margin-top: 30px; }
.tour .seats .url.site { margin-top: 12px; font-size: 34px; }

.clockroll .dots { left: 170px; }

/* промо со списком возможностей: текст слева, список справа */
.promo.withfeats .features { position: absolute; right: var(--safe); top: 220px; width: 660px; }
.promo.withfeats .features div { font: 500 40px/1.1 var(--f-cond); text-transform: uppercase; padding: 20px 0; border-bottom: 1px solid rgba(211,171,92,.4); }
.promo.withfeats .features div span { color: var(--cinnabar); margin-right: 18px; }
.promo.withfeats .txt { width: 900px; }
.promo.withfeats .h-big { font-size: 96px; }
/* адрес в подписи к картинке — видно, что это ссылка */
.credit { pointer-events: auto; }
.credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.credit a:hover { color: var(--gold); }
body.cursor .credit a { cursor: pointer; }

/* цитаты: тёмное пятно под текстом, фото остаётся по краям */
.quote .shade-all { background: radial-gradient(ellipse 62% 58% at 50% 52%, rgba(8,13,22,.9) 0%, rgba(8,13,22,.78) 45%, rgba(8,13,22,.45) 100%); }
.quote .qt, .quote .who { text-shadow: 0 2px 18px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6); }

/* ===== кинотеатральные экраны: всё мельче, реклама — спокойнее ===== */
.chip { font-size: 24px; gap: 14px; }
.chip::before { width: 14px; height: 14px; }
.h-big { font-size: 96px; }
.h-mid { font-size: 68px; }
.body-serif { font-size: 42px; }
.url { font-size: 34px; }
.rule { margin: 28px 0; width: 130px; }

/* факты */
.fact .h-big { font-size: 92px; }
.fact .body-serif { font-size: 44px; }

/* цитаты */
.quote .qt { font-size: 58px; }
.quote .qm { font-size: 170px; height: 110px; }
.quote .who { font-size: 28px; }
.quote .qbox { left: 320px; right: 320px; }

/* реклама наших проектов — примерно на треть мельче */
.promo .txt { width: 780px; top: 190px; }
.promo .h-big, .promo.withfeats .h-big, .promo.ogo .h-big { font-size: 72px; }
.promo .body-serif { font-size: 34px; }
.promo .chip { font-size: 21px; }
.promo .foot { margin-top: 34px; gap: 30px; }
.promo .foot .qr { width: 150px; height: 150px; padding: 12px; }
.promo .url { font-size: 30px; }
.promo.withfeats .txt { width: 780px; }
.promo.withfeats .features { width: 560px; top: 230px; }
.promo.withfeats .features div { font-size: 30px; padding: 15px 0; }
.promo .plogo { width: 400px; height: 400px; margin-top: -220px; right: 240px; }
.promo.teatr .txt, .promo.ogo .txt { width: 760px; }
.promo.teatr .arch.wide { width: 780px; height: 410px; top: 320px; }
.promo .arch.wide { width: 780px; height: 439px; top: 320px; }

/* партнёры и отбивки */
.ident .name { font-size: 58px; }
.ident .body-serif { font-size: 38px; }
.i7g .card, .ivol .card { width: 480px; height: 480px; left: 300px; top: 320px; }
.partner .name { font-size: 52px; }
.partners .nm, .partners.many .nm { font-size: 21px; }

/* поездка 7 гидов */
.tour .h-big { font-size: 104px; }
.tour .sub { font-size: 42px; }
.tour .when { font-size: 28px; }
.tour .hl { font-size: 56px; min-height: 140px; margin-top: 44px; }
.tour .seats { font-size: 32px; }
.tour .lg7 { width: 124px; height: 124px; }

/* часы */
.clockroll .time { font-size: 230px; }
.clockroll .city { font-size: 72px; }
.clockroll .zone { font-size: 28px; }
.clockroll .wx .t { font-size: 120px; }
.clockroll .wx .d { font-size: 36px; }
.clockroll .wx .s { font-size: 24px; }
.clockroll .line { font-size: 38px; }

/* программа и выступающие */
.program .row .tm { font-size: 46px; width: 290px; }
.program .row .tx { font-size: 42px; }
.speakers .sp .n { font-size: 52px; }
.speakers .sp .r { font-size: 28px; }

/* афиша */
.poster .when { font-size: 54px; }
.poster .what { font-size: 34px; }

/* подписи выступающих — чуть скромнее, но читаются с дальних рядов */
.caption .cap-name { font-size: 58px; }
.caption .cap-role { font-size: 32px; }