/* Runtime presentation for the approved V Flow motion. Timing is generated separately. */
.vflow-motion {
  position: relative;
  width: 128px;
  height: 128px;
  flex: none;
  pointer-events: none;
}
.vflow-logo-position,
.vflow-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vflow-logo {
  object-fit: contain;
}
.vflow-dot {
  position: absolute;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--dot-color);
  transform: translate(-50%, -50%);
  opacity: 0;
}
.vflow-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60.833333%;
  height: 60.833333%;
  border: 1px solid #1dcafd;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.vflow-motion.is-playing * {
  animation-duration: var(--motion-duration);
  animation-timing-function: cubic-bezier(0.333333, 1, 0.666667, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.vflow-motion.is-playing .vflow-logo-position {
  animation-name: vflow-rise;
}
.vflow-motion.is-playing .vflow-logo {
  animation-name: vflow-scale, vflow-appear;
}
.vflow-motion.is-playing .vflow-dot-0 {
  animation-name: vflow-dot-0, vflow-dot-opacity;
}
.vflow-motion.is-playing .vflow-dot-1 {
  animation-name: vflow-dot-1, vflow-dot-opacity;
}
.vflow-motion.is-playing .vflow-dot-2 {
  animation-name: vflow-dot-2, vflow-dot-opacity;
}
.vflow-motion.is-playing .vflow-pulse {
  animation-name: vflow-pulse-size, vflow-pulse-opacity;
}
.hero-brand {
  display: flex;
  align-items: center;
  gap: 0;
  margin: -35px 0 8px -32px;
}
.hero-brand p {
  color: var(--primary-light);
  font-size: 13px;
  letter-spacing: 0.02em;
}
@media (prefers-reduced-motion: reduce) {
  .vflow-motion.is-playing * {
    animation: none !important;
  }
}