@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.5 → 0.1.7

package/src/index.css

@@ -0,0 +1,1046 @@
+/* Import organized design system */
+@import './styles/index.css';
+
+/* Existing CSS styles are included inline below */
+
+/* Tailwind CSS */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Advanced Border Radius System */
+:root {
+  --radius: 0.5rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 2px);
+  --radius-2xl: calc(var(--radius) + 4px);
+}
+
+/* Advanced Shadow System */
+:root {
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+}
+
+/* Coach Stan Professional Theme */
+/* Professional Poker Coaching Color System */
+:root {
+  /* Light Mode Colors */
+  --primary: #2563eb;
+  --primary-hover: #1d4ed8;
+  --page-bg: #ffffff;
+  --surface-bg: #f3f4f6;
+  --border-color: #e5e7eb;
+  --input-bg: #ffffff;
+  --input-border: #d1d5db;
+  --text-primary: #111827;
+  --text-secondary: #4b5563;
+  --text-on-light: #111827;
+  --text-on-dark: #f8fafc;
+  --text-inverse: #f8fafc;
+  --focus-border: #2563eb;
+  --hover-bg: #f8fafc;
+  --button-hover: #1d4ed8;
+  --active-bg: rgba(37, 99, 235, 0.1);
+  --active-border: #2563eb;
+  
+  /* Semantic Colors */
+  --success: #059669;
+  --warning: #F59E0B;
+  --error: #EF4444;
+  --info: #2563eb;
+  
+  /* Font Family Variables */
+  --font-sans: 'Clash Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-display: 'Clash Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-body: 'Clash Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+}
+
+.dark {
+  /* Dark Mode Colors */
+  --primary: #3b82f6;
+  --primary-hover: #2563eb;
+  --page-bg: #0f172a;
+  --surface-bg: #1e293b;
+  --border-color: #334155;
+  --input-bg: #334155;
+  --input-border: #475569;
+  --text-primary: #f8fafc;
+  --text-secondary: #cbd5e1;
+  --text-on-light: #111827;
+  --text-on-dark: #f8fafc;
+  --text-inverse: #f8fafc;
+  --focus-border: #3b82f6;
+  --hover-bg: #475569;
+  --button-hover: #2563eb;
+  --active-bg: rgba(59, 130, 246, 0.1);
+  --active-border: #3b82f6;
+}
+
+/* Base styles using custom properties */
+.coach-stan-bg {
+  background-color: var(--page-bg);
+}
+
+.coach-stan-surface {
+  background-color: var(--surface-bg);
+}
+
+.coach-stan-primary {
+  background-color: var(--primary);
+}
+
+.coach-stan-primary:hover {
+  background-color: var(--primary-hover);
+}
+
+.coach-stan-border {
+  border-color: var(--border-color);
+}
+
+.coach-stan-text-primary {
+  color: var(--text-primary);
+}
+
+.coach-stan-text-secondary {
+  color: var(--text-secondary);
+}
+
+.coach-stan-text-on-light {
+  color: var(--text-on-light);
+}
+
+.coach-stan-text-on-dark {
+  color: var(--text-on-dark);
+}
+
+.coach-stan-text-inverse {
+  color: var(--text-inverse);
+}
+
+.coach-stan-active {
+  background-color: var(--active-bg) !important;
+  color: var(--primary) !important;
+  border-right: 2px solid var(--active-border) !important;
+}
+
+.coach-stan-input {
+  background-color: var(--input-bg);
+  border-color: var(--input-border);
+  color: var(--text-primary);
+}
+
+.coach-stan-input:focus {
+  border-color: var(--focus-border);
+}
+
+.coach-stan-input::-moz-placeholder {
+  color: var(--text-secondary);
+}
+
+.coach-stan-input::placeholder {
+  color: var(--text-secondary);
+}
+
+/* Theme toggle specific styles */
+.theme-toggle {
+  position: relative;
+  overflow: hidden;
+}
+
+.theme-toggle::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, var(--primary), var(--primary-hover));
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.theme-toggle:hover::before {
+  opacity: 0.1;
+}
+
+/* Dark mode specific enhancements */
+.dark .coach-stan-surface {
+  background-color: var(--surface-bg);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+}
+
+.dark .coach-stan-border {
+  border-color: var(--border-color);
+}
+
+.dark .coach-stan-hover-bg {
+  background-color: var(--hover-bg);
+}
+
+/* Animation Enhancements */
+/* Improved transition smoothness with hardware acceleration */
+.coach-stan-smooth-transition {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+  will-change: transform, opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Mobile navigation staggered animations */
+.coach-stan-stagger-item {
+  animation: slideInFromLeft 200ms ease-out forwards;
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+/* Ensure active items override animation states */
+.coach-stan-stagger-item.coach-stan-active {
+  opacity: 1 !important;
+  transform: translateX(0) !important;
+}
+
+@keyframes slideInFromLeft {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Reduced motion support for accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .coach-stan-stagger-item {
+    animation: none;
+    opacity: 1;
+    transform: translateX(0);
+  }
+  
+  /* Simplified sheet animations */
+  [data-radix-dialog-content] {
+    animation: none !important;
+    transform: none !important;
+    transition: opacity 0.1s ease-out !important;
+  }
+}
+
+/* Enhanced focus indicators for better accessibility */
+.coach-stan-focus-enhanced:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Smooth hamburger menu icon transitions */
+.coach-stan-hamburger-transition {
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.coach-stan-hamburger-transition:hover {
+  transform: scale(1.05);
+}
+
+/* Mobile Form Enhancements */
+/* Ensure adequate spacing for touch targets */
+.coach-stan-form-field {
+  margin-bottom: 1.5rem;
+}
+
+.coach-stan-form-field:last-child {
+  margin-bottom: 0;
+}
+
+/* Mobile-optimized form layouts */
+@media (max-width: 768px) {
+  .coach-stan-form-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+  
+  .coach-stan-form-row {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .coach-stan-form-button {
+    min-height: 48px;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+  
+  /* Ensure checkboxes and radio buttons have adequate touch areas */
+  .coach-stan-checkbox-container,
+  .coach-stan-radio-container {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    margin: -0.5rem;
+    border-radius: 0.375rem;
+    cursor: pointer;
+  }
+  
+  .coach-stan-checkbox-container:hover,
+  .coach-stan-radio-container:hover {
+    background-color: var(--hover-bg);
+  }
+}
+
+/* Desktop form optimizations */
+@media (min-width: 768px) {
+  .coach-stan-form-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2rem;
+  }
+  
+  .coach-stan-form-row {
+    display: flex;
+    gap: 1.5rem;
+  }
+}
+
+/* Touch-friendly focus states */
+.coach-stan-touch-target {
+  min-height: 44px;
+  min-width: 44px;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Enhanced input focus for mobile */
+@media (max-width: 768px) {
+  input:focus,
+  textarea:focus,
+  select:focus {
+    transform: scale(1.02);
+    transition: transform 0.15s ease-out;
+  }
+}
+
+/* Mobile Validation Enhancements */
+/* Mobile-friendly form validation messages */
+.coach-stan-form-message {
+  border-radius: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.coach-stan-mobile-form-item {
+  position: relative;
+  margin-bottom: 2rem;
+}
+
+@media (max-width: 768px) {
+  .coach-stan-mobile-validation {
+    position: sticky;
+    top: 10px;
+    z-index: 10;
+    backdrop-filter: blur(8px);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid var(--border-color);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    animation: slideInFromTop 200ms ease-out;
+  }
+  
+  /* Error positioning adjustments for mobile */
+  .coach-stan-mobile-form-item[data-error="true"] {
+    scroll-margin-top: 80px; /* Account for sticky headers */
+    scroll-margin-bottom: 40px;
+  }
+  
+  .dark .coach-stan-mobile-validation {
+    background-color: rgba(30, 41, 59, 0.9);
+    border-color: var(--border-color);
+  }
+  
+  /* Success state styling */
+  .coach-stan-mobile-validation[role="alert"] {
+    margin-bottom: 0.75rem;
+  }
+  
+  /* Enhanced form field spacing for mobile */
+  .coach-stan-mobile-form-item {
+    margin-bottom: 2.5rem;
+    padding: 0.5rem;
+    border-radius: 0.75rem;
+    transition: background-color 0.15s ease-out;
+  }
+  
+  .coach-stan-mobile-form-item:focus-within {
+    background-color: var(--hover-bg);
+  }
+  
+  /* Mobile form success animation */
+  .coach-stan-form-success {
+    animation: successPulse 0.6s ease-out;
+  }
+  
+  /* Mobile form error shake animation */
+  .coach-stan-form-error {
+    animation: errorShake 0.5s ease-out;
+  }
+}
+
+/* Success and error animations */
+@keyframes slideInFromTop {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes successPulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.02); }
+  100% { transform: scale(1); }
+}
+
+@keyframes errorShake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-4px); }
+  75% { transform: translateX(4px); }
+}
+
+/* Mobile keyboard and gesture support */
+.coach-stan-keyboard-visible {
+  /* Prevent viewport jumping when keyboard appears */
+  position: fixed;
+  width: 100%;
+}
+
+.coach-stan-mobile-input {
+  /* Disable zoom on focus for iOS */
+  font-size: 16px;
+  
+  /* Better touch targets */
+  min-height: 44px;
+  padding: 12px 16px;
+  
+  /* Disable appearance for better control */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+       appearance: none;
+  
+  /* Better focus handling */
+  outline: none;
+  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
+}
+
+.coach-stan-mobile-input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+}
+
+/* Gesture feedback */
+.coach-stan-gesture-feedback {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  z-index: 1000;
+  pointer-events: none;
+  opacity: 0;
+  animation: gestureFlash 0.6s ease-out;
+}
+
+@keyframes gestureFlash {
+  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
+  50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
+}
+
+/* Mobile form field spacing with gesture support */
+.coach-stan-mobile-form-field {
+  position: relative;
+  margin-bottom: 24px;
+  padding: 8px;
+  border-radius: 8px;
+  transition: background-color 0.15s ease-out;
+}
+
+.coach-stan-mobile-form-field:focus-within {
+  background-color: var(--hover-bg);
+}
+
+.coach-stan-mobile-form-field[data-gesture-target="true"] {
+  cursor: pointer;
+  touch-action: pan-y; /* Allow vertical scroll but enable horizontal gestures */
+}
+
+/* Gesture indicators */
+.coach-stan-gesture-hint {
+  position: absolute;
+  bottom: -20px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 12px;
+  color: var(--text-secondary);
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+}
+
+.coach-stan-mobile-form:focus-within .coach-stan-gesture-hint {
+  opacity: 1;
+}
+
+/* Auto-focus management */
+.coach-stan-auto-focus-container {
+  scroll-margin-top: 100px;
+  scroll-margin-bottom: 100px;
+}
+
+/* Tablet-specific optimizations */
+@media (min-width: 768px) and (max-width: 1024px) {
+  /* Tablet breakpoint styles */
+  .coach-stan-tablet-layout {
+    padding: 16px;
+    max-width: 100%;
+  }
+  
+  .coach-stan-tablet-layout.orientation-portrait {
+    padding: 20px 16px;
+  }
+  
+  .coach-stan-tablet-layout.orientation-landscape {
+    padding: 12px 24px;
+  }
+  
+  /* Tablet grid optimizations */
+  .coach-stan-tablet-grid {
+    width: 100%;
+    transition: grid-template-columns 0.3s ease;
+  }
+  
+  /* Tablet sidebar */
+  .coach-stan-tablet-sidebar {
+    background: var(--card);
+    border-right: 1px solid var(--border);
+    transition: width 0.3s ease, transform 0.3s ease;
+    position: relative;
+  }
+  
+  .coach-stan-tablet-sidebar.collapsed {
+    width: 60px !important;
+    overflow: hidden;
+  }
+  
+  .coach-stan-tablet-sidebar .sidebar-toggle {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: var(--primary);
+    color: var(--primary-foreground);
+    border: none;
+    border-radius: 4px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 10;
+    transition: all 0.2s ease;
+  }
+  
+  .coach-stan-tablet-sidebar .sidebar-toggle:hover {
+    background: var(--primary-hover);
+    transform: scale(1.05);
+  }
+  
+  .coach-stan-tablet-sidebar .sidebar-content.collapsed {
+    opacity: 0;
+    pointer-events: none;
+  }
+  
+  /* Tablet stack layouts */
+  .coach-stan-tablet-stack {
+    width: 100%;
+    transition: flex-direction 0.3s ease;
+  }
+  
+  .coach-stan-tablet-stack.stack-vertical {
+    align-items: stretch;
+  }
+  
+  .coach-stan-tablet-stack.stack-horizontal {
+    align-items: flex-start;
+  }
+}
+
+/* Portrait tablet optimizations */
+@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+  .coach-stan-tablet-layout {
+    /* More vertical padding for portrait */
+    padding: 24px 16px;
+  }
+  
+  /* Stack elements vertically in portrait */
+  .tablet-optimized .tablet-auto-stack {
+    flex-direction: column;
+  }
+  
+  /* Larger touch targets for portrait */
+  .tablet-optimized button,
+  .tablet-optimized .touch-target {
+    min-height: 48px;
+    min-width: 48px;
+  }
+  
+  /* Better form layouts for portrait tablets */
+  .tablet-optimized .form-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+}
+
+/* Landscape tablet optimizations */
+@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
+  .coach-stan-tablet-layout {
+    /* More horizontal padding for landscape */
+    padding: 16px 32px;
+  }
+  
+  /* Use horizontal layouts in landscape */
+  .tablet-optimized .tablet-auto-stack {
+    flex-direction: row;
+    gap: 24px;
+  }
+  
+  /* Multi-column forms in landscape */
+  .tablet-optimized .form-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+  }
+  
+  /* Sidebar behavior in landscape */
+  .coach-stan-tablet-sidebar {
+    position: static;
+    width: 280px !important;
+  }
+  
+  .coach-stan-tablet-sidebar.collapsed {
+    width: 80px !important;
+  }
+}
+
+/* Touch-optimized interactions for tablets */
+.tablet-device {
+  /* Larger touch targets */
+  --touch-target-size: 44px;
+}
+
+.tablet-device button,
+.tablet-device .clickable,
+.tablet-device .touch-target {
+  min-height: var(--touch-target-size);
+  min-width: var(--touch-target-size);
+  touch-action: manipulation; /* Disable double-tap zoom */
+}
+
+.tablet-device input,
+.tablet-device textarea,
+.tablet-device select {
+  min-height: 44px;
+  font-size: 16px; /* Prevent zoom on focus in iOS */
+}
+
+/* Hover states for tablet with pointer support */
+@media (hover: hover) and (pointer: fine) {
+  .tablet-device .hover-enabled:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+/* Enhanced focus indicators for tablet navigation */
+.tablet-device *:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Tablet-specific scrolling optimizations */
+.tablet-device .scroll-container {
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+}
+
+/* Mobile performance optimizations */
+@keyframes wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.animate-wave {
+  position: relative;
+  overflow: hidden;
+}
+
+.animate-wave::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  animation: wave 1.6s linear infinite;
+}
+
+.dark .animate-wave::before {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+}
+
+/* Mobile lazy loading optimizations */
+.mobile-lazy-loading {
+  will-change: transform, opacity;
+  transform: translateZ(0); /* Force GPU acceleration */
+}
+
+.mobile-lazy-loaded {
+  animation: fadeInUp 0.3s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Advanced Mobile Animation System */
+/* Base animation classes with GPU acceleration */
+.coach-stan-animation-base {
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+  transform-style: preserve-3d;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Device-Specific Animation Classes */
+/* Mobile animations (max-width: 768px) */
+@media (max-width: 768px) {
+  .coach-stan-mobile-animation {
+    animation-duration: 0.25s !important;
+    animation-timing-function: ease-out !important;
+    transform: translateZ(0); /* Force hardware acceleration */
+  }
+  
+  .coach-stan-mobile-animation.reduced-motion {
+    animation: none !important;
+    transition: opacity 0.1s ease !important;
+  }
+  
+  /* Performance-optimized mobile transitions */
+  .coach-stan-mobile-transition {
+    transition-duration: 0.2s !important;
+    transition-timing-function: ease-out !important;
+    transition-property: transform, opacity !important;
+  }
+  
+  /* Mobile-specific entrance animations */
+  .coach-stan-mobile-fade-in {
+    animation: mobileFadeIn 0.2s ease-out forwards;
+  }
+  
+  .coach-stan-mobile-slide-in {
+    animation: mobileSlideIn 0.25s ease-out forwards;
+  }
+  
+  /* Battery-conscious animations */
+  .coach-stan-battery-save {
+    animation-duration: 0.15s !important;
+    animation-iteration-count: 1 !important;
+    animation-fill-mode: forwards !important;
+  }
+}
+
+/* Tablet animations (768px to 1024px) */
+@media (min-width: 768px) and (max-width: 1024px) {
+  .coach-stan-tablet-animation {
+    animation-duration: 0.35s !important;
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+    transform: translateZ(0); /* Hardware acceleration */
+  }
+  
+  .coach-stan-tablet-transition {
+    transition-duration: 0.3s !important;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  }
+  
+  /* Tablet-optimized bounce */
+  .coach-stan-tablet-bounce {
+    animation: tabletBounce 0.5s ease-out forwards;
+  }
+}
+
+/* Desktop animations (min-width: 1024px) */
+@media (min-width: 1024px) {
+  .coach-stan-desktop-animation {
+    animation-duration: 0.4s !important;
+    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
+  }
+  
+  .coach-stan-desktop-transition {
+    transition-duration: 0.35s !important;
+    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
+  }
+  
+  /* Desktop enhanced animations */
+  .coach-stan-desktop-complex {
+    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
+  }
+}
+
+/* Performance-based animation controls */
+.coach-stan-performance-throttle {
+  animation-duration: 0.15s !important;
+  transition-duration: 0.15s !important;
+}
+
+.coach-stan-low-performance {
+  animation: none !important;
+  transition: opacity 0.1s linear !important;
+  will-change: auto !important;
+}
+
+/* Animation keyframes for mobile-optimized animations */
+@keyframes mobileFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px) translateZ(0);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) translateZ(0);
+  }
+}
+
+@keyframes mobileSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-15px) translateZ(0);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) translateZ(0);
+  }
+}
+
+@keyframes tabletBounce {
+  0% {
+    transform: scale(1) translateZ(0);
+  }
+  30% {
+    transform: scale(1.05) translateZ(0);
+  }
+  60% {
+    transform: scale(0.98) translateZ(0);
+  }
+  100% {
+    transform: scale(1) translateZ(0);
+  }
+}
+
+/* Animation utility classes */
+.coach-stan-animate-on-scroll {
+  opacity: 0;
+  transform: translateY(20px) translateZ(0);
+  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
+}
+
+.coach-stan-animate-on-scroll.visible {
+  opacity: 1;
+  transform: translateY(0) translateZ(0);
+}
+
+/* Staggered animation delays */
+.coach-stan-stagger-delay-1 { animation-delay: 0.1s !important; }
+.coach-stan-stagger-delay-2 { animation-delay: 0.2s !important; }
+.coach-stan-stagger-delay-3 { animation-delay: 0.3s !important; }
+.coach-stan-stagger-delay-4 { animation-delay: 0.4s !important; }
+.coach-stan-stagger-delay-5 { animation-delay: 0.5s !important; }
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .coach-stan-reduced-motion,
+  .coach-stan-mobile-animation,
+  .coach-stan-tablet-animation,
+  .coach-stan-desktop-animation,
+  .animate-pulse,
+  .animate-wave,
+  .mobile-lazy-loaded {
+    animation: none !important;
+    transition: opacity 0.1s ease !important;
+    transform: none !important;
+  }
+  
+  .coach-stan-animation-base {
+    will-change: auto !important;
+  }
+}
+
+/* High contrast mode adjustments */
+@media (prefers-contrast: high) {
+  .coach-stan-animation-base {
+    animation-timing-function: linear !important;
+    transition-timing-function: linear !important;
+  }
+}
+
+/* Print media - disable all animations */
+@media print {
+  .coach-stan-mobile-animation,
+  .coach-stan-tablet-animation,
+  .coach-stan-desktop-animation,
+  .coach-stan-animation-base {
+    animation: none !important;
+    transition: none !important;
+    transform: none !important;
+    opacity: 1 !important;
+  }
+}
+
+/* Mobile image optimization */
+.mobile-image-container {
+  position: relative;
+  overflow: hidden;
+  background: var(--muted);
+}
+
+.mobile-image-loading {
+  background: linear-gradient(90deg, var(--muted) 25%, var(--muted-foreground/10) 50%, var(--muted) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* GPU acceleration for mobile performance */
+.mobile-optimized {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+.mobile-optimized * {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Memory-efficient scrolling for mobile */
+.mobile-scroll-container {
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+  will-change: scroll-position;
+}
+
+/* Touch optimization */
+.mobile-touch-optimized {
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+       user-select: none;
+}
+
+/* Color definitions for validation states */
+:root {
+  --cs-success: #059669;
+  --cs-warning: #F59E0B;
+  --cs-error: #EF4444;
+  --cs-primary: #3B82F6;
+  --cs-info: #2563eb;
+}
+
+.dark {
+  --cs-success: #10b981;
+  --cs-warning: #fbbf24;
+  --cs-error: #f87171;
+  --cs-info: #60a5fa;
+}
+
+.text-cs-success {
+  color: var(--cs-success);
+}
+
+.text-cs-warning {
+  color: var(--cs-warning);
+}
+
+.text-cs-error {
+  color: var(--cs-error);
+}
+
+.text-cs-info {
+  color: var(--cs-info);
+}
+
+/* Clash Display Variable Font Declarations */
+@font-face {
+  font-family: 'Clash Display';
+  src: url('/fonts/clash-display/ClashDisplay-Variable.woff2') format('woff2-variations');
+  font-weight: 200 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Fallback for browsers that don't support variable fonts */
+@supports not (font-variation-settings: normal) {
+  @font-face {
+    font-family: 'Clash Display';
+    src: url('/fonts/clash-display/ClashDisplay-Variable.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
+}
+
+/* Fallback for older browsers that don't support WOFF2 */
+@supports not (font-display: swap) {
+  @font-face {
+    font-family: 'Clash Display';
+    src: url('/fonts/clash-display/ClashDisplay-Variable.woff') format('woff');
+    font-weight: 200 700;
+    font-style: normal;
+  }
+}
+
+