@font-face {
  font-family: "Antonio";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local("Antonio Bold"),
    local("Antonio-Bold"),
    url("../../fonts/Antonio-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Permanent Park";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local("Permanent Park Alternative"),
    local("PermanentParkAlternative"),
    url("../../fonts/PermanentParkAlternative.ttf") format("truetype");
}

.wp-block-bmtg-be-surprised-hero,
.bmtg-be-surprised-hero {
  --bmtg-be-surprised-accent: #afca0b;
  --bmtg-be-surprised-banner-background: #ffffff;
  --bmtg-be-surprised-banner-color: #111111;
  --bmtg-be-surprised-font-display:
    "Antonio", var(--font-bold, Verdana, Geneva, Tahoma, sans-serif);
  --bmtg-be-surprised-font-brush:
    "Permanent Park", "Kaushan Script",
    var(--font-bold, Verdana, Geneva, Tahoma, sans-serif);
  --bmtg-be-surprised-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath transform='rotate(180 320 320)' d='M308.7 164.7C314.9 158.5 325.1 158.5 331.3 164.7L539.3 372.7C545.5 378.9 545.5 389.1 539.3 395.3C533.1 401.5 522.9 401.5 516.7 395.3L320 198.6L123.3 395.3C117.1 401.5 106.9 401.5 100.7 395.3C94.5 389.1 94.5 378.9 100.7 372.7L308.7 164.7z'/%3E%3C/svg%3E");
  --bmtg-be-surprised-bottom-height: clamp(9rem, 22vh, 17rem);
  --bmtg-be-surprised-frame-top: clamp(1.6rem, 5vh, 4.6rem);
  --bmtg-be-surprised-frame-inline: clamp(1.35rem, 7vw, 7.5rem);
  --bmtg-be-surprised-frame-bottom: calc(
    var(--bmtg-be-surprised-bottom-height) * 0.52
  );
  --bmtg-be-surprised-frame-stroke: clamp(2px, 0.22vw, 4px);
  --bmtg-be-surprised-footer-overlay-height: 3.7rem;
  --bmtg-be-surprised-logo-width: clamp(13rem, min(30vw, 33vh), 26rem);
  --bmtg-be-surprised-logo-break-inline: calc(
    var(--bmtg-be-surprised-logo-width) - clamp(2rem, 2.5vw, 3rem)
  );
  --bmtg-be-surprised-logo-break-block: calc(
    clamp(7.2rem, min(14vw, 16vh), 12rem) - 3rem
  );
  position: relative;
  display: grid;
  min-height: min(960px, 100vh);
  overflow: hidden;
  isolation: isolate;
  background: #142a28;
  color: #ffffff;
}

.bmtg-fullscreen-dark .bmtg-be-surprised-hero,
.bmtg-fullscreen-page[data-bmtg-color-scheme="dark"] .bmtg-be-surprised-hero,
.bmtg-be-surprised-hero.is-previewing-dark {
  --bmtg-be-surprised-banner-background: #0e141b;
  --bmtg-be-surprised-banner-color: #ffffff;
}

.bmtg-be-surprised-hero__media,
.bmtg-be-surprised-hero__overlay,
.bmtg-be-surprised-hero__frame {
  position: absolute;
  inset: 0;
}

.bmtg-be-surprised-hero__media {
  z-index: 0;
  background: #142a28;
}

.bmtg-be-surprised-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bmtg-be-surprised-object-position, 50% 50%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bmtg-be-surprised-hero.has-light-image .bmtg-be-surprised-hero__image--light {
  opacity: 1;
}

.bmtg-be-surprised-hero:not(.has-light-image).has-dark-image
  .bmtg-be-surprised-hero__image--dark,
.bmtg-fullscreen-dark
  .bmtg-be-surprised-hero.has-dark-image
  .bmtg-be-surprised-hero__image--dark,
.bmtg-fullscreen-page[data-bmtg-color-scheme="dark"]
  .bmtg-be-surprised-hero.has-dark-image
  .bmtg-be-surprised-hero__image--dark,
.bmtg-be-surprised-hero.is-previewing-dark.has-dark-image
  .bmtg-be-surprised-hero__image--dark {
  opacity: 1;
}

.bmtg-fullscreen-dark
  .bmtg-be-surprised-hero.has-dark-image
  .bmtg-be-surprised-hero__image--light,
.bmtg-fullscreen-page[data-bmtg-color-scheme="dark"]
  .bmtg-be-surprised-hero.has-dark-image
  .bmtg-be-surprised-hero__image--light,
.bmtg-be-surprised-hero.is-previewing-dark.has-dark-image
  .bmtg-be-surprised-hero__image--light {
  opacity: 0;
}

.bmtg-be-surprised-hero__overlay {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.34)),
    rgba(0, 20, 22, var(--bmtg-be-surprised-overlay-opacity, 0.46));
  pointer-events: none;
}

