/* Sunicorn's signature transition, "the ruled page": on every surface (sunicorn.eu, the operator's console,
   a Crew's console) a move to another page redraws the ink rule under the band like a pen ruling the next
   sheet (left to right going forward, right to left going back), the current tab's mark glides to its new
   tab, and the page rises into place while the band holds still. The browser's View Transitions draw it:
   a page load on the site (@view-transition), kit/lib.js `go` in a Crew's console. A move is short, a
   third of a second, and in a console a tap made during it ends it and lands where it was aimed (`go`).
   The operator's console moves instantly and keeps the rule and the mark in plain CSS (kit/house.css).
   Where they are missing, or the reader asks for less motion, a page simply changes.
   The markup it asks for: the band `.su-band`, its rule `.su-rule`, the current tab's mark `.su-ink`, and
   a side column that holds still beside the page, where there is one (`.su-aside`). */
:root { --su-ease: cubic-bezier(.2, .7, .2, 1); --su-pen: cubic-bezier(.65, 0, .35, 1); }
/* A site page also declares this inline in its head: one that paints before its deferred scripts ran
   reads the opt-in before this sheet's, and the browser skips the transition. */
@view-transition { navigation: auto; }

.su-band { view-transition-name: su-band; }
.su-aside { view-transition-name: su-aside; }
.su-rule { view-transition-name: su-rule; display: block; height: 1px; background: currentColor; }
.su-ink { view-transition-name: su-ink; display: block; height: 1px; background: currentColor; }

::view-transition-group(*) { animation-duration: .24s; animation-timing-function: var(--su-ease); }
/* the band and a side column hold still: their new state alone, never the old one showing through it */
::view-transition-old(su-band), ::view-transition-old(su-aside) { animation: none; opacity: 0; }
::view-transition-new(su-band), ::view-transition-new(su-aside) { animation: none; }
::view-transition-old(root) { animation: su-leave .1s ease-in both; }
::view-transition-new(root) { animation: su-enter .24s var(--su-ease) both; }
::view-transition-old(su-rule) { animation: none; opacity: 0; }
/* drawn by scale, not clip: a one-pixel snapshot's clip-path does not render */
::view-transition-new(su-rule) { animation: su-draw .32s var(--su-pen) both; transform-origin: 0 50%; }
html[data-su-dir="back"]::view-transition-new(su-rule) { transform-origin: 100% 50%; }
/* a snapshot cannot blur what is under it: a frosted band would show as a lighter box */
html:active-view-transition .su-band { -webkit-backdrop-filter: none; backdrop-filter: none; }

@keyframes su-leave { to { opacity: 0; transform: translateY(-4px); } }
@keyframes su-enter { from { opacity: 0; transform: translateY(8px); } }
@keyframes su-draw { from { transform: scaleX(0); } }

/* Inside a page, the same ease: figures that count (kit/lib.js `Count`), columns that grow from their
   baseline one after the other, and parts that rise as they come into view (`.su-rise`, set by `reveal`). */
svg.bars rect.v { transform-box: fill-box; transform-origin: 50% 100%;
                  animation: su-grow .7s var(--su-ease) calc(var(--i, 0) * 35ms) both; }
@keyframes su-grow { from { transform: scaleY(0); } }
.su-rise { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--su-ease), transform .6s var(--su-ease); }
.su-rise.su-in { opacity: 1; transform: none; }
.su-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.su-eye { -webkit-user-select: none; user-select: none; }   /* a copied figure is the final one, once */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  svg.bars rect.v { animation: none; }
  .su-rise { opacity: 1; transform: none; transition: none; }
}
@media print {
  svg.bars rect.v { animation: none; }
  .su-rise { opacity: 1; transform: none; transition: none; }
}