/*
 * Adapted from “fresh-lizard-20” by kennyotsu on Uiverse.
 * Source: https://uiverse.io/kennyotsu/fresh-lizard-20
 * MIT License. Class names, typography and Vietnamese copy are adapted for
 * the Xóm nhỏ contact flow; see /third-party-notices.txt.
 */
.contact-sync-loader {
  --loader-bg: #111114;
  display: flex;
  align-items: center;
  width: min(340px, calc(100vw - 54px));
  height: 62px;
  padding: 11px 20px;
  border: 1px solid #ffffff12;
  border-radius: 22px;
  background: var(--loader-bg);
  color: #8b8b96;
  box-shadow: 0 18px 55px #0008, inset 0 1px #ffffff0c;
  font: 600 clamp(17px, 4.5vw, 21px)/40px 'Baloo 2', sans-serif;
  white-space: nowrap;
}
.contact-sync-loader p { flex: 0 0 auto; margin: 0; }
.contact-sync-words { position: relative; min-width: 0; height: 40px; overflow: hidden; }
.contact-sync-words::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(var(--loader-bg) 5%, transparent 28%, transparent 72%, var(--loader-bg) 95%);
}
.contact-sync-word {
  display: block;
  height: 40px;
  padding-left: 7px;
  color: #a996ff;
  text-overflow: ellipsis;
  overflow: hidden;
  animation: contact-uiverse-words 4s infinite cubic-bezier(.4, 0, .2, 1);
}
@keyframes contact-uiverse-words {
  10% { transform: translateY(-102%); }
  25% { transform: translateY(-100%); }
  35% { transform: translateY(-202%); }
  50% { transform: translateY(-200%); }
  60% { transform: translateY(-302%); }
  75% { transform: translateY(-300%); }
  85% { transform: translateY(-402%); }
  100% { transform: translateY(-400%); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-sync-loader { opacity: 1 !important; transform: none !important; }
  .contact-sync-word { animation: none; }
  .contact-sync-word:not(:first-child) { display: none; }
}