/**
 * Performance optimizations for CSS
 * Enhances animation and rendering performance
 */

/* Hardware acceleration for animations */
.hardware-accelerated {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Optimize paint operations */
.app-card,
.showcase-app,
.vision-mission,
.hero,
.page-hero,
.dark-mode-toggle {
  will-change: transform;
  transform: translateZ(0);
}

/* Force GPU acceleration for critical animations */
@media screen and (min-width: 768px) {
  .app-card:hover,
  .showcase-app:hover,
  .btn:hover {
    transform: translateZ(0);
  }
}

/* Prevent layout shifts with image loading */
.lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.lazy-image.loaded {
  opacity: 1;
}

/* Performance-optimized image containers */
.app-card-image,
.app-icon,
.team-photo,
.screenshot {
  background-color: rgba(240, 240, 240, 0.5);
  overflow: hidden;
  position: relative;
}

/* Prevent FOUT (Flash of Unstyled Text) */
html {
  font-display: swap;
}

/* Fix for dark mode toggle position */
body {
  padding-bottom: 90px; /* Add space for the dark mode toggle */
}

.dark-mode-toggle {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  z-index: 10000 !important; /* Ensure it's above everything */
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.dark-mode-toggle:hover {
  opacity: 1;
}

/* Fix for contact page white screen issues */
.contact-page .page-hero {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: white;
  padding: 8rem 0 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.contact-page .page-hero h1,
.contact-page .page-hero p {
  color: white;
}

.contact-page .section {
  padding: 5rem 0;
  background-color: var(--background);
}

/* Custom z-index fix for modals and dropdowns */
.dark-mode-toggle {
  z-index: 9999;
}

body.page-loaded header,
body.page-loaded .hero,
body.page-loaded .section,
body.page-loaded .page-hero,
body.page-loaded .contact-form,
body.page-loaded footer {
  transition: opacity 0.3s ease-in;
  opacity: 1;
}

/* Optimization for deferred animations */
.animation-deferred {
  opacity: 0;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  transform: translateY(10px);
}

.animation-enabled {
  opacity: 1;
  transform: translateY(0);
}

/* Optimize image rendering */
img {
  image-rendering: optimizeQuality;
  /* Prevent reflow and ensure dimensions are maintained */
  height: auto;
  max-width: 100%;
}

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