/* motion.css — the one motion language (motion.js says which move plays and
   why). Loaded by the office app (index.html), the admin console (imported by
   admin-shell.css) and the pages people move between, so going from one page
   file to another moves the same way as a page inside the app. */

:root {
  /* Apple's spring with bounce 0 (critically damped):
       x(t) = 1 − (1 + ωt)·e^(−ωt),  ω = 2π / d,  d = 0.36 s (perceptual).
     Sampled at 25 even steps over 1.25·d = 450 ms; by then it is 99.66 % of
     the way and the last step lands it. tests/motion.node.js recomputes the
     numbers from the formula. */
  --cw-spring: linear(0, 0.0432, 0.1402, 0.2575, 0.3764, 0.4867, 0.584, 0.667, 0.7361, 0.7925, 0.838, 0.8743, 0.9029, 0.9254, 0.9428, 0.9564, 0.9668, 0.9748, 0.9809, 0.9856, 0.9892, 0.9918, 0.9939, 0.9954, 1);
  --cw-dur: 450ms;
  /* What leaves goes quicker than what arrives, and speeds up as it goes. */
  --cw-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --cw-exit-dur: 200ms;
}

@keyframes cw-in       { from { opacity: 0; } }
@keyframes cw-out      { to   { opacity: 0; } }
@keyframes cw-grow     { from { transform: scale(var(--cw-s0)); clip-path: var(--cw-clip); }
                         to   { transform: none; clip-path: inset(0 round 0); } }
@keyframes cw-shrink   { from { transform: none; clip-path: inset(0 round 0); }
                         to   { transform: scale(var(--cw-s0)); clip-path: var(--cw-clip); } }
@keyframes cw-recede   { to   { transform: scale(0.96); opacity: 0; } }
@keyframes cw-forward  { from { transform: scale(0.965); opacity: 0.35; } }
@keyframes cw-away     { to   { transform: scale(0.94); opacity: 0; } }
@keyframes cw-rise     { from { transform: translateY(10px); } }
@keyframes cw-from-below { from { transform: translateY(28px); } }
@keyframes cw-from-above { from { transform: translateY(-28px); } }
@keyframes cw-from-right { from { transform: translateX(44px); } }
@keyframes cw-from-left  { from { transform: translateX(-44px); } }
@keyframes cw-to-above { to { transform: translateY(-14px); } }
@keyframes cw-to-below { to { transform: translateY(14px); } }
@keyframes cw-to-left  { to { transform: translateX(-22px); } }
@keyframes cw-to-right { to { transform: translateX(22px); } }
@keyframes cw-title-up   { to   { transform: translateY(-8px); opacity: 0; } }
@keyframes cw-title-down { to   { transform: translateY(8px); opacity: 0; } }
@keyframes cw-title-from-below { from { transform: translateY(8px); } }
@keyframes cw-title-from-above { from { transform: translateY(-8px); } }

/* ── moves inside the office app (motion.js sets data-cw-vt) ──────────────── */
/* The move never takes a click: clicks go straight to the live page. */
::view-transition { pointer-events: none; }

/* The bars around the page do not move — they change in place. */
:root[data-cw-vt]::view-transition-group(root),
:root[data-cw-vt]::view-transition-new(root) { animation: none; }
:root[data-cw-vt]::view-transition-old(root) { animation: none; display: none; }
:root[data-cw-vt]::view-transition-group(cw-side),
:root[data-cw-vt]::view-transition-group(cw-scrim),
:root[data-cw-vt]::view-transition-new(cw-side),
:root[data-cw-vt]::view-transition-new(cw-scrim) { animation: none; }
:root[data-cw-vt]::view-transition-old(cw-side),
:root[data-cw-vt]::view-transition-old(cw-scrim) { display: none; }

/* The moving box stays inside its own edges, over the page's own ground. */
:root[data-cw-vt]::view-transition-group(cw-page) {
  animation: none;
  overflow: clip;
  background: var(--bg, Canvas);
}
:root[data-cw-vt]::view-transition-old(cw-page),
:root[data-cw-vt]::view-transition-new(cw-page) { transform-origin: var(--cw-ox, 50%) var(--cw-oy, 50%); }

/* grow — out of the thing you pressed; the page you left sinks back under it */
:root[data-cw-vt="grow"]::view-transition-new(cw-page) {
  animation: cw-grow var(--cw-dur) var(--cw-spring) both, cw-in 180ms ease-out both;
}
:root[data-cw-vt="grow"]::view-transition-old(cw-page) {
  animation: cw-recede var(--cw-dur) cubic-bezier(0.4, 0, 1, 1) both;
}

