/* iOS Safari Background Image Scaling Fix
 * 
 * Issue: iOS Safari has problems with background-attachment: fixed
 * causing background images to scale incorrectly and become blurry
 * 
 * Solution: Use background-attachment: scroll for iOS Safari
 * while maintaining fixed behavior for other browsers
 */

/* Detect iOS Safari and apply scroll attachment */
@supports (-webkit-touch-callout: none) {
  /* This targets iOS Safari specifically */
  .background-container {
    background-attachment: scroll !important;
  }
}

/* Alternative detection method for iOS Safari */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  @supports (-webkit-touch-callout: none) {
    .background-container {
      background-attachment: scroll !important;
    }
  }
}

/* Additional iOS Safari optimizations */
@supports (-webkit-touch-callout: none) {
  .background-container {
    /* Force hardware acceleration for smoother rendering */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    
    /* Optimize background rendering */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    /* Prevent scaling issues */
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
}

/* Ensure proper background positioning on iOS Safari */
@supports (-webkit-touch-callout: none) {
  .background-container {
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }
}

/* Fix for iOS Safari viewport changes */
@supports (-webkit-touch-callout: none) {
  .background-container {
    /* Prevent background from shifting during scroll */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}