/* ==========================================================================
   DD2026 — Новогодняя эстафета (/event/new-year-2026/): «огненная коза»
   зелёная вязка новогоднего свитера + красная вышитая коза, тлеющая как угли
   ========================================================================== */
/* акцент страницы — цвет козы, ярко-красный, вместо оранжевого сайта (Вадим 06.11) */
:root:has(main.ny) { --acc: #e0262d; }   /* и общее вокруг: загрузчик, счётчик внизу, курсор */
:root:has(main.ny) #scan { box-shadow: 0 0 24px 4px rgba(224,38,45,.7); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(224,38,45,.7); } 100% { box-shadow: 0 0 0 12px rgba(224,38,45,0); } }   /* newyear.css — только на этой странице */
.ny { --fire: #e0262d; --fire2: #ff5a5f; --knit: #0f3a22; --acc: #e0262d; --acc-rgb: 224,38,45; }

/* ---------- hero ---------- */
/* отступ под шапку уже даёт .page (var(--top) + 10px) — у hero сверху 0, крошки сразу под шапкой, как на других мероприятиях */
.ny-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) clamp(28px, 6vh, 64px); overflow: hidden; isolation: isolate; }
.ny-hero .crumbs { position: relative; z-index: 3; width: fit-content; padding: 8px 12px; margin-left: -12px; border-radius: 999px; background: rgba(7,7,7,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* вязка без вышитой козы (коза у нас своя, анимированная) — ОДНОЙ картинкой во всю ширину: плитка не бесшовная,
   при повторе её стыки рисовали «рамку» вокруг козы. Книзу вязка растворяется в фон — текст первого экрана на тёмном */
.ny-knit { position: absolute; z-index: -2; top: 0; left: 0; right: 0; aspect-ratio: 440 / 483; max-height: 100%;
  background: #070707 center top / cover no-repeat; filter: saturate(.9) brightness(.6); }
.ny-knit::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 38%, rgba(224,38,45,.22), transparent 55%), linear-gradient(180deg, rgba(7,7,7,.55), rgba(7,7,7,.1) 30%, rgba(7,7,7,.35) 62%, #070707 99%); }
/* широкий экран: вязка — «заплатка» под козой по центру, края растворяются (растянутая на всю ширину была бы мыльной) */
@media (min-width: 700px) {
  .ny-knit { left: 50%; right: auto; width: min(100%, 760px); transform: translateX(-50%);
    -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent); }
}

/* коза: тлеющее свечение + искры. Ниже «крошек» и не крупнее 40% высоты экрана — рога и ноги не уходят под крошки и плашку даты */
.ny-goat { position: absolute; z-index: -1; left: 50%; top: calc(40px + 2vh); width: min(66vw, 520px, 40vh); width: min(66vw, 520px, 40svh); transform: translateX(-50%); }   /* 40vh — запас для iOS < 15.4 без svh */
/* компьютер: заголовок крупный и всё равно ложится на козу — коза прежнего размера, как фон */
@media (min-width: 900px) { .ny-goat { top: calc(4vh - 6px); width: min(78vw, 520px); } }
/* плашки даты — плотные: если ноги козы всё же заходят под них (низкий экран), текст читается */
.ny-hero .ev-meta .tag { background: rgba(7,7,7,.72); }
.ny-goat picture { display: block; }
.ny-goat img { width: 100%; height: auto; display: block; animation: ny-float 6s ease-in-out infinite, ny-burn 2.6s ease-in-out infinite; }
@keyframes ny-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
@keyframes ny-burn { 0%,100% { filter: drop-shadow(0 0 14px rgba(224,38,45,.55)) drop-shadow(0 0 38px rgba(200,16,28,.35)); }
  45% { filter: drop-shadow(0 0 22px rgba(255,70,75,.75)) drop-shadow(0 0 60px rgba(200,16,28,.5)); } 70% { filter: drop-shadow(0 0 10px rgba(224,38,45,.45)) drop-shadow(0 0 30px rgba(200,16,28,.3)); } }
.ny-ember { position: absolute; bottom: 18%; width: 6px; height: 6px; border-radius: 50%; background: var(--fire2); box-shadow: 0 0 10px 3px rgba(240,50,55,.8); opacity: 0; animation: ny-ember 3.4s ease-in infinite; }
.ny-ember:nth-of-type(1) { left: 22%; animation-delay: .2s; } .ny-ember:nth-of-type(2) { left: 40%; animation-delay: 1.4s; width: 4px; height: 4px; }
.ny-ember:nth-of-type(3) { left: 58%; animation-delay: .8s; } .ny-ember:nth-of-type(4) { left: 72%; animation-delay: 2.1s; width: 3px; height: 3px; }
.ny-ember:nth-of-type(5) { left: 33%; animation-delay: 2.7s; width: 3px; height: 3px; }
@keyframes ny-ember { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(18px, -220px) scale(.2); opacity: 0; } }

.ny-hero-in { position: relative; z-index: 2; margin-top: auto; }
.ny-title { margin: 16px 0 14px; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.ny-title .acc { color: var(--fire); }
.ny-place { display: grid; gap: 4px; margin-bottom: 20px; }
.ny-place b { font-family: var(--disp); font-weight: 900; text-transform: uppercase; font-size:clamp(18px, 2.4vw, 26px); }
.ny-place span { color: rgba(236,230,218,.82); font-size:15px; }

/* лента «регистрация открыта» */
.ny-tape { margin: 0 calc(var(--gut) * -1); background: linear-gradient(90deg, #c1121f, var(--fire), #c1121f); color: #0a0a0a; overflow: hidden; transform: rotate(-2deg); position: relative; z-index: 4; }
.ny-tape div { display: flex; gap: 22px; width: max-content; padding: 12px 0; font-family: var(--disp); font-weight: 900; text-transform: uppercase; font-size:15px; animation: ny-tape 26s linear infinite; }
.ny-tape b { color: #fff2c4; }
@keyframes ny-tape { to { transform: translateX(-50%); } }

/* ---------- контент ---------- */
.ny-trad-txt { margin: 6px 0 18px; }
.ny-lead { max-width: 56ch; font-size:clamp(16px, 1.6vw, 19px); color: rgba(236,230,218,.86); margin: 4px 0 22px; }
.ny-stats .stat b { color: var(--fire); }
.ny-doc { margin-top: 16px; }

.ny-stages { display: grid; gap: 10px; margin-bottom: 18px; }
.ny-stage { position: relative; display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 4px 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--faint); background: rgba(12,12,12,.72); overflow: hidden; }
.ny-stage span { font-size:14px; letter-spacing:.04em; text-transform: uppercase; color: var(--dim); }
.ny-stage b { font-family: var(--disp); font-weight: 900; font-size:clamp(30px, 6vw, 54px); line-height: 1; letter-spacing: -.03em; }
.ny-stage b small { font-size:max(14px,.4em); margin-left: 4px; color: var(--dim); }
.ny-stage i { grid-column: 1 / -1; height: 5px; border-radius: 5px; background: rgba(236,230,218,.1); position: relative; overflow: hidden; }
.ny-stage i::after { content: ""; position: absolute; inset: 0; width: calc(var(--w) * 100%); border-radius: inherit; background: linear-gradient(90deg, #c1121f, var(--fire), var(--fire2)); }

.ny-random h3 { font-family: var(--disp); font-weight: 900; text-transform: uppercase; font-size:clamp(20px, 2.6vw, 30px); margin-bottom: 8px; }
.ny-random p { color: rgba(236,230,218,.86); font-size:16px; }
.ny-steps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ny-steps li { padding: 12px 10px; border-radius: 14px; border: 1px solid var(--faint); display: grid; gap: 4px; min-width: 0; }
.ny-steps li b { font-family: var(--disp); font-weight: 900; font-size:20px; }
/* узкая карточка: длинное слово («Переме-шиваем», мягкий перенос в разметке) не вылезает за рамку */
.ny-steps li span { font-size:14px; color: var(--dim); line-height: 1.3; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 420px) { .ny-steps li span { font-size:14px; } }
.ny-steps li.on { border-color: var(--fire); background: rgba(224,38,45,.12); }
.ny-steps li.on b { color: var(--fire); }

.ny-prizes .card { display: grid; gap: 8px; align-content: start; }
.ny-prizes .card .mono { font-size:14px; letter-spacing:.04em; text-transform: uppercase; }
.ny-prizes h3 { font-family: var(--disp); font-weight: 900; text-transform: uppercase; font-size:19px; }
.ny-prizes p { color: rgba(236,230,218,.82); font-size:15px; }
.ny-prizes .card:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* нечётное число призов — последний во всю ширину */

/* билет */
.ny-ticket { display: grid; gap: 0; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, #c1121f, var(--fire) 55%, var(--fire2)); color: #0a0a0a; position: relative; }
.ny-ticket::before { content: ""; position: absolute; inset: 0; background: var(--goat, url("../ny/goat.webp")) right -30px bottom -40px / 240px auto no-repeat; opacity: .16; mix-blend-mode: multiply; pointer-events: none; }
.ny-ticket-l, .ny-ticket-r { position: relative; padding: clamp(20px, 3vw, 34px); display: grid; gap: 10px; align-content: start; }
.ny-ticket-r { border-top: 2px dashed rgba(10,10,10,.35); }
.ny-ticket h2 { font-family: var(--disp); font-weight: 900; text-transform: uppercase; font-size:clamp(30px, 6vw, 56px); line-height: .95; letter-spacing: -.03em; }
.ny-ticket .mono { color: rgba(10,10,10,.75); font-size:14px; letter-spacing:.04em; text-transform: uppercase; }
.ny-ticket .badge { border-color: rgba(10,10,10,.4); color: #0a0a0a; width: fit-content; }
.ny-ticket .badge.reg { background: #0a0a0a; color: var(--fire2); border-color: #0a0a0a; }
.ny-price { font-family: var(--disp); font-weight: 900; font-size:clamp(46px, 9vw, 86px); line-height: 1; letter-spacing: -.04em; }
.ny-ticket .btn.solid { background: #0a0a0a; color: #fff2c4; border-color: #0a0a0a; justify-self: start; }
.ny-note { font-size:14px; color: rgba(10,10,10,.8); }
.ny-note a { color: #0a0a0a; border-bottom: 1px solid currentColor; }
@media (min-width: 900px) { .ny-ticket { grid-template-columns: 1.2fr 1fr; } .ny-ticket-r { border-top: 0; border-left: 2px dashed rgba(10,10,10,.35); } }

/* программа */
.ny-prog li > div { font-size:17px; }
.ny-heats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.ny-heats span { display: flex; align-items: baseline; gap: 6px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--faint); font-family: var(--mono); font-size:14px; }
.ny-heats i { font-style: normal; color: var(--fire); font-size:14px; }
@media (min-width: 900px) { .ny-heats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* фото */
.ny-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ny-photos a { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: #111; }
.ny-photos a:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.ny-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--out); }
.ny-photos a:hover img { transform: scale(1.05); }
@media (min-width: 900px) { .ny-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ny-photos a:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } }

.ny-partners .card { gap: 10px; padding: 18px; }
.ny-partners img { max-width: 140px; max-height: 46px; object-fit: contain; }
.ny-partners .mono { font-size:14px; letter-spacing:.04em; text-transform: uppercase; }
@media (min-width: 800px) { .ny-partners { grid-template-columns: repeat(3, 1fr); } }

@media (prefers-reduced-motion: reduce) { .ny-goat img, .ny-ember, .ny-tape div { animation: none; } }
.ny-stats .stat b { white-space: nowrap; }
/* телефон: строки «крупная цифра — подпись», чтобы «2 000 м» не наезжало на соседа */
@media (max-width: 599px) { .ny-stats { grid-template-columns: 1fr; gap: 8px; }
  .ny-stats .stat { display: flex; align-items: center; gap: 16px; padding: 14px 16px; } .ny-stats .stat span { flex: 1; min-width: 0; }
  .ny-stats .stat b { flex: none; font-size:28px; min-width: 64px; } }

.ny-heats span { font-size:16px; padding: 10px 12px; } .ny-heats i { font-size:14px; }
.ny-prog li b { font-size:17px; }

/* анимации козы и искр — только пока первый экран виден (меньше нагрузки, и Safari не «дёргает» закреплённую шапку) */
.ny-hero.off .ny-goat img, .ny-hero.off .ny-ember { animation-play-state: paused; }
.ny-hero .crumbs { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(7,7,7,.62); }

/* повёрнутая лента шире экрана на ~1 px — без горизонтальной прокрутки страницы (clip, в отличие от hidden, не ломает sticky) */
.page.ny { overflow-x: clip; }

/* ===== по проверке 20.10 ===== */
/* билет: мелкий моно-текст плотным чёрным (на красном краю градиента контраст был 2,8:1) */
.ny-ticket .mono { color: #0a0a0a; font-weight: 500; }
/* партнёры (Вадим 20.10: «нет симметрии и гармонии»): «один над двумя» — генеральный партнёр во всю ширину, двое под ним поровну */
.partners.ny-partners{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:880px}
.ny-partners>.card{min-height:120px}
.ny-partners>.card:first-child{grid-column:1/-1;min-height:150px;gap:14px}
.ny-partners>.card:first-child img{max-width:min(240px,70%);max-height:58px}
.ny-partners>.card:not(:first-child) img{max-width:min(150px,70%);max-height:40px}
@media (min-width:800px){ .ny-partners>.card:first-child{min-height:190px} .ny-partners>.card{min-height:140px} }

/* ===== UX-ревью 21.10 (C4, C12) ===== */
/* первый экран заходит под прозрачную шапку (без чёрной полосы 88 px, как у афиш событий) и кончается ровно у низа окна:
   вязка от самого верха, крошки — на 88/106 px, «Зарегистрироваться · 2 027 ₽» — в первом экране */
.ny-hero { margin-top: calc(-1 * var(--c-top, 88px)); padding-top: var(--c-top, 88px); }
.ny-goat { top: calc(var(--c-top, 88px) + 40px + 2vh); }   /* коза — как раньше, под крошками */
@media (min-width: 900px) { .ny-goat { top: calc(var(--c-top, 106px) + 4vh - 6px); } }
/* первый экран = окно минус шапка: «Зарегистрироваться · 2 027 ₽» целиком видна сразу после загрузки (Р4), на низких экранах коза меньше */
@media (max-height:700px){ .ny-goat{width:min(60vw,440px,32vh);width:min(60vw,440px,32svh)} }
/* компьютер с невысоким окном (1280×720): заголовок в три строки ниже, чтобы кнопка помещалась в первый экран */
@media (min-width:900px) and (max-height:820px){ .ny-title{font-size:min(9vw,11vh)} }
/* владелец билета: «Вы зарегистрированы · №003 · Билет →» — вместо оплаты, «ещё участник» вторым действием */
.ny-mine{display:inline-grid;gap:2px;align-content:center;min-height:52px;padding:8px 18px;border-radius:var(--r-m,16px);border:1px solid #7ee2a8;background:rgba(7,7,7,.72);color:var(--fg);text-align:left}
.ny-mine b{font-family:var(--mono);font-weight:400;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#7ee2a8}
.ny-mine span{font:600 15px/1.3 var(--body)}
a.ny-mine:hover{background:#7ee2a8;color:#0a0a0a} a.ny-mine:hover b{color:#0a0a0a}
.ny-mine.on-acc{justify-self:start;border-color:#0a0a0a;background:#0a0a0a;color:#fff2c4}
.ny-mine.on-acc b{color:#7ee2a8}
.ny-ticket .btn{text-align:center;line-height:1.3}   /* «Зарегистрировать ещё участника» в две строки — по центру */

/* UX-ревью 22.10: крошки, как у остальных событий (events.css) — на телефоне без «пилюли» (правило 21.10 обнуляло только сдвиг,
   подложка и поля из строк 10 и 130 оставались), читаемость на вязке — тенью; на компьютере «пилюля» ровно по полю, без выступа влево */
@media (max-width:899px){ .ny-hero .crumbs{margin-left:0;padding:0;border-radius:0;background:none;text-shadow:0 1px 12px rgba(7,7,7,.9)} }
@media (min-width:900px){ .ny-hero .crumbs{margin-left:0} }
/* телефон: «Перемешиваем» без мягкого переноса (C19) не помещалось в треть ширины и вылезало за рамку плитки 30.12 —
   шаги строками «дата — что происходит», слова целиком */
@media (max-width:479px){
  .ny-steps{grid-template-columns:minmax(0,1fr);gap:6px}
  .ny-steps li{grid-template-columns:72px minmax(0,1fr);align-items:baseline;column-gap:12px;padding:10px 14px}
  .ny-steps li span{font-size:14px}
}