/* Общая шапка SOWA: логотип, бургер, меню-оверлей. Подключают главная и внутренние
   страницы (вынесено из styles.css 25.09.2026). */
:root {
  --black: #000;
  --white: #fff;
  --red: #ee2625;
}

/* Логотип владельца в левом верхнем углу: поверх слайдов, вне прокрутки Lenis */
.logo {
  position: fixed;
  top: var(--ui-inset);
  left: var(--ui-inset);
  z-index: 12;
  display: block;
  width: clamp(84px, 6.4vw, 124px);  /* уменьшен 21.09 по указанию владельца */
  color: var(--white);
  filter: drop-shadow(0 1px 10px rgb(0 0 0 / 0.35));
  cursor: pointer;

  & svg {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ---- Шапка: бургер справа, меню-оверлей ---------------------------------- */
:root {
  --ui-inset: clamp(16px, 2.2vw, 32px);
  --e-display: cubic-bezier(0.16, 1, 0.3, 1);
  --e-ui: cubic-bezier(0.4, 0, 0.2, 1);
}

.burger {
  position: fixed;
  top: calc(var(--ui-inset) - 4px);
  right: calc(var(--ui-inset) - 4px);
  z-index: 13;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 1px 10px rgb(0 0 0 / 0.35));

  & .burger__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  & .burger__ring {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    /* pathLength=100: 86 нарисовано, 14 — разрыв; разрыв вращается из JS */
    stroke-dasharray: 86 14;
    transform-origin: 24px 24px;
    transition: stroke-dasharray 0.5s var(--e-ui);
  }

  & .burger__line {
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    /* крест складывает CSS: точка вращения — центр кольца в единицах viewBox */
    transform-box: view-box;
    transform-origin: 24px 24px;
    transition: transform 0.55s cubic-bezier(0.66, 0, 0.34, 1);
  }

  &[aria-expanded="true"] .burger__line--a {
    transform: rotate(45deg) translateY(4px);
  }

  &[aria-expanded="true"] .burger__line--b {
    transform: rotate(-45deg) translateY(-4px);
  }

  &[aria-expanded="true"] .burger__ring {
    stroke-dasharray: 100 0;
  }

  &:focus-visible {
    outline: 1.5px solid var(--red);
    outline-offset: 4px;
    border-radius: 50%;
  }
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 11;
  display: grid;
  align-content: center;
  padding: 0 var(--ui-inset) 0 clamp(24px, 8vw, 160px);
  background: rgb(8 8 9 / 0.9);
  visibility: hidden;
  clip-path: circle(0px at 100% 0%);
}

.menu-overlay[aria-hidden="false"] {
  visibility: visible;
}

/* ---- Tsula (Codrops Menu Hover Effects, MIT) — в наших цветах --------------- */
.menu {
  position: relative;
  z-index: 10;
  font-family: 'Martian Mono', monospace;
  font-size: clamp(20px, 2.6vw, 44px);
}

.menu__mask {
  /* маска режет только по вертикали: бока открыты, чтобы мигающий курсор слева не срезался */
  clip-path: inset(-0.35em -100vw 0 -100vw);
  /* снизу запас под хвосты рукописных «у», «д» (владелец 25.09.2026) */
  padding-bottom: 0.9em;
  margin-bottom: -0.9em;
}

.menu__item {
  line-height: 1;
  position: relative;
  display: block;
  margin: 0.9em 0;
  padding-left: 0.25em;
  outline: none;
  text-decoration: none;
  color: var(--white);
}

.menu__item-name,
.menu__item-label {
  position: relative;
  display: inline-block;
}

.menu__item-name {
  font-size: 1.25em;
  text-transform: uppercase;
  color: var(--white);
}

.menu__item:hover .menu__item-name,
/* глобальное a:focus-visible из демки рисует красную рамку — у пункта фокус показывает сам эффект */
.menu .menu__item:focus-visible {
  outline: none;
}

.menu__item:focus-visible .menu__item-name {
  color: var(--black);
  background: var(--red);
}

.menu__item::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 0.9em;
  height: 1em;
  opacity: 0;
  background: rgb(238 38 37 / 0.3);
  animation: none;
}

.menu__item:hover::before,
.menu__item:focus-visible::before {
  animation: blinkblink 0.4s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
}

.menu__item-label {
  margin: 0 0 0 0.5em;
  color: rgb(255 255 255 / 0.55);
  white-space: pre;
}

