/* Shared animations for the site's pages (web/js/fx.js adds the classes).
   - .fx-page: the page's content fades and rises in, and fades out when a
     link to another page is followed
   - [data-fx]: blocks that rise in one after another
   - clicks on buttons, chips and tiles get a ripple and a little bounce
   - .fx-swap: replays the entrance (panels switching, admin pages)
   Everything is off for people who ask for reduced motion. */
@keyframes fx-page-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fx-rise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fx-swap { 0% { opacity: 0; transform: translateY(10px) scale(.97); } 60% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { transform: none; } }
@keyframes fx-pop { 0% { transform: scale(1); } 35% { transform: scale(.93); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes fx-ripple { from { transform: translate(-50%, -50%) scale(0); opacity: .45; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

.fx-page { animation: fx-page-in .5s cubic-bezier(.2, .8, .2, 1) both; transition: opacity .18s ease, transform .18s ease; }
html.fx-leaving .fx-page { opacity: 0; transform: translateY(-10px); }
[data-fx] { animation: fx-rise .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--fx-i, 0) * 70ms + 80ms); }
.fx-swap { animation: fx-swap .4s cubic-bezier(.2, .8, .2, 1) both; }
.fx-pop { animation: fx-pop .32s ease; }
.fx-host { position: relative; overflow: hidden; }
.fx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; animation: fx-ripple .55s ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
  .fx-page, [data-fx], .fx-swap, .fx-pop { animation: none !important; }
  .fx-page { transition: none; }
  html.fx-leaving .fx-page { opacity: 1; transform: none; }
  .fx-ripple { display: none; }
}