/* =========================================================
   Хеллоуин в IT TOP College
   Палитра строго из референса:
   Jet Black #1A1A1A · Pumpkin Orange #E8641C
   Witch Purple #5B2C82 · Slime Green #7FD13B
   Нейтральные (взяты из самих иллюстраций): кость и камень надгробий.
   ========================================================= */

:root{
  --ink:        #1A1A1A;
  --void:       #0E0E0E;
  --pumpkin:    #E8641C;
  --witch:      #5B2C82;
  --slime:      #7FD13B;
  --bone:       #F2EFE6;
  --stone:      #8E8AA0;
  --stone-dim:  #6E6A7C;

  --edge: 3px solid var(--ink);
  --pop:  8px 8px 0 var(--ink);
  --pop-sm: 5px 5px 0 var(--ink);

  --fd: 'Unbounded', system-ui, sans-serif;   /* дисплей */
  --fb: 'Golos Text', system-ui, sans-serif;  /* текст   */
  --fm: 'JetBrains Mono', ui-monospace, monospace; /* данные */
  --fa: 'Ruslan Display', var(--fd);               /* акцент: готические заголовки */
  --fh: 'Caveat', cursive;                         /* рукописные пометки */

  --shell: 1200px;
  --gut: clamp(20px, 5vw, 64px);

  /* полутон — текстура, общая для всех присланных иллюстраций */
  --halftone: radial-gradient(circle at center, rgba(255,255,255,.14) 1.1px, transparent 1.2px);
  --halftone-dark: radial-gradient(circle at center, rgba(0,0,0,.22) 1.1px, transparent 1.2px);
}

*,*::before,*::after{ box-sizing:border-box; }

/* отступы прокрутки под липкую шапку и плавающую панель голоса,
   чтобы фокус клавиатуры не уезжал под них (WCAG 2.2) */
html{ scroll-behavior:smooth; scroll-padding-top:104px; scroll-padding-bottom:110px; }

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--fb);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ font-family:var(--fd); line-height:1.02; margin:0; letter-spacing:-.02em; }
p{ margin:0; }
ul,ol,dl,dd,dt{ margin:0; padding:0; list-style:none; }

:focus-visible{
  outline:3px solid var(--slime);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--slime); color:var(--ink); padding:14px 22px;
  font-family:var(--fb); font-weight:700; text-decoration:none;
}
.skip-link:focus{ left:16px; top:16px; }

/* ── утилиты ──────────────────────────────────────────── */
.eyebrow{
  font-family:var(--fb); font-size:13px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--pumpkin);
}
.eyebrow--slime{ color:var(--slime); }
.eyebrow--purple{ color:#B98BE0; }

.section-head{ max-width:760px; margin:0 0 clamp(40px,6vw,72px); }
.section-title{
  font-family:var(--fa); font-weight:400;
  font-size:clamp(40px,7.4vw,86px); line-height:.96;
  margin:16px 0 22px; text-transform:uppercase;
  letter-spacing:.01em;
  text-shadow:0 0 34px rgba(91,44,130,.6);
}
.section-lede{ color:#C9C4B8; font-size:clamp(16px,1.6vw,19px); max-width:62ch; }

/* ── кнопки ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:14px 26px;
  background:var(--pumpkin); color:var(--ink);
  border:var(--edge); box-shadow:var(--pop-sm);
  font-family:var(--fd); font-weight:700; font-size:15px;
  text-decoration:none; text-transform:uppercase; letter-spacing:.01em;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover{ background:var(--slime); transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.btn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.btn[hidden]{ display:none; }
.btn--lg{ min-height:58px; padding:18px 34px; font-size:17px; box-shadow:var(--pop); }
.btn--lg:hover{ box-shadow:10px 10px 0 var(--ink); }
.btn--sm{ min-height:44px; padding:11px 20px; font-size:13px; }
.btn--ghost{ background:transparent; color:var(--bone); border-color:var(--bone); box-shadow:5px 5px 0 var(--witch); }
.btn--ghost:hover{ background:var(--witch); color:var(--bone); border-color:var(--bone); }

/* ── навигация ────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:28px;
  padding:12px var(--gut);
  background:rgba(14,14,14,.86);
  backdrop-filter:blur(10px);
  border-bottom:3px solid var(--ink);
}
.nav__brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--bone); }
.nav__brand img{ width:44px; }
.nav__brand-text{
  font-family:var(--fd); font-weight:800; font-size:15px;
  text-transform:uppercase; line-height:1.05; display:flex; flex-direction:column;
}
.nav__brand-text em{
  font-family:var(--fb); font-style:normal; font-weight:400;
  font-size:10px; letter-spacing:.3em; color:var(--pumpkin);
}
.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{
  color:#C9C4B8; text-decoration:none; font-size:14px; font-weight:600;
  padding:6px 2px; border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.nav__links a:hover{ color:var(--slime); border-bottom-color:var(--slime); }

/* ── герой ────────────────────────────────────────────── */
.hero{ position:relative; padding:clamp(150px,19vw,230px) var(--gut) clamp(80px,9vw,120px); overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(91,44,130,.55), transparent 62%),
    radial-gradient(90% 60% at 50% 100%, rgba(232,100,28,.20), transparent 70%);
  pointer-events:none;
}
.hero::after{
  content:''; position:absolute; inset:0;
  background-image:var(--halftone); background-size:9px 9px;
  opacity:.55; pointer-events:none;
}
/* мышки — верхняя кромка героя, гирлянда статична */
.hero__bats{
  position:absolute; top:0; left:0; right:0;
  aspect-ratio:1920/208;
  background:url('assets/bats.png') top center / 100% 100% no-repeat;
  pointer-events:none; z-index:2;
}

.hero__inner{ position:relative; z-index:3; max-width:var(--shell); margin:0 auto; }
.hero__title{ margin:18px 0 28px; text-transform:uppercase; font-weight:900; }
.hero__line{ display:block; font-size:clamp(42px,12.5vw,168px); letter-spacing:-.04em; }
.hero__line--1{ color:var(--bone); }
.hero__line--2{
  color:var(--pumpkin);
  text-shadow:7px 7px 0 var(--witch);
  margin-left:clamp(0px,2.5vw,48px);
}
.hero__lede{ max-width:56ch; font-size:clamp(17px,1.9vw,21px); color:#D6D1C5; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:16px; margin:36px 0 56px; }

.countdown__caption{
  font-family:var(--fb); font-size:13px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--stone);
  margin-bottom:12px;
}
.countdown__caption--done{
  font-family:var(--fd); font-size:clamp(20px,2.6vw,28px); font-weight:800;
  letter-spacing:.01em; text-transform:uppercase; color:var(--slime);
  margin-bottom:0;
}
.countdown{ display:flex; flex-wrap:wrap; gap:12px; }
.countdown[hidden]{ display:none; }
.countdown__cell{
  min-width:92px; padding:14px 16px;
  background:var(--ink); border:var(--edge); border-color:var(--witch);
  box-shadow:var(--pop-sm);
}
.countdown dd{
  font-family:var(--fm); font-weight:700; font-size:clamp(28px,3.4vw,40px);
  color:var(--slime); line-height:1; font-variant-numeric:tabular-nums;
}
.countdown dt{
  font-family:var(--fb); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--stone); margin-top:6px;
}

