/* Animations. Everything here only moves or fades things (cheap for a
   phone to draw), is over in about a fifth of a second, and is switched
   off for anyone whose device asks for reduced motion (bottom of file).
   The script side is js/motion.js. */

:root{
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
}

@keyframes fadeIn{from{opacity:0;}}
@keyframes fadeOut{to{opacity:0;}}
@keyframes riseIn{from{opacity:0; transform:translateY(10px);}}
@keyframes revealDown{from{opacity:0; transform:translateY(-6px);}}
@keyframes sheetUp{from{transform:translateY(100%);}}
@keyframes sheetDown{from{transform:translateY(var(--drag, 0px));} to{transform:translateY(100%);}}
@keyframes popIn{from{opacity:0; transform:scale(.96);}}
@keyframes popOut{to{opacity:0; transform:scale(.97);}}
@keyframes barGrow{from{transform:scaleX(0);}}
@keyframes pop{0%{transform:scale(.7);} 60%{transform:scale(1.12);} 100%{transform:none;}}
@keyframes pulse{50%{opacity:.35;}}
@keyframes slideFromRight{from{transform:translateX(28px); opacity:0;} to{transform:none; opacity:1;}}
@keyframes slideFromLeft{from{transform:translateX(-28px); opacity:0;} to{transform:none; opacity:1;}}

/* ---------- switching tabs ----------
   The page fades in; its cards rise in one after another; bars grow from
   the left. ("entering" is added for a moment by js/motion.js.) */
section.view.active{animation:fadeIn .18s ease-out;}
.view.entering > *{animation:riseIn .32s var(--ease-out) both;}
.view.entering > :nth-child(2){animation-delay:.04s;}
.view.entering > :nth-child(3){animation-delay:.08s;}
.view.entering > :nth-child(4){animation-delay:.12s;}
.view.entering > :nth-child(5){animation-delay:.16s;}
.view.entering > :nth-child(n+6){animation-delay:.2s;}
.view.entering .bar-fill, .view.entering .pc-meter-fill{
  transform-origin:left center; animation:barGrow .7s var(--ease-out) .12s both;
}
/* a swipe slides the new tab in from the side it came from */
section.view.slide-from-right{animation:slideFromRight .22s ease-out;}
section.view.slide-from-left{animation:slideFromLeft .22s ease-out;}

/* ---------- sheets ----------
   Slide up from the bottom, and back down when closed ("closing" keeps
   them on screen for that; js/motion.js). Desktop: fade and grow instead. */
.modal-bg.open{animation:fadeIn .2s ease-out;}
.modal-bg.open .modal{animation:sheetUp .3s var(--ease-out);}
.modal-bg.closing{display:flex; pointer-events:none; animation:fadeOut .2s var(--ease-in) forwards;}
.modal-bg.closing .modal{animation:sheetDown .2s var(--ease-in) forwards;}
/* the menu sheet follows your finger when dragged down */
.menu-sheet{transform:translateY(var(--drag, 0px)); transition:transform .2s var(--ease-out);}
.menu-sheet.dragging{transition:none;}

.photo-viewer.open{animation:fadeIn .2s ease-out;}
.photo-viewer.open img{animation:popIn .25s var(--ease-out);}

/* ---------- things that appear when you tap "+" or "Split" ---------- */
#raForm, #addUserForm, #splitSection, .setpw-form, #reimbMarkBtn{animation:revealDown .22s var(--ease-out);}

/* ---------- small feedback ---------- */
.cat-chip.active{animation:pop .25s var(--ease-out);}
.nav-btn.active .ic{animation:pop .3s var(--ease-out);}
.bill-row.just-toggled .bill-check{animation:pop .35s var(--ease-out);}
.nav-badge, .menu-count{animation:pop .3s var(--ease-out);}
.sync-dot:not(.live){animation:pulse 1.2s ease-in-out infinite;}

/* the loading screen fades away instead of vanishing */
.boot-screen.done{
  display:flex; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease-out, visibility 0s linear .25s;
}

@media (hover: hover){
  .primary-btn:not(:disabled):hover, .perm-save-btn:not(:disabled):hover{filter:brightness(1.12);}
  .cat-chip:hover, .filter-chip:hover, .quick-btn:hover{border-color:var(--muted);}
}

@media (min-width: 900px){
  .modal-bg.open .modal{animation:popIn .2s var(--ease-out);}
  .modal-bg.closing .modal{animation:popOut .16s var(--ease-in) forwards;}
  #menuSheetBg.open .modal{animation:riseIn .16s var(--ease-out);}
  #menuSheetBg.closing .modal{animation:fadeOut .12s var(--ease-in) forwards;}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-delay:0s !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important;
  }
  .boot-screen.done{display:none;}
  /* the "new since last time" flash in History carries information, so it stays (briefly) */
  .expense-row.flash::before{animation-duration:.9s !important;}
}