.toast-drawing .apart, .toast-drawing .near { opacity: 0; }
.toast-drawing .clink { transform-box: view-box; transform-origin: 492px 100px; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .toast-drawing[data-motion="waiting"] .apart { opacity: 1; }
  .toast-drawing[data-motion="waiting"] :is(.meet, .clink) { opacity: 0; }
  .toast-drawing[data-motion="playing"] rect { animation: 480ms step-end backwards; }
  .toast-drawing[data-motion="playing"] .apart { animation-name: glasses-apart; }
  .toast-drawing[data-motion="playing"] .near { animation-name: glasses-near; }
  .toast-drawing[data-motion="playing"] .meet { animation-name: glasses-meet; }
  .toast-drawing[data-motion="playing"] .clink { animation: glasses-clink 520ms var(--ease-settle) 500ms backwards; }
}
@keyframes glasses-apart { from { opacity: 1; } 62.5%, to { opacity: 0; } }
@keyframes glasses-near { from { opacity: 0; } 62.5% { opacity: 1; } to { opacity: 0; } }
@keyframes glasses-meet { from { opacity: 0; } to { opacity: 1; } }
@keyframes glasses-clink { from { opacity: 0; scale: .6; } 35% { opacity: 1; } }