/* The hub's motion (DECISIONS #28; how to use it: docs/motion.md; the behaviour: motion.js). Soft: a fast start and a long
   gentle settle, nothing sharp, nothing looped; none with reduced motion. Load after the page's own stylesheet. */
:root {
  --m-ease: cubic-bezier(.16, 1, .3, 1);   /* soft out */
  --m-reveal: .9s;                          /* a card, a case, a page's head through the dots */
  --m-appear: .55s;                         /* a block shown later: rise and fade */
  --m-quick: .25s;                          /* hover, press, colour */
  --m-open: .6s;                            /* a sheet, a modal, a menu opening */
  --m-close: .42s;                          /* the same closing, and a list item leaving: a little quicker, never abrupt */
  --m-move: .5s;                            /* a list item gliding to its new place */
  --m-fold: .45s;                           /* a group folding by height */
  --m-out: cubic-bezier(.4, 0, .2, 1);      /* closing: a smooth start and a soft stop */
}
/* items leaving a list fade at their old place in this layer (motion.js) */
.m-ghosts { position: fixed; inset: 0; z-index: 19; pointer-events: none; overflow: hidden; }
.m-ghosts > * { position: absolute; box-sizing: border-box; }

/* press: anything you can press gives a little under the finger */
html.m-ready :is(.btn, .seg-b, .tcard, .nav-btn, .pill) { transition-property: background-color, border-color, color, scale, opacity; transition-duration: var(--m-quick); transition-timing-function: var(--m-ease); }
html.m-ready :is(.btn, .seg-b, .tcard, .pill):active { scale: .97; }

/* reveal: a grid of dots (8 px cells, as the page's own dot grid halves) grows until it closes, while the block fades and
   settles 8 px; the dots' soft edge keeps it from looking crunchy */
@property --dot { syntax: '<length>'; inherits: false; initial-value: 7px; }
@keyframes m-dots {
  from { --dot: 0px; opacity: 0; translate: 0 8px; }
  45% { opacity: 1; }
  to { --dot: 7px; opacity: 1; translate: 0 0; }
}
.m-dots, ::view-transition-new(root) {
  -webkit-mask: radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + 1.5px)) 0 0 / 8px 8px;
  mask: radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + 1.5px)) 0 0 / 8px 8px; }
.m-dots { animation: m-dots var(--m-reveal) var(--m-ease) both; }

/* switch between boards: the panel and its button stay (their own names), the old page fades, the new one comes through the dots */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: var(--m-ease); }
::view-transition-old(root) { animation: m-out .35s ease both; }
::view-transition-new(root) { animation: m-dots .8s var(--m-ease) both; }
@keyframes m-out { to { opacity: 0; } }
/* the panel and its button never blend two snapshots (a blend shows a double image): the new one stands at once */
::view-transition-old(hub-side), ::view-transition-old(hub-nav-btn), ::view-transition-old(hub-chip) { display: none; }
::view-transition-new(hub-side), ::view-transition-new(hub-nav-btn), ::view-transition-new(hub-chip) { animation: none; }
::view-transition-group(hub-side), ::view-transition-group(hub-nav-btn), ::view-transition-group(hub-chip) { animation: none; }

/* appear: shown later (hidden → shown, empty → filled), from the page's second frame on (motion.js adds .m-ready) */
html.m-ready .m-appear { transition: opacity var(--m-appear) var(--m-ease), translate var(--m-appear) var(--m-ease); }
@starting-style { html.m-ready .m-appear { opacity: 0; translate: 0 8px; } }
/* a sheet over the page (a card, a modal) opens and closes as one gesture: it rises 16 px from 98 % while its scrim fades in,
   and on closing sinks back and fades a little quicker (display transitions with the element, so [hidden] still hides it) */
html.m-ready .m-sheet { transition: opacity var(--m-open) var(--m-ease), translate var(--m-open) var(--m-ease), scale var(--m-open) var(--m-ease),
  display var(--m-open) allow-discrete; }
html.m-ready .m-sheet[hidden] { opacity: 0; translate: 0 14px; scale: .985;
  transition: opacity var(--m-close) var(--m-out), translate var(--m-close) var(--m-out), scale var(--m-close) var(--m-out), display var(--m-close) allow-discrete; }
@starting-style { html.m-ready .m-sheet { opacity: 0; translate: 0 16px; scale: .98; } }
html.m-ready .m-fade { transition: opacity var(--m-open) var(--m-ease), display var(--m-open) allow-discrete; }
html.m-ready .m-fade[hidden] { opacity: 0; transition: opacity var(--m-close) var(--m-out), display var(--m-close) allow-discrete; }
@starting-style { html.m-ready .m-fade { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .m-dots { animation: none; -webkit-mask: none; mask: none; }
  html.m-ready .m-appear, html.m-ready .m-sheet, html.m-ready .m-sheet[hidden], html.m-ready .m-fade, html.m-ready .m-fade[hidden] { transition: none; }
  html.m-ready :is(.btn, .seg-b, .tcard, .pill):active { scale: none; }
}