@keyframes blinkblink {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 599.98px) {
  .menu__item-label {
    display: block;
    margin: 0.35em 0 0;
    font-size: 0.7em;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .burger__ring,
  .burger__line { transition: none; }
  .menu__item:hover::before,
  .menu__item:focus-visible::before { animation: none; opacity: 1; }
}


/* Текущая страница в меню — красным (25.09.2026) */
.menu__item[aria-current="page"] .menu__item-name { color: var(--red); }

/* ==== Логотип по центру, четыре начертания по кругу (25.09.2026) =============
   Стопка из четырёх SVG в одной ячейке сетки; видимо одно. Каждые 4.5 с текущее
   переворачивается через горизонтальную ось, на обороте — следующее. Первое — случайное. */
.logo {
  left: 50%;
  translate: -50% 0;
  width: auto;
  perspective: 700px;
  --lw: clamp(96px, 7vw, 140px);
}

.logo__stack {
  display: grid;
  place-items: center;
  width: var(--lw);
  height: calc(var(--lw) * 0.36);
}

.logo__stack .logo__mark {
  grid-area: 1 / 1;
  width: calc(var(--lw) * var(--k, 1));
  height: auto;
  max-height: 100%;
  overflow: visible;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  opacity: 0;
  transform: rotateX(90deg);
}

.logo__stack .logo__mark.is-on { opacity: 1; transform: none; }

@media (max-width: 599.98px) {
  .logo { --lw: 92px; }
}
.logo { --lw: clamp(108px, 8vw, 156px); }
.logo__stack { height: calc(var(--lw) * 0.4); }
@media (max-width: 599.98px) { .logo { --lw: 100px; } }

/* Главная: логотип вдвое крупнее; при открытом меню — обычный размер (владелец 25.09.2026) */
.logo--hero .logo__stack {
  scale: 2;
  transform-origin: 50% 0;
  transition: scale 0.8s var(--e-display, cubic-bezier(0.16, 1, 0.3, 1));
}
body:has(.burger[aria-expanded="true"]) .logo--hero .logo__stack { scale: 1; }
/* высота стопки выросла под кистевой логотип */
.logo__stack { height: calc(var(--lw) * 0.45); }

/* Меню: текст вдвое меньше (владелец 25.09.2026) */
.menu { font-size: clamp(14px, 1.3vw, 22px); }
@media (max-width: 599.98px) {
  .menu { font-size: 18px; }
  .menu__item-label { font-size: 0.8em; }
}

/* ==== Прелоадер (25.09.2026) ===============================================
   Есть в HTML сразу (без JS), закрывает сборку страницы: шрифты, скрипты с CDN,
   измерения. Снимает chrome.js; страховка — сам уходит через 5 с. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  background: #000;
  color: #fff;
  clip-path: inset(0 0 0 0);
  animation: preloader-safety 0.01s linear 5s forwards;
}
.preloader__mark { display: block; width: clamp(150px, 14vw, 230px); }
.preloader__svg { display: block; width: 100%; height: auto; fill: currentColor; }
.preloader__bar {
  display: block;
  width: clamp(150px, 14vw, 230px);
  height: 2px;
  background: rgb(255 255 255 / 0.15);
  overflow: hidden;
  position: relative;
}
.preloader__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #ee2625;
  transform-origin: 0 50%;
  animation: preloader-bar 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.preloader.is-done {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.85s cubic-bezier(0.77, 0, 0.18, 1);
  pointer-events: none;
}
.preloader.is-done .preloader__mark,
.preloader.is-done .preloader__bar { opacity: 0; translate: 0 -30px; transition: opacity 0.4s ease, translate 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes preloader-bar {
  0% { transform: scaleX(0); transform-origin: 0 50%; }
  50% { transform: scaleX(1); transform-origin: 0 50%; }
  50.01% { transform-origin: 100% 50%; }
  100% { transform: scaleX(0); transform-origin: 100% 50%; }
}
@keyframes preloader-safety { to { visibility: hidden; opacity: 0; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .preloader__bar::after { animation: none; transform: scaleX(1); }
  .preloader.is-done { transition: opacity 0.2s; clip-path: none; opacity: 0; }
}

/* ==== Прелоадер v2 (25.09.2026): «О» с совой, белая → снизу вверх красная ====
   Никаких полос и шторок. «О» видна только если ждать дольше 280 мс; уход — opacity. */
.preloader { gap: 0; clip-path: none; transition: none; }
.preloader.is-done { opacity: 0; clip-path: none; pointer-events: none; }
.preloader__owl {
  position: relative;
  display: block;
  width: clamp(64px, 6vw, 96px);
  aspect-ratio: 1;
  opacity: 0;
  animation: preloader-owl-in 0.35s ease 0.28s forwards;
}
.preloader__base, .preloader__fill { position: absolute; inset: 0; display: block; }
.preloader__owl svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.preloader__base { color: #fff; }
.preloader__fill {
  color: #ee2625;
  --p: 0;
  clip-path: inset(calc((1 - var(--p)) * 100%) 0 0 0);
}
@keyframes preloader-owl-in { to { opacity: 1; } }

/* ==== Меню на компьютере (25.09.2026): название — основным шрифтом, подпись —
   рукописным, появляется только при наведении. Телефон — без изменений. */
@media (min-width: 768px) {
  .menu__item { display: flex; align-items: baseline; margin: 0.45em 0; }
  .menu__item-name {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 500;
    font-size: 2.3em;
    line-height: 1;
    letter-spacing: 0.02em;
  }
  .menu__item-label {
    font-family: 'Comforter', cursive;
    font-size: 2.1em;
    line-height: 1;
    margin-left: 0.35em;
    color: #fff;
    opacity: 0;
    translate: -8px 0;
    transition: opacity 0.25s ease, translate 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .menu__item:hover .menu__item-label,
  .menu__item:focus-visible .menu__item-label { opacity: 1; translate: 0 0; }
  .menu__item::before { height: 2.3em; width: 0.35em; }
}
.menu__item, .menu__item:hover, .menu__item:focus-visible { text-decoration: none; }

/* подпись в меню на компьютере видна всегда как контейнер — буквы гасит/печатает chrome.js */
@media (min-width: 768px) {
  .menu__item-label { opacity: 1; translate: 0 0; transition: none; }
  .menu__item-label span { display: inline-block; white-space: pre; }
}

/* Меню на телефоне — тоже нашими шрифтами (владелец 25.09.2026): название Roboto Flex,
   подпись рукописным Comforter под ним, видна всегда */
@media (max-width: 767.98px) {
  .menu { font-size: 18px; }
  .menu__item { margin: 0.7em 0; }
  .menu__item-name { font-family: 'Roboto Flex', sans-serif; font-weight: 500; font-size: 2.1em; letter-spacing: 0.02em; line-height: 1; }
  .menu__item-label { display: block; font-family: 'Comforter', cursive; font-size: 1.6em; line-height: 1; margin: 0.1em 0 0; color: rgb(255 255 255 / 0.8); white-space: nowrap; }
}

/* Блок меню ближе к центру, но не по центру (владелец 25.09.2026) — на компьютере */
@media (min-width: 768px) {
  .menu-overlay { padding-left: clamp(24px, 24vw, 520px); }
}

/* Подпись разработчика: «Зроблено у» + знак Sponge, правый нижний угол всех страниц (25.09.2026).
   Наведение — только яркость, без красного. */
.credit {
  --credit-nudge: 1px;
  position: fixed;
  right: var(--ui-inset);
  bottom: calc(var(--ui-inset) - 4px);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.credit, .credit:hover, .credit:focus-visible, .credit * { text-decoration: none; }
.credit:hover, .credit:focus-visible { opacity: 1; outline: none; }
.credit__text {
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  display: block;
  translate: 0 var(--credit-nudge, 0px);
}
.credit__logo { display: block; width: 76px; height: auto; }
body:has(.burger[aria-expanded="true"]) .credit { opacity: 0; pointer-events: none; }
@media (max-width: 767.98px) {
  .credit { gap: 7px; }
  .credit__text { font-size: 8px; }
  .credit__logo { width: 58px; }
}

/* Телефон: подпись только в раскрытом меню, внизу по центру (владелец 25.09.2026) */
@media (max-width: 767.98px) {
  .credit { opacity: 0; pointer-events: none; visibility: hidden; }
  body:has(.burger[aria-expanded="true"]) .credit {
    visibility: visible;
    opacity: 0.7;
    pointer-events: auto;
    z-index: 12;
    right: auto;
    left: 50%;
    translate: -50% 0;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transition: opacity 0.4s ease 0.5s;
  }
}

/* ---- Кружок языка слева вверху — зеркало бургера (владелец 25.09.2026) --------
   Кольцо с тем же разрывом, разрыв медленно плывёт (как у бургера в покое, 18°/с);
   на украинской версии — EN, на английской — UA. Наведение — кольцо смыкается. */
.lang {
  position: fixed;
  top: calc(var(--ui-inset) - 4px);
  left: calc(var(--ui-inset) - 4px);
  z-index: 13;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--white);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 1px 10px rgb(0 0 0 / 0.35));
}
.lang, .lang:hover, .lang:focus-visible { text-decoration: none; }
.lang__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lang__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 86 14;
  transform-origin: 24px 24px;
  transition: stroke-dasharray 0.5s var(--e-ui);
  animation: lang-spin 20s linear infinite reverse;
}
.lang:hover .lang__ring,
.lang:focus-visible .lang__ring { stroke-dasharray: 100 0; }
.lang:focus-visible { outline: 1.5px solid var(--red); outline-offset: 4px; border-radius: 50%; }
.lang__code {
  position: relative;
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  translate: 0.03em 0.5px;
}
@keyframes lang-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lang__ring { animation: none; } }