/* Rendering Performance Optimizations */

/* 1. Critical Rendering Path Optimizations */

/* Use CSS Containment to isolate rendering */
.timer-section,
.task-section,
.statistics-section,
.settings-section {
    contain: layout style paint;
}

/* Optimize timer display rendering */
.timer-display-container {
    contain: layout style paint;
    transform: translateZ(0); /* Force GPU acceleration */
    will-change: transform; /* Hint browser for optimization */
}

.timer-circular-display {
    contain: paint;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 2. Layout Thrashing Minimization */

/* Use transforms instead of changing layout properties */
.timer-state-transition {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    will-change: transform, opacity;
}

/* Avoid layout recalculation for animations */
.session-history-item {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    will-change: transform;
}

.session-history-item:hover {
    transform: translateY(-2px) translateZ(0);
}

/* Use transform for button animations instead of top/left */
.form-btn-primary {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    will-change: transform;
}

.form-btn-primary:hover {
    transform: translateY(-2px) translateZ(0);
}

.form-btn-primary:active {
    transform: translateY(0) translateZ(0);
}

/* 3. GPU Acceleration for Smooth Animations */

/* Force GPU layers for frequently animated elements */
.timer-progress-circle,
.timer-display-text,
.session-counter,
.notification-toast {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, opacity;
}

/* Optimize modal animations */
.modal-overlay {
    contain: layout style paint;
    transform: translateZ(0);
    will-change: opacity;
}

.modal-content {
    contain: layout style paint;
    transform: translateZ(0);
    will-change: transform, opacity;
}

/* 4. Efficient CSS Transitions */

/* Replace JavaScript animations with CSS for better performance */
@keyframes timer-pulse {
    0%, 100% { 
        transform: scale(1) translateZ(0); 
        opacity: 1; 
    }
    50% { 
        transform: scale(1.02) translateZ(0); 
        opacity: 0.95; 
    }
}

@keyframes progress-fill {
    from { 
        stroke-dashoffset: var(--progress-start, 0); 
    }
    to { 
        stroke-dashoffset: var(--progress-end, 0); 
    }
}

@keyframes fade-in {
    from { 
        opacity: 0; 
        transform: translateY(10px) translateZ(0); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) translateZ(0); 
    }
}

@keyframes slide-up {
    from { 
        transform: translateY(100%) translateZ(0); 
        opacity: 0; 
    }
    to { 
        transform: translateY(0) translateZ(0); 
        opacity: 1; 
    }
}

/* Apply animations with GPU acceleration */
.timer-active {
    animation: timer-pulse 3s ease-in-out infinite;
}

.progress-animate {
    animation: progress-fill 0.5s ease-out forwards;
}

.fade-in {
    animation: fade-in 0.3s ease-out forwards;
}

.slide-up {
    animation: slide-up 0.4s ease-out forwards;
}

/* 5. Optimized Loading States */

