@font-face {
  font-family: "Cabazon";
  src: url("./fonts/Cabazon.woff2") format("woff2");
  font-display: swap;
}

:root {
  --lilac: #cca7d4;
  --text: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.widget {
  display: grid;
  gap: 12px;
  padding: 16px;
  justify-items: start;
}

.label {
  position: relative;
  z-index: 2;
  margin-left: .8em;
  color: var(--lilac);
  font-family: "Cabazon", Georgia, serif;
  font-size: clamp(32px, 6vw, 80px);
  line-height: 1;
  -webkit-text-stroke: 10px white;
  paint-order: stroke fill;
  animation: breathe 4s ease-in-out infinite;
}

.pill {
  display: inline-block;
  margin-top: -1.5em;
  padding: 10px 24px;
  overflow: hidden;
  background: var(--lilac);
  border-radius: 9999px;
}

.pill:has(.name:empty) {
  visibility: hidden;
}

.name {
  display: inline-block;
  color: var(--text);
  font-family: "Cabazon", Georgia, serif;
  font-size: clamp(36px, 9vw, 140px);
  line-height: 1;
  white-space: nowrap;
}

.name.is-visible { animation: follower-in 650ms cubic-bezier(.2,.8,.2,1); }

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes follower-in {
  0% { opacity: 0; transform: translateY(.18em) scale(.96); }
  70% { opacity: 1; transform: translateY(-.03em) scale(1.02); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .label, .name.is-visible { animation: none; }
}