markupr 2.1.8 → 2.5.0

package/src/renderer/styles/animations.css

@@ -1,1093 +0,0 @@
-/**
- * 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);
-}