/* A/B poster: big letterforms, followed by a short product reveal. */
.taste-test.campaign-banner {
  --banner-height: clamp(460px, 36vw, 650px);
  height: var(--banner-height); min-height: 0; aspect-ratio: auto;
  display: block; padding: 0; overflow: clip;
}
.campaign-banner .banner-brand { top: 22px; z-index: 8; font-size: 10px; pointer-events: none; }
.campaign-banner .burger-choice {
  position: absolute; top: 0; bottom: 0; width: 42%; height: 100%;
  min-height: 0; padding: 0; margin: 0; display: block; z-index: 2;
  transform: none; transition: opacity .22s ease; isolation: isolate;
}
.campaign-banner .banner-burger-left { left: 0; }
.campaign-banner .banner-burger-right { right: 0; }
.campaign-banner .burger-choice .choice-letter {
  position: absolute; inset: auto; left: 50%; top: 50%;
  width: auto; height: auto; margin: 0; display: block;
  font-family: var(--display); font-size: calc(var(--banner-height) * 1.72);
  line-height: .8; letter-spacing: -.04em; border: 0; background: none;
  transform: translate(-50%, -50%); color: var(--cream); z-index: 0;
  transition: opacity .2s ease;
}
.campaign-banner .burger-choice img {
  position: absolute; z-index: 1; left: 50%; top: 62%;
  width: 86%; max-width: 440px; height: auto; margin: 0;
  transform: translate(-50%, -50%) rotate(-8deg);
  filter: drop-shadow(0 21px 12px #123c2c50);
  transition: transform .35s cubic-bezier(.2, 1.8, .5, 1);
}
.campaign-banner .banner-burger-right img { transform: translate(-50%, -50%) rotate(8deg); }
.campaign-banner .burger-choice:hover { transform: none; }
.campaign-banner .burger-choice:hover img { transform: translate(-50%, calc(-50% - 12px)) rotate(0deg) scale(1.04); }
.campaign-banner .burger-choice:focus-visible { outline: 3px dashed var(--brown); outline-offset: -12px; }
.campaign-banner .banner-center {
  position: absolute; inset: 0; padding: 0; min-height: 0;
  display: block; z-index: 5; pointer-events: none;
}
.campaign-banner .banner-prompt {
  position: absolute; left: 50%; top: 44%; width: 37%;
  transform: translate(-50%, -50%); color: var(--brown);
  transition: opacity .2s, translate .25s;
}
.campaign-banner .banner-prompt h3 { font-size: clamp(30px, 3.4vw, 65px); line-height: 1; }
.campaign-banner .banner-hint { margin-top: 18px; font-size: 11px; }
.campaign-banner.is-playing .burger-choice { opacity: 0; pointer-events: none; }
.campaign-banner.is-playing .banner-prompt { opacity: 0; translate: 0 -12px; }
.banner-actors { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.banner-actor {
  position: absolute; left: 50%; top: 56%; width: var(--actor-width, 29%);
  transform: translate(-50%, -50%); transform-origin: center;
}
.banner-actor img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 13px #123c2c55); }
.banner-suspense {
  position: absolute; top: 16%; left: 0; width: 100%; z-index: 6; text-align: center;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .2s, transform .3s;
}
.banner-suspense .display { font-size: clamp(44px, 5.3vw, 90px); }
.banner-suspense > span { display: block; margin-top: 10px; font-size: 12px; color: var(--brown); }
.campaign-banner[data-banner-state="suspense"] .banner-suspense { opacity: 1; transform: none; }
.campaign-banner .test-answer { position: absolute; inset: 0; padding: 0; pointer-events: none; }
.campaign-banner.is-answered .test-answer { display: block; }
.campaign-banner .test-answer .answer-lockup {
  position: absolute; top: 8%; left: 0; width: 100%; gap: 8px; margin: 0; color: var(--cream);
}
.campaign-banner .answer-title { font-size: clamp(60px, 7.2vw, 128px); }
.campaign-banner .answer-subtitle { font-size: clamp(28px, 2.7vw, 48px); }
.campaign-banner .test-answer > p:not(.display) {
  position: absolute; left: 50%; bottom: 93px; width: 86%; max-width: 430px;
  transform: translateX(-50%); margin: 0; font-size: 13px; line-height: 1.4;
  animation: none;
}
.campaign-banner .test-answer .banner-cta {
  position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%);
  margin: 0; padding: 12px 24px; font-size: 12px; pointer-events: auto; animation: none;
}
.campaign-banner .test-answer .reset-test {
  position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
  margin: 0; padding: 4px 0; font-size: 10px; pointer-events: auto;
}
.campaign-banner.is-answered .test-answer > p:not(.display),
.campaign-banner.is-answered .test-answer > .banner-cta { animation: none; }
.campaign-banner .banner-nojs { position: absolute; left: 50%; top: 75%; width: 80%; transform: translateX(-50%); }
.fallback-phone { box-shadow: 16px 28px 30px #003d2c60, inset 0 0 0 1px #282a2d; }
@media (max-width: 1100px) and (min-width: 741px) {
  .campaign-banner .banner-prompt { width: 35%; }
  .campaign-banner .banner-prompt h3 { font-size: 3.8vw; }
  .campaign-banner .banner-hint { font-size: 9px; }
  .campaign-banner .answer-title { font-size: 8vw; }
}
@media (max-width: 740px) {
  .taste-test.campaign-banner { --banner-height: clamp(500px, 138vw, 650px); height: var(--banner-height); }
  .campaign-banner .banner-brand { top: 20px; font-size: 8px; }
  .campaign-banner .burger-choice { width: 50%; height: 70%; top: auto; bottom: 2%; }
  .campaign-banner .burger-choice .choice-letter {
    font-size: 99vw; line-height: .8; top: 46%; letter-spacing: -.04em;
  }
  .campaign-banner .burger-choice img { width: 114%; top: 58%; max-width: none; }
  .campaign-banner .banner-prompt { top: 20%; width: 88%; }
  .campaign-banner .banner-prompt h3 { font-size: clamp(30px, 8.7vw, 55px); }
  .campaign-banner .banner-hint { font-size: 10px; margin-top: 14px; }
  .campaign-banner .test-answer .answer-lockup { top: 12%; gap: 7px; }
  .campaign-banner .answer-title { font-size: clamp(40px, 12.4vw, 78px); }
  .campaign-banner .answer-subtitle { font-size: clamp(26px, 7.6vw, 45px); }
  .campaign-banner .test-answer > p:not(.display) { bottom: 123px; font-size: 11px; max-width: 270px; }
  .campaign-banner .test-answer .banner-cta { bottom: 62px; font-size: 11px; padding: 12px 22px; white-space: nowrap; }
  .campaign-banner .test-answer .reset-test { bottom: 28px; font-size: 10px; }
  .banner-suspense { top: 16%; }
  .banner-suspense .display { font-size: 13vw; }
  .banner-suspense > span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .campaign-banner .burger-choice:hover img { transform: translate(-50%, -50%) rotate(-8deg); }
  .campaign-banner .banner-burger-right:hover img { transform: translate(-50%, -50%) rotate(8deg); }
}