/* A brief brand reveal for every homepage. The existing wordmark remains the final frame. */
.li-logo-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background: #111927;
  color: #f8fafc;
  animation: li-intro-exit .35s 1.15s both;
}

.li-logo-intro::before {
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle at 50% 47%, rgba(50, 83, 122, .24), transparent 42%);
  animation: li-intro-light 1.12s both;
}

.li-logo-intro__content {
  position: relative;
  width: min(55vw, 400px);
  text-align: center;
}

.li-logo-intro__wordmark {
  position: relative;
  width: 100%;
  aspect-ratio: 1010 / 226;
}

.li-logo-intro__wordmark img {
  display: block;
  width: 100%;
  height: auto;
  animation: li-intro-unfold .54s .18s both;
}

.li-logo-intro__mark {
  position: absolute;
  top: 9%;
  left: 38.35%;
  z-index: 1;
  width: 2.15%;
  height: 61%;
  border-radius: 8px 2px 7px 2px;
  background: #ee3448;
  box-shadow: 0 0 34px rgba(232, 52, 71, .28);
  transform-origin: center;
  animation: li-intro-mark-in .26s both, li-intro-mark-out .14s .66s forwards;
}

@keyframes li-intro-mark-in {
  from { opacity: 0; transform: translateY(15px) scaleY(.15); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes li-intro-mark-out { to { opacity: 0; } }
@keyframes li-intro-unfold {
  from { opacity: .6; clip-path: inset(0 60.6% 0 39.4%); transform: scale(.985); }
  to { opacity: 1; clip-path: inset(0); transform: scale(1); }
}
@keyframes li-intro-light {
  from { opacity: .25; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes li-intro-exit {
  0% { opacity: 1; visibility: visible; }
  99% { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* The globe and the copy take over as the logo opens into the page. */
body.li-home-intro-page section.li-home-hero h1 { animation-delay: .95s; }
body.li-home-intro-page section.li-home-hero .lh-description { animation-delay: 1.05s; }
body.li-home-intro-page section.li-home-hero .lh-actions { animation-delay: 1.15s; }
body.li-home-intro-page section.li-home-hero .lh-globe { animation-delay: .85s; }

@media (max-width: 700px) {
  .li-logo-intro__content { width: min(63vw, 320px); }
}

@media (prefers-reduced-motion: reduce) {
  .li-logo-intro { display: none; }
  body.li-home-intro-page section.li-home-hero :is(h1, .lh-description, .lh-actions, .lh-globe) { animation: none; }
}