/* ==========================================================
   BAXTER FIGHT OPENING HERO
   ========================================================== */

.baxter-fight-opening {
  position: relative;

  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background:
    #000;

  border-bottom:
    1px solid
    rgba(223, 184, 80, 0.55);

  isolation: isolate;
}


.baxter-fight-opening__stage {
  position: relative;

  width: 100%;

  height:
    clamp(
      560px,
      78vh,
      880px
    );

  overflow: hidden;

  background:
    #000;
}


.baxter-fight-opening__video {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit:
    cover;

  object-position:
    center center;

  background:
    #000;

  cursor:
    pointer;
}


.baxter-fight-opening__shade {
  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.24) 0%,
      rgba(0,0,0,0.02) 27%,
      rgba(0,0,0,0.02) 67%,
      rgba(0,0,0,0.46) 100%
    );
}


.baxter-fight-opening__badge {
  position: absolute;

  top:
    clamp(
      18px,
      3vw,
      34px
    );

  left:
    clamp(
      18px,
      4vw,
      64px
    );

  z-index: 4;

  padding:
    9px
    13px;

  border:
    1px solid
    rgba(244, 205, 88, 0.88);

  background:
    rgba(5, 2, 2, 0.68);

  color:
    #f4d06a;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size:
    10px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;

  backdrop-filter:
    blur(9px);
}


.baxter-fight-opening__sound {
  position: absolute;

  right:
    clamp(
      18px,
      4vw,
      64px
    );

  bottom:
    clamp(
      20px,
      4vw,
      52px
    );

  z-index: 5;

  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap:
    18px;

  min-width:
    165px;

  padding:
    15px
    18px;

  border:
    1px solid
    rgba(245, 211, 107, 0.92);

  border-radius:
    999px;

  background:
    rgba(5, 2, 2, 0.78);

  color:
    #f5d36b;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size:
    11px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;

  cursor:
    pointer;

  backdrop-filter:
    blur(12px);

  box-shadow:
    0 12px 34px
    rgba(0,0,0,0.32);
}


.baxter-fight-opening__sound:hover {
  transform:
    translateY(-2px);
}


.baxter-fight-opening__sound.is-needed {
  min-width:
    210px;

  padding:
    18px
    22px;

  border:
    2px solid
    #f6d367;

  background:
    linear-gradient(
      180deg,
      #f7db78 0%,
      #d6a325 100%
    );

  color:
    #210507;

  box-shadow:
    0 14px 36px
    rgba(219, 170, 41, 0.38);

  animation:
    baxterFightPulse
    1.8s
    ease-in-out
    infinite;
}


.baxter-fight-opening__sound-arrow {
  font-size:
    18px;

  line-height:
    1;
}


.baxter-fight-opening__replay {
  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 5;

  transform:
    translate(-50%, -50%);

  padding:
    16px
    25px;

  border:
    1px solid
    #f4cf68;

  border-radius:
    999px;

  background:
    rgba(0,0,0,0.76);

  color:
    #f4cf68;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    0.14em;

  cursor:
    pointer;

  backdrop-filter:
    blur(10px);
}


@keyframes baxterFightPulse {

  0%,
  100% {
    transform:
      scale(1);
  }

  50% {
    transform:
      scale(1.035);
  }

}


@media (max-width: 900px) {

  .baxter-fight-opening__stage {
    height:
      clamp(
        480px,
        66vh,
        680px
      );
  }

}


@media (max-width: 600px) {

  .baxter-fight-opening__stage {
    height:
      min(
        74vh,
        620px
      );

    min-height:
      440px;
  }


  .baxter-fight-opening__video {
    object-position:
      center center;
  }


  .baxter-fight-opening__badge {
    top:
      15px;

    left:
      15px;
  }


  .baxter-fight-opening__sound {
    left:
      15px;

    right:
      15px;

    bottom:
      18px;

    width:
      calc(
        100% - 30px
      );

    box-sizing:
      border-box;
  }

}


