/* The mark's entrance, kept deliberately tiny.
 *
 * The image itself is app/snow-logo.png, loaded as an ordinary image rather than
 * inlined as a data URI. Inlining is what Loading Screen.html does, and it does
 * avoid a second request, but it inflates 158KB of PNG into 212KB of base64
 * inside a stylesheet, and on a slow connection that stylesheet lands after the
 * entrance animation has already finished -- the screen shows a background, a
 * label and a bar with no logo on it.
 *
 * So the image is a normal request, cacheable between visits, and the entrance
 * below only runs once app/boot-screen.js has confirmed the mark is decoded.
 * Without that gate the slices animate from opacity 0 to 1 against an empty
 * background and the mark can only appear afterwards, unannounced.
 *
 * There is no fallback that starts the animation without the image: a mark that
 * is not there yet is not something to animate, and a loading screen showing
 * nothing but furniture is worse than one that is still assembling.
 */

.boot__fragment {
  background-image: url('/app/snow-logo.png');
  opacity: 0;
  transform: translateY(-5px);
  filter: blur(1px);
}

/* The twelve bands, and the stagger that makes the mark assemble top to bottom.
   Only once the mark is on the page -- hence the .is-ready gate, set by
   boot-screen.js when the image has decoded. */
.boot.is-ready .boot__fragment {
  animation: boot-fragment-in .34s cubic-bezier(.2, .85, .2, 1) forwards;
}
.boot.is-ready .boot__fragment--0 { animation-delay: .08s; }
.boot.is-ready .boot__fragment--1 { animation-delay: .16s; }
.boot.is-ready .boot__fragment--2 { animation-delay: .24s; }
.boot.is-ready .boot__fragment--3 { animation-delay: .32s; }
.boot.is-ready .boot__fragment--4 { animation-delay: .40s; }
.boot.is-ready .boot__fragment--5 { animation-delay: .48s; }
.boot.is-ready .boot__fragment--6 { animation-delay: .56s; }
.boot.is-ready .boot__fragment--7 { animation-delay: .64s; }
.boot.is-ready .boot__fragment--8 { animation-delay: .72s; }
.boot.is-ready .boot__fragment--9 { animation-delay: .80s; }
.boot.is-ready .boot__fragment--10 { animation-delay: .88s; }
.boot.is-ready .boot__fragment--11 { animation-delay: .96s; }

@keyframes boot-fragment-in {
  0% { opacity: 0; transform: translateY(-5px); filter: blur(1px); }
  65% { opacity: 1; filter: blur(.15px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Reduced motion: the mark appears whole, without assembling. */
@media (prefers-reduced-motion: reduce) {
  .boot.is-ready .boot__fragment { animation: none; }
  .boot__fragment { opacity: 1; transform: none; filter: none; }
}