/* ============================================================
   Musef - the look of a section arriving.

   assets/js/msf-reveal.js adds .msf-in to the parts of a section the
   reader has not reached yet, then .msf-in--on to each in turn as the
   section comes into view.

   The transition sits on the shown state, not the hidden one, so putting a
   part into its hidden state is instant and invisible, while coming out of
   it is the move the reader sees.

   These are kept apart from .msf-rise in msf-overrides.css on purpose:
   that one belongs to the stat rows, which count their figures up as they
   arrive, and the two must stay independently adjustable.
   ============================================================ */

.msf-in{
	opacity:0;
	transform:translateY(20px);
}

/* The easing carries the part a few pixels past its resting place and lets
   it settle back, so it reads as snapping into position rather than drifting
   there. The fade is kept on a plain curve and finishes first: the part is
   solid by the time it does the settling, which is what makes the stop
   legible instead of mushy. */
.msf-in--on{
	opacity:1;
	transform:none;
	transition:opacity .3s ease-out, transform .42s cubic-bezier(.3,1.8,.6,1);
}

/* A part that stands beside another arrives without moving: only the fade
   runs. A travel handed out a step at a time leaves each cell a few pixels
   out of line with its neighbour for as long as the animation lasts, and a
   row of cards at slightly different heights reads as a broken grid rather
   than an arriving one. msf-reveal.js decides which parts these are. */
.msf-in--flat{
	transform:none;
}

.msf-in--flat.msf-in--on{
	transform:none;
	transition:opacity .3s ease-out;
}

/* Asked for less motion: the script hides nothing, and this makes sure a
   cached class name from an earlier visit cannot leave anything hidden. */
@media (prefers-reduced-motion:reduce){
	.msf-in,
	.msf-in--flat,
	.msf-in--on{
		opacity:1;
		transform:none;
		transition:none;
	}
}