/* ============================================================
   stickerbell — the ring, as a UI component
   The visitor's "Ringing…" state (frontend/landing/), and any
   loading state that means "your ring is going through".

   Markup:   <span class="sb-ring" role="img" aria-label="Ringing"><span class="sb-ring__dot"></span></span>
   Colour:   inherits --brand-color (the doorbell owner's colour on
             the visitor page); falls back to stickerbell red.
   Size:     set --sb-dot on .sb-ring (default 26px); everything
             else scales from it.
   Motion:   loops while present; static under reduced motion.
   ============================================================ */
.sb-ring {
  --sb-dot: 26px;
  --sb-color: var(--brand-color, #BE0126);
  position: relative; display: inline-block;
  width: calc(var(--sb-dot) * 4.6); height: calc(var(--sb-dot) * 3.5);
}
.sb-ring__dot {
  position: absolute; left: 50%; top: 58%;
  width: var(--sb-dot); height: var(--sb-dot); margin-left: calc(var(--sb-dot) / -2);
  border-radius: 50%; background: var(--sb-color); color: var(--sb-color);
  transform-origin: 50% 100%;
  animation: sb-hop 2.6s infinite;
}
.sb-ring__dot::before, .sb-ring__dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: calc(var(--sb-dot) * .17) solid transparent;
  border-left-color: currentColor; border-right-color: currentColor;
  opacity: 0; pointer-events: none;
}
.sb-ring__dot::before { width: calc(var(--sb-dot) * 2.3); height: calc(var(--sb-dot) * 2.3); margin: calc(var(--sb-dot) * -1.15) 0 0 calc(var(--sb-dot) * -1.15); animation: sb-ring1 2.6s infinite; }
.sb-ring__dot::after  { width: calc(var(--sb-dot) * 3.6); height: calc(var(--sb-dot) * 3.6); margin: calc(var(--sb-dot) * -1.8) 0 0 calc(var(--sb-dot) * -1.8); animation: sb-ring2 2.6s infinite; }

@keyframes sb-hop {
  0%, 36% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(.2, .75, .35, 1); }
  54%     { transform: translateY(calc(var(--sb-dot) * -1.7)) scale(.94, 1.07); animation-timing-function: cubic-bezier(.65, 0, .9, .45); }
  66%     { transform: translateY(0) scale(1.3, .7); animation-timing-function: ease-out; }
  74%     { transform: translateY(calc(var(--sb-dot) * -.25)) scale(.96, 1.04); animation-timing-function: ease-in; }
  82%, 100% { transform: translateY(0) scale(1, 1); }
}
@keyframes sb-ring1 { 0%, 65% { opacity: 0; transform: scale(.55); } 69% { opacity: .95; transform: scale(.75); } 90%, 100% { opacity: 0; transform: scale(1.45); } }
@keyframes sb-ring2 { 0%, 68% { opacity: 0; transform: scale(.55); } 73% { opacity: .55; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.5); } }

@media (prefers-reduced-motion: reduce) {
  .sb-ring__dot, .sb-ring__dot::before, .sb-ring__dot::after { animation: none; }
  .sb-ring__dot::before { opacity: .9; transform: scale(.8); }   /* show one ring, still */
}