markupr 2.1.8

package/src/renderer/styles/animations.css

@@ -0,0 +1,1093 @@
+/**
+ * markupr - Premium Animation System
+ *
+ * A comprehensive collection of micro-animations designed for 60fps performance.
+ * Uses GPU-accelerated properties (transform, opacity) for smooth rendering.
+ *
+ * Includes:
+ * - Spring physics for dialogs
+ * - Staggered list animations
+ * - State transitions (recording, processing, complete, error)
+ * - Loading skeletons with shimmer
+ * - Success/error feedback
+ * - Button press effects
+ * - Tooltip animations
+ * - Smooth scrolling
+ */
+
+/* ============================================================================
+   CSS Custom Properties (Design Tokens)
+   ============================================================================ */
+
+:root {
+  /* Timing Functions - Spring Physics */
+  --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --spring-smooth: cubic-bezier(0.16, 1, 0.3, 1);
+  --spring-snap: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+  /* Timing Functions - Standard */
+  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Durations */
+  --duration-instant: 100ms;
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --duration-slow: 400ms;
+  --duration-slower: 600ms;
+
+  /* Colors for state animations — sourced from theme tokens */
+  --color-recording: var(--status-error);
+  --color-processing: var(--status-warning);
+  --color-success: var(--status-success);
+  --color-error: var(--status-error);
+  --color-info: var(--status-info);
+}
+
+/* ============================================================================
+   Reduced Motion Support
+   ============================================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ============================================================================
+   Dialog / Modal Animations
+   ============================================================================ */
+
+/* Spring entrance for dialogs */
+@keyframes dialogEnter {
+  0% {
+    opacity: 0;
+    transform: scale(0.95) translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes dialogExit {
+  0% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.95) translateY(10px);
+  }
+}
+
+/* Backdrop fade */
+@keyframes backdropFadeIn {
+  from {
+    opacity: 0;
+    backdrop-filter: blur(0px);
+  }
+  to {
+    opacity: 1;
+    backdrop-filter: blur(8px);
+  }
+}
+
+@keyframes backdropFadeOut {
+  from {
+    opacity: 1;
+    backdrop-filter: blur(8px);
+  }
+  to {
+    opacity: 0;
+    backdrop-filter: blur(0px);
+  }
+}
+
+.ff-dialog-enter {
+  animation: dialogEnter var(--duration-normal) var(--spring-bounce);
+}
+
+.ff-dialog-exit {
+  animation: dialogExit var(--duration-fast) var(--ease-out);
+}
+
+.ff-backdrop-enter {
+  animation: backdropFadeIn var(--duration-normal) var(--ease-out);
+}
+
+.ff-backdrop-exit {
+  animation: backdropFadeOut var(--duration-fast) var(--ease-out);
+}
+
+/* ============================================================================
+   Staggered List Animations
+   ============================================================================ */
+
+@keyframes listItemEnter {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes listItemEnterLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes listItemEnterRight {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes listItemEnterScale {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.ff-list-item-enter {
+  animation: listItemEnter var(--duration-normal) var(--spring-smooth) both;
+}
+
+.ff-list-item-enter-left {
+  animation: listItemEnterLeft var(--duration-normal) var(--spring-smooth) both;
+}
+
+.ff-list-item-enter-right {
+  animation: listItemEnterRight var(--duration-normal) var(--spring-smooth) both;
+}
+
+.ff-list-item-enter-scale {
+  animation: listItemEnterScale var(--duration-normal) var(--spring-bounce) both;
+}
+
+/* Stagger delays (use with data-stagger-index or inline style) */
+.ff-stagger-1 { animation-delay: 50ms; }
+.ff-stagger-2 { animation-delay: 100ms; }
+.ff-stagger-3 { animation-delay: 150ms; }
+.ff-stagger-4 { animation-delay: 200ms; }
+.ff-stagger-5 { animation-delay: 250ms; }
+.ff-stagger-6 { animation-delay: 300ms; }
+.ff-stagger-7 { animation-delay: 350ms; }
+.ff-stagger-8 { animation-delay: 400ms; }
+.ff-stagger-9 { animation-delay: 450ms; }
+.ff-stagger-10 { animation-delay: 500ms; }
+
+/* ============================================================================
+   Recording State Animations
+   ============================================================================ */
+
+/* Pulsing glow for recording state */
+@keyframes recordingPulse {
+  0%, 100% {
+    box-shadow:
+      0 0 0 0 rgba(239, 68, 68, 0.4),
+      0 4px 12px -2px rgba(239, 68, 68, 0.3);
+  }
+  50% {
+    box-shadow:
+      0 0 0 8px rgba(239, 68, 68, 0),
+      0 8px 20px -4px rgba(239, 68, 68, 0.4);
+  }
+}
+
+@keyframes recordingDotPulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(0.9);
+  }
+}
+
+@keyframes recordingRing {
+  0% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.ff-recording-pulse {
+  animation: recordingPulse 2s ease-in-out infinite;
+}
+
+.ff-recording-dot {
+  animation: recordingDotPulse 1.5s ease-in-out infinite;
+}
+
+.ff-recording-ring {
+  animation: recordingRing 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+/* ============================================================================
+   Processing State Animations
+   ============================================================================ */
+
+@keyframes processingGradient {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes processingPulse {
+  0%, 100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
+  }
+  50% {
+    opacity: 0.8;
+    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
+  }
+}
+
+@keyframes processingRotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ff-processing-gradient {
+  background: linear-gradient(
+    90deg,
+    rgba(245, 158, 11, 0.1) 0%,
+    rgba(245, 158, 11, 0.3) 50%,
+    rgba(245, 158, 11, 0.1) 100%
+  );
+  background-size: 200% 100%;
+  animation: processingGradient 1.5s linear infinite;
+}
+
+.ff-processing-pulse {
+  animation: processingPulse 1.5s ease-in-out infinite;
+}
+
+.ff-processing-rotate {
+  animation: processingRotate 1s linear infinite;
+}
+
+/* ============================================================================
+   Success State Animations
+   ============================================================================ */
+
+@keyframes successPulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
+  }
+}
+
+@keyframes successBounce {
+  0%, 100% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.1);
+  }
+  50% {
+    transform: scale(0.95);
+  }
+  75% {
+    transform: scale(1.02);
+  }
+}
+
+@keyframes successCheckDraw {
+  0% {
+    stroke-dashoffset: 24;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes successPop {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.ff-success-pulse {
+  animation: successPulse 1.5s ease-in-out;
+}
+
+.ff-success-bounce {
+  animation: successBounce 0.5s var(--spring-bounce);
+}
+
+.ff-success-check {
+  stroke-dasharray: 24;
+  stroke-dashoffset: 24;
+  animation: successCheckDraw 0.4s var(--ease-out) 0.2s forwards;
+}
+
+.ff-success-pop {
+  animation: successPop 0.4s var(--spring-bounce);
+}
+
+/* ============================================================================
+   Error State Animations
+   ============================================================================ */
+
+@keyframes errorShake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-4px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(4px);
+  }
+}
+
+@keyframes errorPulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
+    border-color: rgba(239, 68, 68, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
+    border-color: rgba(239, 68, 68, 0.8);
+  }
+}
+
+@keyframes errorFlash {
+  0%, 100% {
+    background-color: transparent;
+  }
+  50% {
+    background-color: rgba(239, 68, 68, 0.1);
+  }
+}
+
+.ff-error-shake {
+  animation: errorShake 0.5s var(--ease-out);
+}
+
+.ff-error-pulse {
+  animation: errorPulse 1s ease-in-out 2;
+}
+
+.ff-error-flash {
+  animation: errorFlash 0.3s ease-in-out 2;
+}
+
+/* ============================================================================
+   Skeleton Loading Animations
+   ============================================================================ */
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes skeletonPulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.ff-skeleton {
+  background: linear-gradient(
+    90deg,
+    rgba(55, 65, 81, 0.3) 0%,
+    rgba(75, 85, 99, 0.5) 50%,
+    rgba(55, 65, 81, 0.3) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: 8px;
+}
+
+.ff-skeleton-pulse {
+  animation: skeletonPulse 1.5s ease-in-out infinite;
+}
+
+/* Skeleton variants */
+.ff-skeleton-text {
+  height: 16px;
+  margin-bottom: 8px;
+}
+
+.ff-skeleton-title {
+  height: 24px;
+  width: 60%;
+  margin-bottom: 12px;
+}
+
+.ff-skeleton-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.ff-skeleton-thumbnail {
+  width: 100%;
+  aspect-ratio: 16/9;
+  border-radius: 8px;
+}
+
+.ff-skeleton-button {
+  height: 40px;
+  width: 120px;
+  border-radius: 8px;
+}
+
+/* ============================================================================
+   Button Press Effects
+   ============================================================================ */
+
+.ff-btn-press {
+  transition: transform var(--duration-instant) var(--ease-out),
+              box-shadow var(--duration-instant) var(--ease-out);
+  will-change: transform;
+}
+
+.ff-btn-press:hover {
+  transform: translateY(-1px);
+}
+
+.ff-btn-press:active {
+  transform: scale(0.97) translateY(0);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* Scale press effect */
+.ff-btn-scale {
+  transition: transform var(--duration-instant) var(--spring-bounce);
+  will-change: transform;
+}
+
+.ff-btn-scale:hover {
+  transform: scale(1.02);
+}
+
+.ff-btn-scale:active {
+  transform: scale(0.95);
+}
+
+/* Ripple effect (requires JS for position) */
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+.ff-ripple {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(0);
+  animation: ripple 0.6s linear;
+  pointer-events: none;
+}
+
+/* ============================================================================
+   Tooltip Animations
+   ============================================================================ */
+
+@keyframes tooltipFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes tooltipFadeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(4px) scale(0.95);
+  }
+}
+
+@keyframes tooltipFadeInTop {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.ff-tooltip-enter {
+  animation: tooltipFadeIn var(--duration-fast) var(--spring-smooth);
+}
+
+.ff-tooltip-exit {
+  animation: tooltipFadeOut var(--duration-instant) var(--ease-out);
+}
+
+.ff-tooltip-enter-top {
+  animation: tooltipFadeInTop var(--duration-fast) var(--spring-smooth);
+}
+
+/* ============================================================================
+   Toast / Notification Animations
+   ============================================================================ */
+
+@keyframes toastSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(100%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes toastSlideOut {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%) scale(0.9);
+  }
+}
+
+@keyframes toastSlideInTop {
+  from {
+    opacity: 0;
+    transform: translateY(-100%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.ff-toast-enter {
+  animation: toastSlideIn var(--duration-normal) var(--spring-smooth);
+}
+
+.ff-toast-exit {
+  animation: toastSlideOut var(--duration-fast) var(--ease-out);
+}
+
+.ff-toast-enter-top {
+  animation: toastSlideInTop var(--duration-normal) var(--spring-smooth);
+}
+
+/* Slide up animation for update notifications */
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-slide-up {
+  animation: slideUp 0.3s var(--spring-smooth);
+}
+
+/* ============================================================================
+   Card Hover Effects
+   ============================================================================ */
+
+.ff-card-hover {
+  transition: transform var(--duration-fast) var(--ease-out),
+              box-shadow var(--duration-fast) var(--ease-out);
+  will-change: transform;
+}
+
+.ff-card-hover:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.3);
+}
+
+.ff-card-lift {
+  transition: transform var(--duration-normal) var(--spring-smooth),
+              box-shadow var(--duration-normal) var(--ease-out);
+}
+
+.ff-card-lift:hover {
+  transform: translateY(-4px) scale(1.01);
+  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35);
+}
+
+/* ============================================================================
+   Badge / Counter Animations
+   ============================================================================ */
+
+@keyframes badgePop {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.3);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes badgeBounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  25% {
+    transform: translateY(-4px);
+  }
+  50% {
+    transform: translateY(0);
+  }
+  75% {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes counterIncrement {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.ff-badge-pop {
+  animation: badgePop var(--duration-normal) var(--spring-bounce);
+}
+
+.ff-badge-bounce {
+  animation: badgeBounce 0.5s var(--ease-out);
+}
+
+.ff-counter-increment {
+  animation: counterIncrement 0.3s var(--spring-bounce);
+}
+
+/* ============================================================================
+   Page / View Transitions
+   ============================================================================ */
+
+@keyframes pageSlideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes pageSlideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes pageFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes pageZoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.ff-page-slide-right {
+  animation: pageSlideInRight var(--duration-slow) var(--spring-smooth);
+}
+
+.ff-page-slide-left {
+  animation: pageSlideInLeft var(--duration-slow) var(--spring-smooth);
+}
+
+.ff-page-fade {
+  animation: pageFadeIn var(--duration-normal) var(--ease-out);
+}
+
+.ff-page-zoom {
+  animation: pageZoomIn var(--duration-normal) var(--spring-smooth);
+}
+
+/* ============================================================================
+   Scrolling Behavior
+   ============================================================================ */
+
+.ff-smooth-scroll {
+  scroll-behavior: smooth;
+}
+
+.ff-scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.ff-scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Custom scrollbar styling */
+.ff-scrollbar-styled {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(107, 114, 128, 0.5) transparent;
+}
+
+.ff-scrollbar-styled::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.ff-scrollbar-styled::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 3px;
+}
+
+.ff-scrollbar-styled::-webkit-scrollbar-thumb {
+  background: rgba(107, 114, 128, 0.5);
+  border-radius: 3px;
+}
+
+.ff-scrollbar-styled::-webkit-scrollbar-thumb:hover {
+  background: rgba(107, 114, 128, 0.7);
+}
+
+/* ============================================================================
+   Focus States
+   ============================================================================ */
+
+@keyframes focusRing {
+  0% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
+  }
+  100% {
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
+  }
+}
+
+.ff-focus-ring:focus {
+  outline: none;
+  animation: focusRing 0.2s ease-out forwards;
+}
+
+.ff-focus-ring:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.ff-focus-ring:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+/* ============================================================================
+   Utility Animations
+   ============================================================================ */
+
+/* Fade */
+.ff-fade-in {
+  animation: pageFadeIn var(--duration-normal) var(--ease-out);
+}
+
+/* Spin */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ff-spin {
+  animation: spin 1s linear infinite;
+}
+
+.ff-spin-slow {
+  animation: spin 2s linear infinite;
+}
+
+/* Pulse */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.ff-pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+/* Bounce */
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.ff-bounce {
+  animation: bounce 1s ease-in-out infinite;
+}
+
+/* Ping */
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.ff-ping {
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+/* Wiggle */
+@keyframes wiggle {
+  0%, 100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-5deg);
+  }
+  75% {
+    transform: rotate(5deg);
+  }
+}
+
+.ff-wiggle {
+  animation: wiggle 0.5s ease-in-out;
+}
+
+/* ============================================================================
+   Component-Specific Centralized Keyframes
+   ============================================================================ */
+
+/* Fade out */
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.ff-fade-out {
+  animation: fadeOut var(--duration-fast) var(--ease-out);
+}
+
+/* Pulse with scale (recording dots, waveform indicators) */
+@keyframes pulseScale {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(0.95);
+  }
+}
+
+.ff-pulse-scale {
+  animation: pulseScale 1.5s ease-in-out infinite;
+}
+
+/* Glow pulse (accent-colored box-shadow) */
+@keyframes glowPulse {
+  0%, 100% {
+    box-shadow: 0 0 20px var(--accent-muted);
+  }
+  50% {
+    box-shadow: 0 0 40px var(--accent-muted);
+  }
+}
+
+.ff-glow-pulse {
+  animation: glowPulse 3s ease-in-out infinite;
+}
+
+/* Border color pulse */
+@keyframes pulseBorder {
+  0%, 100% {
+    border-color: rgba(59, 130, 246, 0.5);
+  }
+  50% {
+    border-color: rgba(59, 130, 246, 0.8);
+  }
+}
+
+.ff-pulse-border {
+  animation: pulseBorder 1.5s ease-in-out infinite;
+}
+
+/* Badge float up and fade */
+@keyframes badgeFloat {
+  0% {
+    transform: scale(0) translateY(0);
+    opacity: 0;
+  }
+  20% {
+    transform: scale(1.2) translateY(-2px);
+    opacity: 1;
+  }
+  40% {
+    transform: scale(1) translateY(-4px);
+  }
+  100% {
+    transform: scale(0.8) translateY(-16px);
+    opacity: 0;
+  }
+}
+
+.ff-badge-float {
+  animation: badgeFloat 1.2s ease-out forwards;
+}
+
+/* Annotation toolbar entrance */
+@keyframes toolbarFadeInUp {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+.ff-toolbar-enter {
+  animation: toolbarFadeInUp 0.3s var(--ease-out) forwards;
+}
+
+/* ============================================================================
+   GPU Acceleration Helpers
+   ============================================================================ */
+
+.ff-gpu {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+.ff-will-change-transform {
+  will-change: transform;
+}
+
+.ff-will-change-opacity {
+  will-change: opacity;
+}
+
+/* ============================================================================
+   Transition Utilities
+   ============================================================================ */
+
+.ff-transition-colors {
+  transition: background-color var(--duration-fast) var(--ease-out),
+              border-color var(--duration-fast) var(--ease-out),
+              color var(--duration-fast) var(--ease-out);
+}
+
+.ff-transition-transform {
+  transition: transform var(--duration-fast) var(--ease-out);
+}
+
+.ff-transition-opacity {
+  transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+.ff-transition-shadow {
+  transition: box-shadow var(--duration-fast) var(--ease-out);
+}
+
+.ff-transition-all {
+  transition: all var(--duration-fast) var(--ease-out);
+}