/* Loquen pill — minimal embeddable styles. Pairs with loquen-pill.js. */

.loquen-pill {
  /* Solid, not a backdrop blur: a live blur behind a canvas that repaints every
     frame is the most expensive thing on the page. v3. */
  --loquen-glass: rgba(7, 10, 16, .86);
  --loquen-edge: rgba(255, 255, 255, .19);
  --loquen-text: rgba(255, 255, 255, .48);
  --loquen-text-new: rgba(255, 255, 255, .67);
  --loquen-text-flag: #ff3347;
  --loquen-amber: #ffb347;
  display: flex;
  justify-content: center;
  width: 100%;
}

.loquen-pill__capsule {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 760px;
  height: 102px;
  border: 1px solid var(--loquen-edge);
  border-radius: 51px;
  background: var(--loquen-glass);
  box-shadow:
    0 24px 65px rgba(0, 0, 0, .31),
    inset 0 1px rgba(255, 255, 255, .04),
    inset 0 -20px 40px rgba(0, 0, 0, .12);
  transition: opacity .12s linear;
  contain: paint;
}

.loquen-pill__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.loquen-pill__transcript {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 33.333%;
  max-width: 62%;
  transform: translate(-50%, -50%);
  color: var(--loquen-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  font-weight: 330;
  letter-spacing: -.025em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 7px rgba(0, 0, 0, .7);
  pointer-events: none;
}

.loquen-pill__word--new { color: var(--loquen-text-new); }
/* a sensitive word (entry.catch): red, and it flashes as it arrives */
.loquen-pill__word--flag { color: var(--loquen-text-flag); font-weight: 600; }
.loquen-pill__word--flag.loquen-pill__word--new { animation: loquen-pill-flag 420ms ease-out 2; }
@keyframes loquen-pill-flag { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .loquen-pill__word--flag.loquen-pill__word--new { animation: none; } }

/* idle resting label, e.g. "Private · on device" */
.loquen-pill__transcript--label {
  color: rgba(255, 255, 255, .38);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-weight: 400;
  letter-spacing: .01em;
}

.loquen-pill__phrase {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 84%;
  transform: translate(-50%, -50%);
  color: rgba(255, 179, 71, .74);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  font-weight: 460;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  text-shadow: 0 1px 7px rgba(0, 0, 0, .8);
  transition: opacity .18s ease-out;
  pointer-events: none;
}