/* shrink — Back / Home: folds into the thing it came out of; the page under it comes forward */
:root[data-cw-vt="shrink"]::view-transition-old(cw-page) {
  z-index: 1;
  animation: cw-shrink var(--cw-dur) var(--cw-spring) both, cw-out 150ms ease-in 210ms both;
}
:root[data-cw-vt="shrink"]::view-transition-new(cw-page) {
  transform-origin: 50% 50%;
  animation: cw-forward var(--cw-dur) var(--cw-spring) both;
}

/* home — no card to fold into: the page steps back and the hub comes forward */
:root[data-cw-vt="home"]::view-transition-old(cw-page) {
  z-index: 1;
  transform-origin: 50% 30%;
  animation: cw-away 240ms var(--cw-exit) both;
}
:root[data-cw-vt="home"]::view-transition-new(cw-page) {
  transform-origin: 50% 30%;
  animation: cw-forward var(--cw-dur) var(--cw-spring) both;
}

/* a new area — from where you reached for it. The one you leave is gone
   (110 ms) before the next is half in (it starts 40 ms later), so two whole
   pages never read as a double exposure. */
:root[data-cw-vt="below"]::view-transition-new(cw-page) { animation: cw-from-below var(--cw-dur) var(--cw-spring) both, cw-in 180ms ease-out 40ms both; }
:root[data-cw-vt="below"]::view-transition-old(cw-page) { animation: cw-to-above var(--cw-exit-dur) var(--cw-exit) both, cw-out 110ms ease-in both; }
:root[data-cw-vt="above"]::view-transition-new(cw-page) { animation: cw-from-above var(--cw-dur) var(--cw-spring) both, cw-in 180ms ease-out 40ms both; }
:root[data-cw-vt="above"]::view-transition-old(cw-page) { animation: cw-to-below var(--cw-exit-dur) var(--cw-exit) both, cw-out 110ms ease-in both; }
:root[data-cw-vt="right"]::view-transition-new(cw-page) { animation: cw-from-right var(--cw-dur) var(--cw-spring) both, cw-in 180ms ease-out 40ms both; }
:root[data-cw-vt="right"]::view-transition-old(cw-page) { animation: cw-to-left var(--cw-exit-dur) var(--cw-exit) both, cw-out 110ms ease-in both; }
:root[data-cw-vt="left"]::view-transition-new(cw-page)  { animation: cw-from-left var(--cw-dur) var(--cw-spring) both, cw-in 180ms ease-out 40ms both; }
:root[data-cw-vt="left"]::view-transition-old(cw-page)  { animation: cw-to-right var(--cw-exit-dur) var(--cw-exit) both, cw-out 110ms ease-in both; }

/* fade — first page after a load, a search jump, a page after its loading bar */
:root[data-cw-vt="fade"]::view-transition-new(cw-page) { animation: cw-rise var(--cw-dur) var(--cw-spring) both, cw-in 200ms ease-out 40ms both; }
:root[data-cw-vt="fade"]::view-transition-old(cw-page) { animation: cw-out 110ms ease-in both; }

/* The page title in the top bar: the old name lifts away, the new one rises in
   (drops in from above on the way back). Drawn at its own width, never stretched. */
:root[data-cw-vt]::view-transition-group(cw-title) { animation-duration: var(--cw-dur); animation-timing-function: var(--cw-spring); }
:root[data-cw-vt]::view-transition-old(cw-title),
:root[data-cw-vt]::view-transition-new(cw-title) { inline-size: auto; }
:root[data-cw-vt]::view-transition-old(cw-title) { animation: cw-title-up 160ms var(--cw-exit) both; }
:root[data-cw-vt]::view-transition-new(cw-title) { animation: cw-title-from-below var(--cw-dur) var(--cw-spring) both, cw-in 200ms ease-out both; }
:root[data-cw-vt="shrink"]::view-transition-old(cw-title),
:root[data-cw-vt="home"]::view-transition-old(cw-title),
:root[data-cw-vt="left"]::view-transition-old(cw-title) { animation-name: cw-title-down; }
:root[data-cw-vt="shrink"]::view-transition-new(cw-title),
:root[data-cw-vt="home"]::view-transition-new(cw-title),
:root[data-cw-vt="left"]::view-transition-new(cw-title) { animation-name: cw-title-from-above, cw-in; }