/* ── факты ────────────────────────────────────────────── */
.facts{ background:var(--pumpkin); border-block:3px solid var(--ink); position:relative; }
.facts::after{
  content:''; position:absolute; inset:0;
  background-image:var(--halftone-dark); background-size:8px 8px; pointer-events:none;
}
.facts__row{
  position:relative; z-index:1;
  max-width:var(--shell); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr);
  padding:clamp(26px,3.4vw,42px) var(--gut);
}
.fact{ display:flex; flex-direction:column; gap:4px; padding-right:18px; color:var(--ink); }
.fact + .fact{ border-left:3px solid var(--ink); padding-left:24px; }
.fact b{ font-family:var(--fd); font-weight:900; font-size:clamp(34px,4.6vw,56px); line-height:1; }
.fact span{ font-size:14px; font-weight:600; }

/* ── секция участников / сцена ────────────────────────── */
.lineup{ padding:clamp(70px,9vw,120px) var(--gut) clamp(60px,7vw,90px); max-width:var(--shell); margin:0 auto; }
.lineup__status{
  padding:28px; background:var(--ink); border:var(--edge); border-color:var(--stone-dim);
  font-family:var(--fb); font-size:16px; color:var(--stone); max-width:52ch;
}
.lineup__status[hidden]{ display:none; }

