/* Performance Optimization CSS for DropLink */

/* Image layout for screenshots */
.app-screenshot {
  object-fit: contain;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* GPU acceleration for animations */
.blur-circle,
.nav-button,
.screenshot-slide,
.feature-card,
.cta-box {
  will-change: transform;
  transform: translateZ(0);
}

/* Optimize carousel animations */
.screenshot-slide {
  backface-visibility: hidden;
  perspective: 1000px;
}

.screenshot-slide.active {
  transform: translateX(0) translateZ(0);
}

/* Preload critical resources */
.hero {
  contain: layout style paint;
}

/* Optimize layout for better performance */
.container {
  contain: layout;
}

/* Reduce repaints */
.nav-dot,
.accordion-icon {
  backface-visibility: hidden;
}

/* Image loading optimization */
img[loading="lazy"] {
  content-visibility: auto;
}

/* Prevent layout shifts in navigation */
.nav {
  contain: layout;
  min-height: 70px;
}

/* Optimize floating elements */
.floating-file,
.glow-particle,
.glow-ripple {
  will-change: transform, opacity;
  transform: translateZ(0);
  contain: layout style paint;
}

/* Critical CSS for above-the-fold content */
.hero-content h1 {
  font-display: swap;
}

/* Basic performance optimizations only */

/* Optimize button states */
.cta-button,
.cta-download-button {
  contain: layout style;
  will-change: transform;
}

.cta-button:hover,
.cta-download-button:hover {
  transform: translateY(-2px) translateZ(0);
}

/* Font loading optimization - Add font-display: swap to actual @font-face rules */

/* Fix contact card centering on mobile */
@media (max-width: 768px) {
  .animated-contact-card {
    margin: 40px auto !important;
    max-width: calc(100% - 40px);
  }
  
  /* Ensure the contact card is properly centered */
  #contact_card {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Fix carousel responsive issues */
.screenshot-slider {
  height: auto !important;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screenshot-slide {
  position: relative !important;
  height: auto !important;
  padding: 20px !important;
}

.screenshot-slide:not(.active) {
  display: none !important;
}

.app-screenshot {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Responsive carousel adjustments */
@media (max-width: 1200px) {
  .screenshot-slider {
    min-height: 350px;
  }
  
  .app-screenshots-carousel {
    max-width: 90%;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .screenshot-slider {
    min-height: 300px;
  }
  
  .screenshot-slide {
    padding: 15px !important;
  }
  
  .app-screenshots-carousel {
    max-width: 95%;
    /*box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);*/
  }
  
  .screenshot-caption {
    max-width: 95% !important;
    margin-top: 15px !important;
  }
  
  .screenshot-caption h3 {
    font-size: 1.2rem !important;
  }
  
  .screenshot-caption p {
    font-size: 0.9rem !important;
  }
}

@media (max-width: 480px) {
  .screenshot-slider {
    min-height: 250px;
  }
  
  .app-screenshots-carousel {
    max-width: 100%;
    border-radius: 10px;
  }
  
  .screenshot-slide {
    padding: 10px !important;
  }
  
  .screenshot-nav {
    gap: 15px !important;
    padding-bottom: 15px !important;
  }
}