/* ---------- заставка ---------- */
.transition {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  pointer-events: none;
  visibility: hidden;
}
.js .transition {
  visibility: visible;
  background: var(--accent); /* до запуска шейдера экран просто залит акцентом */
}
.transition.is-gl { background: none; }
.transition__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- навбар (размеры roiheads) ---------- */
.navbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  pointer-events: none;
}
.navbar > * { pointer-events: auto; }

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 3rem;
}
.navbar__brand img {
  width: auto;
  height: 2.5rem;
}
.navbar__brand span {
  font-family: var(--font-display);
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.navbar__buttons {
  display: flex;
  margin-left: auto;
  gap: 0.5rem;
}
/* язык — маленькая каменная плита с рваным краем и вырезанными буквами, как кнопка «Вступить в команду» */
.navbar__lang {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  background: url("../assets/offers/stone.webp") 40% 50% / 9rem auto;
  clip-path: polygon(4% 10%, 30% 0, 62% 6%, 96% 2%, 100% 38%, 95% 70%, 99% 96%, 66% 100%, 34% 94%, 2% 99%, 5% 62%, 0 30%);
  font-family: var(--font-display-ru);
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
  color: #1a191c;
  text-shadow: 0 0.06rem 0 rgb(255 255 255 / 0.35), 0 -0.04rem 0 rgb(0 0 0 / 0.6);
  transition: filter 0.3s, translate 0.18s ease-out;
}
@media (hover: hover) {
  .navbar__lang:hover { filter: brightness(1.25); }
}
.navbar__lang:active { translate: 0 0.15rem; }

@media (max-width: 767px) {
  .navbar { padding: 0.5rem; }
  .navbar__lang { width: 2.2rem; height: 2.2rem; font-size: 0.85rem; background-size: 8rem auto; }
  .navbar__brand span { display: none; }
}

/* ---------- первый экран ---------- */
.hero {
  position: relative;
}
/* строка заголовка сверху, огонёк забирает всю оставшуюся высоту экрана — ничего не обрезается */
.hero__body {
  position: relative;
  z-index: var(--z-hero);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  height: 100svh;
  padding: 6rem 1rem 1.5rem;
  text-align: center;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12.6rem;
  font-weight: 900;
  font-stretch: 62%;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fdfdfd; /* тот же белый, что на логотипе партнёрки */
}
.hero__line {
  display: block;
  white-space: nowrap;
}
.js .hero__title .hero__line { visibility: hidden; }

/* каждая буква в своём окне: выезжает снизу из-под строки */
.title-mask {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: 0.04em;
  vertical-align: top;
  padding-top: 0.04em;
}
.title-char {
  display: inline-block;
  font-variation-settings: "wdth" 62, "wght" var(--w, 900);
}
.title-space { display: inline-block; width: 0.2em; }
.title-logo-mask { margin-right: 0.12em; }
.title-logo {
  display: block;
  /* ровно по высоте прописных букв Archivo (0.70em), верх и низ совпадают с буквами */
  height: 0.7em;
  width: auto;
  margin-top: 0.085em;
}

/* граффити поверх заголовка (WebGL-холсты с напылением) */
.hero__spray {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.hero__spray-word {
  position: absolute;
  width: 27rem;
  height: auto;
}
/* Affiliate — слева от огонька, Program — справа */
.hero__spray-word--1 {
  top: 52%;
  left: 4%;
  transform: rotate(-8deg);
}
.hero__spray-word--2 {
  top: 60%;
  right: 4%;
  transform: rotate(-6deg);
}

/* огонёк */
.hero__mascot {
  position: relative;
  z-index: 3;
  height: calc(100% - 1.5rem);
  max-height: 46rem;
  aspect-ratio: 1;
  margin-top: 1.5rem;
  align-self: end;
}
.js .hero__mascot { opacity: 0; }
.hero__mascot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero__mascot-canvas { visibility: hidden; }
.hero__mascot.has-frames .hero__mascot-canvas { visibility: visible; }
.hero__mascot.has-frames img.hero__mascot-img { visibility: hidden; }

@media (max-width: 767px) {
  .hero__body {
    padding-top: 5rem;
  }
  .hero__title { font-size: 2.55rem; }
  /* на телефоне по бокам нет места: Affiliate над огоньком слева, Program под ним справа */
  .hero__spray-word { width: 10.5rem; }
  .hero__spray-word--1 { top: 27%; left: 4%; }
  .hero__spray-word--2 { top: 81%; right: 4%; }
  .hero__mascot {
    height: auto;
    width: 100%;
    max-height: none;
    margin-top: 4rem;
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__title .hero__line { visibility: visible; }
  .js .hero__mascot { opacity: 1; }
  .transition { display: none; }
}