/* Слой современных анимаций PolitWorld: живёт поверх базовых стилей и ничего в них не ломает.
   Всё, что двигается, отключается при prefers-reduced-motion. */

/* ---------- плавный переход между страницами сайта (Chrome/Edge; остальные просто открывают страницу) ----------
   шапка не перерисовывается, а остаётся на месте; капля меню перетекает с пункта старой страницы на пункт новой */
@view-transition { navigation: auto; }
header { view-transition-name: pw-header; }
.links .glide { view-transition-name: pw-glide; }
::view-transition-old(root) { animation: pwPageOut .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: pwPageIn .38s cubic-bezier(.2, .9, .25, 1) both; }
::view-transition-group(pw-glide) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .9, .25, 1); }
::view-transition-group(pw-header) { animation-duration: .35s; }
@keyframes pwPageOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes pwPageIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- шапка одинаковая на всех страницах, чтобы при переходе ничего не дёргалось ---------- */
html { scrollbar-gutter: stable; }                      /* место под полосу прокрутки есть всегда — шапка не сдвигается вбок */
header .nav > .btn { height: 44px; padding: 0 20px; box-sizing: border-box; }   /* «Профиль» одного размера везде */

/* ---------- шапка ---------- */
#hdr { transition: padding .35s var(--ease), backdrop-filter .35s var(--ease), background .35s var(--ease); }
#hdr.sm { backdrop-filter: saturate(1.3) blur(14px); }

/* подсветка пунктов меню — одна «капля», которая перетекает от кнопки к кнопке */
.links { position: relative; }
.links a { position: relative; z-index: 1; transition: color .3s cubic-bezier(.2, .8, .2, 1); }
.links a:hover, header:not(.solid) .links a:hover { background: transparent !important; }  /* фон рисует капля, а не сама ссылка */
.links .glide {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; z-index: 0; opacity: 0;
  border-radius: 999px; pointer-events: none;
  /* светлый фон шапки: тёплая золотая подложка */
  background: linear-gradient(180deg, rgba(255, 227, 154, .55), rgba(242, 193, 78, .38));
  box-shadow: 0 4px 14px rgba(212, 164, 55, .22), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .45s cubic-bezier(.2, .9, .25, 1), width .45s cubic-bezier(.2, .9, .25, 1),
              opacity .3s ease, background .45s ease, box-shadow .45s ease;
}
.links .glide.jump { transition: opacity .3s ease; }
.links .glide.noanim { transition: none !important; }
/* текущий раздел в покое — мягкая подсветка; яркая только под курсором */
.links .glide.rest {
  background: rgba(242, 193, 78, .16);
  box-shadow: inset 0 0 0 1px rgba(212, 164, 55, .28);
}
header.hdark .links .glide.rest {
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  backdrop-filter: none;
}   /* первое появление — сразу под пунктом, без выезда слева */
/* тёмная шапка (класс hdark ставит modern.js по цвету логотипа): стекло, а не бурая заливка */
header.hdark .links .glide {
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .09));
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
}
/* активный пункт и пункт под курсором выглядят одинаково на всех страницах: их отмечает капля, заливок нет */
header .links a.on { background: transparent !important; box-shadow: none !important; }
header.hdark .links a.hot, header.hdark .links a.on { color: var(--gold2); }
header:not(.hdark) .links a.hot, header:not(.hdark) .links a.on { color: var(--navy); }
/* «Профиль» на своей странице */
header .nav > .btn.on { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(242, 193, 78, .25); }

/* ---------- мобильное меню ---------- */
.burger { display: none; width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--line, rgba(212, 164, 55, .3));
  background: #fff; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--navy);
  transition: background .25s ease, border-color .25s ease; -webkit-tap-highlight-color: transparent; }
