/* ==========================================================================
   БАЗА: токены, сброс, типографика, сетка, кнопки
   Направление: холодный почти-белый холст + насыщенный красный (стихия Огня)
   Заголовки — журнальные, на всю ширину экрана, Unbounded
   ========================================================================== */

:root{
  /* --- Холст --- */
  --bg:        #F5F7FA;
  --bg-warm:   #FAFAF8;
  --paper:     #FFFFFF;
  --ink:       #0E1116;
  --ink-2:     #2C3340;
  --muted:     #6B7480;
  --muted-2:   #99A1AC;
  --line:      rgba(14,17,22,.10);
  --line-2:    rgba(14,17,22,.055);

  /* --- Огонь и Коза --- */
  --red:       #D91F32;
  --red-2:     #F0353F;
  --red-deep:  #8E0E1C;
  --ember:     #FF5A2B;
  --ember-2:   #FF8A3D;
  --gold:      #C8A24A;
  --copper:    #B06A3B;
  --olive:     #8A8F5B;
  --sand:      #D9C9A8;

  /* --- Служебные --- */
  --ok:        #1F8A5B;
  --warn:      #C9860A;

  /* --- Типографика --- */
  --display: 'Unbounded', system-ui, sans-serif;
  --text:    'Golos Text', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* --- Сетка --- */
  --gut: clamp(16px, 4vw, 56px);
  --wrap: 1480px;
  --r-s: 6px;
  --r-m: 12px;
  --r-l: 20px;

  /* --- Тени --- */
  --sh-1: 0 1px 2px rgba(14,17,22,.04), 0 2px 8px rgba(14,17,22,.04);
  --sh-2: 0 4px 12px rgba(14,17,22,.06), 0 12px 32px rgba(14,17,22,.07);
  --sh-3: 0 18px 60px rgba(14,17,22,.13);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--text);
  font-size:17px;
  line-height:1.62;
  font-weight:450;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }
p{ text-wrap:pretty; margin:0 0 1em; }
h1,h2,h3,h4{ text-wrap:balance; margin:0; font-weight:600; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--red); color:#fff; }

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

/* --------------------------------------------------------------------------
   Сетка
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ width:100%; max-width:940px; margin-inline:auto; padding-inline:var(--gut); }

/* Журнальный полноширинный заголовок блока */
.jh{ position:relative; padding-block:clamp(36px,5vw,72px) clamp(20px,2.6vw,34px); }
.jh__rule{ height:2px; background:var(--ink); }
.jh__meta{
  display:flex; flex-wrap:wrap; gap:6px 20px; align-items:baseline;
  padding-top:14px; font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.jh__num{ color:var(--red); font-weight:600; }
.jh__title{
  font-family:var(--display);
  font-size:clamp(30px,6.2vw,86px);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:600;
  margin:.16em 0 .1em;
  text-transform:none;
}
.jh__title em{ font-style:normal; color:var(--red); }
.jh__sub{ max-width:74ch; color:var(--ink-2); font-size:clamp(15px,1.35vw,19px); }

/* Лейбл-надзаголовок */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--red); }

h3.sub{
  font-family:var(--display); font-weight:500; font-size:clamp(19px,2.1vw,27px);
  letter-spacing:-.02em; line-height:1.15; margin:0 0 .6em;
}
h4.sub-s{ font-size:15px; font-weight:700; letter-spacing:-.01em; margin:0 0 .5em; }

/* --------------------------------------------------------------------------
   Блоки и прокрутка-анимация появления
   -------------------------------------------------------------------------- */
section[id]{ scroll-margin-top:104px; position:relative; }

/* Защита от горизонтального выхода контента за экран.
   max-width:min(...) сохраняет ограничение 1480px И не даёт вылезти за экран. */
.wrap,.wrap-narrow{ max-width:min(var(--wrap), 100%); }
.split > *{ min-width:0; }
.grid-2 > *,.grid-3 > *,.grid-4 > *{ min-width:0; }
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl{ min-width:520px; }
@media (max-width:760px){ .tbl{ min-width:440px; } }
.band{ padding-block:clamp(48px,7vw,110px); position:relative; }
.band--paper{ background:var(--paper); }
.band--tight{ padding-block:clamp(34px,4.4vw,70px); }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.07s; } .reveal.d2{ transition-delay:.14s; }
.reveal.d3{ transition-delay:.21s; } .reveal.d4{ transition-delay:.28s; }
.reveal.d5{ transition-delay:.35s; } .reveal.d6{ transition-delay:.42s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:0 24px; border-radius:100px;
  font-family:var(--text); font-size:15px; font-weight:600; letter-spacing:-.01em;
  background:var(--ink); color:#fff; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  white-space:nowrap;
}
.btn::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn:hover::after{ transform:translateX(120%); }
.btn--red{ background:var(--red); }
.btn--red:hover{ background:var(--red-2); }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--ink); background:#fff; }
.btn--sm{ min-height:40px; padding:0 16px; font-size:13.5px; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; }

.btns{ display:flex; flex-wrap:wrap; gap:10px; }

/* --------------------------------------------------------------------------
   ЛОГОТИП
   -------------------------------------------------------------------------- */
