/*
 * Motion (design-system §4). Keyframes and component enter animations that Tailwind utilities can't express. Kept
 * out of app/assets/tailwind/application.css so that file stays a verbatim copy of design-system §2.2.
 * The layout links this after fonts.css. Tokens: --duration-* and --ease-out-soft from §2.2, with
 * fallbacks in case a token isn't emitted. §2.2 already shortens --duration-base/slow to 120 ms under reduced motion.
 */

/* §7.12 skeleton shimmer: moves the 200% muted → secondary → muted gradient (UiHelper#skeleton_block_classes). */
@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@keyframes nebari-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes nebari-sheet-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@keyframes nebari-modal-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes nebari-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* §7.9: bottom sheet slides up below 768 px; modal fades + scales from 768 px. The scrim fades in. */
dialog[data-motion="dialog"][open] {
  animation: nebari-sheet-in var(--duration-slow, 320ms) var(--ease-out-soft, cubic-bezier(.2, .7, .2, 1)) both;
}

dialog[data-motion="dialog"][open]::backdrop {
  animation: nebari-fade-in var(--duration-slow, 320ms) var(--ease-out-soft, cubic-bezier(.2, .7, .2, 1)) both;
}

@media (min-width: 768px) {
  dialog[data-motion="dialog"][open] {
    animation-name: nebari-modal-in;
  }
}

/* §7.8: toast enter. */
[data-motion="toast"] {
  animation: nebari-toast-in var(--duration-base, 200ms) var(--ease-out-soft, cubic-bezier(.2, .7, .2, 1)) both;
}

/* Reduced motion: sheets, modals and toasts fade only, in ≤ 120 ms. The shimmer is already off
   (motion-reduce:animate-none on the skeleton blocks). */
@media (prefers-reduced-motion: reduce) {
  dialog[data-motion="dialog"][open],
  [data-motion="toast"] {
    animation: nebari-fade-in 120ms linear both;
  }

  dialog[data-motion="dialog"][open]::backdrop {
    animation: nebari-fade-in 120ms linear both;
  }
}