/* переключатель номинации: какую сейчас голосуем */
.nomswitch{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:clamp(28px,4vw,44px);
}
.nomswitch__btn{
  position:relative;
  padding:12px 18px 12px 16px; cursor:pointer;
  background:var(--ink); color:var(--stone);
  border:2px solid var(--stone-dim);
  font-family:var(--fb); font-weight:700; font-size:13.5px;
  text-transform:uppercase; letter-spacing:.02em;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.nomswitch__btn:hover{ border-color:var(--slime); color:var(--bone); }
.nomswitch__btn[aria-selected="true"]{
  background:var(--slime); border-color:var(--slime); color:var(--ink);
}
.nomswitch__check{
  display:none; margin-left:8px;
  color:var(--pumpkin); font-weight:900;
}
.nomswitch__btn[aria-selected="true"] .nomswitch__check{ color:var(--ink); }
.nomswitch__btn.is-voted .nomswitch__check{ display:inline; }

.stage{ position:relative; display:flex; align-items:center; gap:clamp(8px,2vw,22px); }
.stage__beam{
  position:absolute; left:50%; top:-70px; transform:translateX(-50%);
  width:min(640px,94%); height:calc(100% + 100px);
  background:linear-gradient(to bottom,
    rgba(232,100,28,.22), rgba(232,100,28,.08) 46%, rgba(232,100,28,0) 88%);
  clip-path:polygon(39% 0, 61% 0, 104% 100%, -4% 100%);
  filter:blur(16px);
  pointer-events:none;
}
.stage__viewport{ flex:1; overflow:hidden; padding:48px 0 34px; }
.stage__track{
  display:flex; align-items:stretch;
  transition:transform .42s cubic-bezier(.22,.9,.3,1);
  will-change:transform;
  touch-action:pan-y;
}

/* карточка участника */
.card{ flex:0 0 var(--card-w,300px); padding:0 10px; }
.card__box{
  position:relative; height:100%;
  display:flex; flex-direction:column;
  background:var(--ink); border:var(--edge); border-color:var(--stone-dim);
  padding:16px 16px 20px;
  cursor:pointer; width:100%; text-align:left; color:inherit; font:inherit;
  transition:transform .35s cubic-bezier(.22,.9,.3,1), border-color .25s ease,
             box-shadow .25s ease, opacity .35s ease;
  transform:scale(.86); opacity:.42;
}
.card__box:hover{ opacity:.72; }
.card.is-active .card__box{
  transform:scale(1); opacity:1;
  border-color:var(--slime); box-shadow:var(--pop);
  cursor:default;
}
.card.is-voted .card__box{ border-color:var(--pumpkin); box-shadow:8px 8px 0 var(--witch); }

/* заглушка фотографии */
.card__photo{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--witch); border:3px solid var(--ink);
  display:grid; place-items:center;
}
.card__photo::before{
  content:''; position:absolute; inset:0;
  background-image:var(--halftone-dark); background-size:7px 7px;
}
/* силуэт-заглушка: плечи + голова */
/* реальное фото заполняет рамку целиком и кадрируется по центру,
   поэтому в карточку годится снимок любых пропорций */
.card__photo img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; object-position:center top;
}
.card__silhouette{ position:relative; width:60%; color:rgba(14,14,14,.62); }

