:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 340ms;
  --dur-slow: 520ms;
}

@keyframes view-in { from { opacity: 0; translate: 0 14px; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes dialog-in { from { opacity: 0; scale: 0.92; translate: 0 24px; } }
@keyframes dialog-out { to { opacity: 0; scale: 0.96; translate: 0 12px; } }
@keyframes check-pop { 40% { scale: 0.86; } }
@keyframes check-pulse { 50% { box-shadow: 0 0 0 5px rgb(var(--fg-rgb) / 0.12); } }
@keyframes link-in { from { opacity: 0; scale: 0.5; } }

@keyframes panel-in { from { opacity: 0; translate: 0 10px; } }
@keyframes focus-ring { from { outline-offset: 10px; outline-color: transparent; } }
@keyframes snap-glow { 50% { box-shadow: 0 0 0 0.5rem rgb(var(--fg-rgb) / 0.12); } }

.view.is-entering { animation: view-in var(--dur-slow) var(--ease-out) both; }

/* ---- How things feel when pointed at and pressed. The pop, the ring and the click sound come from assets/js/feedback.js. ---- */
button, [role="tab"], .app-link, .menu-link { -webkit-tap-highlight-color: transparent; }
.gbtn { transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), scale var(--dur-fast) var(--ease-spring); }
.gbtn:hover:not(:disabled) { scale: 1.1; }
.gbtn:active:not(:disabled) { scale: 0.86; }
:where(button, [role="tab"]):active:not(:disabled) { scale: 0.96; }
:focus-visible { animation: focus-ring var(--dur) var(--ease-out); }
/* A tab, a settings page or a viewer start page slides in softly when it appears */
[data-panel]:not([hidden]), .br-start:not([hidden]), .br-note:not([hidden]) { animation: panel-in var(--dur) var(--ease-out) backwards; }

[data-motion="reduced"] .wordmark span { animation: none; }
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  .wordmark span { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}