.site-shell {
  background: rgba(5, 7, 6, .72);
}

.site-shell:after {
  position: fixed;
  height: 100vh;
  background-image:
    linear-gradient(180deg, rgba(3, 6, 4, .34), rgba(5, 8, 6, .7)),
    linear-gradient(90deg, rgba(2, 4, 3, .35), transparent 28% 72%, rgba(2, 4, 3, .35)),
    url("/legion/public/legion-hero-background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.connect-section {
  background: linear-gradient(180deg, rgba(11, 14, 12, .82), rgba(8, 11, 9, .88)) !important;
  backdrop-filter: blur(2px);
}

.hero {
  min-height: 920px;
  justify-content: flex-start;
  padding-top: 28px;
}

.hero-banner-carousel {
  position: relative;
  z-index: 5;
  width: min(1240px, calc(100vw - 52px));
  height: clamp(190px, 18vw, 245px);
  margin: 0 auto 18px;
  overflow: hidden;
  border: 1px solid #080b09;
  background: #050806;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .48), 0 0 0 3px rgba(0, 0, 0, .2), 0 0 18px rgba(120, 198, 65, .025);
}

.hero-banner-carousel:after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .72), inset 0 0 34px rgba(0, 0, 0, .58);
}

.hero-banner-track,
.hero-banner-slide {
  position: absolute;
  inset: 0;
}

.hero-banner-slide {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  filter: brightness(.72) blur(1.5px);
  pointer-events: none;
  transition:
    opacity 1.15s cubic-bezier(.4, 0, .2, 1),
    transform 1.65s cubic-bezier(.22, .61, .36, 1),
    filter 1.15s ease,
    visibility 0s linear 1.15s;
}

.hero-banner-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  filter: brightness(1) blur(0);
  pointer-events: auto;
  transition-delay: 0s;
  animation: hero-banner-enter 1.15s cubic-bezier(.22, .61, .36, 1) both;
}

.hero-banner-slide.is-leaving {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  animation: hero-banner-leave 1.15s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes hero-banner-enter {
  from { opacity: 0; transform: scale(1.035); filter: brightness(.68) blur(2px); }
  to { opacity: 1; transform: scale(1); filter: brightness(1) blur(0); }
}

@keyframes hero-banner-leave {
  from { opacity: 1; transform: scale(1); filter: brightness(1) blur(0); }
  to { opacity: 0; transform: scale(.99); filter: brightness(.72) blur(1px); }
}

.hero-banner-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hero-banner-slide:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 5, 3, .9), rgba(3, 6, 4, .3) 48%, rgba(2, 4, 3, .12)), linear-gradient(0deg, rgba(0, 0, 0, .5), transparent 45%);
}

.hero-banner-copy {
  position: absolute;
  z-index: 2;
  left: clamp(48px, 7vw, 100px);
  top: 50%;
  width: min(480px, 45%);
  transform: translateY(-50%);
  text-align: left;
  opacity: 0;
  transform: translateY(calc(-50% + 14px));
  transition: opacity .8s ease .24s, transform 1s cubic-bezier(.22, .61, .36, 1) .18s;
}

.hero-banner-slide.is-active .hero-banner-copy { opacity: 1; transform: translateY(-50%); animation: hero-banner-copy-enter .9s ease .2s both; }

@keyframes hero-banner-copy-enter {
  from { opacity: 0; transform: translateY(calc(-50% + 15px)); }
  to { opacity: 1; transform: translateY(-50%); }
}

.hero-banner-copy.align-right {
  right: clamp(48px, 7vw, 100px);
  left: auto;
  text-align: right;
}

.hero-banner-slide:not(.is-active) .hero-banner-copy.align-right { transform: translateY(calc(-50% + 14px)); }

.hero-banner-copy small { color: #9bff1f; font-size: 9px; font-weight: 900; letter-spacing: .27em; }
.hero-banner-copy h2 { margin: 9px 0 12px; color: #f5f8f5; font: clamp(27px, 3vw, 47px)/1.05 Georgia, serif; text-shadow: 0 4px 20px #000; }
.hero-banner-copy p { margin: 0; color: #b5beb6; font: 14px/1.65 Georgia, serif; text-shadow: 0 2px 9px #000; }

.hero-banner-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 42px;
  height: 64px;
  transform: translateY(-50%);
  cursor: pointer;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(155, 255, 31, .78);
  font-size: 32px;
  text-shadow: 0 0 7px rgba(155, 255, 31, .3), 0 2px 6px #000;
  transition: color .35s ease, text-shadow .35s ease, transform .35s ease;
}
.hero-banner-arrow:hover,.hero-banner-arrow:focus-visible { color: #b5ff56; text-shadow: 0 0 6px rgba(155, 255, 31, .75), 0 0 16px rgba(155, 255, 31, .38), 0 2px 6px #000; transform: translateY(-50%) scale(1.12); }
.hero-banner-arrow.previous { left: 12px; }
.hero-banner-arrow.next { right: 12px; }

.hero-banner-dots { position: absolute; z-index: 4; left: 50%; bottom: 15px; display: flex; gap: 9px; transform: translateX(-50%); }
.hero-banner-dots button { width: 25px; height: 2px; padding: 0; cursor: pointer; border: 0; background: rgba(255, 255, 255, .18); transition: width .35s ease, background .35s ease, box-shadow .35s ease; }
.hero-banner-dots button.is-active { width: 38px; background: rgba(155, 255, 31, .72); box-shadow: 0 0 6px rgba(155, 255, 31, .3); }

.hero .eyebrow { margin-top: 0; }
.hero-emblem-wrap { width: min(510px, 66vw); margin-top: 0; }
.hero .realm-status { margin-top: -12px; }

@media (max-width: 850px) {
  .hero { min-height: 850px; padding-top: 22px; }
  .hero-banner-carousel { width: calc(100vw - 28px); height: 190px; margin-bottom: 16px; }
  .hero-banner-copy { left: 55px; width: 58%; }
  .hero-banner-copy.align-right { right: 55px; }
}

@media (max-width: 540px) {
  .hero { min-height: 820px; padding-top: 16px; }
  .hero-banner-carousel { height: 170px; }
  .hero-banner-copy,.hero-banner-copy.align-right { right: auto; left: 42px; top: auto; bottom: 48px; width: calc(100% - 84px); transform: none; text-align: left; }
  .hero-banner-slide:not(.is-active) .hero-banner-copy,.hero-banner-slide:not(.is-active) .hero-banner-copy.align-right { transform: translateY(12px); }
  .hero-banner-slide.is-active .hero-banner-copy,.hero-banner-slide.is-active .hero-banner-copy.align-right { transform: translateY(0); animation-name: hero-banner-copy-enter-mobile; }
  .hero-banner-copy p { font-size: 12px; }
  .hero-banner-arrow { width: 32px; height: 50px; }
  .hero-emblem-wrap { width: 82vw; margin: 5px 0 0; }
  .hero .realm-status { margin-top: 4px; }
}

@keyframes hero-banner-copy-enter-mobile {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner-slide.is-active { animation: hero-banner-enter 1.15s cubic-bezier(.22, .61, .36, 1) both !important; }
  .hero-banner-slide.is-leaving { animation: hero-banner-leave 1.15s cubic-bezier(.4, 0, .2, 1) both !important; }
  .hero-banner-slide.is-active .hero-banner-copy { animation: hero-banner-copy-enter .9s ease .2s both !important; }
}

@media (max-width: 540px) and (prefers-reduced-motion: reduce) {
  .hero-banner-slide.is-active .hero-banner-copy { animation-name: hero-banner-copy-enter-mobile !important; }
}