:root {
  --mouse-x: 0;
  --mouse-y: 0;
}

.arena::before {
  transform: scale(1.055) translate(calc(var(--mouse-x) * -5px), calc(var(--mouse-y) * -3px));
  transition: transform 900ms cubic-bezier(.2, .75, .25, 1);
  animation: arena-cinematic-breathe 13s ease-in-out infinite alternate;
}

.arena::after {
  background:
    linear-gradient(90deg, rgba(6, 31, 48, .38), transparent 28%, transparent 72%, rgba(53, 5, 46, .36)),
    radial-gradient(circle at 50% 42%, rgba(32, 23, 11, .03) 0 16%, rgba(5, 5, 5, .3) 45%, rgba(3, 3, 3, .8) 100%),
    linear-gradient(180deg, rgba(3, 3, 3, .72) 0, rgba(3, 3, 3, .05) 25%, rgba(3, 3, 3, .2) 62%, rgba(3, 3, 3, .94) 100%);
}

.hero-fighters {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-fighters__portrait {
  position: absolute;
  top: 11%;
  width: clamp(330px, 36vw, 580px);
  aspect-ratio: 1;
  object-fit: cover;
  opacity: .82;
  filter: saturate(.9) contrast(1.08) brightness(.7);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 72% 80% at 50% 48%, #000 42%, rgba(0,0,0,.92) 61%, transparent 84%);
  mask-image: radial-gradient(ellipse 72% 80% at 50% 48%, #000 42%, rgba(0,0,0,.92) 61%, transparent 84%);
}

.hero-fighters__portrait--blue { left: -8%; }
.hero-fighters__portrait--red { right: -8%; transform: scaleX(-1); }

.arena-light {
  position: fixed;
  z-index: 0;
  top: -26vh;
  width: 36vw;
  height: 95vh;
  opacity: .3;
  filter: blur(22px);
  pointer-events: none;
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  animation: light-search 10s ease-in-out infinite alternate;
}

.arena-light--blue {
  left: 0;
  background: linear-gradient(180deg, rgba(56, 207, 255, .42), transparent 70%);
  transform: rotate(4deg);
}

.arena-light--red {
  right: 0;
  background: linear-gradient(180deg, rgba(255, 48, 177, .4), transparent 70%);
  transform: rotate(-4deg);
  animation-delay: -5s;
}

.site-header {
  position: relative;
  z-index: 5;
  margin: 12px 12px 0;
  padding-right: clamp(22px, 4vw, 58px);
  padding-left: clamp(22px, 4vw, 58px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-bottom-color: rgba(255, 89, 190, .22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(13, 13, 22, .78), rgba(7, 8, 14, .52));
  backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22), inset 0 1px rgba(255,255,255,.06);
}

.brand__name { font-size: clamp(1rem, 1.5vw, 1.3rem); }

.hero {
  isolation: isolate;
}

.hero::before {
  position: absolute;
  z-index: -1;
  top: 4%;
  left: 50%;
  width: min(80vw, 960px);
  aspect-ratio: 2 / 1;
  border: 1px solid rgba(234, 183, 77, .08);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%) perspective(800px) rotateX(70deg);
  box-shadow: 0 0 80px rgba(221, 160, 43, .05), inset 0 0 70px rgba(221, 160, 43, .03);
}

.hero__content {
  transform: translate(calc(var(--mouse-x) * 2px), calc(var(--mouse-y) * 1px));
  transition: transform 900ms cubic-bezier(.2, .75, .25, 1);
}

.hero__belt {
  display: block;
  width: clamp(300px, 31vw, 460px);
  height: auto;
  margin: -10px auto -22px;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .82)) drop-shadow(0 0 34px rgba(255, 68, 183, .22));
  animation: reveal-up 650ms 80ms cubic-bezier(.2, .75, .25, 1) both;
}

.hero__logo {
  position: relative;
  font-size: clamp(3.7rem, 8vw, 7.2rem);
  letter-spacing: -.035em;
}

.hero__logo::before,
.hero__logo::after {
  width: clamp(35px, 6vw, 92px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(245, 209, 126, .6));
}

.hero__logo::after { transform: scaleX(-1); }

.hero__headline {
  color: #f2efff;
  font-style: normal;
}

.hero__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: min(100%, 240px);
  margin: 17px auto 0;
  animation: reveal-up 500ms 470ms cubic-bezier(.2, .75, .25, 1) both;
}

.hero__rule i {
  width: 88px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231, 184, 88, .54));
}

.hero__rule i:last-child { transform: scaleX(-1); }
.hero__rule b { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }

.hero__cta {
  border-radius: 2px;
  background: linear-gradient(110deg, #8ae8ff 0%, #9b6cff 42%, #ff4fb8 100%);
  box-shadow: 0 18px 44px rgba(139, 88, 255, .32), 0 0 44px rgba(255, 79, 184, .16), inset 0 1px rgba(255,255,255,.55);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

.hero__badges li {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(6, 7, 9, .28);
  backdrop-filter: blur(6px);
}

.trailer-section {
  border-top-color: rgba(171, 120, 255, .28);
  box-shadow: inset 0 35px 80px rgba(0, 0, 0, .4);
}

@keyframes light-search {
  from { opacity: .18; filter: blur(28px); }
  to { opacity: .36; filter: blur(16px); }
}

@keyframes arena-cinematic-breathe {
  from {
    transform: scale(1.045) translate(calc(var(--mouse-x) * -5px), calc(var(--mouse-y) * -3px));
  }
  to {
    transform: scale(1.065) translate(calc(var(--mouse-x) * -5px), calc(var(--mouse-y) * -3px));
  }
}

@media (max-width: 760px) {
  .site-header { margin: 7px 7px 0; }
  .hero__belt { width: min(78vw, 330px); margin-top: -10px; margin-bottom: -14px; }
  .hero-fighters__portrait {
    top: 8%;
    width: 62vw;
    opacity: .38;
  }
  .hero-fighters__portrait--blue { left: -34%; }
  .hero-fighters__portrait--red { right: -34%; }
  .hero__logo::before,
  .hero__logo::after { display: none; }
}

@media (max-width: 430px) {
  .site-header { padding-right: 14px; padding-left: 14px; }
  .hero__badges li { padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .arena::before,
  .hero__content { transform: none; transition: none; }
  .arena-light { animation: none; }
}