/* The original emblem, assembled from its individual PDF vector paths. */
.intro-content {
  width: 100%;
  padding: 30px 20px;
}

.intro-kicker {
  display: block;
  margin-bottom: 32px;
  color: #cbb9db;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.2px;
  animation: intro-kicker-in 700ms 250ms both;
}

.intro-stage {
  position: relative;
  width: min(66vw, 340px, 42svh);
  aspect-ratio: 562.707 / 571.835;
  margin: 0 auto;
  isolation: isolate;
}

.intro-logo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.intro-logo-assembly {
  transform-box: fill-box;
  transform-origin: center;
  animation: assembly-settle 800ms 2900ms both;
}

.intro-piece {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    toy-arrive 1600ms var(--delay) cubic-bezier(.22, .8, .22, 1) both,
    toy-unify 1100ms 2500ms both;
}

.toy-motion,
.toy-wheel {
  transform-box: fill-box;
  transform-origin: center;
}

.motion-bounce {
  animation: toy-bounce 1600ms var(--delay) both;
}

.motion-gear {
  animation: gear-turn 2600ms var(--delay) cubic-bezier(.15, .55, .2, 1) both;
}

.toy-small-gear .motion-gear {
  animation-name: gear-counter-turn;
}

.motion-pinwheel {
  animation: pinwheel-turn 2700ms var(--delay) cubic-bezier(.1, .7, .2, 1) both;
}

.motion-bloom {
  animation: flower-bloom 1500ms var(--delay) cubic-bezier(.34, 1.3, .48, 1) both;
}

.motion-drive {
  animation: car-suspension 1600ms var(--delay) both;
}

.toy-wheel {
  animation: wheel-turn 1900ms var(--delay) cubic-bezier(.1, .7, .3, 1) both;
}

.motion-star {
  animation: star-twinkle 2000ms var(--delay) both;
}

.motion-key {
  animation: key-wind 1600ms var(--delay) both;
}

.intro-flourish {
  animation-duration: 1250ms, 1100ms;
}

.assembly-ring {
  position: absolute;
  inset: -5%;
  border: 1px solid #cdb6df;
  border-radius: 50%;
  opacity: 0;
  animation: assembly-ring 1100ms 2850ms both;
}

.intro-content .intro-tagline {
  margin-top: 30px;
  animation: intro-text 850ms 2450ms both;
}

.intro-content .intro-line {
  height: 2px;
  margin-top: 22px;
  animation: assembly-progress 3900ms 200ms cubic-bezier(.25, .1, .2, 1) both;
}

.intro-orbit {
  animation-duration: 3600ms;
}

@keyframes toy-arrive {
  0% {
    opacity: 0;
    transform: translate(var(--from-x), var(--from-y)) rotate(var(--turn)) scale(.5);
  }
  12% { opacity: 1; }
  76% { transform: translate(0, -5px) rotate(-2deg) scale(1.025); }
  90% { transform: translate(0, 2px) rotate(1deg) scale(.99); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes toy-unify {
  0%, 15% { color: var(--piece-color); }
  100% { color: #ffffff; }
}

@keyframes toy-bounce {
  0%, 45% { transform: scale(.88, 1.08); }
  64% { transform: scale(1.12, .88); }
  80% { transform: scale(.97, 1.03); }
  100% { transform: scale(1); }
}

@keyframes gear-turn {
  from { transform: rotate(-280deg); }
  to { transform: rotate(0); }
}

@keyframes gear-counter-turn {
  from { transform: rotate(280deg); }
  to { transform: rotate(0); }
}

@keyframes pinwheel-turn {
  from { transform: rotate(-540deg) scale(.6); }
  to { transform: rotate(0) scale(1); }
}

@keyframes flower-bloom {
  0% { transform: scale(.05) rotate(-60deg); }
  65% { transform: scale(1.15) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes car-suspension {
  0%, 20% { transform: translateY(0) rotate(4deg); }
  38% { transform: translateY(-10px) rotate(-4deg); }
  54% { transform: translateY(2px) rotate(2deg); }
  68% { transform: translateY(-4px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes wheel-turn {
  from { transform: rotate(430deg); }
  to { transform: rotate(0); }
}

@keyframes star-twinkle {
  0% { transform: rotate(-90deg) scale(.15); }
  45% { transform: rotate(15deg) scale(1.35); }
  70% { transform: rotate(-8deg) scale(.9); }
  100% { transform: rotate(0) scale(1); }
}

@keyframes key-wind {
  0% { transform: rotate(-70deg); }
  45% { transform: rotate(16deg); }
  70% { transform: rotate(-12deg); }
  100% { transform: rotate(0); }
}

@keyframes assembly-settle {
  0% { transform: scale(1); }
  35% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@keyframes assembly-ring {
  0% { opacity: 0; transform: scale(.92); }
  15% { opacity: .5; }
  100% { opacity: 0; transform: scale(1.4); }
}

@keyframes assembly-progress {
  0% { width: 0; opacity: .3; }
  75% { width: 95px; opacity: .7; }
  100% { width: 120px; opacity: 1; }
}

@keyframes intro-kicker-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .intro-kicker { font-size: 8px; letter-spacing: 1.7px; margin-bottom: 35px; }
  .intro-content .intro-tagline { font-size: 23px; margin-top: 28px; }
}

@media (max-height: 580px) {
  .intro-kicker { margin-bottom: 15px; }
  .intro-content .intro-tagline { margin-top: 15px; font-size: 20px; }
  .intro-content .intro-line { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-piece { color: #ffffff; }
  .intro-logo-assembly, .intro-piece, .toy-motion, .toy-wheel { transform: none; }
  .intro-content .intro-line { width: 120px; }
  .intro-kicker, .intro-content .intro-tagline { opacity: 1; }
  .assembly-ring { display: none; }
}