@font-face {
  font-family: "Stintech Sans";
  src: url("./assets/noto-sans-bold-ru.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  background: #191f22;
  color: #fafbfb;
  font-family: "Stintech Sans", Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; }
body { min-height: 100vh; }
img, svg { display: block; }
::selection { background: #e65308; color: #fff; }
.filter-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero {
  position: relative;
  isolation: isolate;
  min-height: 520px;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #191f22;
}
.scene, .shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scene { z-index: -2; }
.scene__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: 77% 57%;
  animation: scene-breathe 24s ease-in-out infinite alternate;
  will-change: transform;
}
.scene__light {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 49%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 49%, #000 70%);
}
.scene__light-band {
  position: absolute;
  top: -25%;
  left: 0;
  width: 24%;
  height: 150%;
  background: linear-gradient(90deg, transparent, rgb(255 227 198 / 7%) 48%, rgb(255 248 235 / 11%) 53%, transparent);
  transform: translateX(180%) skewX(-18deg);
  opacity: 0;
  animation: light-pass 18s ease-in-out 2s infinite;
}
.shade {
  z-index: -1;
  background: linear-gradient(90deg, rgb(11 17 20 / 5%), transparent 56%);
}
.brand {
  position: absolute;
  top: 7.5%;
  left: 5.2%;
  display: flex;
  align-items: center;
  gap: .8vw;
  color: #fafbfb;
  animation: enter 850ms cubic-bezier(.2, .65, .25, 1) both;
}
.brand__symbol {
  width: clamp(72px, 8.5vw, 170px);
  flex: 0 0 auto;
  filter: url("#clean-symbol-alpha");
}
.brand__symbol img { width: 100%; height: auto; }
.brand__wordmark { width: clamp(172px, 18.9vw, 375px); height: auto; }
.message {
  position: absolute;
  top: 37.3%;
  left: 6.35%;
  margin: 0;
}
.message__rule {
  width: clamp(64px, 6.6vw, 126px);
  height: clamp(4px, .35vw, 6px);
  border-radius: 1px;
  background: #ed5108;
  transform-origin: left center;
  animation: rule-enter 700ms cubic-bezier(.2, .65, .25, 1) 220ms both;
}
h1 {
  margin: clamp(20px, 1.7vw, 32px) 0 0;
  font-family: "Stintech Sans", Arial, sans-serif;
  font-size: clamp(44px, 5.7vw, 112px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  animation: enter 900ms cubic-bezier(.2, .65, .25, 1) 160ms both;
}
h1 span { display: block; white-space: nowrap; }
@keyframes enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rule-enter {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes scene-breathe {
  from { transform: scale(1); }
  to { transform: scale(1.022); }
}
@keyframes light-pass {
  0%, 58% { transform: translateX(180%) skewX(-18deg); opacity: 0; }
  63% { opacity: .7; }
  78% { opacity: .5; }
  84%, 100% { transform: translateX(480%) skewX(-18deg); opacity: 0; }
}
@media (min-width: 761px) and (max-aspect-ratio: 4/3) {
  .scene__image { object-position: 66% center; }
  .shade { background: linear-gradient(90deg, rgb(13 19 22 / 45%), rgb(13 19 22 / 12%) 54%, transparent 75%); }
}
@media (max-width: 760px) {
  .hero { min-height: 500px; }
  .scene__image { object-position: 76% center; }
  .shade {
    background:
      linear-gradient(90deg, rgb(12 18 21 / 85%), rgb(12 18 21 / 51%) 57%, rgb(12 18 21 / 10%)),
      linear-gradient(180deg, rgb(12 18 21 / 33%), transparent 68%);
  }
  .brand {
    top: clamp(26px, 6svh, 56px);
    left: 20px;
    gap: 12px;
  }
  .brand__symbol { width: 68px; }
  .brand__wordmark { width: clamp(166px, 46vw, 230px); }
  .message { left: 24px; top: 33%; }
  .message__rule { width: 66px; height: 4px; }
  h1 { margin-top: 25px; font-size: clamp(28px, 8.9vw, 57px); line-height: 1.13; letter-spacing: -.035em; }
  .scene__light { opacity: .65; }
}
@media (max-width: 360px) {
  .brand { left: 16px; gap: 10px; }
  .brand__symbol { width: 61px; }
  .message { left: 20px; }
}
@media (max-height: 500px) and (min-width: 761px) {
  .hero { min-height: 460px; }
}
@media (max-height: 600px) and (min-width: 761px) {
  .brand__symbol { width: min(8.5vw, 110px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .scene__image { transform: none; will-change: auto; }
  .scene__light { display: none; }
}