:root {
  --mm-intro-gold: #d8b36a;
  --mm-intro-ivory: #f8f4eb;
  --mm-intro-muted: rgba(248, 244, 235, .72);
}

.mm-video-intro {
  --intro-progress: 0%;
  color: var(--mm-intro-ivory);
  background: #010204;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mm-video-intro.is-active {
  display: block;
}

.mm-video-intro__ambient {
  inset: -10%;
  width: 120%;
  height: 120%;
  filter: blur(42px) brightness(.3) saturate(1.08);
  transform: scale(1.12);
}

.mm-video-intro::before {
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(0, 2, 5, .72) 0%, rgba(0, 2, 5, .14) 52%, rgba(0, 2, 5, .32) 100%),
    linear-gradient(180deg, rgba(0, 2, 5, .42) 0%, transparent 26%, transparent 55%, rgba(0, 2, 5, .78) 100%),
    radial-gradient(circle at 55% 44%, transparent 25%, rgba(0, 2, 5, .2) 64%, rgba(0, 2, 5, .8) 100%);
}

.mm-video-intro__stage {
  isolation: auto;
}

.mm-video-intro__stage::after {
  z-index: 3;
  box-shadow: inset 0 0 clamp(64px, 10vw, 160px) rgba(0, 2, 5, .72);
}

.mm-video-intro__video {
  z-index: 2;
  object-fit: contain;
  filter: saturate(1.02) contrast(1.035) brightness(.92);
  box-shadow: 0 0 clamp(50px, 9vw, 150px) rgba(0, 0, 0, .6);
}

.mm-intro-copy {
  position: absolute;
  z-index: 5;
  right: max(6vw, env(safe-area-inset-right));
  bottom: max(10vh, calc(env(safe-area-inset-bottom) + 3rem));
  left: max(6vw, env(safe-area-inset-left));
  width: min(64rem, calc(100% - 12vw));
  pointer-events: none;
  text-align: left;
  text-wrap: balance;
}

.mm-intro--no-copy .mm-intro-copy {
  display: none;
}

.mm-intro-copy__rule {
  display: block;
  width: clamp(2.4rem, 6vw, 5.5rem);
  height: 1px;
  margin-bottom: clamp(.75rem, 1.7vw, 1.4rem);
  background: linear-gradient(90deg, var(--mm-intro-gold), rgba(216, 179, 106, .12));
  box-shadow: 0 0 12px rgba(216, 179, 106, .24);
  transform-origin: left;
}

.mm-intro-copy__clip {
  overflow: hidden;
  padding-block: .08em;
}

