/* Timed home intro. Main width breakpoints: 1000px and 500px. */
.sv-intro {
  --sv-intro-logo-width: 230px;
  --sv-intro-sub-height: 7px;
  --sv-intro-gap: 30px;
  --sv-intro-padding: 32px;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sv-intro-gap);
  padding: max(var(--sv-intro-padding), env(safe-area-inset-top, 0px))
    max(var(--sv-intro-padding), env(safe-area-inset-right, 0px))
    max(var(--sv-intro-padding), env(safe-area-inset-bottom, 0px))
    max(var(--sv-intro-padding), env(safe-area-inset-left, 0px));
  background: var(--sv-bg);
  animation: svIntroFade 1.5s ease-in-out 5.5s forwards;
}
.sv-intro.is-complete { display: none; }
.sv-intro__logo,
.sv-intro__sub {
  flex-shrink: 0;
  max-width: 100%;
  line-height: 0;
  opacity: 0;
}
.sv-intro__logo {
  width: var(--sv-intro-logo-width);
  transform: translateY(18px);
  animation: svUp 2s ease-in-out forwards .5s;
}
.sv-intro__logo-image {
  display: block;
  width: 100%;
  height: auto;
}
.sv-intro__sub {
  /* The source subtitle has an 800:20 aspect ratio. */
  width: calc(var(--sv-intro-sub-height) * 800 / 20);
  font-size: 0;
  animation: svIntroSubtitleFade 1.8s ease-in-out forwards 2.7s;
}
.sv-intro__sub-image {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes svIntroFade {
  from { opacity: 1; visibility: visible; }
  to { opacity: 0; visibility: hidden; }
}
@keyframes svIntroSubtitleFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes svUp {
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1000px) {
  .sv-intro {
    --sv-intro-logo-width: 210px;
    --sv-intro-sub-height: 6.5px;
    --sv-intro-gap: 26px;
    --sv-intro-padding: 24px;
  }
}
@media (max-width: 500px) {
  .sv-intro {
    --sv-intro-logo-width: 180px;
    --sv-intro-sub-height: 6px;
    --sv-intro-gap: 22px;
    --sv-intro-padding: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sv-intro { animation-duration: .01s; }
  .sv-intro__logo,
  .sv-intro__sub {
    animation: none;
    opacity: 1;
    transform: none;
  }
}