@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");

.promo-page {
  --promo-ink: 13, 7, 32;
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: rgb(var(--promo-ink));
  color: #f5f7fb;
}
.promo-page :is(a, button):focus-visible {
  outline: 3px solid #7cf4ea;
  outline-offset: 4px;
}
.promo-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px
    max(16px, env(safe-area-inset-left));
  background: #fff8ec;
}
.promo-brand {
  gap: 10px;
  min-height: 40px;
  color: var(--purple);
  font-size: 1.3rem;
  text-decoration: none;
}
.promo-brand .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  box-shadow: 0 3px 0 var(--yellow-deep);
  font-size: 1rem;
}
.promo-nav .lang-switch {
  background: rgba(var(--promo-ink), 0.7);
  border-color: rgba(255, 255, 255, 0.24);
}
.promo-nav .lang-btn {
  min-width: 38px;
  min-height: 34px;
  padding: 4px 8px;
  color: #e6ebf3;
  font-size: 0.68rem;
}
.promo-main {
  position: relative;
  flex: 1 0 auto;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left));
}
/* Scrim for copy laid over a full-bleed photo (desktop art, the test page).
   The mobile art paints above it on purpose: its own fade ends where the copy
   starts, and the scrim would dim the mascots. */
.promo-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--promo-ink), 0) 0,
    rgba(var(--promo-ink), 0) 42%,
    rgba(var(--promo-ink), 0.4) 58%,
    rgba(var(--promo-ink), 0.74) 72%,
    rgba(var(--promo-ink), 0.9) 86%,
    rgb(var(--promo-ink)) 100%
  );
}
.promo-art {
  position: relative;
  z-index: -1;
  display: block;
  flex: 1 1 auto;
  align-self: stretch;
  overflow: hidden;
  /* Anchor and minimum keep the portrait art's subject band (faces at 20-28%
     of its height, mascot faces down to 54%) inside the box at any viewport
     height; a lower anchor or a shorter box crops the heads first. */
  min-height: 89vw;
  margin: -10px calc(-1 * max(20px, env(safe-area-inset-right))) -8vw
    calc(-1 * max(20px, env(safe-area-inset-left)));
}
.promo-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--promo-ink), 0) 78%,
    rgba(var(--promo-ink), 0.6) 92%,
    rgb(var(--promo-ink)) 100%
  );
}
.promo-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}
.promo-photo {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url("/assets/hero/splash-mobile.webp") center 40% / cover no-repeat;
  opacity: 0.4;
}
.promo-logo {
  position: absolute;
  top: 10px;
  right: max(12px, env(safe-area-inset-right));
  height: 44px;
  width: auto;
  margin: 0;
  padding: 5px 8px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(var(--promo-ink), 0.35);
}
.promo-art ~ .promo-card {
  flex: none;
}
.promo-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 880px);
  margin: 0;
  padding: 0;
  text-align: center;
  text-shadow: 0 1px 12px rgba(var(--promo-ink), 0.8);
  animation: promo-fade 0.6s ease-out both;
}
/* Edge to edge, and sized so the long line fits the viewport: the gradient
   that paints it only covers the line's own box, so an overflowing glyph
   would render invisible. */
.promo-title {
  position: relative;
  margin: 0 calc(-1 * max(20px, env(safe-area-inset-right))) 16px
    calc(-1 * max(20px, env(safe-area-inset-left)));
  padding: 0.04em 0 0.3em;
  font-family: "Anton", var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 10.5vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-shadow: none;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 12px rgba(255, 228, 140, 0.8));
}
.promo-title::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: 0;
  height: 0.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 26' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffb82e'/%3E%3Cstop offset='1' stop-color='%23f27a0d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M4 15C60 9 120 7 180 8s120-4 214-3c4 0 5 4 2 7-66 4-136 3-206 6S60 23 8 21c-5 0-7-4-4-6z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
