/*
 * Motion in the app.
 *
 * Deliberately CSS and nothing else. The landing page loads an animation
 * library because it is a page people look at; the app is a tool people use,
 * and the only motion worth having here is the kind that explains what just
 * happened: a panel that came from somewhere, a row that arrived, a state that
 * changed rather than jumped.
 *
 * Every animation here has an entry in the reduced-motion block at the bottom.
 * That block is the contract: if you add something above it and not below it,
 * you have made the app worse for somebody who asked you not to.
 *
 * Nothing here hides content. Every element is fully visible with animations
 * switched off, so a browser that never runs them shows a complete app.
 */

/* ---- dialogs and sheets ----
   From the middle, small and transparent, rather than fading in place: a panel
   that grows says "this opened", a panel that fades says "this was always here
   and you were not looking". */

dialog[open] {
  animation: panel-in var(--duration-base) var(--ease-out);
}

dialog[open]::backdrop {
  animation: scrim-in var(--duration-base) var(--ease-out);
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
}

@keyframes scrim-in {
  from {
    opacity: 0;
  }
}

/* ---- rows arriving ----
   One transition on the container, not a per-row stagger. A note list is
   re-sorted and re-filtered constantly; choreographing each row would turn
   every keystroke in the search box into a performance. */

.rows {
  animation: rows-in var(--duration-fast) var(--ease-out);
}

@keyframes rows-in {
  from {
    opacity: 0.4;
  }
}

/* ---- the editor's saved marker ----
   It appears, sits, and goes. Without a transition it blinks, and a blink reads
   as an error rather than a confirmation. */

.editor-status {
  transition: opacity var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

/* ---- pressing things ----
   A pixel of travel. Enough to feel like the control took the press, not enough
   to move the layout. */

.btn:active:not(:disabled),
.lp-cta:active {
  transform: translateY(1px);
}

.btn,
.lp-cta {
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform 80ms var(--ease-out);
}

/* ---- reduced motion ----
   Not "smaller". Off. Someone who sets this has told the browser that motion is
   a problem for them, and a gentler version of the problem is still one. */

@media (prefers-reduced-motion: reduce) {
  dialog[open],
  dialog[open]::backdrop,
  .rows {
    animation: none;
  }

  .editor-status,
  .btn,
  .lp-cta {
    transition: none;
  }

  .btn:active:not(:disabled),
  .lp-cta:active {
    transform: none;
  }
}