/**
 * Performance optimizations for the Apple Design System
 * This file contains CSS optimizations to improve rendering performance
 */

/* Prevent layout thrashing by using transform instead of top/left for animations */
.animate-transform {
  transform: translateZ(0); /* Hardware acceleration */
  will-change: transform; /* Hint to browser for optimization */
}

/* Use opacity/transform for animations instead of properties that trigger layout */
.fade-in {
  animation: fade-in 0.3s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes slide-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Optimize modal animations */
.modal-backdrop.modal-animated {
  transition: opacity 0.3s ease-out;
}

.modal-backdrop.modal-open {
  opacity: 1;
}

.modal-backdrop.modal-closed {
  opacity: 0;
  pointer-events: none;
}

.modal.modal-animated {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.modal-backdrop.modal-open .modal.modal-animated {
  transform: translateY(0);
  opacity: 1;
}

.modal-backdrop.modal-closed .modal.modal-animated {
  transform: translateY(20px);
  opacity: 0;
}

/* Optimize image loading */
.image-container {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-variant);
}

.image-loading {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.image-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.image-blur-up {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image-blur {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px);
  transform: scale(1.1); /* Prevent blur edges from showing */
  opacity: 0.5;
}

/* Optimize content that changes visibility */
.content-visibility-auto {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px; /* Estimate size to reduce layout shifts */
}

/* Optimize off-screen content */
.offscreen-content {
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

/* Optimize animations for users who prefer reduced motion */
@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;
  }
  
  .animate-transform,
  .fade-in,
  .slide-in,
  .modal-backdrop,
  .modal,
  .image-loading {
    animation: none !important;
    transition: none !important;
  }
}

/* Optimize rendering for lists */
.virtual-list-container {
  position: relative;
  overflow: auto;
  will-change: transform; /* Optimize scrolling */
}

.virtual-list-item {
  position: absolute;
  width: 100%;
  left: 0;
  will-change: transform; /* Optimize position changes */
}

/* Optimize grid layouts */
.grid {
  display: grid;
  contain: layout style paint; /* Contain repaints to grid area */
}

/* Optimize accordion animations */
.accordion-content {
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  overflow: hidden;
  will-change: max-height, opacity;
}

/* Optimize skeleton loading states */
.skeleton {
  background: linear-gradient(90deg, 
    var(--color-surface-variant) 0%, 
    var(--color-surface) 50%, 
    var(--color-surface-variant) 100%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--border-radius);
}

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

/* Optimize font loading */
.font-optimization {
  font-display: swap; /* Show text with fallback font while custom font loads */
  text-rendering: optimizeSpeed;
}

/* Optimize box shadows */
.optimized-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  will-change: box-shadow;
}

/* Optimize tooltips */
.tooltip {
  position: absolute;
  z-index: var(--z-index-tooltip);
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  will-change: opacity, transform;
}

.tooltip.tooltip-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optimize dropdowns */
.dropdown {
  transform-origin: top center;
  opacity: 0;
  transform: scaleY(0.9) translateY(-10px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  will-change: opacity, transform;
}

.dropdown.dropdown-open {
  opacity: 1;
  transform: scaleY(1) translateY(0);
}

/* Optimize tabs */
.tab-content {
  transition: opacity 0.2s ease-out;
  will-change: opacity;
}

.tab-content.tab-hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.tab-content.tab-visible {
  opacity: 1;
  position: relative;
}

/* Optimize toast notifications */
.toast {
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  will-change: transform, opacity;
}

.toast.toast-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Optimize form input animations */
.form-input:focus-within {
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
  will-change: border-color, box-shadow;
}

/* Optimize button hover effects */
.btn {
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
  will-change: background-color, color, border-color;
}

/* Optimize card hover effects */
.card {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  will-change: transform, box-shadow;
}

/* Prevent paint during scroll for fixed elements */
.fixed-header,
.fixed-footer,
.sticky-sidebar {
  will-change: transform;
  transform: translateZ(0);
}

/* Optimize carousel */
.carousel {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
}

.carousel::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.carousel-item {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Optimize SVG rendering */
.optimized-svg {
  shape-rendering: geometricPrecision;
}

/* Optimize table rendering for large datasets */
.large-table {
  contain: strict;
  content-visibility: auto;
}

/* Optimize backdrop filter usage */
.backdrop-blur {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  will-change: backdrop-filter;
}

/* Optimize transitions for theme changes */
.theme-transition {
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

/* Optimize loading spinner */
.spinner {
  animation: spin 1s linear infinite;
  will-change: transform;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Optimize progress bar animations */
.progress-bar {
  transition: width 0.3s ease-out;
  will-change: width;
}

/* Optimize circular progress animations */
.circular-progress {
  transform-origin: center;
  animation: circular-progress-rotation 2s linear infinite;
  will-change: transform;
}

@keyframes circular-progress-rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Optimize checkbox and radio animations */
.checkbox-input:checked + .checkbox-indicator,
.radio-input:checked + .radio-indicator {
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
  will-change: background-color, border-color;
}

/* Optimize toggle switch animations */
.toggle-switch {
  transition: background-color 0.2s ease-out;
  will-change: background-color;
}

.toggle-handle {
  transition: transform 0.2s ease-out;
  will-change: transform;
}

/* Optimize badge animations */
.badge {
  transition: background-color 0.2s ease-out;
  will-change: background-color;
}

/* Optimize tooltip animations */
.tooltip {
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  will-change: opacity, transform;
}

/* Optimize sidebar animations */
.sidebar {
  transition: transform 0.3s ease-out;
  will-change: transform;
}

/* Optimize navbar animations */
.navbar {
  transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
  will-change: background-color, box-shadow;
}

/* Optimize dropdown menu animations */
.dropdown-menu {
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  will-change: opacity, transform;
}

/* Optimize tooltip animations */
.tooltip {
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  will-change: opacity, transform;
}