/* Шапка в стиле Digital (/works/): крупный логотип вверху, при прокрутке шапка компактнее,
   тёмная подложка с мягким краем вместо стекла, золотая полоса заряда = прогресс прокрутки,
   появление при загрузке. Подключается после styles.css; язык, бургер и меню не трогает. */

.header,
.header--scrolled:not(.header--menu-open) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.header { transition: background .5s var(--ease); }

/* Подложка: проявляется при прокрутке, нижний край растворяется */
.header::before {
  content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #050505 0%, #050505 62%, rgba(5, 5, 5, .82) 80%, transparent 100%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.header--scrolled:not(.header--menu-open) { background: transparent; }
.header--scrolled::before, .header.is-compact::before { opacity: 1; }
.header--menu-open::before { opacity: 0; }

/* Полоса заряда — сколько страницы пройдено */
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  box-shadow: 0 0 12px var(--gold-glow);
  transform-origin: left; transform: scaleX(var(--page-charge, 0));
  opacity: 0; transition: opacity .4s var(--ease);
}
.header.is-compact::after { opacity: 1; }
.header--menu-open::after { opacity: 0; }

/* Логотип: крупный вверху страницы, компактный при прокрутке */
.header__inner { transition: min-height .5s var(--ease); }
.header__logo img,
.header__logo-img { height: 64px; transition: height .5s var(--ease), filter .4s var(--ease); }
.header__logo:hover .header__logo-img { filter: drop-shadow(0 4px 16px rgba(212, 175, 55, .35)); }
.header.is-compact .header__inner { min-height: 64px; }
.header.is-compact .header__logo-img { height: 42px; }

@media (max-width: 768px) {
  .header__logo img, .header__logo-img { height: 48px; }
  .header.is-compact .header__logo-img { height: 36px; }
}

/* Появление при загрузке: логотип → пункты меню → кнопки */
@keyframes hdr-rise { from { opacity: 0; transform: translateY(-14px); } }
.header__logo { animation: hdr-rise .8s var(--ease) .05s backwards; }
.nav__list > li { animation: hdr-rise .7s var(--ease) backwards; }
.nav__list > li:nth-child(1) { animation-delay: .12s; }
.nav__list > li:nth-child(2) { animation-delay: .17s; }
.nav__list > li:nth-child(3) { animation-delay: .22s; }
.nav__list > li:nth-child(4) { animation-delay: .27s; }
.nav__list > li:nth-child(5) { animation-delay: .32s; }
.nav__list > li:nth-child(6) { animation-delay: .37s; }
.nav__list > li:nth-child(7) { animation-delay: .42s; }
.header__actions { animation: hdr-rise .8s var(--ease) .3s backwards; }

/* В открытом мобильном меню пункты не должны «прыгать» повторно */
.nav.open .nav__list > li { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .header__logo, .nav__list > li, .header__actions { animation: none; }
  .header__logo-img, .header__inner, .header::before, .header::after { transition: none; }
}