.logo{ display:block; flex:none; }
.logo__g{ animation:logoSpin 26s linear infinite; transform-origin:50% 50%; }
@keyframes logoSpin{ to{ transform:rotate(360deg); } }
.logo__flame{ animation:logoFlame 3.4s ease-in-out infinite; transform-origin:50% 62%; }
@keyframes logoFlame{ 0%,100%{ transform:scale(1); opacity:.95; } 50%{ transform:scale(1.09) translateY(-1px); opacity:1; } }
.logo__horn{ stroke-dasharray:3 2.4; animation:logoDash 7s linear infinite; }
@keyframes logoDash{ to{ stroke-dashoffset:-54; } }
@media (prefers-reduced-motion: reduce){ .logo__g,.logo__flame,.logo__horn{ animation:none; } }

/* --------------------------------------------------------------------------
   НОВОГОДНИЕ ФОНОВЫЕ УКРАШЕНИЯ
   Крупные полупрозрачные SVG: шапочки, носки, подарки, шары, снежинки.
   -------------------------------------------------------------------------- */
.bgdeco{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bgdeco__i{ position:absolute; color:var(--red); opacity:.055; }
.bgdeco__i svg{ width:100%; height:100%; display:block; }
.bgdeco__i--gold{ color:var(--gold); opacity:.075; }
.bgdeco__i--olive{ color:var(--olive); opacity:.06; }
.bgdeco__i--drift{ animation:decoDrift 17s ease-in-out infinite; }
.bgdeco__i--drift2{ animation:decoDrift 23s ease-in-out infinite reverse; }
.bgdeco__i--sway{ animation:decoSway 11s ease-in-out infinite; transform-origin:50% 0; }
@keyframes decoDrift{ 0%,100%{ transform:translate3d(0,0,0) rotate(0deg); } 50%{ transform:translate3d(0,-16px,0) rotate(4deg); } }
@keyframes decoSway{ 0%,100%{ transform:rotate(-3.5deg); } 50%{ transform:rotate(3.5deg); } }
@media (prefers-reduced-motion: reduce){ .bgdeco__i--drift,.bgdeco__i--drift2,.bgdeco__i--sway{ animation:none; } }
@media (max-width:760px){ .bgdeco__i{ opacity:.04; } }

/* --------------------------------------------------------------------------
   СНЕГ
   -------------------------------------------------------------------------- */
.snow{ position:fixed; inset:0; z-index:3; pointer-events:none; width:100%; height:100%; }
@media (prefers-reduced-motion: reduce){ .snow{ display:none; } }

/* --------------------------------------------------------------------------
   Служебные утилиты
   -------------------------------------------------------------------------- */
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.tnum{ font-variant-numeric:tabular-nums; }
.muted{ color:var(--muted); }
.small{ font-size:13.5px; }
.hr{ height:1px; background:var(--line); border:0; margin:0; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* --------------------------------------------------------------------------
   Мигающие элементы (3 характера)
   -------------------------------------------------------------------------- */

/* 1. Деликатная пульсация точек-индикаторов */
@keyframes pulseDot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.35; transform:scale(.72); }
}
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  animation:pulseDot 1.9s var(--ease) infinite; flex:none;
}
.dot--live{ box-shadow:0 0 0 0 rgba(217,31,50,.5); animation:liveRing 2s ease-out infinite; }
@keyframes liveRing{
  0%  { box-shadow:0 0 0 0 rgba(217,31,50,.45); }
  70% { box-shadow:0 0 0 9px rgba(217,31,50,0); }
  100%{ box-shadow:0 0 0 0 rgba(217,31,50,0); }
}
.live{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red);
}

/* 2. Неоновое свечение цифр индекса */
@keyframes neonFlicker{
  0%,100%{ text-shadow:0 0 0 rgba(217,31,50,0); }
  42%    { text-shadow:0 0 14px rgba(217,31,50,.55), 0 0 30px rgba(255,90,43,.28); }
  46%    { text-shadow:0 0 0 rgba(217,31,50,0); }
  52%    { text-shadow:0 0 18px rgba(217,31,50,.7), 0 0 40px rgba(255,90,43,.35); }
}
.neon{ animation:neonFlicker 3.4s steps(1,end) infinite; }

/* 3. Ретро-табло: мигающие сегментные цифры */
@keyframes segBlink{
  0%,44%,56%,100%{ opacity:1; }
  50%{ opacity:.18; }
}
.tablo{
  font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:.04em; animation:segBlink 2.6s steps(1,end) infinite;
}
.tablo--slow{ animation-duration:3.8s; }

/* Пульсирующая метка «Акция» */
@keyframes tagPulse{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.055); }
}
.tag-pulse{ animation:tagPulse 2.4s var(--ease) infinite; }

/* Внимание к строке */
@keyframes rowGlow{
  0%,100%{ background:transparent; }
  50%    { background:rgba(217,31,50,.055); }
}
.row-glow{ animation:rowGlow 3.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .dot,.dot--live,.neon,.tablo,.tag-pulse,.row-glow{ animation:none !important; }
}