/* Subtle open and close motion for dialogs, menus and panels. app.js adds .box-closing while a box fades out. Loaded last. */
@keyframes box-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes box-backdrop-out{from{opacity:1}to{opacity:0}}
@keyframes box-pop-in{from{opacity:0;scale:.96;translate:0 8px}to{opacity:1;scale:1;translate:0 0}}
@keyframes box-pop-out{from{opacity:1;scale:1;translate:0 0}to{opacity:0;scale:.96;translate:0 6px}}
@keyframes box-drop-in{from{opacity:0;scale:.98;translate:0 -6px}to{opacity:1;scale:1;translate:0 0}}
@keyframes box-drop-out{from{opacity:1;scale:1;translate:0 0}to{opacity:0;scale:.98;translate:0 -4px}}

@media (prefers-reduced-motion:no-preference){
 /* Dialogs: the backdrop fades and the card springs up. Anchored popovers already animate in from app.js. */
 html body :is(#socialDialog:not(.composer-inline),#accountModal):not([hidden]){animation:box-backdrop-in .2s ease-out}
 html body :is(#socialDialog:not(.composer-inline):is(:not(.anchored-dialog),.bounded-dialog),#accountModal):not([hidden]) .card.modal-card{animation:box-pop-in .28s cubic-bezier(.22,1,.36,1) both!important}
 /* Menus, search results and expanding sections drop in. */
 html body :is(#userSearchResults,#feedSortMenu,#postMentions,#pollDetails,#tradeDetails,#postPreview,#composerChartPreview):not([hidden]){animation:box-drop-in .2s cubic-bezier(.22,1,.36,1) both}

 /* Closing. */
 html body :is(#socialDialog,#accountModal).box-closing{animation:box-backdrop-out .19s ease-in both!important;pointer-events:none}
 html body :is(#socialDialog,#accountModal).box-closing .card.modal-card{animation:box-pop-out .19s ease-in both!important}
 html body #notificationsPanel.box-closing,html body :is(#userSearchResults,#feedSortMenu,#postMentions,#pollDetails,#tradeDetails,#postPreview,#composerChartPreview).box-closing{animation:box-drop-out .17s ease-in both!important;pointer-events:none}
}