/* The contour and blue accent connect the three one-shot entrances. */
.automotive-world .kinetic-band .band-outline {
  color: #fff;
  -webkit-text-stroke: 0;
  letter-spacing: -.015em;
}
.automotive-world .hero h1 .title-line {
  overflow: hidden;
  padding: .12em 0;
  margin: -.12em 0;
}
.automotive-world .clarity-entrance > span {
  padding: .12em 0;
  margin: -.12em 0;
}
.automotive-world .personal-photo {
  overflow: hidden;
  border-radius: 22px 22px 22px 4px;
  clip-path: polygon(0 0, 68% 0, 73% 4%, 100% 4%, 100% 100%, 0 100%);
}
.automotive-world .site-header {
  border-top-color: rgba(255,255,255,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px #0002;
}
.automotive-world .button {
  transition: transform 160ms ease-out, background-color 180ms ease-out, box-shadow 180ms ease-out;
}
.automotive-world .button:active { transform: translateY(1px) scale(.985); }
.automotive-world .drive-stage:before {
  opacity: 0;
  transition: opacity 320ms ease-out;
}
.automotive-world .drive-stage.light-active:before { opacity: 1; }
@keyframes konrad-title {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}
@keyframes konrad-image {
  from { transform: scale(1.035) translateX(10px); }
  to { transform: scale(1) translateX(0); }
}
@keyframes konrad-line {
  from { clip-path: inset(100% 0 0); transform: translateY(16px); }
  to { clip-path: inset(0); transform: translateY(0); }
}
@keyframes konrad-accent {
  from { color: #101820; }
  to { color: #174ce7; }
}
@keyframes konrad-portrait {
  from { opacity: .55; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes konrad-touch-light {
  0% { opacity: 0; transform: translate(-85%, -50%); }
  45% { opacity: .85; }
  100% { opacity: 0; transform: translate(-15%, -50%); }
}
@keyframes konrad-menu {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .automotive-world .motion-ready .title-line > span {
    animation: konrad-title 720ms cubic-bezier(.16,1,.3,1) both;
  }
  .automotive-world .motion-ready .outlined > span { animation-delay: 110ms; }
  .automotive-world .hero-photo > img {
    animation: konrad-image 1200ms cubic-bezier(.16,1,.3,1) both;
  }
  .automotive-world .clarity-entrance.has-entered > span {
    animation: konrad-line 720ms cubic-bezier(.16,1,.3,1) both;
  }
  .automotive-world .clarity-entrance.has-entered > span + span {
    animation: konrad-line 720ms 140ms cubic-bezier(.16,1,.3,1) both,
      konrad-accent 500ms 700ms ease-out both;
  }
  .automotive-world .personal-story.has-entered .personal-photo {
    animation: konrad-portrait 800ms cubic-bezier(.16,1,.3,1) both;
  }
  .automotive-world #navigation.is-open { animation: konrad-menu 220ms ease-out both; }
}
@media (max-width: 800px) {
  .automotive-world .personal-photo { border-radius: 16px 16px 16px 4px; }
  .automotive-world .drive-stage:before {
    left: 68%; top: 60%; width: 420px; height: 360px;
    transform: translate(-50%, -50%);
  }
}
@media (hover: none), (pointer: coarse), (max-width: 800px) {
  @media (prefers-reduced-motion: no-preference) {
    .automotive-world .drive-stage.has-entered:before {
      animation: konrad-touch-light 1600ms 150ms ease-in-out both;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .automotive-world .hero-photo > img,
  .automotive-world .clarity-entrance > span,
  .automotive-world .personal-photo,
  .automotive-world .personal-copy { animation: none; transform: none; clip-path: none; }
  .automotive-world .drive-stage:before { display: none; }
}