/* Slide-in animation for the mobile navigation sheet.
   The live site gets this from Radix + tailwindcss-animate at runtime. */
@keyframes sheet-in  { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sheet-out { from { transform: none; } to { transform: translateX(100%); } }
@keyframes overlay-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlay-out { from { opacity: 1; } to { opacity: 0; } }

#mobile-menu .sheet-panel   { animation: sheet-in 500ms ease-in-out; }
#mobile-menu .sheet-overlay { animation: overlay-in 300ms ease-out; }
#mobile-menu.is-closing .sheet-panel   { animation: sheet-out 300ms ease-in-out forwards; }
#mobile-menu.is-closing .sheet-overlay { animation: overlay-out 300ms ease-in forwards; }

@media (prefers-reduced-motion: reduce) {
  #mobile-menu .sheet-panel,
  #mobile-menu .sheet-overlay { animation: none !important; }
}