.bmtg-be-surprised-hero__frame {
  z-index: 2;
  inset: var(--bmtg-be-surprised-frame-top)
    var(--bmtg-be-surprised-frame-inline) var(--bmtg-be-surprised-frame-bottom);
  border-right: var(--bmtg-be-surprised-frame-stroke) solid
    rgba(255, 255, 255, 0.96);
  border-bottom: var(--bmtg-be-surprised-frame-stroke) solid
    rgba(255, 255, 255, 0.96);
  pointer-events: none;
}

.bmtg-be-surprised-hero__frame::before,
.bmtg-be-surprised-hero__frame::after {
  position: absolute;
  content: "";
  background: rgba(255, 255, 255, 0.96);
}

.bmtg-be-surprised-hero__frame::before {
  top: 0;
  right: 0;
  left: min(var(--bmtg-be-surprised-logo-break-inline), calc(100% - 4rem));
  height: var(--bmtg-be-surprised-frame-stroke);
}

.bmtg-be-surprised-hero__frame::after {
  top: min(var(--bmtg-be-surprised-logo-break-block), calc(100% - 4rem));
  bottom: 0;
  left: 0;
  width: var(--bmtg-be-surprised-frame-stroke);
}

.bmtg-be-surprised-hero__content {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  width: min(82rem, calc(100% - (var(--bmtg-be-surprised-frame-inline) * 2)));
  height: 100%;
  margin: 0 auto;
  padding-top: calc(
    var(--bmtg-be-surprised-frame-top) + clamp(0.7rem, 2vh, 2.1rem)
  );
  padding-bottom: calc(
    var(--bmtg-be-surprised-bottom-height) + clamp(0.8rem, 2vh, 2rem)
  );
  text-align: center;
  box-sizing: border-box;
}

.bmtg-be-surprised-hero__logo-link {
  position: absolute;
  z-index: 3;
  top: calc(var(--bmtg-be-surprised-frame-top) - clamp(0.3rem, 1vh, 0.9rem));
  left: calc(
    var(--bmtg-be-surprised-frame-inline) + clamp(0rem, 0.25vw, 0.3rem)
  );
  width: var(--bmtg-be-surprised-logo-width);
  max-width: 64%;
  filter: drop-shadow(0 0.25rem 0.55rem rgba(0, 0, 0, 0.34));
}

.bmtg-be-surprised-hero__logo-link:focus-visible {
  outline: 3px solid var(--bmtg-be-surprised-accent);
  outline-offset: 0.35rem;
}

.bmtg-be-surprised-hero__logo {
  display: block;
  width: 100%;
  height: auto;
}

.bmtg-be-surprised-hero__headline {
  display: grid;
  justify-items: center;
  align-self: center;
  margin: clamp(0.8rem, 2vh, 2rem) 0 0;
  color: #ffffff;
  text-shadow: 0 0.18rem 0.8rem rgba(0, 0, 0, 0.42);
}

.bmtg-be-surprised-hero__bottom-copy {
  display: grid;
  justify-items: center;
}

.bmtg-be-surprised-hero__headline--dark,
.bmtg-be-surprised-hero__bottom-copy--dark {
  display: none;
}

.bmtg-fullscreen-dark .bmtg-be-surprised-hero__headline--light,
.bmtg-fullscreen-page[data-bmtg-color-scheme="dark"]
  .bmtg-be-surprised-hero__headline--light,
.bmtg-be-surprised-hero.is-previewing-dark
  .bmtg-be-surprised-hero__headline--light,
.bmtg-fullscreen-dark .bmtg-be-surprised-hero__bottom-copy--light,
.bmtg-fullscreen-page[data-bmtg-color-scheme="dark"]
  .bmtg-be-surprised-hero__bottom-copy--light,
.bmtg-be-surprised-hero.is-previewing-dark
  .bmtg-be-surprised-hero__bottom-copy--light {
  display: none;
}