/* лупа поверх фото активной карточки — подсказка, что его можно открыть крупно */
.card__zoom{
  position:absolute; z-index:3; right:10px; bottom:10px;
  width:36px; height:36px; display:grid; place-items:center;
  background:rgba(14,14,14,.72); border:2px solid var(--bone);
  color:var(--bone); opacity:0; pointer-events:none;
  transition:opacity .18s ease;
}
.card__zoom svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; }
.card.is-active .card__photo--zoomable{ cursor:zoom-in; }
.card.is-active .card__photo--zoomable .card__zoom{ opacity:1; }
.card__num{
  position:absolute; right:-3px; top:-3px; z-index:2;
  font-family:var(--fd); font-weight:900; font-size:22px;
  background:var(--slime); color:var(--ink);
  padding:6px 12px; border:3px solid var(--ink);
}
.card__name{ font-size:21px; font-weight:800; margin:16px 0 6px; text-transform:uppercase; }
.card__group{ font-family:var(--fb); font-size:12px; color:var(--stone); letter-spacing:.08em; }
.card__desc{ font-size:14.5px; color:#C4BFB3; margin-top:12px; flex:1; }
.card__tag{
  align-self:flex-start; margin-top:16px;
  font-family:var(--fb); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:6px 11px; border:2px solid currentColor;
}
.tag--scary{ color:var(--pumpkin); }
.tag--soft{ color:var(--slime); }
.tag--secret{ color:#B98BE0; }
.card__voted{
  display:none; margin-top:14px;
  font-family:var(--fb); font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); background:var(--pumpkin);
  padding:7px 11px; align-self:flex-start;
}
.card.is-voted .card__voted{ display:block; }

/* стрелки */
.stage__arrow{
  flex:0 0 auto; width:56px; height:56px; z-index:3;
  display:grid; place-items:center;
  background:var(--ink); color:var(--bone);
  border:var(--edge); border-color:var(--bone); box-shadow:var(--pop-sm);
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.stage__arrow:hover{ background:var(--slime); color:var(--ink); transform:translateY(-2px); }
.stage__arrow svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

/* счётчик и точки */
.stage__controls{ position:relative; display:flex; align-items:center; gap:22px; margin-top:26px; flex-wrap:wrap; padding-right:130px; }
.stage__counter{
  font-family:var(--fm); font-weight:700; font-size:15px; color:var(--bone);
  font-variant-numeric:tabular-nums;
}
.stage__counter .sep{ color:var(--stone-dim); margin:0 6px; }
.dots{ display:flex; gap:8px; flex-wrap:wrap; }
.dot{
  width:30px; height:30px; padding:0; cursor:pointer;
  background:transparent; border:2px solid var(--stone-dim);
  font-family:var(--fm); font-size:11px; color:var(--stone);
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.dot:hover{ border-color:var(--slime); color:var(--slime); }
.dot[aria-selected="true"]{ background:var(--slime); border-color:var(--slime); color:var(--ink); font-weight:700; }
.dot.is-voted{ border-color:var(--pumpkin); color:var(--pumpkin); }
.dot.is-voted[aria-selected="true"]{ background:var(--pumpkin); color:var(--ink); }

/* блок голосования */
.voteblock{
  margin-top:clamp(36px,5vw,56px);
  display:flex; align-items:center; gap:clamp(16px,2.4vw,30px); flex-wrap:wrap;
  background:var(--witch); border:var(--edge); box-shadow:var(--pop);
  padding:clamp(22px,3vw,32px);
  position:relative;
}
.voteblock::after{
  content:''; position:absolute; inset:0;
  background-image:var(--halftone); background-size:8px 8px; pointer-events:none;
}
.voteblock > *{ position:relative; z-index:1; }
.voteblock__label{
  font-family:var(--fb); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:#D9C7EC; width:100%;
}
.voteblock__name{
  font-family:var(--fd); font-weight:800; font-size:clamp(20px,2.6vw,30px);
  text-transform:uppercase; flex:1; min-width:220px;
}
.voteblock__note{ font-family:var(--fh); font-size:19px; color:#E6DCF2; width:100%; }
.btn--vote[data-state="done"]{ background:var(--slime); }

/* код для голосования — показывается, пока устройство не подтвердилось */
.voteblock__gate{ width:100%; }
.voteblock__gate-label{
  display:block; margin-bottom:10px;
  font-family:var(--fb); font-size:13px; font-weight:700;
  letter-spacing:.06em; color:#E6DCF2;
}
.voteblock__gate-row{ display:flex; flex-wrap:wrap; gap:12px; }
.voteblock__gate-input{
  flex:1; min-width:160px; min-height:58px; padding:0 18px;
  background:var(--ink); color:var(--bone);
  border:var(--edge); border-color:var(--bone);
  font-family:var(--fm); font-size:22px; font-weight:700; letter-spacing:.3em;
  text-align:center;
}
.voteblock__gate-input::placeholder{ color:var(--stone-dim); letter-spacing:.3em; }
.voteblock__gate-input:focus-visible{ border-color:var(--slime); }
.voteblock__gate-error{
  margin-top:10px; min-height:1.3em;
  font-family:var(--fb); font-size:13.5px; font-weight:600; color:#FFD39A;
}

/* ── номинации ────────────────────────────────────────── */
.nominations{ padding:clamp(70px,9vw,120px) var(--gut) clamp(140px,15vw,200px); max-width:var(--shell); margin:0 auto; }
.noms{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.nom{
  position:relative; padding:28px 24px 26px;
  background:var(--ink); border:var(--edge); border-color:var(--stone-dim);
  display:flex; flex-direction:column;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.nom:hover{ transform:translateY(-5px); box-shadow:var(--pop-sm); border-color:var(--slime); }
.nom h3{ font-size:20px; font-weight:800; margin-bottom:10px; text-transform:uppercase; }
.nom p{ font-size:14.5px; color:#C4BFB3; flex:1; }
.nom__prize{
  margin-top:10px; padding-top:10px; border-top:2px dashed var(--stone-dim);
  font-size:13.5px; color:var(--pumpkin) !important; flex:none !important;
}
.nom__prize a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.nom__prize a:hover{ color:var(--slime); }
.nom__tag{
  align-self:flex-start; margin-top:18px;
  font-family:var(--fb); font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:6px 10px; border:2px solid var(--slime); color:var(--slime);
}

/* ── расписание ───────────────────────────────────────── */
.timing{ padding:clamp(70px,9vw,120px) var(--gut) clamp(155px,17vw,230px); max-width:var(--shell); margin:0 auto; } /* запас снизу под тыкву */
/* порядок пунктов здесь реально что-то значит (последовательность
   вечера), поэтому номер оправдан — в отличие от большинства списков */
.track-list{ border-top:3px solid var(--stone-dim); }
.track-list li{
  display:flex; align-items:baseline; gap:clamp(16px,3.6vw,34px);
  padding:22px 0; border-bottom:3px solid var(--stone-dim);
  transition:background-color .2s ease;
}
.track-list li:hover{ background:rgba(91,44,130,.22); }
.track-list__n{
  flex:0 0 auto;
  font-family:var(--fm); font-weight:700; font-size:clamp(17px,2vw,22px);
  color:var(--slime); font-variant-numeric:tabular-nums;
}
.track-list p{ font-size:17px; font-weight:600; color:var(--bone); max-width:62ch; }

/* ── правила ──────────────────────────────────────────── */
.rules{ padding:clamp(70px,9vw,120px) var(--gut) clamp(90px,10vw,130px); max-width:var(--shell); margin:0 auto; }
.rules__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:3px; background:var(--stone-dim); border:var(--edge); border-color:var(--stone-dim); }
.rule{ background:var(--ink); padding:28px 24px; }
.rule__n{
  font-family:var(--fb); font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pumpkin); margin-bottom:14px;
}
.rule h3{ font-size:18px; font-weight:700; margin-bottom:10px; text-transform:uppercase; }
.rule p{ font-size:14.5px; color:#C4BFB3; }

.cta-band{
  margin-top:clamp(44px,6vw,72px); padding:clamp(34px,5vw,56px);
  background:var(--slime); color:var(--ink);
  border:var(--edge); box-shadow:var(--pop);
  position:relative; text-align:center;
}
.cta-band::after{
  content:''; position:absolute; inset:0;
  background-image:var(--halftone-dark); background-size:8px 8px; pointer-events:none;
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ font-size:clamp(26px,4.4vw,50px); font-weight:900; text-transform:uppercase; }
.cta-band p{ margin:14px auto 26px; max-width:48ch; font-weight:600; }
.cta-band .btn{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.cta-band .btn:hover{ background:var(--witch); }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.cta-band .btn--ghost-dark{ background:transparent; color:var(--ink); border-color:var(--ink); box-shadow:none; }
.cta-band .btn--ghost-dark:hover{ background:var(--ink); color:var(--bone); }

/* ── подвал на могилках ───────────────────────────────── */
.footer{ position:relative; padding-top:calc(10.9vw + 24px); background:var(--void); overflow:hidden; } /* 10.9vw = высота полосы мышей */
/* могилки — земля подвала. Пропорция совпадает с картинкой (2027x775),
   поэтому она ложится точно по ширине и никогда не обрезается. */
.footer__ground{
  position:absolute; left:0; right:0; bottom:0;
  aspect-ratio:2027/775;
  background:url('assets/graves.png') center bottom / 100% 100% no-repeat;
  pointer-events:none; z-index:0;
}
.footer__bats{
  position:absolute; left:0; right:0; top:0;
  aspect-ratio:1920/208;
  background:url('assets/bats.png') top center / 100% 100% no-repeat;
  opacity:.62;
  pointer-events:none; z-index:0;
}
.footer__inner{
  position:relative; z-index:1;
  max-width:var(--shell); margin:0 auto;
  /* нижний отступ держит текст выше надгробий при любой ширине */
  padding:0 var(--gut) max(41vw, 160px);
}
.footer__meta{
  display:grid; grid-template-columns:auto 1fr 1fr; gap:clamp(20px,3vw,40px); align-items:start;
}
.epitaph{
  font-family:var(--fa); font-size:clamp(26px,4.6vw,52px); line-height:1.12;
  color:var(--stone); margin-bottom:clamp(26px,4vw,44px);
  text-shadow:0 0 28px rgba(91,44,130,.75);
}
.footer__logo{ width:82px; }
.footer__col h3{ font-size:15px; font-weight:700; text-transform:uppercase; margin-bottom:8px; }
.footer__col p{ font-size:14px; color:#C4BFB3; }
.footer__col a{ color:var(--slime); text-decoration:underline; text-underline-offset:2px; }
.footer__col a:hover{ color:var(--pumpkin); }
.footer__legal{
  grid-column:1/-1; margin-top:18px; padding-top:18px;
  border-top:2px solid rgba(142,138,160,.4);
  font-family:var(--fb); font-size:11.5px; letter-spacing:.06em; color:var(--stone);
  max-width:min(620px, 72%);   /* не доходит до креста на картинке */
}

/* ── плавающая панель голоса ──────────────────────────── */
.pinned{
  position:fixed; z-index:45; left:50%; bottom:20px; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px;
  background:var(--ink); border:var(--edge); border-color:var(--pumpkin);
  box-shadow:var(--pop-sm); padding:12px 18px;
  max-width:calc(100vw - 32px);
  animation:rise .3s cubic-bezier(.22,.9,.3,1);
}
.pinned[hidden]{ display:none; }
@keyframes rise{ from{ transform:translate(-50%,24px); opacity:0; } to{ transform:translate(-50%,0); opacity:1; } }
.pinned p{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pinned b{ color:var(--pumpkin); }
.pinned__dot{ width:11px; height:11px; flex:0 0 auto; background:var(--slime); border:2px solid var(--ink); border-radius:50%; }
.pinned button{
  min-height:38px; padding:8px 14px; cursor:pointer;
  background:transparent; color:var(--slime);
  border:2px solid var(--slime);
  font-family:var(--fb); font-size:12px; font-weight:700; text-transform:uppercase;
  transition:background-color .18s ease, color .18s ease;
}
.pinned button:hover{ background:var(--slime); color:var(--ink); }

/* ── фото участника крупным планом ─────────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,5vw,60px);
  background:rgba(10,8,14,.92); backdrop-filter:blur(6px);
  animation:lightbox-in .2s ease;
}
.lightbox[hidden]{ display:none; }
@keyframes lightbox-in{ from{ opacity:0; } to{ opacity:1; } }
.lightbox__frame{ margin:0; max-width:min(640px,100%); text-align:center; }
.lightbox__img{
  display:block; max-width:100%; max-height:72vh; width:auto; height:auto;
  border:var(--edge); border-color:var(--slime); box-shadow:var(--pop);
  background:var(--witch);
}
.lightbox__cap{
  margin-top:16px; font-family:var(--fd); font-weight:800; font-size:18px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--bone);
}
.lightbox__close{
  position:absolute; top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px);
  width:46px; height:46px; display:grid; place-items:center; cursor:pointer;
  background:var(--ink); color:var(--bone);
  border:var(--edge); border-color:var(--bone); box-shadow:var(--pop-sm);
  transition:background-color .18s ease, color .18s ease;
}
.lightbox__close:hover{ background:var(--slime); color:var(--ink); }
.lightbox__close svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; }

/* ── адаптив ──────────────────────────────────────────── */
@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__cta{ margin-left:auto; }
  .footer__meta{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  html{ scroll-padding-top:88px; }
  .facts__row{ grid-template-columns:1fr; gap:0; }
  .fact{ padding-right:0; }
  .fact + .fact{ border-left:0; padding-left:0; border-top:3px solid var(--ink); margin-top:16px; padding-top:16px; }
  .stage__arrow{ width:48px; height:48px; }
  .stage__arrow svg{ width:22px; height:22px; }
  .hero__line--2{ margin-left:0; text-shadow:4px 4px 0 var(--witch); }
  .track-list li{ gap:14px; }
  .voteblock{ flex-direction:column; align-items:flex-start; }
  .voteblock .btn{ width:100%; }
  .pinned{ left:12px; right:12px; transform:none; max-width:none; }
  @keyframes rise{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
}

/* ── уважение к настройкам движения ───────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* =========================================================
   ЖИВОСТЬ: градиентные пятна, плавающие тыквы, появление
   ========================================================= */

/* секции, в которых лежат декоративные слои */
.lineup, .nominations, .timing, .rules{ position:relative; }
.facts{ overflow-x:clip; }


/* содержимое секций — поверх пятен */
.hero__inner, .section-head, .stage, .stage__controls, .voteblock,
.noms, .track-list, .rules__grid, .cta-band{ position:relative; z-index:1; }

/* ── плавающие тыквы в пустом пространстве ─────────────── */
.floater{
  position:absolute; z-index:0; pointer-events:none;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.65));
  animation:bob 7s ease-in-out infinite alternate;
  will-change:transform;
}
/* Тыквы расставлены по одной на экран сверху вниз и по очереди
   слева/справа — каждая в месте, где рядом нет текста. */

/* фонарь у заголовка, уравновешивает луну в другом углу */
.floater--hero  { width:clamp(86px,10vw,165px); top:56%; right:2%; animation-duration:8s; }

/* в ряду с номерами участников справа всегда остаётся пустое место */
.floater--lineup{ width:clamp(64px,7vw,112px); right:0; bottom:-14px; animation-duration:6.5s; animation-delay:-2s; }

/* нижний отступ секций — единственная по-настоящему свободная полоса */
.floater--noms  { width:clamp(72px,8vw,132px); top:auto; bottom:-10px; left:2%;  animation-duration:9s;   animation-delay:-4s; }
.floater--timing{ width:clamp(78px,9vw,150px); top:auto; bottom:6px;   left:3%;  animation-duration:7.5s; animation-delay:-1s; }

/* фонарь на кладбище: единственное место, где тыква стоит по смыслу */
.floater--grave { width:clamp(66px,7.5vw,124px); bottom:7%; left:54%; z-index:1; animation-duration:9.5s; animation-delay:-3s; }

@keyframes bob{
  from{ transform:translateY(0)     rotate(-5deg); }
  to  { transform:translateY(-26px) rotate(5deg); }
}

/* на узких экранах тыквы мельче и приглушены, чтобы не спорить с текстом */
@media (max-width:760px){
  .floater{ opacity:.5; }
  .floater--hero{ top:auto; bottom:4%; right:2%; }
  .floater--lineup{ position:static; display:block; margin:8px 0 0 auto; }
  .stage__controls{ padding-right:0; }
}

/* ── анимированная заливка заголовка ───────────────────── */
.hero__line--2{
  background:linear-gradient(100deg, var(--pumpkin) 0%, #F59B3C 28%, var(--slime) 52%, #F59B3C 76%, var(--pumpkin) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:sweep 9s linear infinite;
}
@keyframes sweep{ from{ background-position:0% 50%; } to{ background-position:280% 50%; } }

/* ── появление блоков при прокрутке ────────────────────── */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .62s cubic-bezier(.22,.9,.3,1), transform .62s cubic-bezier(.22,.9,.3,1);
}
[data-reveal].is-in{ opacity:1; transform:none; }
.track-list li[data-reveal].is-in{ transition-delay:var(--d,0s); }
.nom[data-reveal].is-in, .rule[data-reveal].is-in{ transition-delay:var(--d,0s); }

/* пульс точки в панели голоса */
.pinned__dot{ animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(127,209,59,.65); }
  70%    { box-shadow:0 0 0 9px rgba(127,209,59,0); }
}

/* ── движение по желанию пользователя ──────────────────── */
@media (prefers-reduced-motion:reduce){
  .floater, .hero__line--2, .pinned__dot{ animation:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* =========================================================
   НОВЫЕ ЭЛЕМЕНТЫ: луна, летящие мыши, паук, паутина, туман
   ========================================================= */

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ── луна с кратерами и ореолом ────────────────────────── */
.moon{
  position:absolute; z-index:1; pointer-events:none;
  top:clamp(96px,13vw,190px); right:clamp(18px,7vw,120px);
  width:clamp(74px,8.5vw,136px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FDF6DC 0%, #F3E2A8 46%, #D9BE72 100%);
  box-shadow:0 0 0 clamp(10px,1.6vw,22px) rgba(243,226,168,.10),
             0 0 70px 18px rgba(243,226,168,.30),
             0 0 150px 48px rgba(232,100,28,.18);
  animation:moon-breathe 6s ease-in-out infinite alternate;
}
.moon span{
  position:absolute; border-radius:50%;
  background:rgba(150,122,58,.34); box-shadow:inset 1px 1px 2px rgba(110,88,36,.5);
}
.moon span:nth-child(1){ width:22%; height:22%; top:22%; left:48%; }
.moon span:nth-child(2){ width:14%; height:14%; top:54%; left:28%; }
.moon span:nth-child(3){ width:10%; height:10%; top:68%; left:58%; }
@keyframes moon-breathe{
  from{ box-shadow:0 0 0 14px rgba(243,226,168,.08), 0 0 60px 14px rgba(243,226,168,.26), 0 0 130px 40px rgba(232,100,28,.14); }
  to  { box-shadow:0 0 0 20px rgba(243,226,168,.14), 0 0 92px 26px rgba(243,226,168,.40), 0 0 180px 60px rgba(232,100,28,.26); }
}

/* ── паук на паутинке ──────────────────────────────────── */
.spider{
  position:absolute; z-index:2; pointer-events:none;
  top:0; right:clamp(60px,16vw,230px);
  display:flex; flex-direction:column; align-items:center;
  color:#15101C;
  animation:drop 7s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.spider__thread{ width:2px; height:clamp(60px,9vw,130px); background:linear-gradient(to bottom, transparent, rgba(226,222,235,.75)); }
.spider__body{ width:clamp(38px,4.4vw,62px); filter:drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
@keyframes drop{
  from{ transform:translateY(-26px) rotate(-5deg); }
  to  { transform:translateY(74px)  rotate(5deg); }
}

/* ── паутина по углам ──────────────────────────────────── */
.web{
  position:absolute; z-index:1; pointer-events:none;
  width:clamp(86px,12vw,180px); color:rgba(214,208,228,.26);
  animation:web-sway 9s ease-in-out infinite alternate;
}
/* тянемся к краю окна, иначе угол паутины висит посреди фона
   и читается как рамка */
.web--tl{ top:0; left:calc(50% - 50vw); }
.web--tr{ top:0; right:calc(50% - 50vw); transform:scaleX(-1); }
@keyframes web-sway{ from{ opacity:.55; } to{ opacity:1; } }

/* ── туман ─────────────────────────────────────────────── */
.fog{ position:absolute; left:0; right:0; bottom:0; height:40%; overflow:hidden; pointer-events:none; z-index:1; }
.fog i{
  position:absolute; bottom:-30%; left:-60%;
  width:220%; height:100%;
  background:radial-gradient(ellipse at 50% 100%, rgba(173,150,205,.24), transparent 62%);
  animation:roll 26s linear infinite;
}
.fog i:nth-child(2){ animation-duration:38s; animation-delay:-14s; opacity:.6; }
.fog--footer{ height:58%; z-index:1; }
@keyframes roll{ from{ transform:translateX(0); } to{ transform:translateX(42%); } }

/* ── тыквы качаются заметнее ───────────────────────────── */
@keyframes bob{
  0%  { transform:translateY(6px)   rotate(-9deg) scale(1); }
  50% { transform:translateY(-30px) rotate(4deg)  scale(1.05); }
  100%{ transform:translateY(-6px)  rotate(9deg)  scale(1); }
}
.floater{ animation-timing-function:cubic-bezier(.45,0,.55,1); }

/* ── счётчик фактов и буквы заголовка ──────────────────── */
.fact b{ font-variant-numeric:tabular-nums; }
.hero__line--1 span{
  display:inline-block;
  animation:letter-in .62s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes letter-in{
  from{ opacity:0; transform:translateY(38px) rotate(-8deg); }
  to  { opacity:1; transform:none; }
}

@media (max-width:760px){
  .spider{ right:18px; }
}

@media (prefers-reduced-motion:reduce){
  .moon, .spider, .web, .fog i, .hero__line--1 span{ animation:none !important; }
}

/* =========================================================
   ВТОРОЙ СЛОЙ ЖИВОСТИ
   свеча в тыквах, слизь, призрак, вывеска, прокрутка
   ========================================================= */

/* ── индикатор прокрутки, стекающий слизью ─────────────── */
.progress{
  position:fixed; top:0; left:0; right:0; height:4px; z-index:41; /* выше липкой шапки */
  background:rgba(142,138,160,.18); pointer-events:none;
}
.progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--witch), var(--slime));
  box-shadow:0 0 12px rgba(127,209,59,.7);
  transition:width .12s linear;
}
.progress i::after{
  content:''; position:absolute; top:2px; right:0;
  width:9px; height:14px; border-radius:0 0 50% 50%/0 0 100% 100%;
  background:var(--slime); box-shadow:0 0 10px rgba(127,209,59,.8);
}

/* ── свеча внутри тыкв: неровное мерцание ──────────────── */
.floater{ animation-name:bob, candle; animation-duration:7s, 3.1s; }
@keyframes candle{
  0%   { filter:drop-shadow(0 16px 26px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(232,140,40,.55)); }
  12%  { filter:drop-shadow(0 16px 26px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(232,140,40,.95)); }
  21%  { filter:drop-shadow(0 16px 26px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(232,140,40,.5)); }
  38%  { filter:drop-shadow(0 16px 26px rgba(0,0,0,.6)) drop-shadow(0 0 32px rgba(255,170,60,1)); }
  47%  { filter:drop-shadow(0 16px 26px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(232,140,40,.6)); }
  63%  { filter:drop-shadow(0 16px 26px rgba(0,0,0,.6)) drop-shadow(0 0 28px rgba(255,170,60,.9)); }
  78%  { filter:drop-shadow(0 16px 26px rgba(0,0,0,.6)) drop-shadow(0 0 11px rgba(232,140,40,.5)); }
  100% { filter:drop-shadow(0 16px 26px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(232,140,40,.85)); }
}

/* ── капающая слизь по нижней кромке блоков ────────────── */
.drips{ position:absolute; left:0; right:0; top:100%; height:60px; z-index:2; pointer-events:none; } /* свисает ниже кромки блока */
.drips i{
  position:absolute; top:0; width:15px; height:var(--h,22px);
  background:currentColor; border-radius:0 0 50% 50%/0 0 100% 100%;
  animation:ooze 5.5s ease-in-out infinite; animation-delay:var(--d,0s);
  transform-origin:top center;
}
.drips i::after{
  content:''; position:absolute; left:50%; top:100%;
  width:11px; height:11px; margin-left:-5.5px; border-radius:50%;
  background:currentColor; opacity:0;
  animation:fall 5.5s ease-in infinite; animation-delay:var(--d,0s);
}
.drips--pumpkin{ color:var(--pumpkin); }
.drips--slime{ color:var(--slime); }
@keyframes ooze{
  0%,55%,100%{ transform:scaleY(1); }
  30%        { transform:scaleY(1.45); }
}
@keyframes fall{
  0%,52% { opacity:0; transform:translateY(-6px) scale(.6); }
  60%    { opacity:1; transform:translateY(0) scale(1); }
  92%    { opacity:1; transform:translateY(46px) scale(.75); }
  100%   { opacity:0; transform:translateY(60px) scale(.5); }
}

/* ── призрак, проплывающий через секцию ────────────────── */
.ghost{
  position:absolute; z-index:3; pointer-events:none;
  width:clamp(52px,6vw,92px); right:6%; top:30%;
  fill:rgba(236,232,246,.92);
  filter:drop-shadow(0 0 22px rgba(190,170,230,.55));
  animation:haunt 16s ease-in-out infinite;
}
.ghost__eye, .ghost__mouth{ fill:#2A1140; }
@keyframes haunt{
  0%   { opacity:0; transform:translate(30px, 30px) scale(.9); }
  14%  { opacity:.46; }
  50%  { transform:translate(-120px, -40px) scale(1.04); }
  86%  { opacity:.46; }
  100% { opacity:0; transform:translate(-250px, 18px) scale(.92); }
}

/* ── качающаяся вывеска ────────────────────────────────── */
.signboard{
  position:absolute; z-index:1; pointer-events:none;
  top:-8px; right:clamp(90px,18vw,260px);
  display:flex; flex-direction:column; align-items:center;
  transform-origin:top center;
  animation:swing 4.6s ease-in-out infinite alternate;
}
.signboard__chain{
  position:absolute; top:0; width:2px; height:clamp(20px,2.8vw,38px);
  background:repeating-linear-gradient(to bottom, var(--stone) 0 4px, transparent 4px 7px);
}
.signboard__chain:nth-child(1){ left:22%; }
.signboard__chain:nth-child(2){ right:22%; }
.signboard__plate{
  margin-top:clamp(20px,2.8vw,38px);
  padding:10px clamp(16px,2vw,26px);
  background:var(--ink); border:3px solid var(--stone-dim);
  box-shadow:5px 5px 0 rgba(0,0,0,.55);
  font-family:var(--fa); font-size:clamp(18px,2.4vw,30px);
  color:var(--pumpkin); letter-spacing:.04em;
}
@keyframes swing{
  from{ transform:rotate(-4.5deg); }
  to  { transform:rotate(4.5deg); }
}

/* ── блик, пробегающий по выбранной карточке ───────────── */
.card.is-active .card__photo::after{
  content:''; position:absolute; top:0; left:-60%;
  width:45%; height:100%; z-index:3;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.26), transparent);
  animation:shine 4.5s ease-in-out infinite;
}
@keyframes shine{
  0%,70%{ left:-60%; } 100%{ left:120%; }
}

@media (max-width:760px){
  .signboard{ right:14px; }
  .ghost{ right:4%; width:56px; }
}

@media (prefers-reduced-motion:reduce){
  .drips i, .drips i::after, .ghost, .signboard,
  .card.is-active .card__photo::after{ animation:none !important; }
  .floater{ animation:none !important; }
  .ghost{ opacity:.85; }
  .progress i{ transition:none; }
}