header.hdark .burger, .mnav-open .burger { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .34); color: #fff; }
.burger i, .burger i::before, .burger i::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  position: relative; transition: transform .35s cubic-bezier(.2, .9, .25, 1), opacity .2s ease; }
.burger i::before, .burger i::after { content: ''; position: absolute; left: 0; }
.burger i::before { top: -6px; } .burger i::after { top: 6px; }
.mnav-open .burger i { background: transparent; }
.mnav-open .burger i::before { transform: translateY(6px) rotate(45deg); }
.mnav-open .burger i::after { transform: translateY(-6px) rotate(-45deg); }
.mnav { position: fixed; left: 12px; right: 12px; top: 84px; z-index: 110; padding: 10px; border-radius: 20px;
  background: rgba(27, 36, 51, .96); backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(4, 8, 20, .45);
  border: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 4px;
  opacity: 0; transform: translateY(-10px) scale(.98); pointer-events: none;
  transition: opacity .28s ease, transform .35s cubic-bezier(.2, .9, .25, 1); }
.mnav-open .mnav { opacity: 1; transform: none; pointer-events: auto; }
.mnav a { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-radius: 14px;
  color: #e8ecf4; font-weight: 800; font-size: 16px; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, color .2s ease; }
.mnav a::after { content: '›'; color: rgba(255, 255, 255, .35); font-size: 20px; }
.mnav a:active, .mnav a:hover { background: rgba(255, 255, 255, .08); color: var(--gold2); }
.mnav a.on { color: var(--gold2); background: rgba(242, 193, 78, .12); }
.mnav a.prof { margin-top: 6px; justify-content: center; background: linear-gradient(180deg, var(--gold2), var(--gold)); color: var(--navy); }
.mnav a.prof::after { content: none; }
@media (max-width: 900px) {
  .nav { display: flex !important; justify-content: space-between; gap: 10px; }
  .links { display: none !important; }
  .burger { display: inline-flex; margin-left: auto; }
  header .brand { min-width: 0; }
  header .brand span { white-space: nowrap; }
}
@media (max-width: 560px) {
  .nav > .btn { display: none; }        /* «Профиль» — внутри меню */
  header .brand { font-size: 18px; }
  header .brand img { height: 36px; width: 36px; }
}

/* ---------- карточки: лёгкий наклон под курсор, без светового пятна ---------- */
.rank, .pcard { transform-style: preserve-3d; will-change: transform; }
.rank.tilt, .pcard.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
  transition: transform .18s var(--ease);
}
.rank.tilt { box-shadow: 0 30px 60px rgba(4, 8, 20, .2); }

/* ---------- клики: волна от точки нажатия ---------- */
.btn, .ip, .cartBtn { position: relative; overflow: hidden; }
.rip {
  position: absolute; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
  animation: rip .55s var(--ease) forwards;
}
.btn.gold .rip { background: radial-gradient(circle, rgba(27, 36, 51, .28), rgba(27, 36, 51, 0) 70%); }
@keyframes rip { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* ---------- корзина: пружинка и летящий значок ---------- */
.cartBtn.bump { animation: bump .5s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 65% { transform: scale(.94); } 100% { transform: scale(1); } }
.fly {
  position: fixed; z-index: 140; width: 26px; height: 26px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(140deg, var(--gold2), var(--gold));
  box-shadow: 0 8px 22px rgba(242, 193, 78, .55);
  transition: transform .62s cubic-bezier(.35, .8, .35, 1), opacity .62s ease;
}

/* ---------- цифры счётчиков не прыгают при пересчёте ---------- */
.counter b, .onbar b, #cartGrand, #paySum { font-variant-numeric: tabular-nums; }

/* ---------- всплывающее окно: мягкое появление ---------- */
.modal { backdrop-filter: blur(0); transition: backdrop-filter .3s var(--ease); }
.modal.on { backdrop-filter: blur(6px); }
.modal .box { animation: boxIn .38s var(--ease) both; }
@keyframes boxIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- кнопка «наверх»: вырастает, а не появляется рывком ---------- */
.toTop { opacity: 0; transform: translateY(10px) scale(.9); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.toTop.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rank.tilt, .pcard.tilt { transform: none; }
  .links .glide, .mnav, .burger i, .burger i::before, .burger i::after { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .rip, .fly { display: none; }
}