/* Reduce motion: every move is a short cross-fade — nothing travels, nothing is lost. */
:root[data-cw-vt="calm"]::view-transition-old(cw-page),
:root[data-cw-vt="calm"]::view-transition-old(cw-title) { animation: cw-out 140ms linear both; }
:root[data-cw-vt="calm"]::view-transition-new(cw-page),
:root[data-cw-vt="calm"]::view-transition-new(cw-title) { animation: cw-in 140ms linear both; }
:root[data-cw-vt="calm"]::view-transition-group(cw-title) { animation: none; }

/* A window over the page (Settings, New room): the room behind dims in and
   the window rises into place on the same spring. */
@keyframes cw-window-in { from { transform: translateY(16px) scale(0.98); } }
.island-overlay:not(.hidden) { animation: cw-in 180ms ease-out both; }
.island-overlay:not(.hidden) > * { animation: cw-window-in var(--cw-dur) var(--cw-spring) both, cw-in 160ms ease-out both; }

/* While a page is still on its way from the server, its loading bar waits
   behind the page you left (motion.js lets it show after a quarter second). */
:root[data-cw-wait] #pg-host > .pg-shimmer { display: none; }

/* No View Transitions in this browser: the new screen eases in on its own. */
.cw-in-fade  { animation: cw-rise var(--cw-dur) var(--cw-spring) both, cw-in 200ms ease-out both; }
.cw-in-below { animation: cw-from-below var(--cw-dur) var(--cw-spring) both, cw-in 160ms ease-out both; }
.cw-in-above { animation: cw-from-above var(--cw-dur) var(--cw-spring) both, cw-in 160ms ease-out both; }
.cw-in-right { animation: cw-from-right var(--cw-dur) var(--cw-spring) both, cw-in 160ms ease-out both; }
.cw-in-left  { animation: cw-from-left var(--cw-dur) var(--cw-spring) both, cw-in 160ms ease-out both; }

/* Content that redraws in place arrives on its own (CwMotion.enter): a CAD
   kind, an order's detail, a Shop Standards section, an editor tab. */
@keyframes cw-arrive-right { from { transform: translateX(18px); } }
@keyframes cw-arrive-left  { from { transform: translateX(-18px); } }
@keyframes cw-arrive-below { from { transform: translateY(14px); } }
@keyframes cw-arrive-above { from { transform: translateY(-14px); } }
@keyframes cw-arrive-fade  { from { transform: translateY(6px); } }
.cw-arrive-right { animation: cw-arrive-right var(--cw-dur) var(--cw-spring) both, cw-in 180ms ease-out both; }
.cw-arrive-left  { animation: cw-arrive-left var(--cw-dur) var(--cw-spring) both, cw-in 180ms ease-out both; }
.cw-arrive-below { animation: cw-arrive-below var(--cw-dur) var(--cw-spring) both, cw-in 180ms ease-out both; }
.cw-arrive-above { animation: cw-arrive-above var(--cw-dur) var(--cw-spring) both, cw-in 180ms ease-out both; }
.cw-arrive-fade  { animation: cw-arrive-fade var(--cw-dur) var(--cw-spring) both, cw-in 180ms ease-out both; }

/* ── moving between page files (the app, the admin console, Pricing, …) ──── */
/* Both pages opt in. The bars cross-fade in place; the work area of the page
   you leave steps back while the next one rises in. */
@view-transition { navigation: auto; }
:root:active-view-transition:not([data-cw-vt]) #app-workspace { view-transition-name: cw-page; }
:root:not([data-cw-vt])::view-transition-group(root) { animation-duration: 260ms; }
:root:not([data-cw-vt])::view-transition-group(cw-page) { animation: none; overflow: clip; }
:root:not([data-cw-vt])::view-transition-old(cw-page) { animation: cw-to-above var(--cw-exit-dur) var(--cw-exit) both, cw-out 110ms ease-in both; }
:root:not([data-cw-vt])::view-transition-new(cw-page) { animation: cw-from-below var(--cw-dur) var(--cw-spring) both, cw-in 200ms ease-out 40ms both; }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-cw-vt])::view-transition-old(cw-page) { animation: cw-out 140ms linear both; }
  :root:not([data-cw-vt])::view-transition-new(cw-page) { animation: cw-in 140ms linear both; }
  .cw-in-fade, .cw-in-below, .cw-in-above, .cw-in-right, .cw-in-left { animation: none; }
  .island-overlay:not(.hidden) > * { animation: cw-in 140ms linear both; }
  .cw-arrive-right, .cw-arrive-left, .cw-arrive-below, .cw-arrive-above, .cw-arrive-fade { animation: cw-in 140ms linear both; }
}