/* Tracium website: the move from page to page, after Osmo's side-by-side transition, with the folder for the box.
   The page sinks back and closes into a folder: its corners round and the tab rises on its left third. It slides off
   to the left while the next page comes in from the right as a folder, then comes forward and opens to the screen.
   Behind them the charcoal stage with its dot grid.
   On the live site a cross-document view transition: both pages opt in, nothing is loaded, no script runs. In a frame
   such as the design canvas, where pages do not navigate, transition.js plays it in two halves with the same curves:
   the page you leave hands over to an empty folder in the middle of the stage, and the next page opens out of it.
   Browsers without view transitions change the page as before; with reduced motion the page changes at once.
   The folder keeps the screen's own format, landscape on a desktop, upright on a phone: the tab makes the folder.
   Its tab and corners follow the width with the folder's proportions (tab 6 %, corners 6.35 %, tab over 34 %);
   on an upright screen they follow the height a little, so the tab still reads on a phone. */
@property --fr { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ft { syntax: '<length>'; inherits: false; initial-value: 0px; }
/* In a frame such as the design canvas the page shows without a scrollbar, as drawn; it still scrolls. A scrollbar
   paints over everything, the stage of the move too, and shows there as a light bar on the right. */
:root.tr-framed { scrollbar-width: none; }
:root.tr-framed::-webkit-scrollbar { display: none; }
:root { --vt-ease: cubic-bezier(0.625, 0.05, 0, 1); --vt-out: cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  /* The stage. */
  ::view-transition, :root.vt-parked::before, :root.vt-wait::before { background-color: var(--tr-neutral-900); background-image: radial-gradient(circle, var(--tr-alpha-white-10) 0.9px, transparent 1.2px); background-size: 22px 22px; }
  ::view-transition-group(root) { animation: none; }
  ::view-transition-image-pair(root) { isolation: auto; }
  /* The folder: the page itself. */
  ::view-transition-old(root), ::view-transition-new(root) {
    mix-blend-mode: normal; transform-origin: 50% 50%;
    clip-path: shape(from 0 var(--fr), arc to var(--fr) 0 of var(--fr) cw,
      hline to calc(34% - var(--ft) * 0.75), curve to calc(34% + var(--ft) * 0.9) var(--ft) with 34% 0 / calc(34% - var(--ft) * 0.15) var(--ft),
      hline to calc(100% - var(--fr)), arc to 100% calc(var(--ft) + var(--fr)) of var(--fr) cw,
      vline to calc(100% - var(--fr)), arc to calc(100% - var(--fr)) 100% of var(--fr) cw,
      hline to var(--fr), arc to 0 calc(100% - var(--fr)) of var(--fr) cw, close);
  }
  ::view-transition-old(root), ::view-transition-new(root) { will-change: transform, clip-path; }
  /* The page you leave: back in 0.9 s, off to the left from 0.25 s. It closes into the folder early, in 0.6 s
     easing out, so the folder shows while the page is still on screen. */
  ::view-transition-old(root) { z-index: 2; animation: vt-back 0.9s var(--vt-ease) both, vt-close 0.6s var(--vt-out) both, vt-out 1s var(--vt-ease) 0.25s both; }
  /* The page you open: in from the right with it, forward from 0.85 s. It stays a folder while it starts to grow
     and opens from 1 s on the same curve, so tab and corners settle as it lands. 1.75 s in all. */
  ::view-transition-new(root) { z-index: 1; animation: vt-in 1s var(--vt-ease) 0.25s both, vt-front 0.9s var(--vt-ease) 0.85s both, vt-open 0.75s var(--vt-ease) 1s both; }

  /* In two halves (transition.js). The stage and the empty folder, over everything on the page: the folder is the
     page drawn at half size, closed, white like the page, as a picture transition.js draws for the frame's size.
     Both measure the whole viewport, as the view transition does. The page keeps its overflow: hiding it would open
     an empty scrollbar gutter beside the stage. */
  :root.vt-parked, :root.vt-wait { background-color: var(--tr-neutral-900); }
  :root.vt-parked::before, :root.vt-wait::before, :root.vt-parked::after, :root.vt-wait::after { content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2147483000; pointer-events: none; }
  :root.vt-parked::after, :root.vt-wait::after { z-index: 2147483001; background: var(--vt-ghost) 0 0 / 100% 100% no-repeat; }
  /* Leaving: the page goes as above, over the stage; the empty folder comes in from the right with it. */
  :root.vt-leave::view-transition-new(root) { z-index: 1; animation: none; clip-path: none; }
  :root.vt-parked::after { will-change: translate; animation: vt-in 1s var(--vt-ease) 0.25s both; }
  /* Arriving: the page develops in the empty folder out of its white, comes forward and opens, as above. 0.9 s.
     It stays opaque throughout, so the empty folder under it never shows at its edges. */
  :root.vt-arrive::view-transition-old(root) { z-index: 1; animation: none; clip-path: none; }
  :root.vt-arrive::view-transition-new(root) { z-index: 2; animation: vt-develop 0.45s var(--vt-out) both, vt-front 0.9s var(--vt-ease) both, vt-open 0.75s var(--vt-ease) 0.15s both; }
}
@keyframes vt-back { from { scale: 1; } to { scale: 0.5; } }
@keyframes vt-front { from { scale: 0.5; } to { scale: 1; } }
@keyframes vt-out { from { translate: 0 0; } to { translate: -87.5% 0; } }
@keyframes vt-in { from { translate: 87.5% 0; } to { translate: 0 0; } }
/* From white to the page: every color starts as white (no contrast, doubled brightness) and the page's own white
   stays white all the way. */
@keyframes vt-develop { from { filter: contrast(0) brightness(2); } to { filter: contrast(1) brightness(1); } }
@keyframes vt-close { from { --fr: 0px; --ft: 0px; } to { --fr: max(6.35vw, 4.4vh); --ft: max(6vw, 4.2vh); } }
@keyframes vt-open { from { --fr: max(6.35vw, 4.4vh); --ft: max(6vw, 4.2vh); } to { --fr: 0px; --ft: 0px; } }