/* The homepage window's Text <-> Subtext motion, the app's own (Randall: "when I open and close panels or switch views inside the app, it feels very fluid and smooth as it
   changes shape, and we need to follow the same language on the homepage"). Between the two markers below is the app's rule block, verbatim (prototype-next/proto.css, "TEXT ↔ SUBTEXT,
   ONE DOCUMENT", app 4f0226a), and scripts/verify-hero-motion.cjs fails if it ever differs from the app's. The tokens are the app's: --glide and --glide-ms (proto.css, "v4").
   The window (hl-window) takes the app's surface glide: the same duration and curve as a panel opening. Reduced motion: the script switches at once (hero/morph.js). */
:root { --glide: cubic-bezier(0.32, 0.72, 0, 1); --glide-ms: 320ms; }
/* >>> the app's rules, verbatim */
/* ===================== TEXT ↔ SUBTEXT, ONE DOCUMENT (prototype, 2026-10-16) =====================
   App.jsx viewMorph. The one unfold (app overhaul, direction a, 2026-10-20): the paragraphs hold still
   (they don't travel; the one with the caret stays exactly where it was); thoughts unfold from beneath their
   paragraph, top-down, or fold back up into it, bottom-up. All of it settled within 300 ms on an ease-out
   curve, the app's fold curve (WorkFlowy's timing). Reduced motion: a still (no transition at all). */
html[data-view="subtext"]::view-transition-group(root),
html[data-view="text"]::view-transition-group(root) {
  animation-duration: 300ms;
}
::view-transition-group(*.para) {
  animation: none;
}
::view-transition-old(*.para),
::view-transition-new(*.para) {
  width: auto;
  height: auto;
  object-fit: none;
  object-position: left top;
  overflow: clip;
}
/* The words hand over rather than double up: the old type leaves early, the new arrives a beat later. */
::view-transition-old(*.para) {
  animation: para-out 240ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(*.para) {
  animation: para-in 320ms 170ms cubic-bezier(0, 0, 0.2, 1) both;
}
@keyframes para-out {
  to {
    opacity: 0;
  }
}
@keyframes para-in {
  from {
    opacity: 0;
  }
}
::view-transition-group(*.thought) {
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
/* (Each starts up to 100 ms after the first, App.jsx: so every one has settled by 300.) */
::view-transition-new(*.thought) {
  animation: thought-unfold 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
::view-transition-old(*.thought) {
  animation: thought-fold 160ms cubic-bezier(0, 0, 0.2, 1) both;
}
@keyframes thought-unfold {
  from {
    opacity: 0;
    transform: translate(-14px, -12px);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
}
@keyframes thought-fold {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translate(-14px, -12px);
  }
}
/* <<< the app's rules */
::view-transition-group(hl-window), ::view-transition-group(*.hl-window) { animation-duration: var(--glide-ms); animation-timing-function: var(--glide); }
::view-transition-group(hl-after-0), ::view-transition-group(hl-after-1) { animation-duration: var(--glide-ms); animation-timing-function: var(--glide); }
/* The window grows by half or more here, so the paragraphs below the one with the caret travel further than in the app: they glide on the app's curve and hand their words over
   with the app's own keyframes (para-out, para-in); one that the new view doesn't show fades where it stands. The caret's paragraph is the app's "para", holding still. */
::view-transition-group(*.hpara) { animation-duration: var(--glide-ms); animation-timing-function: var(--glide); }
::view-transition-old(*.hpara), ::view-transition-new(*.hpara) { width: auto; height: auto; object-fit: none; object-position: left top; overflow: clip; }
::view-transition-old(*.hpara) { animation: para-out 160ms cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(*.hpara) { animation: para-in 240ms 120ms cubic-bezier(0, 0, 0.2, 1) both; }
::view-transition-group(*.gone) { animation: none; }
::view-transition-old(*.gone) { animation: para-out 90ms cubic-bezier(0.4, 0, 1, 1) both; }