osi-cards-lib 1.5.30 → 1.5.32

package/styles/core/_animations.scss

@@ -1,1498 +0,0 @@
-/* ===================================================================
-   ANIMATION KEYFRAMES
-   Performance-optimized animations with hardware acceleration
-   =================================================================== */
-
-/* Entry Animations - For components appearing on screen */
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translate3d(0, var(--motion-distance-lg), 0); /* Hardware acceleration */
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 0, 0); /* Hardware acceleration */
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes fadeInSoft {
-  from {
-    opacity: 0;
-    transform: translate3d(0, var(--motion-distance-sm), 0) scale(var(--motion-scale-soft-start));
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0) scale(var(--motion-scale-soft-end));
-  }
-}
-
-@keyframes slideUp {
-  from {
-    transform: translate3d(0, var(--motion-distance-xl), 0);
-    opacity: 0;
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideDown {
-  from {
-    transform: translate3d(0, calc(var(--motion-distance-xl) * -1), 0);
-    opacity: 0;
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideInLeft {
-  from {
-    transform: translate3d(calc(var(--motion-distance-xl) * -1), 0, 0);
-    opacity: 0;
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translate3d(var(--motion-distance-xl), 0, 0);
-    opacity: 0;
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes fadeInUpSoft {
-  from {
-    opacity: 0;
-    transform: translate3d(0, var(--motion-distance-md), 0) scale(var(--motion-scale-soft-start));
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0) scale(var(--motion-scale-soft-end));
-  }
-}
-
-/* Scale Animations - For interactive feedback */
-@keyframes scale {
-  0% {
-    transform: scale(var(--motion-scale-pulse-min)) translate3d(0, 0, 0);
-  }
-  70% {
-    transform: scale(var(--motion-scale-pop)) translate3d(0, 0, 0);
-  }
-  100% {
-    transform: scale(var(--motion-scale-soft-end)) translate3d(0, 0, 0);
-  }
-}
-
-@keyframes scaleIn {
-  from {
-    transform: scale(var(--motion-scale-soft-start)) translate3d(0, 0, 0);
-    opacity: 0;
-  }
-  to {
-    transform: scale(var(--motion-scale-soft-end)) translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes fadeInScaleSoft {
-  from {
-    opacity: 0;
-    transform: scale(var(--motion-scale-soft-start)) translate3d(0, 0, 0);
-  }
-  to {
-    opacity: 1;
-    transform: scale(var(--motion-scale-soft-end)) translate3d(0, 0, 0);
-  }
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    transform: scale(var(--motion-scale-soft-end)) translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(var(--motion-scale-pop)) translate3d(0, 0, 0);
-    opacity: 0.8;
-  }
-}
-
-/* Enhanced hover elevation for cards - subtle lift */
-@keyframes hoverLift {
-  from {
-    transform: translate3d(0, 0, 0);
-  }
-  to {
-    transform: translate3d(0, -2px, 0);
-  }
-}
-
-/* Glow accent animation - brand color pulse */
-@keyframes glowAccent {
-  0%,
-  100% {
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-  }
-  50% {
-    text-shadow: 0 2px 6px rgba(255, 121, 0, 0.25);
-  }
-}
-
-/* Value emphasis - gentle highlight on important numbers */
-@keyframes valueEmphasize {
-  0%,
-  100% {
-    color: var(--card-text-primary);
-  }
-  50% {
-    color: color-mix(in srgb, var(--card-text-primary) 85%, var(--color-brand) 15%);
-  }
-}
-
-/* Glow & Effect Animations - For visual enhancements */
-@keyframes glowPulse {
-  0%,
-  100% {
-    opacity: 0.6;
-    filter: blur(25px);
-  }
-  50% {
-    opacity: 1;
-    filter: blur(30px);
-  }
-}
-
-@keyframes glowDrift {
-  0%,
-  100% {
-    opacity: 0.7;
-    transform: translate3d(0, 0, 0);
-  }
-  25% {
-    opacity: 0.8;
-    transform: translate3d(5px, -5px, 0);
-  }
-  50% {
-    opacity: 0.9;
-    transform: translate3d(0, 5px, 0);
-  }
-  75% {
-    opacity: 0.8;
-    transform: translate3d(-5px, 0, 0);
-  }
-}
-
-@keyframes shimmer {
-  0%,
-  100% {
-    opacity: 0.5;
-  }
-  50% {
-    opacity: 0.8;
-  }
-}
-
-/* Rotation Animations - For loaders and indicators */
-@keyframes spin {
-  from {
-    transform: rotate(0deg) translateZ(0);
-  }
-  to {
-    transform: rotate(360deg) translateZ(0);
-  }
-}
-
-@keyframes spinSlow {
-  from {
-    transform: rotate(0deg) translateZ(0);
-  }
-  to {
-    transform: rotate(360deg) translateZ(0);
-  }
-}
-
-/* Shake & Attention Animations */
-@keyframes shake {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    transform: translate3d(calc(var(--motion-distance-sm) * -1), 0, 0);
-  }
-  20%,
-  40%,
-  60%,
-  80% {
-    transform: translate3d(var(--motion-distance-sm), 0, 0);
-  }
-}
-
-@keyframes bounce {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0);
-    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-  }
-  50% {
-    transform: translate3d(0, calc(var(--motion-distance-lg) * -1), 0);
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-}
-
-/* ===================================================================
-   LLM SIMULATION & STREAMING ANIMATIONS
-   Section entrance animations for progressive loading
-   =================================================================== */
-
-/* Section entrance animation - smooth fade-in with scale and upward motion */
-@keyframes sectionEnter {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 20px, 0) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-}
-
-/* Section streaming glow effect - subtle pulse during appearance */
-@keyframes sectionStreamingGlow {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 rgba(255, 121, 0, 0);
-  }
-  50% {
-    box-shadow: 0 0 12px 2px rgba(255, 121, 0, 0.15);
-  }
-}
-
-/* Field entrance animation - smooth fade-in with upward motion */
-@keyframes fieldEnter {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 10px, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-/* Item entrance animation - slide-in from left with fade */
-@keyframes itemEnter {
-  from {
-    opacity: 0;
-    transform: translate3d(-10px, 0, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-/* ===================================================================
-   MAGICAL STREAMING EFFECTS
-   Enhanced visual effects for LLM streaming experience
-   =================================================================== */
-
-/* Traveling spark around card border - follows the perimeter */
-@keyframes sparkTravel {
-  0% {
-    top: -1.5px;
-    left: 0;
-  }
-  25% {
-    top: -1.5px;
-    left: calc(100% - 1.5px);
-  }
-  50% {
-    top: calc(100% - 1.5px);
-    left: calc(100% - 1.5px);
-  }
-  75% {
-    top: calc(100% - 1.5px);
-    left: 0;
-  }
-  100% {
-    top: -1.5px;
-    left: 0;
-  }
-}
-
-/* Magical section entrance - blur-to-sharp reveal with scale bounce */
-@keyframes sectionMagicAppear {
-  0% {
-    opacity: 0;
-    transform: translate3d(0, 20px, 0) scale(0.95);
-    filter: blur(8px);
-  }
-  60% {
-    opacity: 1;
-    transform: translate3d(0, -4px, 0) scale(1.02);
-    filter: blur(0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0) scale(1);
-    filter: blur(0);
-  }
-}
-
-/* Shimmer sweep effect - diagonal light sweep across sections */
-@keyframes shimmerSweep {
-  0% {
-    transform: translate3d(-100%, 0, 0);
-    opacity: 1;
-  }
-  100% {
-    transform: translate3d(100%, 0, 0);
-    opacity: 0;
-  }
-}
-
-/* Inner glow flash on section appearance */
-@keyframes innerFlash {
-  0% {
-    box-shadow: inset 0 0 30px rgba(255, 149, 0, 0.4);
-  }
-  100% {
-    box-shadow: inset 0 0 0 rgba(255, 149, 0, 0);
-  }
-}
-
-/* Subtle inner border glow pulse */
-@keyframes innerBorderPulse {
-  0%,
-  100% {
-    box-shadow: inset 0 0 0 1px rgba(255, 121, 0, 0.1);
-  }
-  50% {
-    box-shadow: inset 0 0 0 1px rgba(255, 121, 0, 0.3);
-  }
-}
-
-/* Typing cursor blink effect */
-@keyframes cursorBlink {
-  0%,
-  50% {
-    opacity: 1;
-  }
-  51%,
-  100% {
-    opacity: 0;
-  }
-}
-
-/* Section glow pulse during streaming */
-@keyframes sectionGlowPulse {
-  0%,
-  100% {
-    box-shadow: 0 0 10px rgba(255, 121, 0, 0.15);
-  }
-  50% {
-    box-shadow: 0 0 20px rgba(255, 121, 0, 0.35);
-  }
-}
-
-/* Field enter with bounce - more dynamic than simple fade */
-@keyframes fieldEnterBounce {
-  0% {
-    opacity: 0;
-    transform: translate3d(0, 12px, 0) scale(0.98);
-  }
-  60% {
-    opacity: 1;
-    transform: translate3d(0, -2px, 0) scale(1.01);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-}
-
-/* ===================================================================
-   STATE TRANSITION ANIMATIONS
-   Smooth transitions between LLM simulation states
-   =================================================================== */
-
-/* State fade transition - smooth fade between states */
-@keyframes stateFade {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 8px, 0) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-}
-
-/* State slide transition - slide out old, slide in new */
-@keyframes stateSlideOut {
-  from {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-  to {
-    opacity: 0;
-    transform: translate3d(0, -10px, 0);
-  }
-}
-
-@keyframes stateSlideIn {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 10px, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-/* Error shake animation - for error states */
-@keyframes errorShake {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    transform: translate3d(-4px, 0, 0);
-  }
-  20%,
-  40%,
-  60%,
-  80% {
-    transform: translate3d(4px, 0, 0);
-  }
-}
-
-/* Error pulse - subtle pulse for error indication */
-@keyframes errorPulse {
-  0%,
-  100% {
-    opacity: 1;
-    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
-  }
-  50% {
-    opacity: 0.9;
-    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
-  }
-}
-
-/* Enhanced shimmer effect - for skeleton loaders */
-@keyframes shimmerWave {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-/* Skeleton pulse - breathing effect for loading */
-@keyframes skeletonPulse {
-  0%,
-  100% {
-    opacity: 0.6;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
-/* ===================================================================
-   ADDITIONAL ANIMATIONS - Homepage Feature Parity
-   =================================================================== */
-
-/* Fade in with scale - entrance with scale bounce */
-@keyframes fadeInScale {
-  from {
-    opacity: 0;
-    transform: scale(0.98) translate3d(0, 0, 0);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translate3d(0, 0, 0);
-  }
-}
-
-/* Background pulse glow - radial gradient pulsing effect */
-@keyframes pulseGlow {
-  0%,
-  100% {
-    opacity: 0.5;
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-  50% {
-    opacity: 0.8;
-    transform: translate3d(0, 0, 0) scale(1.1);
-  }
-}
-
-/* Float animation - vertical floating motion */
-@keyframes float {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-  50% {
-    transform: translate3d(0, -10px, 0);
-  }
-}
-
-/* Pulse ring - expanding ring animation */
-@keyframes pulseRing {
-  0% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: translate3d(0, 0, 0) scale(1.3);
-  }
-}
-
-/* Text shimmer - gradient text shimmer effect */
-@keyframes textShimmer {
-  0%,
-  100% {
-    background-position: -200% 0;
-  }
-  50% {
-    background-position: 200% 0;
-  }
-}
-
-/* Wave slide - wave progress indicator */
-@keyframes waveSlide {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-/* Section pulse - subtle scale pulse for highlighted sections */
-@keyframes sectionPulse {
-  0%,
-  100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.01);
-  }
-}
-
-/* Section border fade - fading border highlight */
-@keyframes sectionBorderFade {
-  0% {
-    opacity: 1;
-    box-shadow: 0 0 20px color-mix(in srgb, var(--color-brand, #ff7900) 40%, transparent);
-  }
-  100% {
-    opacity: 0;
-    box-shadow: 0 0 0 transparent;
-  }
-}
-
-/* New section glow - glow effect for newly added sections */
-@keyframes newSectionGlow {
-  0% {
-    border-color: color-mix(in srgb, var(--color-brand, #ff7900) 60%, transparent);
-    box-shadow: 0 0 25px color-mix(in srgb, var(--color-brand, #ff7900) 40%, transparent);
-  }
-  100% {
-    border-color: color-mix(in srgb, var(--color-brand, #ff7900) 20%, transparent);
-    box-shadow: 0 0 10px color-mix(in srgb, var(--color-brand, #ff7900) 15%, transparent);
-  }
-}
-
-/* Dot pulse - pulsing dot animation */
-@keyframes dotPulse {
-  0%,
-  100% {
-    transform: translate3d(-50%, -50%, 0) scale(1);
-    opacity: 0.6;
-  }
-  50% {
-    transform: translate3d(-50%, -50%, 0) scale(1.5);
-    opacity: 0.3;
-  }
-}
-
-/* Ring expand - expanding ring that fades */
-@keyframes ringExpand {
-  0% {
-    transform: translate3d(-50%, -50%, 0) scale(0.8);
-    opacity: 0.2;
-  }
-  50% {
-    transform: translate3d(-50%, -50%, 0) scale(1);
-    opacity: 0.1;
-  }
-  100% {
-    transform: translate3d(-50%, -50%, 0) scale(1.2);
-    opacity: 0;
-  }
-}
-
-/* Generating background pulse - for loading states */
-@keyframes generatingBgPulse {
-  0%,
-  100% {
-    background: radial-gradient(
-      circle at 50% 50%,
-      color-mix(in srgb, var(--color-brand, #ff7900) 5%, transparent) 0%,
-      transparent 70%
-    );
-  }
-  50% {
-    background: radial-gradient(
-      circle at 50% 50%,
-      color-mix(in srgb, var(--color-brand, #ff7900) 12%, transparent) 0%,
-      transparent 70%
-    );
-  }
-}
-
-/* Card generating pulse - glow pulse for cards during generation */
-@keyframes cardGeneratingPulse {
-  0%,
-  100% {
-    box-shadow:
-      inset 0 1px 3px color-mix(in srgb, var(--color-brand, #ff7900) 8%, transparent),
-      0 4px 20px rgba(0, 0, 0, 0.15),
-      0 0 0 transparent;
-  }
-  50% {
-    box-shadow:
-      inset 0 1px 3px color-mix(in srgb, var(--color-brand, #ff7900) 15%, transparent),
-      0 4px 20px rgba(0, 0, 0, 0.15),
-      0 0 30px color-mix(in srgb, var(--color-brand, #ff7900) 20%, transparent);
-  }
-}
-
-/* Gradient pulse - for empty state backgrounds */
-@keyframes gradientPulse {
-  0%,
-  100% {
-    opacity: 0.6;
-    transform: translate3d(-50%, -50%, 0) scale(1);
-  }
-  50% {
-    opacity: 0.9;
-    transform: translate3d(-50%, -50%, 0) scale(1.05);
-  }
-}
-
-/* Ring pulse - for icon wrappers */
-@keyframes ringPulse {
-  0%,
-  100% {
-    opacity: 0.4;
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-  50% {
-    opacity: 0.7;
-    transform: translate3d(0, 0, 0) scale(1.08);
-  }
-}
-
-/* Icon float - floating icon animation */
-@keyframes iconFloat {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0) rotate(0deg);
-  }
-  25% {
-    transform: translate3d(0, -6px, 0) rotate(-3deg);
-  }
-  50% {
-    transform: translate3d(0, -10px, 0) rotate(0deg);
-  }
-  75% {
-    transform: translate3d(0, -6px, 0) rotate(3deg);
-  }
-}
-
-/* Particle float - for floating particle effects */
-@keyframes particleFloat {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0) scale(1);
-    opacity: 0.3;
-  }
-  25% {
-    transform: translate3d(20px, -30px, 0) scale(1.2);
-    opacity: 0.7;
-  }
-  50% {
-    transform: translate3d(-10px, -60px, 0) scale(0.8);
-    opacity: 1;
-  }
-  75% {
-    transform: translate3d(15px, -30px, 0) scale(1.1);
-    opacity: 0.6;
-  }
-}
-
-/* Spinner rotate - for loading spinners */
-@keyframes spinnerRotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* Spinner dash - SVG spinner stroke animation */
-@keyframes spinnerDash {
-  0% {
-    stroke-dasharray: 1, 125.6;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 94.2, 125.6;
-    stroke-dashoffset: -31.4;
-  }
-  100% {
-    stroke-dasharray: 94.2, 125.6;
-    stroke-dashoffset: -125.6;
-  }
-}
-
-/* Text shimmer flow - gradient text shimmer (alternative) */
-@keyframes textShimmerFlow {
-  0%,
-  100% {
-    background-position: -200% 0;
-  }
-  50% {
-    background-position: 200% 0;
-  }
-}
-
-/* Button ripple effect */
-@keyframes rippleEffect {
-  0% {
-    transform: translate3d(0, 0, 0) scale(0);
-    opacity: 0.6;
-  }
-  100% {
-    transform: translate3d(0, 0, 0) scale(2.5);
-    opacity: 0;
-  }
-}
-
-/* ===================================================================
-   ANIMATION UTILITY CLASSES
-   Pre-configured animations using design system variables
-   =================================================================== */
-
-/* Entry Animations */
-.animate-fade-in {
-  animation: fadeIn var(--duration-moderate) var(--ease-out-smooth);
-  animation-fill-mode: var(--animation-fill-mode);
-}
-
-.animate-fade-in-up {
-  animation: fadeInUp var(--duration-moderate) var(--ease-out-smooth);
-  animation-fill-mode: var(--animation-fill-mode);
-}
-
-.animate-fade-in-soft {
-  animation: fadeInSoft var(--duration-slow) var(--ease-out-smooth);
-  animation-fill-mode: var(--animation-fill-mode);
-}
-
-.animate-fade-in-up-soft {
-  animation: fadeInUpSoft var(--duration-slow) var(--ease-out-smooth);
-  animation-fill-mode: var(--animation-fill-mode);
-}
-
-.animate-fade-in-scale-soft {
-  animation: fadeInScaleSoft var(--duration-moderate) var(--ease-out-smooth);
-  animation-fill-mode: var(--animation-fill-mode);
-}
-
-.animate-slide-up {
-  animation: slideUp var(--duration-moderate) var(--ease-out-smooth);
-  animation-fill-mode: var(--animation-fill-mode);
-}
-
-.animate-slide-down {
-  animation: slideDown var(--duration-moderate) var(--ease-out-smooth);
-  animation-fill-mode: var(--animation-fill-mode);
-}
-
-.animate-slide-in-left {
-  animation: slideInLeft var(--duration-moderate) var(--ease-out-smooth);
-  animation-fill-mode: var(--animation-fill-mode);
-}
-
-.animate-slide-in-right {
-  animation: slideInRight var(--duration-moderate) var(--ease-out-smooth);
-  animation-fill-mode: var(--animation-fill-mode);
-}
-
-/* Scale Animations */
-.animate-scale {
-  animation: scale var(--duration-moderate) var(--ease-spring);
-  animation-fill-mode: var(--animation-fill-mode);
-}
-
-.animate-scale-in {
-  animation: scaleIn var(--duration-moderate) var(--ease-out-smooth);
-  animation-fill-mode: var(--animation-fill-mode);
-}
-
-.animate-pulse {
-  animation: pulse var(--duration-slow) var(--ease-in-out-smooth) infinite;
-}
-
-/* Rotation Animations */
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-
-.animate-spin-slow {
-  animation: spinSlow 3s linear infinite;
-}
-
-/* Attention Animations */
-.animate-shake {
-  animation: shake var(--duration-slow) var(--ease-in-out-smooth);
-}
-
-.animate-bounce {
-  animation: bounce 1s infinite;
-}
-
-/* ===================================================================
-   LLM SIMULATION ANIMATION CLASSES
-   Section streaming and entrance animations
-   =================================================================== */
-
-/* Section entrance animation - for progressive section appearance */
-.section-streaming {
-  animation: sectionEnter 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  opacity: 0;
-  transform: translate3d(0, 20px, 0) scale(0.95);
-  will-change: transform, opacity;
-  /* Performance optimization: GPU acceleration */
-  backface-visibility: hidden;
-  perspective: 1000px;
-  /* Additional performance optimizations */
-  contain: layout style paint;
-  transform-origin: center center;
-}
-
-/* Section entered state - animation complete */
-.section-entered {
-  opacity: 1;
-  transform: translate3d(0, 0, 0) scale(1);
-  will-change: auto;
-  /* Remove GPU hints after animation */
-  backface-visibility: visible;
-  perspective: none;
-}
-
-/* Section with streaming glow effect */
-.section-streaming-glow {
-  animation: sectionStreamingGlow 1.5s ease-in-out infinite;
-}
-
-/* Stagger delay utilities for section animations */
-.section-stagger-0 {
-  animation-delay: 0ms;
-}
-.section-stagger-1 {
-  animation-delay: 80ms;
-}
-.section-stagger-2 {
-  animation-delay: 160ms;
-}
-.section-stagger-3 {
-  animation-delay: 240ms;
-}
-.section-stagger-4 {
-  animation-delay: 320ms;
-}
-.section-stagger-5 {
-  animation-delay: 400ms;
-}
-.section-stagger-6 {
-  animation-delay: 480ms;
-}
-.section-stagger-7 {
-  animation-delay: 560ms;
-}
-.section-stagger-8 {
-  animation-delay: 640ms;
-}
-.section-stagger-9 {
-  animation-delay: 720ms;
-}
-.section-stagger-10 {
-  animation-delay: 800ms;
-}
-
-/* ===================================================================
-   FIELD & ITEM ANIMATION CLASSES
-   Progressive reveal animations for fields and items within sections
-   =================================================================== */
-
-/* Field entrance animation - for progressive field reveal */
-.field-streaming {
-  animation: fieldEnter 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  opacity: 0;
-  transform: translate3d(0, 10px, 0);
-  will-change: transform, opacity;
-  /* Performance optimization: GPU acceleration */
-  backface-visibility: hidden;
-  perspective: 1000px;
-  /* Additional performance optimizations */
-  contain: layout style paint;
-  transform-origin: center center;
-}
-
-/* Field entered state - animation complete */
-.field-entered {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
-  will-change: auto;
-  /* Remove GPU hints after animation */
-  backface-visibility: visible;
-  perspective: none;
-}
-
-/* Item entrance animation - for progressive item reveal */
-.item-streaming {
-  animation: itemEnter 350ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  opacity: 0;
-  transform: translate3d(-10px, 0, 0);
-  will-change: transform, opacity;
-  /* Performance optimization: GPU acceleration */
-  backface-visibility: hidden;
-  perspective: 1000px;
-  /* Additional performance optimizations */
-  contain: layout style paint;
-  transform-origin: center center;
-}
-
-/* Item entered state - animation complete */
-.item-entered {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
-  will-change: auto;
-  /* Remove GPU hints after animation */
-  backface-visibility: visible;
-  perspective: none;
-}
-
-/* Stagger delay utilities for field animations (30ms increments) */
-// Field stagger delays - 40ms increment for smooth sequential animation
-.field-stagger-0 {
-  animation-delay: 0ms;
-}
-.field-stagger-1 {
-  animation-delay: 40ms;
-}
-.field-stagger-2 {
-  animation-delay: 80ms;
-}
-.field-stagger-3 {
-  animation-delay: 120ms;
-}
-.field-stagger-4 {
-  animation-delay: 160ms;
-}
-.field-stagger-5 {
-  animation-delay: 200ms;
-}
-.field-stagger-6 {
-  animation-delay: 240ms;
-}
-.field-stagger-7 {
-  animation-delay: 280ms;
-}
-.field-stagger-8 {
-  animation-delay: 320ms;
-}
-.field-stagger-9 {
-  animation-delay: 360ms;
-}
-.field-stagger-10 {
-  animation-delay: 400ms;
-}
-.field-stagger-11 {
-  animation-delay: 440ms;
-}
-.field-stagger-12 {
-  animation-delay: 480ms;
-}
-.field-stagger-13 {
-  animation-delay: 520ms;
-}
-.field-stagger-14 {
-  animation-delay: 560ms;
-}
-.field-stagger-15 {
-  animation-delay: 600ms;
-}
-
-/* Stagger delay utilities for item animations (40ms increments) */
-.item-stagger-0 {
-  animation-delay: 0ms;
-}
-.item-stagger-1 {
-  animation-delay: 40ms;
-}
-.item-stagger-2 {
-  animation-delay: 80ms;
-}
-.item-stagger-3 {
-  animation-delay: 120ms;
-}
-.item-stagger-4 {
-  animation-delay: 160ms;
-}
-.item-stagger-5 {
-  animation-delay: 200ms;
-}
-.item-stagger-6 {
-  animation-delay: 240ms;
-}
-.item-stagger-7 {
-  animation-delay: 280ms;
-}
-.item-stagger-8 {
-  animation-delay: 320ms;
-}
-.item-stagger-9 {
-  animation-delay: 360ms;
-}
-.item-stagger-10 {
-  animation-delay: 400ms;
-}
-.item-stagger-11 {
-  animation-delay: 440ms;
-}
-.item-stagger-12 {
-  animation-delay: 480ms;
-}
-.item-stagger-13 {
-  animation-delay: 520ms;
-}
-.item-stagger-14 {
-  animation-delay: 560ms;
-}
-.item-stagger-15 {
-  animation-delay: 600ms;
-}
-
-/* ===================================================================
-   STATE TRANSITION ANIMATION CLASSES
-   Smooth transitions between thinking, streaming, and complete states
-   =================================================================== */
-
-/* State transition - fade in new state */
-.state-transition-enter {
-  animation: stateFade 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  opacity: 0;
-  transform: translate3d(0, 8px, 0) scale(0.98);
-  will-change: transform, opacity;
-  /* Performance optimization: GPU acceleration */
-  backface-visibility: hidden;
-  perspective: 1000px;
-}
-
-/* State transition - fade out old state */
-.state-transition-exit {
-  animation: stateSlideOut 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  will-change: transform, opacity;
-  /* Performance optimization: GPU acceleration */
-  backface-visibility: hidden;
-  perspective: 1000px;
-}
-
-/* State entered - transition complete */
-.state-entered {
-  opacity: 1;
-  transform: translate3d(0, 0, 0) scale(1);
-  will-change: auto;
-  /* Remove GPU hints after animation */
-  backface-visibility: visible;
-  perspective: none;
-}
-
-/* Error state animations */
-.error-shake {
-  animation: errorShake 500ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.error-pulse {
-  animation: errorPulse 2s ease-in-out infinite;
-}
-
-/* Enhanced skeleton shimmer */
-.skeleton-shimmer {
-  background: linear-gradient(
-    90deg,
-    var(--muted, rgba(255, 255, 255, 0.1)) 0%,
-    var(--muted-foreground, rgba(255, 255, 255, 0.2)) 20%,
-    var(--muted, rgba(255, 255, 255, 0.1)) 40%,
-    var(--muted, rgba(255, 255, 255, 0.1)) 100%
-  );
-  background-size: 200% 100%;
-  animation: shimmerWave 1.5s ease-in-out infinite;
-}
-
-/* Skeleton pulse effect */
-.skeleton-pulse {
-  animation: skeletonPulse 2s ease-in-out infinite;
-}
-
-/* Stagger Animation Delays - For sequential animations */
-.animate-delay-1 {
-  animation-delay: calc(var(--stagger-delay-base) * 1);
-}
-
-.animate-delay-2 {
-  animation-delay: calc(var(--stagger-delay-base) * 2);
-}
-
-.animate-delay-3 {
-  animation-delay: calc(var(--stagger-delay-base) * 3);
-}
-
-.animate-delay-4 {
-  animation-delay: calc(var(--stagger-delay-base) * 4);
-}
-
-.animate-delay-5 {
-  animation-delay: calc(var(--stagger-delay-base) * 5);
-}
-
-/* ===================================================================
-   ADDITIONAL ANIMATION UTILITY CLASSES
-   Homepage feature parity animations
-   =================================================================== */
-
-/* Fade in with scale */
-.animate-fade-in-scale {
-  animation: fadeInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  animation-fill-mode: var(--animation-fill-mode);
-}
-
-/* Pulse glow - background glow effect */
-.animate-pulse-glow {
-  animation: pulseGlow 2s ease-in-out infinite;
-}
-
-/* Float animation */
-.animate-float {
-  animation: float 3s ease-in-out infinite;
-}
-
-/* Pulse ring - expanding ring */
-.animate-pulse-ring {
-  animation: pulseRing 2s ease-in-out infinite;
-}
-
-/* Text shimmer - gradient text effect */
-.animate-text-shimmer {
-  background: linear-gradient(
-    90deg,
-    var(--foreground, #ffffff) 0%,
-    var(--color-brand, #ff7900) 50%,
-    var(--foreground, #ffffff) 100%
-  );
-  background-size: 200% 100%;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: textShimmer 2s ease-in-out infinite;
-}
-
-/* Wave slide - progress indicator */
-.animate-wave-slide {
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    var(--color-brand, #ff7900) 25%,
-    var(--color-brand, #ff7900) 75%,
-    transparent 100%
-  );
-  background-size: 200% 100%;
-  animation: waveSlide 2s ease-in-out infinite;
-}
-
-/* Section pulse - highlighted section */
-.animate-section-pulse {
-  animation: sectionPulse 2s ease-out;
-}
-
-/* Section border fade - fading highlight */
-.animate-section-border-fade {
-  animation: sectionBorderFade 2s ease-out forwards;
-}
-
-/* New section glow - streaming new sections */
-.animate-new-section-glow {
-  animation: newSectionGlow 0.6s ease-out forwards;
-}
-
-/* Dot pulse - status indicator */
-.animate-dot-pulse {
-  animation: dotPulse 2s ease-in-out infinite;
-}
-
-/* Ring expand - expandings rings */
-.animate-ring-expand {
-  animation: ringExpand 2s ease-in-out infinite;
-}
-
-/* Generating pulse - loading states */
-.animate-generating-pulse {
-  animation:
-    generatingBgPulse 3s ease-in-out infinite,
-    cardGeneratingPulse 2s ease-in-out infinite;
-}
-
-/* Gradient pulse - background gradient */
-.animate-gradient-pulse {
-  animation: gradientPulse 5s ease-in-out infinite;
-}
-
-/* Ring pulse - icon rings */
-.animate-ring-pulse {
-  animation: ringPulse 3s ease-in-out infinite;
-}
-
-/* Icon float - floating icons */
-.animate-icon-float {
-  animation: iconFloat 4s ease-in-out infinite;
-}
-
-/* Particle float - floating particles */
-.animate-particle-float {
-  animation: particleFloat 4s ease-in-out infinite;
-}
-
-/* Spinner - loading spinner */
-.animate-spinner {
-  animation: spinnerRotate 1.5s linear infinite;
-}
-
-/* Button ripple effect */
-.btn-ripple {
-  position: relative;
-  overflow: hidden;
-
-  &::after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0) scale(0);
-    background: radial-gradient(
-      circle,
-      color-mix(in srgb, var(--color-brand, #ff7900) 30%, transparent) 0%,
-      transparent 70%
-    );
-    pointer-events: none;
-    border-radius: inherit;
-    opacity: 0;
-  }
-
-  &:active::after {
-    animation: rippleEffect 0.6s ease-out;
-  }
-}
-
-/* Cursor blink - typing indicator */
-.animate-cursor-blink {
-  animation: cursorBlink 0.8s step-end infinite;
-}
-
-/* Spark travel - border traveling spark */
-.animate-spark-travel {
-  position: relative;
-
-  &::before {
-    content: "";
-    position: absolute;
-    width: 3px;
-    height: 3px;
-    background: var(--color-brand, #ff7900);
-    border-radius: 50%;
-    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--color-brand, #ff7900) 80%, transparent);
-    animation: sparkTravel 3s linear infinite;
-    pointer-events: none;
-    z-index: 10;
-  }
-}
-
-/* Section highlight - URL fragment scroll highlight */
-.section-highlight {
-  animation: sectionPulse 2s ease-out;
-  position: relative;
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: -4px;
-    border: 2px solid color-mix(in srgb, var(--color-brand, #ff7900) 60%, transparent);
-    border-radius: 14px;
-    pointer-events: none;
-    animation: sectionBorderFade 2s ease-out forwards;
-  }
-}
-
-/* ===================================================================
-   PERFORMANCE OPTIMIZATION
-   Hardware acceleration hints for smooth animations
-   =================================================================== */
-
-/* Apply to animated elements for better performance */
-.will-animate {
-  will-change: transform, opacity;
-}
-
-.will-animate-transform {
-  will-change: transform;
-}
-
-.will-animate-opacity {
-  will-change: opacity;
-}
-
-/* Remove will-change after animation to free resources */
-.animation-complete {
-  will-change: auto;
-}
-
-/* Hardware acceleration hint */
-.gpu-accelerated {
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  perspective: 1000px;
-}
-
-/* ===================================================================
-   REDUCED MOTION SUPPORT
-   Respect user preferences for reduced motion
-   =================================================================== */
-
-@media (prefers-reduced-motion: reduce) {
-  /* Disable all custom animations */
-  .animate-fade-in,
-  .animate-fade-in-up,
-  .animate-fade-in-scale,
-  .animate-slide-up,
-  .animate-slide-down,
-  .animate-slide-in-left,
-  .animate-slide-in-right,
-  .animate-scale,
-  .animate-scale-in,
-  .animate-pulse,
-  .animate-pulse-glow,
-  .animate-float,
-  .animate-pulse-ring,
-  .animate-text-shimmer,
-  .animate-wave-slide,
-  .animate-section-pulse,
-  .animate-section-border-fade,
-  .animate-new-section-glow,
-  .animate-dot-pulse,
-  .animate-ring-expand,
-  .animate-generating-pulse,
-  .animate-gradient-pulse,
-  .animate-ring-pulse,
-  .animate-icon-float,
-  .animate-particle-float,
-  .animate-spinner,
-  .animate-cursor-blink,
-  .animate-spark-travel,
-  .animate-spin,
-  .animate-spin-slow,
-  .animate-shake,
-  .animate-bounce,
-  .section-streaming,
-  .section-streaming-glow,
-  .section-highlight,
-  .field-streaming,
-  .item-streaming,
-  .state-transition-enter,
-  .state-transition-exit,
-  .error-shake,
-  .error-pulse,
-  .skeleton-shimmer,
-  .skeleton-pulse,
-  .btn-ripple {
-    animation: none !important;
-    transition: none !important;
-    opacity: 1 !important;
-    transform: none !important;
-  }
-
-  /* Disable pseudo-element animations */
-  .animate-spark-travel::before,
-  .section-highlight::after,
-  .btn-ripple::after {
-    animation: none !important;
-    display: none;
-  }
-
-  /* Disable text shimmer gradient */
-  .animate-text-shimmer {
-    background: none !important;
-    -webkit-text-fill-color: var(--foreground, currentColor) !important;
-  }
-
-  /* Remove will-change hints */
-  .will-animate,
-  .will-animate-transform,
-  .will-animate-opacity,
-  .section-streaming {
-    will-change: auto !important;
-  }
-}