/* Opening typography and motion copied from card-view's start-experience.css.
   Only the exit differs: go to Search, not the onboarding demonstration. */
html.brand-opening, html.brand-opening body { background: #fff; }
html.brand-opening body { overflow: hidden; }
.brand-intro {
  --start-reveal-ease: cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  inset: 0;
  z-index: 140;
  background: #fff;
  color: #11100f;
  overflow: hidden;
  opacity: 1;
  transition: opacity 400ms ease;
}
.brand-intro.is-leaving { opacity: 0; }
.brand-intro.is-resetting, .brand-intro.is-resetting * { transition: none !important; animation: none !important; }
.brand-intro .start-brand-position { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); }
.brand-intro .start-brand-title {
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 32px);
  font-family: var(--serif, Didot, "Bodoni MT", "Times New Roman", serif);
  font-size: clamp(26px, 9.2vw, 58px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.045em;
  text-align: center;
}
.brand-intro .start-line { display: block; white-space: nowrap; }
.brand-intro .start-second { margin-top: .48em; }
.brand-intro .start-word { display: inline-block; opacity: 0; transform: translateY(15px); transition: opacity 800ms var(--start-reveal-ease), transform 800ms var(--start-reveal-ease); }
.brand-intro .start-word.is-visible { opacity: 1; transform: translateY(0); }
.brand-intro .start-space { white-space: pre; }
.brand-intro .start-wordmark { display: inline-block; transition: letter-spacing 420ms ease; }
.brand-intro.is-branded .start-wordmark { letter-spacing: -.065em; }
.brand-intro .start-brand-gap { display: inline-block; width: .22em; overflow: hidden; vertical-align: bottom; transition: width 420ms ease; white-space: pre; }
.brand-intro .start-pink { color: #11100f; transition: color 400ms ease-in-out; }
.brand-intro.is-branded .start-brand-gap { width: 0; }
.brand-intro.is-branded .start-pink { color: #e93e6b; }
.brand-intro.is-emphasizing .start-wordmark { animation: start-brand-emphasis 480ms cubic-bezier(.22,.8,.25,1) both; }
@keyframes start-brand-emphasis { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-5px) scale(1.025); } }
@media (prefers-reduced-motion: reduce) {
  .brand-intro, .brand-intro .start-brand-gap, .brand-intro .start-pink, .brand-intro .start-wordmark, .brand-intro .start-word { transition: none; }
  .brand-intro.is-emphasizing .start-wordmark { animation: none; }
}