.bmtg-fullscreen-dark .bmtg-be-surprised-hero__headline--dark,
.bmtg-fullscreen-page[data-bmtg-color-scheme="dark"]
  .bmtg-be-surprised-hero__headline--dark,
.bmtg-be-surprised-hero.is-previewing-dark
  .bmtg-be-surprised-hero__headline--dark {
  display: grid;
}

.bmtg-fullscreen-dark .bmtg-be-surprised-hero__bottom-copy--dark,
.bmtg-fullscreen-page[data-bmtg-color-scheme="dark"]
  .bmtg-be-surprised-hero__bottom-copy--dark,
.bmtg-be-surprised-hero.is-previewing-dark
  .bmtg-be-surprised-hero__bottom-copy--dark {
  display: grid;
}

.bmtg-be-surprised-hero__headline-main,
.bmtg-be-surprised-hero__city-label,
.bmtg-be-surprised-hero__hashtag {
  font-family: var(--bmtg-be-surprised-font-display);
  font-weight: 700;
  text-transform: uppercase;
}

.bmtg-be-surprised-hero__headline-main {
  display: block;
  color: #ffffff;
  font-size: clamp(2.55rem, min(6.1vw, 8.2vh), 5.35rem);
  line-height: 0.98;
  letter-spacing: 0.035em;
}

.bmtg-be-surprised-hero__headline-brush {
  display: block;
  margin-top: clamp(0.4rem, 1vh, 1rem);
  color: var(--bmtg-be-surprised-accent);
  font-family: var(--bmtg-be-surprised-font-brush);
  font-weight: 400;
  font-size: clamp(3.75rem, min(9.35vw, 12.65vh), 8.3rem);
  line-height: 0.78;
  text-transform: none;
  transform: rotate(-2deg);
}

.bmtg-be-surprised-hero__city-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(0.9rem, 2vh, 1.8rem);
  padding: 0.28em 0.78em 0.4em;
  background: url("../../img/be-surprised/green-brush.png") center / 100% 100%
    no-repeat;
  color: #ffffff;
  font-size: clamp(1.7rem, min(4vw, 5.35vh), 3.9rem);
  line-height: 0.9;
  letter-spacing: 0.08em;
  text-shadow: none;
}

.bmtg-be-surprised-hero__bottom {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 4;
  display: grid;
  align-content: end;
  justify-items: center;
  height: var(--bmtg-be-surprised-bottom-height);
  padding: clamp(1.25rem, 3.5vh, 3rem) clamp(1rem, 4vw, 4rem)
    clamp(0.25rem, 0.9vh, 0.85rem);
  color: var(--bmtg-be-surprised-banner-color);
  text-align: center;
  isolation: isolate;
}

.bmtg-be-surprised-hero__bottom::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 100%;
  content: "";
  background-color: var(--bmtg-be-surprised-banner-background);
  -webkit-mask-image: url("../../img/be-surprised/be-surprised-banner-bottom.svg?v=2");
  mask-image: url("../../img/be-surprised/be-surprised-banner-bottom.svg?v=2");
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.bmtg-be-surprised-hero__hashtag,
.bmtg-be-surprised-hero__footer-icon {
  margin: 0;
  line-height: 1;
}

.bmtg-be-surprised-hero__hashtag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.06em;
  justify-content: center;
  font-size: clamp(1.55rem, min(4vw, 6vh), 4.2rem);
  letter-spacing: 0.018em;
}

.bmtg-be-surprised-hero__hashtag-accent {
  color: var(--bmtg-be-surprised-accent);
  font-family: var(--bmtg-be-surprised-font-brush);
  font-size: 1.25em;
  font-weight: 400;
  line-height: 0.72;
  letter-spacing: 0;
  text-transform: none;
  transform: translateY(0.02em) rotate(-2deg);
}

.bmtg-be-surprised-hero__footer-icon {
  display: block;
  width: clamp(1.7rem, min(3vw, 4.2vh), 2.85rem);
  aspect-ratio: 1;
  margin-top: clamp(0.45rem, 1vh, 0.9rem);
  background: currentColor;
  -webkit-mask: var(--bmtg-be-surprised-chevron-down) center / contain no-repeat;
  mask: var(--bmtg-be-surprised-chevron-down) center / contain no-repeat;
}

.bmtg-be-surprised-hero__placeholder {
  position: relative;
  z-index: 5;
  display: grid;
  align-items: start;
  width: min(44rem, calc(100% - 2rem));
  margin: clamp(5rem, 12vh, 9rem) auto auto;
  color: #111111;
}