.mm-intro-copy__headline {
  max-width: 18ch;
  margin: 0;
  color: var(--mm-intro-ivory);
  font-family: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(2rem, 5.6vw, 6.5rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.035em;
  text-shadow: 0 2px 34px rgba(0, 0, 0, .82);
  transform-origin: bottom left;
}

.mm-intro-copy__detail {
  max-width: 44rem;
  margin: clamp(.72rem, 1.5vw, 1.2rem) 0 0;
  color: var(--mm-intro-muted);
  font-size: clamp(.86rem, 1.25vw, 1.15rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .015em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .9);
}

.mm-intro-copy.is-revealing .mm-intro-copy__rule {
  animation: mm-intro-rule-in 700ms cubic-bezier(.22, 1, .36, 1) both;
}

.mm-intro-copy.is-revealing .mm-intro-copy__headline {
  animation: mm-intro-headline-in 780ms cubic-bezier(.16, 1, .3, 1) both;
}

.mm-intro-copy.is-revealing .mm-intro-copy__detail {
  animation: mm-intro-detail-in 720ms 90ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes mm-intro-rule-in {
  from { opacity: 0; transform: scaleX(.1); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes mm-intro-headline-in {
  from { opacity: 0; filter: blur(12px); transform: translateY(108%) scale(.985); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes mm-intro-detail-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(.8rem); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.mm-video-intro__controls {
  z-index: 7;
  top: max(1rem, calc(env(safe-area-inset-top) + .6rem));
  right: max(1rem, calc(env(safe-area-inset-right) + .6rem));
}

.mm-video-intro__control {
  min-width: 44px;
  min-height: 44px;
  border-color: rgba(248, 244, 235, .2);
  color: rgba(248, 244, 235, .9);
  background: rgba(2, 5, 9, .58);
  box-shadow: 0 10px 36px rgba(0, 0, 0, .34);
}

.mm-video-intro__control:hover,
.mm-video-intro__control:focus-visible {
  border-color: rgba(216, 179, 106, .72);
  color: #fff;
  background: rgba(12, 13, 14, .76);
  box-shadow: 0 0 0 3px rgba(216, 179, 106, .16), 0 12px 38px rgba(0, 0, 0, .42);
}

.mm-video-intro__progress {
  z-index: 7;
  bottom: max(0px, env(safe-area-inset-bottom));
  height: 2px;
  background: rgba(248, 244, 235, .1);
}

.mm-video-intro__progress span {
  width: var(--intro-progress);
  background: linear-gradient(90deg, rgba(216, 179, 106, .58), var(--mm-intro-gold));
  box-shadow: 0 0 14px rgba(216, 179, 106, .58);
  transition: none;
}

.mm-video-intro.is-dismissing {
  transition-duration: 500ms;
}

@media (orientation: portrait) {
  .mm-video-intro::before {
    background:
      linear-gradient(180deg, rgba(0, 2, 5, .25) 0%, transparent 30%, rgba(0, 2, 5, .28) 54%, rgba(0, 2, 5, .94) 100%),
      radial-gradient(circle at 50% 37%, transparent 26%, rgba(0, 2, 5, .22) 62%, rgba(0, 2, 5, .72) 100%);
  }

  .mm-video-intro__video {
    align-self: start;
    height: 76%;
    margin-top: 9vh;
  }

  .mm-intro-copy {
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: max(10vh, calc(env(safe-area-inset-bottom) + 3.1rem));
    left: max(1.25rem, env(safe-area-inset-left));
    width: auto;
    text-align: center;
  }

  .mm-intro-copy__rule {
    margin-inline: auto;
    transform-origin: center;
  }

  .mm-intro-copy__headline,
  .mm-intro-copy__detail {
    margin-inline: auto;
  }

  .mm-intro-copy__headline {
    max-width: 15ch;
    font-size: clamp(2rem, 10.2vw, 4.6rem);
    line-height: .92;
    transform-origin: bottom center;
  }

  .mm-intro-copy__detail {
    max-width: 31rem;
    font-size: clamp(.82rem, 3.4vw, 1.05rem);
  }
}

@media (max-width: 560px) {
  .mm-video-intro__controls {
    top: max(.65rem, calc(env(safe-area-inset-top) + .45rem));
    right: max(.65rem, calc(env(safe-area-inset-right) + .45rem));
  }

  .mm-video-intro__control {
    padding: .58rem .72rem;
    font-size: .72rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .mm-video-intro__stage::after {
    box-shadow: inset 0 0 54px rgba(0, 2, 5, .7);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .mm-intro-copy {
    right: max(22vw, env(safe-area-inset-right));
    bottom: max(8vh, calc(env(safe-area-inset-bottom) + 1.25rem));
    left: max(4vw, env(safe-area-inset-left));
    width: auto;
  }

  .mm-intro-copy__rule {
    margin-bottom: .55rem;
  }

  .mm-intro-copy__headline {
    max-width: 18ch;
    font-size: clamp(1.55rem, 5vw, 3rem);
    line-height: .92;
  }

  .mm-intro-copy__detail {
    margin-top: .5rem;
    font-size: clamp(.72rem, 1.8vw, .92rem);
  }

  .mm-video-intro__control {
    min-height: 44px;
  }
}

@media (min-width: 1200px) and (pointer: coarse) {
  .mm-video-intro__control {
    min-height: 52px;
    padding-inline: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-video-intro,
  .mm-video-intro.is-dismissing {
    transition-duration: 80ms;
  }

  .mm-intro-copy.is-revealing .mm-intro-copy__rule,
  .mm-intro-copy.is-revealing .mm-intro-copy__headline,
  .mm-intro-copy.is-revealing .mm-intro-copy__detail {
    animation: none;
  }

  .mm-video-intro.is-reduced-motion .mm-video-intro__ambient {
    display: none;
  }

  .mm-video-intro.is-reduced-motion .mm-video-intro__video {
    filter: brightness(.68) saturate(.88);
  }
}

@media (forced-colors: active) {
  .mm-intro-copy__rule,
  .mm-video-intro__progress span {
    background: CanvasText;
  }

  .mm-video-intro__control {
    border: 1px solid ButtonText;
  }
}