.promo-title-pre {
  display: block;
  font-size: 0.64em;
  color: #fff4d6;
}
.promo-title-main {
  display: inline-block;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffd43a 0%, #ffb424 50%, #f0870f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.promo-description {
  color: #e6ebf3;
  font-size: clamp(1rem, 0.94rem + 0.5vw, 1.2rem);
  line-height: 1.4;
  margin: auto auto 10px;
  max-width: 32rem;
}
.promo-dates {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 10px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(var(--promo-ink), 0.6);
  color: #e6ebf3;
  font-size: 0.8rem;
  line-height: 1.35;
  text-wrap: balance;
  text-shadow: none;
}
.promo-cta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(100%, 340px);
  min-height: 56px;
  margin-inline: auto;
  padding: 10px 28px;
  justify-content: center;
  align-items: center;
  text-shadow: none;
}
.promo-cta-main {
  font-size: 1.05rem;
  white-space: nowrap;
}
.promo-cta-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.25;
  opacity: 0.85;
}
.promo-cta[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.7;
}
.promo-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0 auto;
  color: #7cf4ea;
  font-weight: 600;
  text-underline-offset: 3px;
}
.promo-signin:active {
  opacity: 0.7;
}
.promo-footnote {
  margin: 0 auto;
  max-width: 22rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #d0d8e4;
}
.promo-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-top: 0;
  background: rgb(var(--promo-ink));
  padding: 2px max(20px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  color: #abb4c6;
  font-size: 0.75rem;
  white-space: nowrap;
}
.promo-footer div {
  display: flex;
  gap: 18px;
}
.promo-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: inherit;
}
.promo-footer a:active {
  opacity: 0.7;
}
@keyframes promo-fade {
  from {
    opacity: 0;
  }
}
@keyframes promo-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .promo-card {
    animation-name: promo-rise;
  }
}
/* Desktop: the art already carries the headline at its top right, so the HTML
   headline is kept for assistive tech only and the copy block sits at the
   bottom of the right column, the partner logo in the corner under it. The art
   is anchored top right so neither the headline nor the characters' heads
   crop; a wide viewport loses road at the bottom instead. */
@media (min-width: 860px) {
  .promo-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
    grid-template-rows: minmax(0, 1fr) auto;
    padding-top: 0;
    padding-bottom: 16px;
  }
  .promo-main::before {
    background:
      linear-gradient(
        180deg,
        rgba(var(--promo-ink), 0) 0,
        rgba(var(--promo-ink), 0) 36%,
        rgba(var(--promo-ink), 0.3) 52%,
        rgba(var(--promo-ink), 0.66) 72%,
        rgba(var(--promo-ink), 0.9) 100%
      ),
      radial-gradient(
        ellipse 460px 340px at 77% 74%,
        rgba(var(--promo-ink), 0.55) 0,
        rgba(var(--promo-ink), 0.55) 45%,
        rgba(var(--promo-ink), 0) 100%
      );
  }
  .promo-art {
    position: absolute;
    z-index: -2;
    inset: 0;
    flex: none;
    align-self: auto;
    min-height: 0;
    margin: 0;
  }
  .promo-art::after {
    content: none;
  }
  .promo-art img {
    object-position: 100% 0;
  }
  .promo-photo {
    background-image: url("/assets/hero/splash-desktop.webp");
    background-position: center;
  }
  .promo-nav {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-right: max(40px, env(safe-area-inset-right));
    padding-bottom: 10px;
    padding-left: max(40px, env(safe-area-inset-left));
  }
  .promo-brand {
    gap: 8px;
    min-height: 36px;
    font-size: 1.05rem;
  }
  .promo-brand .brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 0.85rem;
  }
  .promo-footer {
    padding-right: max(40px, env(safe-area-inset-right));
    padding-left: max(40px, env(safe-area-inset-left));
  }
  .promo-logo {
    position: static;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    height: clamp(64px, 11vh, 110px);
    margin: 12px calc(max(40px, env(safe-area-inset-right)) - 20px) 0 0;
    padding: 8px 12px;
    border-radius: 14px;
  }
  .promo-card {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: center;
    flex: none;
    width: min(100%, 520px);
    padding-top: 0;
  }
  .promo-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    filter: none;
  }
  .promo-title::after {
    content: none;
  }
  .promo-description {
    margin-top: 0;
    margin-bottom: 14px;
  }
  .promo-dates {
    margin-bottom: 16px;
    font-size: 0.85rem;
  }
  .promo-signin {
    margin-top: 2px;
  }
  .promo-footnote {
    margin-top: 4px;
  }
}