/* Motion shared by saltyming.net and mirror.saltyming.net: the same file in both sites
   (saltyming-web public/assets/motion.css, mirror-web site/assets/motion.css), with motion-head.js
   and motion.js. The controls' own motion (lens, menus, sheet) stays in each stylesheet.
   - Entering the site: the page composes itself. motion-head.js marks <html> with .enter before the
     first paint when the visit comes from outside the site, is a reload, or opens the home page
     (<html data-home>). Moving between pages inside the site shows the next page at once.
   - [data-enter]: rises 28px into place as the page enters, in reading order given by
     style="--i: n" (the header first), 90ms apart, at most 5 steps. It is opaque after 60% of the
     rise, so text is not left faint while it settles.
   - [data-reveal]: rises the same way as it scrolls into view. One already in view as the page
     enters follows the [data-enter] elements (motion.js sets .rv, .in and --d).
   - [data-press]: dips when pressed, as the glass controls do.
   - [data-lift]: comes forward while the pointer is on the link around it.
   Nothing moves when the reader asks for reduced motion. */
:root { --enter-rise: 28px; --enter-time: 700ms; --enter-fade: 420ms; --enter-step: 90ms; --enter-ease: cubic-bezier(.22,.61,.36,1); }
@keyframes motion-rise { from { transform: translateY(var(--enter-rise)); } }
@keyframes motion-fade { from { opacity: 0; } }
@keyframes motion-shown { to { opacity: 1; transform: none; } }
/* backwards, not both: once it has run the animation lets go of transform, so an element keeps no
   stacking context that would paint a later card over an open menu inside it. */
.enter [data-enter] {
  animation: motion-rise var(--enter-time) var(--enter-ease) backwards, motion-fade var(--enter-fade) ease-out backwards;
  animation-delay: calc(min(var(--i, 0), 5) * var(--enter-step)); }
/* Hidden until motion.js shows it. Should motion.js not run (it marks <html> .motion-ready), an
   element hidden as the page enters is shown after 3 seconds anyway. */
.enter [data-reveal]:not(.in), .rv:not(.in) { opacity: 0; transform: translateY(var(--enter-rise)); }
.enter:not(.motion-ready) [data-reveal]:not(.in) { animation: motion-shown 0s 3s forwards; }
[data-reveal].in { transition: transform var(--enter-time) var(--enter-ease) var(--d, 0ms), opacity var(--enter-fade) ease-out var(--d, 0ms); }
[data-press] { transition: scale var(--motion-quick) var(--ease-travel); }
[data-press]:active { scale: .99; }
[data-lift] { transition: transform var(--motion-page) var(--ease-travel); }
a:hover [data-lift], a:focus-visible [data-lift] { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .enter [data-enter] { animation: none; }
  .enter [data-reveal]:not(.in), .rv:not(.in) { opacity: 1; transform: none; animation: none; }
  [data-press], [data-lift], [data-reveal].in { transition: none; }
  [data-press]:active { scale: none; }
  a:hover [data-lift], a:focus-visible [data-lift] { transform: none; }
}