/* Skeleton loading with CSS-only animations */
.skeleton-loader {
    background: linear-gradient(
        90deg,
        rgba(229, 231, 235, 0.2) 25%,
        rgba(229, 231, 235, 0.4) 50%,
        rgba(229, 231, 235, 0.2) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    contain: paint;
    transform: translateZ(0);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.dark .skeleton-loader {
    background: linear-gradient(
        90deg,
        rgba(75, 85, 99, 0.2) 25%,
        rgba(75, 85, 99, 0.4) 50%,
        rgba(75, 85, 99, 0.2) 75%
    );
    background-size: 200% 100%;
}

/* 6. Optimized Scroll Performance */

/* Use CSS scroll snap for better performance */
.session-history-container {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    contain: layout style paint;
}

.session-history-item {
    scroll-snap-align: start;
    contain: layout style paint;
}

/* Optimize task list scrolling */
.task-list-container {
    scroll-snap-type: y proximity;
    contain: layout style paint;
    will-change: scroll-position;
}

.task-item {
    scroll-snap-align: start;
    contain: layout style paint;
}

/* 7. Rendering Hints for Browser Optimization */

/* Critical above-the-fold content */
.timer-display-section {
    content-visibility: auto;
    contain-intrinsic-size: 400px 400px;
}

.timer-controls-section {
    content-visibility: auto;
    contain-intrinsic-size: 300px 200px;
}

/* Below-the-fold optimizations */
.session-history-section {
    content-visibility: auto;
    contain-intrinsic-size: 100% 300px;
}

.task-progress-section {
    content-visibility: auto;
    contain-intrinsic-size: 100% 250px;
}

/* 8. Form Input Optimizations */

/* Optimize form reflows */
.form-field {
    contain: layout style;
}

.form-input-accessible {
    contain: layout style;
    will-change: border-color, box-shadow;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-input-accessible:focus {
    transform: translateZ(0); /* Force GPU layer */
}

/* 9. Table Rendering Optimizations */

.session-history-table {
    table-layout: fixed;
    contain: layout style paint;
}

.session-history-table th,
.session-history-table td {
    contain: layout style;
}

/* 10. Modal Performance */

.modal-backdrop {
    backdrop-filter: blur(4px);
    contain: layout style paint;
    transform: translateZ(0);
}

.modal-dialog {
    contain: layout style paint;
    transform: translateZ(0);
    will-change: transform, opacity;
}

/* 11. Chart Container Optimizations */

.chart-container {
    contain: layout style paint;
    transform: translateZ(0);
    position: relative;
    overflow: hidden;
}

.chart-canvas {
    contain: layout style paint;
    transform: translateZ(0);
    will-change: transform;
}

/* 12. Navigation Optimizations */

.navbar {
    contain: layout style paint;
    transform: translateZ(0);
    will-change: background-color, border-color;
}

.nav-link {
    contain: layout style;
    will-change: color, background-color;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

/* 13. Theme Toggle Optimizations */

.theme-toggle-button {
    contain: layout style paint;
    transform: translateZ(0);
    will-change: transform, opacity;
    transition: transform 0.2s ease-in-out;
}

.theme-toggle-button:hover {
    transform: scale(1.1) translateZ(0);
}

/* 14. Progress Indicator Optimizations */

.progress-bar {
    contain: layout style paint;
    transform: translateZ(0);
    will-change: transform;
    transition: transform 0.3s ease-out;
}

.progress-fill {
    contain: paint;
    transform: translateZ(0);
    will-change: width;
    transition: width 0.3s ease-out;
}

/* 15. 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;
        scroll-behavior: auto !important;
    }
    
    /* Remove will-change for reduced motion */
    .timer-display-container,
    .timer-circular-display,
    .session-history-item,
    .form-btn-primary,
    .timer-progress-circle,
    .timer-display-text,
    .session-counter,
    .notification-toast {
        will-change: auto !important;
    }
}

/* 16. High Performance Mode for Complex Views */

.performance-mode .complex-animation {
    animation: none !important;
    transition: none !important;
}

.performance-mode .gpu-accelerated {
    transform: none !important;
    will-change: auto !important;
}

/* 17. Container Queries for Responsive Performance */

.responsive-container {
    container-type: inline-size;
}

/* Optimize rendering based on container size */
@container (max-width: 600px) {
    .complex-layout {
        contain: layout style;
        display: block;
    }
    
    .heavy-animation {
        animation: none;
        transition: none;
    }
}

@container (min-width: 1200px) {
    .desktop-optimized {
        contain: layout style paint;
        transform: translateZ(0);
    }
}

/* 18. Memory-Efficient Animations */

/* Use transform and opacity for memory efficiency */
.memory-efficient-animation {
    animation-fill-mode: both;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Cleanup animations after completion */
.animation-complete {
    animation: none !important;
    will-change: auto !important;
    transform: none !important;
}

/* 19. Critical Resource Hints */

/* Preload critical fonts */
@font-face {
    font-family: 'system-ui';
    font-display: swap;
}

/* Optimize icon rendering */
.icon {
    contain: layout style paint;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* 20. Performance Monitoring Helpers */

.perf-monitor {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.perf-monitor.visible {
    opacity: 1;
}

/* Development-only performance hints */
.dev-mode .layout-expensive {
    outline: 2px solid red !important;
}

.dev-mode .paint-expensive {
    outline: 2px solid orange !important;
}

.dev-mode .composite-expensive {
    outline: 2px solid yellow !important;
}