/* Alternate homepage using the clean four-frame fight sequence. */

.hero-v2 {
  --source-header-crop: 0px;
  --impact-x: 50%;
  --impact-y: 44%;
  --inversion-letter-magenta-source: #13fb93;
  --inversion-letter-violet-source: #93d323;
}

.hero-v2 .hero-frames {
  background: #fff;
}

.hero-v2 .fight-frame {
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
  transform-origin: 50% 42%;
}

.hero-v2 .fight-frame--idle {
  z-index: 1;
}

.hero-v2 .fight-frame--approach {
  z-index: 2;
}

.hero-v2 .fight-frame--strike {
  z-index: 3;
  opacity: 0;
}

.hero-v2 .fight-frame--impact {
  z-index: 4;
}

.hero-original .hero-cutouts {
  position: absolute;
  z-index: 6;
  inset: var(--header-h) 0 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-original .fight-cutout {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.hero-original .fight-cutout--idle {
  opacity: 1;
}

.hero-original .hero-vignette {
  z-index: 7;
}

.hero-v2 .impact-orb {
  position: fixed;
  z-index: 112;
  left: var(--impact-x);
  top: var(--impact-y);
  width: clamp(2.75rem, 4.2vmax, 5.25rem);
  aspect-ratio: 1;
  border: clamp(2px, 0.22vmax, 4px) solid var(--sf-magenta, var(--impact-hot));
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 clamp(1px, 0.1vmax, 2px) var(--sf-yellow, var(--signal));
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.1);
  will-change: opacity, transform;
}

.hero-backdrop-type {
  position: absolute;
  z-index: 5;
  top: calc(var(--header-h) + clamp(5.5rem, 11vh, 8rem));
  right: 0;
  left: 0;
  display: grid;
  justify-items: center;
  color: var(--ink);
  line-height: 0.7;
  opacity: 0.048;
  pointer-events: none;
  mix-blend-mode: multiply;
  transform: scale(1);
  transform-origin: 50% 42%;
  transition: opacity 120ms linear, transform 110ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-backdrop-type span {
  font-size: clamp(5.25rem, 13vw, 14rem);
  font-weight: 950;
  letter-spacing: -0.095em;
}

.hero-backdrop-type small {
  margin-top: clamp(0.9rem, 1.8vw, 1.8rem);
  font-size: clamp(1rem, 2vw, 2.2rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.48em;
  transform: translateX(0.22em);
}

.hero-v2 .hero-vignette {
  z-index: 6;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.96), transparent 12%);
}

.hero-backdrop-outline {
  position: absolute;
  z-index: 5;
  top: calc(var(--header-h) + clamp(5.5rem, 11vh, 8rem));
  left: 50%;
  display: grid;
  justify-items: center;
  color: transparent;
  line-height: 0.7;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  clip-path: inset(0 50% 0 50%);
  transform: translateX(-50%) scale(1);
  transform-origin: 50% 42%;
  transition: transform 110ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-backdrop-outline span {
  font-size: clamp(5.25rem, 13vw, 14rem);
  font-weight: 950;
  letter-spacing: -0.095em;
  -webkit-text-stroke: clamp(1px, 0.1vw, 2px) #ff147a;
  filter: drop-shadow(0 0 1px #8f32ff);
}

.hero-backdrop-outline small {
  margin-top: clamp(0.9rem, 1.8vw, 1.8rem);
  font-size: clamp(1rem, 2vw, 2.2rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.48em;
  transform: translateX(0.22em);
  -webkit-text-stroke: clamp(0.75px, 0.075vw, 1.5px) #8f32ff;
  filter: drop-shadow(0 0 1px #ff147a);
}

.hero-v2.is-fighting .hero-backdrop-type {
  opacity: 0.052;
}

.hero-v2.fight-step--approach .hero-backdrop-type,
.hero-v2.fight-step--approach .hero-backdrop-outline {
  transform: translateX(0) scale(1.04);
}

.hero-v2.fight-step--approach .hero-backdrop-outline {
  transform: translateX(-50%) scale(1.04);
}

.hero-v2.fight-step--strike .hero-backdrop-type {
  opacity: 0.056;
  transform: scale(1.08);
}

.hero-v2.fight-step--strike .hero-backdrop-outline {
  transform: translateX(-50%) scale(1.08);
}

.hero-v2.fight-step--impact .hero-backdrop-type {
  opacity: 0.06;
  transform: scale(1.12);
}

.hero-v2.fight-step--impact .hero-backdrop-outline {
  transform: translateX(-50%) scale(1.12);
}

.hero-v2.is-impacting .hero-backdrop-outline {
  animation: hero-outline-open 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes hero-outline-open {
  0% {
    clip-path: inset(0 50% 0 50%);
    opacity: 0;
  }
  18% {
    opacity: 0.95;
  }
  70% {
    clip-path: inset(0 6% 0 6%);
    opacity: 0.82;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 0.68;
  }
}

/* Original launch hero: one restrained field, then a hard typographic impact. */

.hero-original .hero-backdrop-type,
.hero-original .hero-backdrop-outline {
  top: calc(var(--header-h) + clamp(5rem, 10vh, 7.5rem));
}

.hero-original .hero-backdrop-type {
  opacity: 0.055;
}

.hero-original .hero-backdrop-type span,
.hero-original .hero-backdrop-outline span {
  font-size: clamp(5.75rem, 14.2vw, 15rem);
  letter-spacing: -0.1em;
}

.hero-original .hero-backdrop-type small,
.hero-original .hero-backdrop-outline small {
  margin-top: clamp(0.7rem, 1.45vw, 1.45rem);
  font-size: clamp(0.95rem, 2.15vw, 2.35rem);
}

.hero-original .hero-backdrop-outline span {
  -webkit-text-stroke: clamp(1.25px, 0.13vw, 2.5px) var(--inversion-letter-magenta-source);
  filter:
    drop-shadow(clamp(1px, 0.1vw, 2px) 0 0 var(--inversion-letter-violet-source))
    drop-shadow(clamp(-1.5px, -0.08vw, -1px) 0 0 var(--inversion-letter-magenta-source));
}

.hero-original .hero-backdrop-outline small {
  -webkit-text-stroke: clamp(1px, 0.09vw, 1.8px) var(--inversion-letter-magenta-source);
  filter: drop-shadow(clamp(1px, 0.08vw, 1.5px) 0 0 var(--inversion-letter-violet-source));
}

.hero-original.is-fighting .hero-backdrop-type {
  opacity: 0.06;
}

.hero-original.fight-step--approach .hero-backdrop-type {
  opacity: 0.064;
}

.hero-original.fight-step--strike .hero-backdrop-type {
  opacity: 0.068;
}

.hero-original.fight-step--impact .hero-backdrop-type {
  opacity: 0.038;
}

.hero-original.is-impacting .hero-backdrop-outline {
  animation: hero-original-outline-open 280ms 330ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-original.is-impacting .hero-backdrop-outline span,
.hero-original.is-impacting .hero-backdrop-outline small {
  animation: hero-original-outline-radiance 280ms 330ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-original .impact-orb {
  width: clamp(3.2rem, 4.9vmax, 6.2rem);
  border-width: clamp(2px, 0.24vmax, 4px);
  box-shadow:
    0 0 0 clamp(1px, 0.11vmax, 2px) var(--sf-yellow, var(--signal)),
    0 0 0 clamp(3px, 0.34vmax, 6px) var(--sf-violet, var(--impact-violet));
}

.impact-inversion {
  position: fixed;
  z-index: 500;
  left: 50%;
  top: 44%;
  width: 1px;
  height: 1px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  will-change: transform, opacity;
}

.impact-inversion-wave {
  position: fixed;
  z-index: 501;
  left: 50%;
  top: 44%;
  width: 1px;
  height: 1px;
  box-sizing: border-box;
  border: clamp(12px, 1.1vmax, 20px) solid #fff;
  border-radius: 50%;
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  will-change: width, height, opacity;
}

.hero-original.is-impacting .site-header {
  animation: hero-ui-header-resonance 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-original.is-impacting .wordmark {
  animation: hero-ui-wordmark-resonance 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-original.is-impacting .menu-button,
.hero-original.is-impacting .search-button {
  animation: hero-ui-control-resonance 620ms linear both;
}

.hero-original.is-impacting .scene-nav {
  animation: hero-ui-nav-resonance 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-original.is-impacting .scene-nav button {
  animation: hero-ui-dot-resonance 620ms linear both;
}

@keyframes hero-original-outline-open {
  0% {
    clip-path: inset(-22% 50% -24% 50%);
    opacity: 0;
  }
  12% {
    clip-path: inset(-22% 45% -24% 45%);
    opacity: 1;
  }
  42% {
    clip-path: inset(-22% 8% -24% 8%);
    opacity: 1;
  }
  72% {
    clip-path: inset(-22% 0 -24% 0);
    opacity: 0.94;
  }
  100% {
    clip-path: inset(-22% 0 -24% 0);
    opacity: 0.76;
  }
}

@keyframes hero-original-outline-radiance {
  0%, 100% {
    filter:
      drop-shadow(1px 0 0 var(--inversion-letter-violet-source))
      drop-shadow(-1px 0 0 var(--inversion-letter-magenta-source));
  }
  14% {
    filter:
      drop-shadow(4px 0 0 var(--inversion-letter-magenta-source))
      drop-shadow(-4px 0 0 var(--inversion-letter-violet-source));
  }
  31% {
    filter:
      drop-shadow(-2px 0 0 var(--inversion-letter-violet-source))
      drop-shadow(3px 0 0 var(--inversion-letter-magenta-source));
  }
  58% {
    filter:
      drop-shadow(2px 0 0 var(--inversion-letter-violet-source))
      drop-shadow(-1px 0 0 var(--inversion-letter-magenta-source));
  }
}

@keyframes hero-ui-header-resonance {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    box-shadow: inset 0 -1px 0 rgba(10, 11, 12, 0.08);
  }
  10% {
    transform: translate3d(-4px, 1px, 0);
    box-shadow: inset 0 -4px 0 var(--sf-magenta, var(--impact-hot));
  }
  24% {
    transform: translate3d(3px, -1px, 0);
    box-shadow: inset 0 -3px 0 var(--sf-yellow, var(--signal));
  }
  46% {
    transform: translate3d(-1px, 0, 0);
    box-shadow: inset 0 -2px 0 var(--sf-violet, var(--impact-violet));
  }
}

@keyframes hero-ui-wordmark-resonance {
  0%, 100% {
    filter: none;
  }
  12% {
    filter:
      drop-shadow(3px 0 0 var(--sf-magenta, var(--impact-hot)))
      drop-shadow(-3px 0 0 var(--sf-violet, var(--impact-violet)));
  }
  32% {
    filter:
      drop-shadow(-2px 0 0 var(--sf-yellow, var(--signal)))
      drop-shadow(1px 0 0 var(--sf-magenta, var(--impact-hot)));
  }
}

@keyframes hero-ui-control-resonance {
  0%, 100% {
    color: var(--ink);
  }
  12% {
    color: var(--sf-magenta, var(--impact-hot));
  }
  32% {
    color: var(--sf-violet, var(--impact-violet));
  }
  52% {
    color: var(--sf-yellow, var(--signal));
  }
}

@keyframes hero-ui-nav-resonance {
  0%, 100% {
    transform: translate3d(0, -50%, 0);
  }
  10% {
    transform: translate3d(-7px, -50%, 0);
  }
  24% {
    transform: translate3d(4px, -50%, 0);
  }
  46% {
    transform: translate3d(-2px, -50%, 0);
  }
}

@keyframes hero-ui-dot-resonance {
  0%, 100% {
    color: var(--ink);
  }
  12% {
    color: var(--sf-magenta, var(--impact-hot));
  }
  34% {
    color: var(--sf-yellow, var(--signal));
  }
  56% {
    color: var(--sf-violet, var(--impact-violet));
  }
}

.hero-v2.is-fighting .site-header,
.hero-v2.is-fighting .scene-nav {
  opacity: 1;
  pointer-events: auto;
}

/* Scene 02: the circle is the entrance. The collage is already composed. */

.hero-v2 .scene--league {
  background: var(--sf-arena, var(--ink));
}

.hero-v2 .scene--league .event-collage::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -4%;
  top: 8%;
  width: 48%;
  height: 86%;
  background: var(--sf-yellow, var(--signal));
  clip-path: polygon(20% 0, 100% 6%, 82% 48%, 100% 100%, 0 88%, 16% 52%, 0 16%);
  transform: rotate(3deg);
}

.hero-v2 .scene--league .event-strike {
  right: -2%;
  top: 11%;
  width: 42%;
  height: 82%;
  background: var(--sf-magenta, var(--impact-hot));
}

.hero-v2 .scene--league .league-layout h1 {
  width: 54vw;
  font-size: clamp(4.35rem, 8.4vw, 9.2rem);
  line-height: 0.7;
}

.hero-v2 .scene--league .league-layout h1 > span,
.hero-v2 .scene--league .league-layout h1 > strong,
.hero-v2 .scene--league .league-layout h1 > em {
  display: block;
}

.hero-v2 .scene--league .league-layout h1 > strong {
  margin-left: -0.025em;
  font-size: 1.17em;
  line-height: 0.68;
}

.hero-v2 .scene--league .league-layout h1 > em {
  margin-top: 0.12em;
  font-size: 0.72em;
  line-height: 0.82;
}

/* Scene 03: one machine, one image, one hierarchy. */

.hero-v2 .scene--format,
.hero-v2 .scene--format .fighter-reveal {
  background: var(--sf-arena, var(--ink));
}

.hero-v2 .scene--format .fighter-reveal::before,
.hero-v2 .scene--format .fighter-reveal::after {
  content: none;
}

.hero-v2 .scene--format .fighter-pose--main {
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--sf-arena, var(--ink));
}

.hero-v2 .scene--format .fighter-pose--main img {
  object-fit: cover;
  object-position: 57% center;
  filter: grayscale(0.12) contrast(1.16) brightness(0.88);
}

.hero-v2 .scene--format .fighter-reveal h2 {
  z-index: 6;
  left: 3%;
  bottom: 2.5%;
  color: var(--sf-white, #fff);
  font-size: clamp(8rem, 17vw, 18rem);
  font-style: italic;
  letter-spacing: -0.1em;
  line-height: 0.68;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.hero-v2 .scene--format.is-active .fighter-pose--main,
.hero-v2 .scene--format.is-active .fighter-reveal h2 {
  animation: none;
}

.hero-v2 .scene--format .fighter-thesis {
  z-index: 7;
  right: 3%;
  bottom: 5%;
  width: 38%;
  color: var(--sf-white, #fff);
  font-size: clamp(1.4rem, 2.4vw, 2.8rem);
  text-align: right;
}

.hero-v2 .scene--format .fighter-thesis em {
  color: var(--sf-magenta, var(--impact-hot));
}

/* Scene 04: an autonomous matchup split by one oblique black bar. */

.hero-v2 .scene--match .match-fighter {
  top: 0;
  width: 56%;
  height: 100%;
  border: 0;
}

.hero-v2 .scene--match .match-fighter--black {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}

.hero-v2 .scene--match .match-fighter--white {
  right: 0;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}

.hero-v2 .scene--match .match-fighter img {
  object-fit: contain;
  filter: grayscale(0.35) contrast(1.2) brightness(0.82);
}

.hero-v2 .scene--match .match-fighter picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-v2 .scene--match .match-fighter--black img {
  object-position: 54% center;
}

.hero-v2 .scene--match .match-fighter--white img {
  object-position: 58% center;
}

.hero-v2 .scene--match .match-shade {
  z-index: 3;
  left: 50%;
  top: -8%;
  width: 13%;
  height: 116%;
  background: var(--sf-arena, var(--ink));
  clip-path: none;
  transform: translateX(-50%) skewX(-7deg);
}

.hero-v2 .scene--match .match-board h2 {
  left: 3%;
  top: 4%;
  width: 44%;
  color: var(--sf-white, #fff);
  font-size: clamp(3.5rem, 5.7vw, 6.8rem);
  line-height: 0.76;
  text-align: left;
  text-shadow: none;
  transform: none;
}

.hero-v2 .scene--match .match-board h2 em {
  color: var(--sf-magenta, var(--impact-hot));
}

.hero-v2 .scene--match .match-vs {
  left: 50%;
  top: 51%;
  color: var(--sf-white, #fff);
  font-size: clamp(5rem, 8.5vw, 9rem);
  font-style: normal;
  letter-spacing: -0.08em;
  -webkit-text-stroke: 0;
  text-shadow: none;
  transform: translate(-50%, -50%) skewX(-7deg);
}

.hero-v2 .scene--match .match-vs::before {
  content: none;
}

.hero-v2 .scene--match.is-active .match-vs {
  animation: none;
}

.hero-v2 .scene--match.is-active .match-board h2 {
  animation: none;
}

.hero-v2 .scene--match .match-details {
  right: 2.5%;
  bottom: 3%;
  left: 2.5%;
  grid-template-columns: 1fr minmax(19rem, 31rem) 1fr;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: clamp(0.9rem, 1.35vw, 1.35rem);
  letter-spacing: 0.02em;
}

.match-about-cta {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  min-height: clamp(3.8rem, 5.2vw, 5.2rem);
  padding: 0.9rem clamp(1rem, 1.8vw, 1.8rem);
  background: var(--sf-white, #fff);
  color: var(--sf-ink, var(--ink));
  font-size: clamp(1.15rem, 1.9vw, 1.9rem);
  font-weight: 950;
  letter-spacing: -0.035em;
  line-height: 1;
  text-decoration: none;
  transition: background-color 140ms linear, color 140ms linear;
}

.hero-v2 .scene--match .match-about-cta span {
  color: inherit;
  letter-spacing: inherit;
}

.match-about-arrow {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  color: var(--sf-magenta, var(--impact-hot));
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 2.4;
}

.match-about-cta:hover,
.match-about-cta:focus-visible {
  background: var(--sf-magenta, var(--impact-hot));
  color: #fff;
}

.match-about-cta:hover .match-about-arrow,
.match-about-cta:focus-visible .match-about-arrow {
  color: var(--sf-yellow, var(--signal));
}

.match-about-cta:focus-visible {
  outline: 4px solid var(--sf-yellow, var(--signal));
  outline-offset: 4px;
}

@media (max-width: 720px) {
  .hero-v2 .fight-frame {
    left: -23%;
    width: 146%;
    max-width: none;
    object-fit: contain;
    object-position: center;
  }

  .hero-original .fight-cutout {
    left: -23%;
    width: 146%;
    max-width: none;
    object-fit: contain;
    object-position: center;
  }

  .hero-backdrop-type,
  .hero-backdrop-outline {
    top: calc(var(--header-h) + 5.5rem);
  }

  .hero-backdrop-type {
    opacity: 0.045;
  }

  .hero-backdrop-type span,
  .hero-backdrop-outline span {
    font-size: clamp(4.25rem, 21vw, 7rem);
  }

  .hero-backdrop-type small,
  .hero-backdrop-outline small {
    margin-top: 0.65rem;
    font-size: 0.75rem;
  }

  .hero-v2 .scene--league .league-layout h1 {
    left: 1rem;
    top: auto;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 2rem);
    font-size: clamp(2.9rem, 13vw, 4.2rem);
    line-height: 0.74;
    transform: none;
  }

  .hero-v2 .scene--league .event-collage::after {
    clip-path: none;
    opacity: 1;
    background:
      linear-gradient(
        180deg,
        rgba(10, 11, 12, 0.03) 0 34%,
        rgba(10, 11, 12, 0.5) 57%,
        rgba(10, 11, 12, 0.98) 84% 100%
      );
  }

  .hero-v2 .scene--league .league-layout h1 > strong {
    font-size: 1.05em;
  }

  .hero-v2 .scene--league .league-layout h1 > em {
    margin-top: 0.16em;
    font-size: 0.58em;
    line-height: 0.88;
  }

  .hero-v2 .scene--league.is-active .league-layout h1 {
    animation-name: league-title-mobile-in;
  }

  .hero-v2 .scene--format .fighter-pose--main {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .hero-v2 .scene--format .fighter-pose--main img {
    object-position: 53% center;
  }

  .hero-v2 .scene--format .fighter-reveal h2 {
    left: 0.75rem;
    bottom: 2%;
    font-size: clamp(5.8rem, 28vw, 8.8rem);
  }

  .hero-v2 .scene--format .fighter-thesis {
    right: 1rem;
    bottom: 15%;
    width: 78%;
    font-size: clamp(1.1rem, 4.8vw, 1.65rem);
  }

  .hero-v2 .scene--match .match-fighter {
    width: 100%;
    height: 52%;
  }

  .hero-v2 .scene--match .match-fighter img {
    object-fit: cover;
  }

  .hero-v2 .scene--match .match-fighter--black {
    top: 0;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  }

  .hero-v2 .scene--match .match-fighter--black img {
    object-position: 56% 38%;
  }

  .hero-v2 .scene--match .match-fighter--white {
    top: 48%;
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
  }

  .hero-v2 .scene--match .match-fighter--white img {
    object-position: 58% 42%;
  }

  .hero-v2 .scene--match .match-shade {
    left: -10%;
    top: 46%;
    width: 120%;
    height: 10%;
    transform: rotate(-3deg);
  }

  .hero-v2 .scene--match .match-board h2 {
    left: 1rem;
    top: 2.5%;
    width: calc(100% - 2rem);
    font-size: clamp(2.8rem, 11vw, 4.2rem);
  }

  .hero-v2 .scene--match .match-vs {
    top: 51%;
    font-size: clamp(4.5rem, 20vw, 7rem);
    transform: translate(-50%, -50%) rotate(-3deg);
  }

  .hero-v2 .scene--match .match-details {
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    left: 1rem;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    font-size: 0.72rem;
  }

  .hero-v2 .scene--match .match-details > strong:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .hero-v2 .scene--match .match-details > strong:last-child {
    grid-column: 2;
    grid-row: 1;
  }

  .match-about-cta {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 3.5rem;
    padding: 0.8rem 1rem;
    font-size: clamp(0.95rem, 4.5vw, 1.2rem);
  }
}

@keyframes league-title-mobile-in {
  from {
    opacity: 0;
    transform: translateX(-1.5rem) skewX(-3deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) skewX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-backdrop-type,
  .hero-backdrop-outline {
    transition: none;
  }
}