@media screen and (min-width: 901px) and (max-width: 1223px) {
  .bmtg-be-surprised-hero__bottom {
    padding-bottom: calc(
      clamp(0.25rem, 0.9vh, 0.85rem) +
        var(--bmtg-be-surprised-footer-overlay-height) +
        env(safe-area-inset-bottom)
    );
  }

  .bmtg-be-surprised-hero__bottom::before {
    height: 116%;
  }
}

@media screen and (max-width: 900px) {
  .wp-block-bmtg-be-surprised-hero,
  .bmtg-be-surprised-hero {
    --bmtg-be-surprised-bottom-height: clamp(7.4rem, 19vh, 12rem);
    --bmtg-be-surprised-frame-inline: clamp(1rem, 5vw, 3rem);
    --bmtg-be-surprised-frame-top: clamp(1.3rem, 4vh, 2.8rem);
    --bmtg-be-surprised-logo-width: clamp(12rem, 41vw, 19rem);
    --bmtg-be-surprised-logo-break-inline: calc(
      var(--bmtg-be-surprised-logo-width) + clamp(1.25rem, 4vw, 3rem)
    );
    --bmtg-be-surprised-logo-break-block: calc(
      clamp(7.4rem, 16vw, 9.5rem) - 1.5rem
    );
  }

  .bmtg-be-surprised-hero__content {
    width: min(100% - (var(--bmtg-be-surprised-frame-inline) * 2), 48rem);
  }

  .bmtg-be-surprised-hero__logo-link {
    max-width: 76%;
  }

  .bmtg-be-surprised-hero__headline-main {
    font-size: clamp(2.6rem, 8.5vw, 5.2rem);
  }

  .bmtg-be-surprised-hero__headline-brush {
    font-size: clamp(3.7rem, 12.55vw, 7.75rem);
  }

  .bmtg-be-surprised-hero__bottom {
    padding-bottom: calc(
      clamp(0.25rem, 0.9vh, 0.85rem) + 5.4rem +
        env(safe-area-inset-bottom)
    );
  }

  .bmtg-be-surprised-hero__bottom::before {
    height: 150%;
  }
}

@media screen and (max-width: 560px) {
  .wp-block-bmtg-be-surprised-hero,
  .bmtg-be-surprised-hero {
    --bmtg-be-surprised-bottom-height: clamp(10.5rem, 24vh, 13.25rem);
    --bmtg-be-surprised-frame-bottom: calc(
      var(--bmtg-be-surprised-bottom-height) * 0.48
    );
    --bmtg-be-surprised-logo-width: clamp(11.5rem, 64vw, 16rem);
    --bmtg-be-surprised-logo-break-inline: calc(
      var(--bmtg-be-surprised-logo-width) + 1rem
    );
    --bmtg-be-surprised-logo-break-block: calc(
      clamp(7rem, 22vw, 8.7rem) - 1.5rem
    );
  }

  .bmtg-be-surprised-hero__content {
    align-content: start;
    padding-top: calc(var(--bmtg-be-surprised-frame-top) + 1rem);
    padding-bottom: calc(var(--bmtg-be-surprised-bottom-height) * 0.82);
  }

  .bmtg-be-surprised-hero__logo-link {
    max-width: 92%;
  }

  .bmtg-be-surprised-hero__headline {
    margin-top: clamp(1.8rem, 7vh, 4.2rem);
  }

  .bmtg-be-surprised-hero__headline-main {
    font-size: clamp(2.25rem, 9.5vw, 3.8rem);
    letter-spacing: 0.02em;
  }

  .bmtg-be-surprised-hero__headline-brush {
    font-size: clamp(3.4rem, 16.4vw, 6rem);
  }

  .bmtg-be-surprised-hero__city-label {
    font-size: clamp(1.7rem, 7.8vw, 3.15rem);
  }

  .bmtg-be-surprised-hero__hashtag {
    font-size: clamp(1.45rem, 8vw, 2.5rem);
  }

  .bmtg-be-surprised-hero__bottom {
    padding-bottom: calc(
      clamp(0.2rem, 0.7vh, 0.6rem) + 4.9rem + env(safe-area-inset-bottom)
    );
  }

  .bmtg-be-surprised-hero__bottom::before {
    height: 150%;
  }

  .bmtg-be-surprised-hero__footer-icon {
    width: clamp(1.45rem, 7vw, 2.25rem);
  }
}
