/* Motion for the whole app. One file, loaded last. Only opacity, transform and scale; quick (under 260ms); ease-out.
   Enter = a little slower than exit. Native dropdown lists (the browser's own select menus) cannot be animated. */
:root{--m-out:cubic-bezier(.23,1,.32,1);--m-io:cubic-bezier(.77,0,.175,1);--m-drawer:cubic-bezier(.32,.72,0,1);interpolate-size:allow-keywords}
@keyframes sp-m-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sp-m-fade{from{opacity:0}to{opacity:1}}
@keyframes sp-m-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sp-m-drop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sp-m-side{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* every pressable thing answers the finger and the pointer */
:where(button,a,summary,label,input,select,textarea,[role=button]){transition:background-color .16s ease,color .16s ease,border-color .16s ease,opacity .16s ease,scale .14s var(--m-out),box-shadow .16s ease}
:where(button:not(:disabled),a.btn,a.primary,summary,[role=button],.chip,.tab,.pbtn):active{scale:.97}
.plat-seg button:active{scale:1}
.so-card,.gl-row{transition:background-color .16s ease,opacity .16s ease}
.so-card:active{scale:.985}
.so-im{transition:filter .18s ease}

/* drop-downs and "show more" panels: content eases in, and the panel opens smoothly where the browser allows */
details[open]>:not(summary){animation:sp-m-in .22s var(--m-out) both}
@supports selector(::details-content){
  details::details-content{block-size:0;overflow:clip;overflow-clip-margin:6px;transition:block-size .24s var(--m-out),content-visibility .24s allow-discrete}
  details[open]::details-content{block-size:auto}
}
.multi-filter[open] .multi-filter-options{animation:sp-m-drop .18s var(--m-out) both;transform-origin:top left}

/* pop-ups: fade and rise on open, a quicker fade on close */
@supports (transition-behavior:allow-discrete){
  html:root body dialog,html:root dialog{opacity:0;transform:translateY(10px) scale(.97);transition:opacity .16s ease,transform .16s ease,overlay .16s allow-discrete,display .16s allow-discrete}
  html:root body dialog[open],html:root dialog[open]{opacity:1;transform:none;animation:none!important;transition:opacity .22s var(--m-out),transform .22s var(--m-out),overlay .22s allow-discrete,display .22s allow-discrete}
  html:root dialog::backdrop{opacity:0;transition:opacity .16s ease,overlay .16s allow-discrete,display .16s allow-discrete}
  html:root dialog[open]::backdrop{opacity:1;animation:none!important;transition:opacity .22s ease,overlay .22s allow-discrete,display .22s allow-discrete}
  @starting-style{html:root body dialog[open],html:root dialog[open]{opacity:0;transform:translateY(10px) scale(.97)}html:root dialog[open]::backdrop{opacity:0}}
}
@supports not (transition-behavior:allow-discrete){html:root dialog[open]{animation:sp-m-pop .22s var(--m-out) both}}

/* things that appear when you tap something */
html:root #glance:not([hidden]){animation:sp-m-side .26s var(--m-out) both}
html:root #igToast:not([hidden]){animation:sp-m-in .2s var(--m-out) both}
html:root #igOverview:not([hidden]),html:root #igInsights:not([hidden]),html:root #igTrends:not([hidden]),html:root #igGroups:not([hidden]),html:root #igSearchTools:not([hidden]),html:root #igPageHead:not([hidden]){animation:sp-m-in .24s var(--m-out) both}
html:root #igFeedSection:not([hidden]){animation:sp-m-fade .22s ease both}
@media(min-width:861px){html:root body #appDrawer.rail-open .app-drawer-brand,html:root body #appDrawer.rail-open .app-drawer-label{animation:sp-m-fade .2s ease .06s both}}

/* Reddit grid: tiles arrive one after another */
.so-card{animation:sp-m-in .28s var(--m-out) both}
.so-card:nth-child(2){animation-delay:.03s}.so-card:nth-child(3){animation-delay:.06s}.so-card:nth-child(4){animation-delay:.09s}.so-card:nth-child(5){animation-delay:.12s}.so-card:nth-child(6){animation-delay:.15s}.so-card:nth-child(n+7){animation-delay:.18s}