/* ---------- Motion ----------
   Things move only in answer to something the person did, with one
   exception: the bell swings once when there is something unread,
   because that is the one thing on a page that asks to be looked at. */

@keyframes bell-swing {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-16deg); }
    45% { transform: rotate(13deg); }
    70% { transform: rotate(-7deg); }
    88% { transform: rotate(3deg); }
}
.nav-notification-btn:has(.notification-badge) svg {
    transform-origin: 50% 2px;
    animation: bell-swing 0.9s ease-in-out 0.5s 1;
}

/* A popup arrives when asked for */
@keyframes pop-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.modal-overlay:not([hidden]) .modal { animation: pop-in 0.16s ease-out both; }
.notification-dropdown.active { animation: pop-in 0.12s ease-out both; }

/* A press is felt */
.btn-gold:active,
.btn-small:active,
.pi-btn:active,
main button[type="submit"]:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}