/* ============================== OPTIMIZED MOBILE CSS ============================== */ /* Core mobile styles with performance optimizations */ @media (max-width: 768px) { /* Use will-change for better performance on animated elements */ .app-container, .result-showcase, .comparison-chart, .breakdown-grid, .deduction-breakdown, .sidebar, .insights-panel { will-change: transform, opacity; } /* Consolidated entrance animations */ .app-container { animation: fadeInUp 0.6s ease-out; } .header { animation: fadeInDown 0.4s ease-out; } .result-showcase { animation: fadeInUp 0.8s ease-out 0.2s both; } .comparison-chart { animation: fadeInUp 0.6s ease-out 0.4s both; } .breakdown-grid { animation: fadeInUp 0.6s ease-out 0.5s both; } .deduction-breakdown { animation: fadeInUp 0.6s ease-out 0.6s both; } .sidebar { animation: fadeInUp 0.6s ease-out 0.3s both; } .insights-panel { animation: fadeInUp 0.6s ease-out 0.4s both; } /* Unified keyframe animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Staggered card animations using CSS custom properties */ .insights-card { animation: fadeInLeft 0.5s ease-out both; } .insights-card:nth-child(1) { animation-delay: 0.6s; } .insights-card:nth-child(2) { animation-delay: 0.7s; } .insights-card:nth-child(3) { animation-delay: 0.8s; } .insights-card:nth-child(4) { animation-delay: 0.9s; } .insights-card:nth-child(5) { animation-delay: 1.0s; } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } /* Chart animations */ .chart-bar { animation: barGrow 0.8s ease-out both; } .chart-bar:nth-child(1) { animation-delay: 0.8s; } .chart-bar:nth-child(2) { animation-delay: 0.9s; } .chart-bar:nth-child(3) { animation-delay: 1.0s; } .chart-bar:nth-child(4) { animation-delay: 1.1s; } @keyframes barGrow { from { height: 0; opacity: 0; } to { opacity: 1; } } /* Breakdown items */ .breakdown-item { animation: popIn 0.4s ease-out both; } .breakdown-item:nth-child(1) { animation-delay: 1.0s; } .breakdown-item:nth-child(2) { animation-delay: 1.1s; } .breakdown-item:nth-child(3) { animation-delay: 1.2s; } .breakdown-item:nth-child(4) { animation-delay: 1.3s; } @keyframes popIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } /* Result amount with optimized animation */ .result-amount { animation: resultEntrance 1s ease-out, resultPulse 3s ease-in-out infinite; } @keyframes resultEntrance { from { opacity: 0; transform: scale(0.5); filter: blur(10px); } to { opacity: 1; transform: scale(1); filter: blur(0); } } @keyframes resultPulse { 0%, 100% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.1); transform: scale(1); } 50% { text-shadow: 0 0 30px rgba(0, 122, 255, 0.3); transform: scale(1.02); } } /* Interactive feedback - consolidated */ .salary-display:focus, .regime-btn:active, .basic-btn:active, .theme-toggle:active { animation: quickPulse 0.3s ease-out; } .salary-slider:active, .basic-slider:active { animation: sliderPulse 0.2s ease-out; } .chart-bar:active { animation: chartPress 0.2s ease-out; } @keyframes quickPulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } @keyframes sliderPulse { 0% { transform: scaleY(1); } 50% { transform: scaleY(1.2); } 100% { transform: scaleY(1); } } @keyframes chartPress { 0% { transform: scale(1); } 50% { transform: scale(1.1) translateY(-2px); } 100% { transform: scale(1.05); } } /* Optimized floating particles */ .particle { animation: float 8s ease-in-out infinite; will-change: transform, opacity; } @keyframes float { 0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); opacity: 0; } 25% { transform: translateY(-30px) translateX(15px) rotate(90deg); opacity: 0.4; } 50% { transform: translateY(-60px) translateX(30px) rotate(180deg); opacity: 0.8; } 75% { transform: translateY(-40px) translateX(45px) rotate(270deg); opacity: 0.6; } } /* Regime toggle animation */ .regime-toggle .regime-btn.active { animation: regimeActivate 0.3s ease-out; } @keyframes regimeActivate { 0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.7); } 50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(0, 122, 255, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 122, 255, 0); } } /* Calculation states */ .calculating { animation: calculatingPulse 1.5s ease-in-out infinite; } @keyframes calculatingPulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } .calculation-success { animation: successFeedback 0.6s ease-out; } @keyframes successFeedback { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* Scroll-triggered animations */ .fade-in-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .fade-in-up.visible { opacity: 1; transform: translateY(0); } /* Theme transitions */ body.light-mode { transition: background-color 0.3s ease, color 0.3s ease; } body:not(.light-mode) { transition: background-color 0.3s ease, color 0.3s ease; } /* Error states */ .input-error { animation: inputError 0.6s ease-out; } @keyframes inputError { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* Section expand/collapse */ .section-expand { animation: sectionExpand 0.3s ease-out; } @keyframes sectionExpand { from { max-height: 0; opacity: 0; } to { max-height: 500px; opacity: 1; } } .section-collapse { animation: sectionCollapse 0.3s ease-out; } @keyframes sectionCollapse { from { max-height: 500px; opacity: 1; } to { max-height: 0; opacity: 0; } } } /* Accessibility optimizations */ @media (max-width: 768px) and (prefers-reduced-motion: reduce) { .app-container, .header, .result-showcase, .comparison-chart, .breakdown-grid, .deduction-breakdown, .sidebar, .insights-panel, .insights-card, .chart-bar, .breakdown-item, .result-amount, .particle, .regime-toggle .regime-btn.active, .calculating, .calculation-success, .fade-in-up, .input-error, .section-expand, .section-collapse { animation: none !important; transition: none !important; } .chart-bar:hover, .insights-card:hover { transform: none !important; } } /* High contrast mode support */ @media (max-width: 768px) and (prefers-contrast: high) { .result-amount { animation: highContrastPulse 3s ease-in-out infinite; } @keyframes highContrastPulse { 0%, 100% { text-shadow: 0 0 30px rgba(255, 255, 255, 0.8); transform: scale(1); } 50% { text-shadow: 0 0 40px rgba(255, 255, 255, 1); transform: scale(1.02); } } } /* Power save mode */ @media (max-width: 768px) { .power-save .particle, .power-save .result-amount, .power-save .chart-bar, .power-save .insights-card { animation: none !important; } } /* Touch device optimizations */ @media (max-width: 768px) and (pointer: coarse) { .salary-slider:active::-webkit-slider-thumb, .basic-slider:active::-webkit-slider-thumb { animation: thumbPress 0.2s ease-out; } @keyframes thumbPress { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1.1); } } .regime-btn:active, .basic-btn:active, .theme-toggle:active { animation: touchButtonPress 0.2s ease-out; } @keyframes touchButtonPress { 0% { transform: scale(1); } 50% { transform: scale(0.9); } 100% { transform: scale(1); } } } /* Performance optimizations for older devices */ @media (max-width: 768px) and (max-device-width: 480px) { .particle { display: none; /* Hide particles on very small screens for performance */ } .result-amount { animation: resultEntrance 1s ease-out; /* Remove infinite pulse on older devices */ } .chart-bar, .insights-card { animation-duration: 0.4s; /* Faster animations */ } }