@media (
  prefers-reduced-motion:
  reduce
) {

  .baxter-fight-opening__sound.is-needed {
    animation:
      none;
  }

}



/* ==========================================================
   BAXTER FIGHT OPENING VISUAL / LOADING FIX
   ========================================================== */

.baxter-fight-opening {
  position: relative !important;

  z-index: 0 !important;

  background:
    #000 !important;
}


/*
   Keep this bold, but stop it from behaving like a giant
   empty viewport panel.
*/
.baxter-fight-opening__stage {
  position: relative !important;

  width: 100% !important;

  height:
    min(
      68vh,
      calc(
        100vw * 496 / 864
      )
    ) !important;

  min-height:
    440px !important;

  max-height:
    720px !important;

  aspect-ratio:
    864 / 496 !important;

  background-color:
    #000 !important;

  background-image:
    url("/images/fight-opening-poster.jpg") !important;

  background-repeat:
    no-repeat !important;

  background-position:
    center center !important;

  background-size:
    cover !important;

  overflow:
    hidden !important;
}


/*
   The poster is the visual until the browser confirms the
   actual MP4 has frames ready to display.
*/
.baxter-fight-opening__video {
  opacity:
    0 !important;

  visibility:
    hidden !important;

  transition:
    opacity
    180ms
    ease !important;

  object-fit:
    cover !important;

  object-position:
    center center !important;
}


.baxter-fight-opening.is-video-ready
.baxter-fight-opening__video {
  opacity:
    1 !important;

  visibility:
    visible !important;
}


/*
   Hide the extra label that was visually colliding with
   the existing BaxterGate header/logo.
*/
.baxter-fight-opening__badge {
  display:
    none !important;
}


/*
   Keep sound control prominent but out of the header.
*/
.baxter-fight-opening__sound {
  top:
    auto !important;

  right:
    clamp(
      18px,
      3vw,
      42px
    ) !important;

  bottom:
    clamp(
      18px,
      3vw,
      36px
    ) !important;

  left:
    auto !important;
}


.baxter-fight-opening__sound.is-needed {
  box-shadow:
    0 12px 34px
    rgba(
      213,
      167,
      40,
      0.34
    ) !important;
}


/*
   Very subtle buffering treatment.
   The poster remains underneath, so the user never gets a
   meaningless giant empty black rectangle.
*/
.baxter-fight-opening.is-buffering::after {
  content:
    "" !important;

  position:
    absolute !important;

  inset:
    auto
    0
    0
    0 !important;

  z-index:
    4 !important;

  height:
    2px !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      #e4bc50,
      transparent
    ) !important;

  animation:
    baxterFightLoadingLine
    1.25s
    ease-in-out
    infinite !important;
}


@keyframes baxterFightLoadingLine {

  0% {
    transform:
      translateX(-70%);
  }

  100% {
    transform:
      translateX(70%);
  }

}


@media (max-width: 900px) {

  .baxter-fight-opening__stage {
    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    aspect-ratio:
      864 / 496 !important;
  }

}


@media (max-width: 600px) {

  .baxter-fight-opening__stage {
    width:
      100% !important;

    height:
      auto !important;

    min-height:
      0 !important;

    aspect-ratio:
      864 / 496 !important;
  }


  .baxter-fight-opening__sound {
    left:
      14px !important;

    right:
      14px !important;

    bottom:
      14px !important;

    width:
      calc(
        100% - 28px
      ) !important;
  }

}



/* ==========================================================
   BAXTER FIGHT LOOP / MOBILE SOUND FINAL
   ========================================================== */

.baxter-fight-opening__video {
  touch-action:
    manipulation;
}


.baxter-fight-opening__sound {
  touch-action:
    manipulation;

  -webkit-tap-highlight-color:
    transparent;
}


@media (max-width: 600px) {

  .baxter-fight-opening__sound {
    min-height:
      56px !important;

    padding:
      16px
      20px !important;

    font-size:
      12px !important;
  }

}