/* ===== PARALACTYL - DUAL MODE STYLES ===== */

/* Base container styles */
.vixviu-paralactyl {
  width: 100%;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
  display: block;
}

/* CSS preset styles - don't override Elementor's background at all */
.vixviu-paralactyl-css {
  width: 100%;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  /* No background properties - let Elementor handle everything */
  display: block;
}



/* CSS-based container mode images */
.paralactyl-css-image {
  display: block;
  max-width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  border: none;
  outline: none;
}

/* ===== PRESET REGISTRY - STANDALONE PRESET CLASSES ===== */

/* Elementor Free Preset - Simple Container Float */
.paralactyl-container-float {
  position: relative;
  
  /* Base speed - will be dynamically adjusted based on container height */
  /* Formula: adjustedSpeed = baseSpeed * (300px / containerHeight) */
  --parallax-speed: 0.4;
  --parallax-direction: vertical;
  --parallax-type: container;
  --parallax-horizontal-speed: 0.3;
  --parallax-mobile: disable;
  --parallax-position: relative;
  --parallax-image: none;
  --parallax-image-size: auto;
  --parallax-z-index: 100;
  --parallax-image-width: auto;
  --parallax-image-height: auto;
  --parallax-image-scale: 100;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Elementor Free Preset - Explicit Vertical Container Float */
.paralactyl-container-float-vertical {
  position: relative;
  
  /* Base speed - will be dynamically adjusted based on container height */
  /* Formula: adjustedSpeed = baseSpeed * (300px / containerHeight) */
  --parallax-speed: 0.4;
  --parallax-direction: vertical;
  --parallax-type: container;
  --parallax-horizontal-speed: 0.3;
  --parallax-mobile: disable;
  --parallax-position: relative;
  --parallax-image: none;
  --parallax-image-size: auto;
  --parallax-z-index: 100;
  --parallax-image-width: auto;
  --parallax-image-height: auto;
  --parallax-image-scale: 100;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Elementor Free Preset - Vertical Up-to-Down Container Float */
.paralactyl-container-float-vertical-utd {
  position: relative;
  
  /* Base speed - will be dynamically adjusted based on container height */
  /* Formula: adjustedSpeed = baseSpeed * (300px / containerHeight) */
  --parallax-speed: 0.4;
  --parallax-direction: vertical;
  --parallax-type: container;
  --parallax-horizontal-speed: 0.3;
  --parallax-mobile: disable;
  --parallax-position: relative;
  --parallax-image: none;
  --parallax-image-size: auto;
  --parallax-z-index: 100;
  --parallax-image-width: auto;
  --parallax-image-height: auto;
  --parallax-image-scale: 100;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Elementor Free Preset - Vertical Down-to-Up Container Float */
.paralactyl-container-float-vertical-dtu {
  position: relative;
  
  /* Base speed - will be dynamically adjusted based on container height */
  /* Formula: adjustedSpeed = baseSpeed * (300px / containerHeight) */
  --parallax-speed: -0.4;
  --parallax-direction: vertical;
  --parallax-type: container;
  --parallax-horizontal-speed: 0.3;
  --parallax-mobile: disable;
  --parallax-position: relative;
  --parallax-image: none;
  --parallax-image-size: auto;
  --parallax-z-index: 100;
  --parallax-image-width: auto;
  --parallax-image-height: auto;
  --parallax-image-scale: 100;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Elementor Free Preset - Horizontal Left-to-Right Container Float */
.paralactyl-container-float-horizontal-ltr {
  position: relative;
  
  /* Base speed - will be dynamically adjusted based on container height */
  /* Formula: adjustedSpeed = baseSpeed * (300px / containerHeight) */
  --parallax-speed: 0.3;
  --parallax-direction: horizontal;
  --parallax-type: container;
  --parallax-horizontal-speed: 0.3;
  --parallax-mobile: disable;
  --parallax-position: relative;
  --parallax-image: none;
  --parallax-image-size: auto;
  --parallax-z-index: 100;
  --parallax-image-width: auto;
  --parallax-image-height: auto;
  --parallax-image-scale: 100;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Elementor Free Preset - Horizontal Right-to-Left Container Float */
.paralactyl-container-float-horizontal-rtl {
  position: relative;
  
  /* Base speed - will be dynamically adjusted based on container height */
  /* Formula: adjustedSpeed = baseSpeed * (300px / containerHeight) */
  --parallax-speed: -0.3;
  --parallax-direction: horizontal;
  --parallax-type: container;
  --parallax-horizontal-speed: -0.3;
  --parallax-mobile: disable;
  --parallax-position: relative;
  --parallax-image: none;
  --parallax-image-size: auto;
  --parallax-z-index: 100;
  --parallax-image-width: auto;
  --parallax-image-height: auto;
  --parallax-image-scale: 100;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Elementor Free Preset - Simple Background Float */
.paralactyl-background-float {
  position: relative;
  
  /* Base speed - will be dynamically adjusted based on container height */
  /* Formula: adjustedSpeed = baseSpeed * (300px / containerHeight) */
  --parallax-speed: 0.15;
  --parallax-direction: vertical;
  --parallax-type: background;
  --parallax-horizontal-speed: 0.3;
  --parallax-mobile: disable;
  --parallax-position: relative;
  --parallax-image: none;
  --parallax-image-size: auto;
  --parallax-z-index: 100;
  --parallax-image-width: auto;
  --parallax-image-height: auto;
  --parallax-image-scale: 100;
  will-change: background-position;
  backface-visibility: hidden;
  overflow: hidden;
}

/* Elementor Free Preset - Background Float Vertical */
.paralactyl-background-float-vertical {
  position: relative;
  
  /* Base speed - will be dynamically adjusted based on container height */
  /* Formula: adjustedSpeed = baseSpeed * (300px / containerHeight) */
  --parallax-speed: 0.15;
  --parallax-direction: vertical;
  --parallax-type: background;
  --parallax-horizontal-speed: 0.3;
  --parallax-mobile: disable;
  --parallax-position: relative;
  --parallax-image: none;
  --parallax-image-size: auto;
  --parallax-z-index: 100;
  --parallax-image-width: auto;
  --parallax-image-height: auto;
  --parallax-image-scale: 100;
  will-change: background-position;
  backface-visibility: hidden;
  overflow: hidden;
}

/* Elementor Free Preset - Background Float Vertical Up-to-Down */
.paralactyl-background-float-vertical-utd {
  position: relative;
  
  /* Base speed - will be dynamically adjusted based on container height */
  /* Formula: adjustedSpeed = baseSpeed * (300px / containerHeight) */
  --parallax-speed: 0.15;
  --parallax-direction: vertical;
  --parallax-type: background;
  --parallax-horizontal-speed: 0.3;
  --parallax-mobile: disable;
  --parallax-position: relative;
  --parallax-image: none;
  --parallax-image-size: auto;
  --parallax-z-index: 100;
  --parallax-image-width: auto;
  --parallax-image-height: auto;
  --parallax-image-scale: 100;
  will-change: background-position;
  backface-visibility: hidden;
  overflow: hidden;
}

/* Elementor Free Preset - Background Float Vertical Down-to-Up */
.paralactyl-background-float-vertical-dtu {
  position: relative;
  
  /* Base speed - will be dynamically adjusted based on container height */
  /* Formula: adjustedSpeed = baseSpeed * (300px / containerHeight) */
  --parallax-speed: -0.15;
  --parallax-direction: vertical;
  --parallax-type: background;
  --parallax-horizontal-speed: 0.3;
  --parallax-mobile: disable;
  --parallax-position: relative;
  --parallax-image: none;
  --parallax-image-size: auto;
  --parallax-z-index: 100;
  --parallax-image-width: auto;
  --parallax-image-height: auto;
  --parallax-image-scale: 100;
  will-change: background-position;
  backface-visibility: hidden;
  overflow: hidden;
}

/* Elementor Free Preset - Background Float Horizontal Left-to-Right */
.paralactyl-background-float-horizontal-ltr {
  position: relative;
  
  /* Base speed - will be dynamically adjusted based on container height */
  /* Formula: adjustedSpeed = baseSpeed * (300px / containerHeight) */
  --parallax-speed: 0.15;
  --parallax-direction: horizontal;
  --parallax-type: background;
  --parallax-horizontal-speed: 0.15;
  --parallax-mobile: disable;
  --parallax-position: relative;
  --parallax-image: none;
  --parallax-image-size: auto;
  --parallax-z-index: 100;
  --parallax-image-width: auto;
  --parallax-image-height: auto;
  --parallax-image-scale: 100;
  will-change: background-position;
  backface-visibility: hidden;
  overflow: hidden;
}

/* Elementor Free Preset - Background Float Horizontal Right-to-Left */
.paralactyl-background-float-horizontal-rtl {
  position: relative;
  
  /* Base speed - will be dynamically adjusted based on container height */
  /* Formula: adjustedSpeed = baseSpeed * (300px / containerHeight) */
  --parallax-speed: -0.15;
  --parallax-direction: horizontal;
  --parallax-type: background;
  --parallax-horizontal-speed: -0.15;
  --parallax-mobile: disable;
  --parallax-position: relative;
  --parallax-image: none;
  --parallax-image-size: auto;
  --parallax-z-index: 100;
  --parallax-image-width: auto;
  --parallax-image-height: auto;
  --parallax-image-scale: 100;
  will-change: background-position;
  backface-visibility: hidden;
  overflow: hidden;
}

/* Background Image Mode Styles */
.vixviu-paralactyl[data-mode="background"] {
  /* Hardware acceleration for smooth background position changes */
  will-change: background-position;
  
  /* Smooth rendering optimizations */
  backface-visibility: hidden;
  perspective: 1000px;
  
  /* Default background properties */
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  
  /* Fallback background when image fails to load */
  background-color: #f8f9fa;
  
  /* Ensure proper layering */
  z-index: 0;
}

/* Parallax content container */
.parallax-content {
  position: relative;
  z-index: 3; /* Above overlay and background */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

/* Parallax overlay */
.parallax-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Between background and content */
  pointer-events: none;
  /* Blend mode is set inline via PHP */
}

/* ===== CONTAINER TRANSFORM MODE ===== */

/* High specificity container styling to override theme conflicts */
.elementor-widget-paralactyl .vixviu-paralactyl[data-mode="container"] {
  /* Base container setup for transforms */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  
  /* Ensure proper stacking context */
  position: relative;
  z-index: 1;
  
  /* Smooth transitions for transforms */
  transition: transform 0.1s ease-out;
  
  /* GPU acceleration hint */
  transform: translate3d(0, 0, 0);
}

/* Container content wrapper - High specificity to override theme styles */
.elementor-widget-paralactyl .vixviu-paralactyl[data-mode="container"] .parallax-container-content {
  position: relative;
  width: 100%;
  min-height: 300px; /* Proper height for contain/cover modes */
  height: auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
}

/* Container image styling - High specificity to override theme/plugin styles */
.elementor-widget-paralactyl .vixviu-paralactyl[data-mode="container"] .parallax-container-image {
  display: block;
  border: none;
  outline: none;
  background: transparent;
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 1;
}

/* Auto size (default) */
.elementor-widget-paralactyl .vixviu-paralactyl[data-mode="container"] .parallax-container-image {
  width: auto;
  height: auto;
  max-width: 100%;
}

/* Contain mode */
.elementor-widget-paralactyl .vixviu-paralactyl[data-mode="container"][data-image-size="contain"] .parallax-container-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Cover mode */
.elementor-widget-paralactyl .vixviu-paralactyl[data-mode="container"][data-image-size="cover"] .parallax-container-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Additional content below image */
.vixviu-paralactyl[data-mode="container"] .parallax-container-additional-content {
  margin-top: 20px;
  width: 100%;
}

/* Performance optimizations for container mode */
.vixviu-paralactyl[data-mode="container"] * {
  /* Minimize layout recalculations */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

/* Position type variations */
.vixviu-paralactyl[data-mode="container"][data-position-type="absolute"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.vixviu-paralactyl[data-mode="container"][data-position-type="fixed"] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
}

.vixviu-paralactyl[data-mode="container"][data-position-type="relative"] {
  position: relative;
}



/* ===== LEGACY SUPPORT (from original image mode) ===== */

/* Legacy image wrapper (for backward compatibility) */
.vixviu-paralactyl .image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.vixviu-paralactyl img {
  display: none;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 0;
  background: transparent;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.vixviu-paralactyl.loaded img {
  opacity: 1;
  transform: scale(1);
}

.vixviu-paralactyl img:focus {
  outline: 2px solid #007cba;
  outline-offset: 2px;
}

/* Loading and error states */
.vixviu-paralactyl .loading,
.vixviu-paralactyl .error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  position: relative;
  z-index: 10; /* Above background and overlay */
}

.vixviu-paralactyl .loading {
  color: #666;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.vixviu-paralactyl .error {
  color: #d63638;
  background: #fef7f1;
  border: 1px solid #d63638;
}

/* Fallback patterns when background image fails */
.vixviu-paralactyl[data-mode="background"]:not([style*="background-image"]):not([style*="background:"]) {
  /* Subtle pattern when no background image is set */
  background-image: linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.05) 25%), 
                    linear-gradient(-45deg, transparent 25%, rgba(255,255,255,0.05) 25%), 
                    linear-gradient(45deg, rgba(255,255,255,0.05) 75%, transparent 75%), 
                    linear-gradient(-45deg, rgba(255,255,255,0.05) 75%, transparent 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Image loading detection */
.vixviu-paralactyl[data-mode="background"][data-image-status="loading"]::before {
  content: "Loading parallax image...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #666;
  font-size: 14px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 20px;
  border-radius: 4px;
}

.vixviu-paralactyl[data-mode="background"][data-image-status="error"]::before {
  content: "Failed to load parallax image";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #d63638;
  font-size: 14px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 20px;
  border-radius: 4px;
  border: 1px solid #d63638;
}

/* ===== RESPONSIVE & MOBILE OPTIMIZATIONS ===== */

/* Mobile optimizations */
@media (max-width: 768px) {
  .vixviu-paralactyl,
  .vixviu-paralactyl-css {
    min-height: 150px;
  }
  
  /* Default mobile behavior: disable parallax for better performance */
  .vixviu-paralactyl[data-mode="background"],
  .vixviu-paralactyl-css[data-mode="background"] {
    background-attachment: scroll !important;
    will-change: auto !important;
    /* Let Elementor handle background positioning on mobile - don't override */
  }
  
  /* When explicitly enabled on mobile */
  .vixviu-paralactyl[data-mobile-behavior="enable"],
  .vixviu-paralactyl-css[data-mobile-behavior="enable"] {
    will-change: background-position !important;
    background-attachment: local !important; /* Better for mobile than scroll */
  }
  
  /* When explicitly disabled on mobile */
  .vixviu-paralactyl[data-mobile-behavior="disable"],
  .vixviu-paralactyl-css[data-mobile-behavior="disable"] {
    will-change: auto !important;
    background-attachment: scroll !important;
    /* Let Elementor handle positioning - don't override */
  }
  
  /* Static background on mobile when specified */
  .vixviu-paralactyl[data-mobile-behavior="static"],
  .vixviu-paralactyl-css[data-mobile-behavior="static"] {
    background-attachment: fixed !important;
    will-change: auto !important;
    /* Let Elementor handle positioning - don't override */
  }
  
  .vixviu-paralactyl .loading,
  .vixviu-paralactyl .error {
    min-height: 150px;
    font-size: 13px;
    padding: 15px;
  }
  
  .parallax-content {
    padding: 20px;
  }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
  .vixviu-paralactyl {
    min-height: 180px;
  }
}

/* ===== ACCESSIBILITY & PERFORMANCE ===== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .vixviu-paralactyl img:focus,
  .vixviu-paralactyl:focus-within {
    outline: 3px solid #000;
  }
  
  .parallax-overlay {
    /* Reduce overlay opacity in high contrast mode */
    opacity: 0.7;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .vixviu-paralactyl,
  .vixviu-paralactyl *,
  .parallax-content,
  .parallax-overlay {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    background-attachment: scroll !important;
  }
}

/* ===== EDITOR & UTILITY STYLES ===== */

/* Elementor editor preview indicator */
.editor-preview-indicator {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 3px;
  z-index: 1001;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}



/* Visibility check indicators */
.vixviu-paralactyl[data-mode="background"]:empty::before {
  content: "⚠️ Empty parallax container - add content or check background image";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 193, 7, 0.9);
  color: #000;
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  z-index: 1000;
  max-width: 80%;
}

/* High z-index conflict warning */
.vixviu-paralactyl[style*="z-index"] {
  position: relative !important; /* Ensure z-index works */
}

/* Focus management for accessibility */
.vixviu-paralactyl:focus-within {
  outline: 2px solid #007cba;
  outline-offset: 2px;
}

.vixviu-paralactyl[role="img"] {
  background: transparent;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* GPU acceleration for background mode */
.vixviu-paralactyl[data-mode="background"] {
  /* Promote to composite layer for smooth background-position animations */
  transform: translate3d(0, 0, 0);
}

/* Optimize for different background attachments */
.vixviu-paralactyl[data-attachment="fixed"] {
  background-attachment: fixed;
}

.vixviu-paralactyl[data-attachment="local"] {
  background-attachment: local;
}

.vixviu-paralactyl[data-attachment="scroll"] {
  background-attachment: scroll;
}

/* ===== OVERLAY BLEND MODES ===== */

/* Blend mode classes for dynamic application */
.parallax-overlay.blend-multiply {
  mix-blend-mode: multiply;
}

.parallax-overlay.blend-overlay {
  mix-blend-mode: overlay;
}

.parallax-overlay.blend-screen {
  mix-blend-mode: screen;
}

.parallax-overlay.blend-darken {
  mix-blend-mode: darken;
}

.parallax-overlay.blend-lighten {
  mix-blend-mode: lighten;
}

/* ===== CONTENT TYPOGRAPHY DEFAULTS ===== */

/* Ensure good readability for content over parallax backgrounds */
.parallax-content h1,
.parallax-content h2,
.parallax-content h3,
.parallax-content h4,
.parallax-content h5,
.parallax-content h6 {
  margin: 0 0 0.5em 0;
  line-height: 1.2;
}

.parallax-content p {
  margin: 0 0 1em 0;
  line-height: 1.6;
}

/* ===== CONTAINER TRANSFORM MODE - MOBILE & ACCESSIBILITY ===== */

/* Mobile optimizations for container mode */
@media (max-width: 768px) {
  .vixviu-paralactyl[data-mode="container"][data-mobile-behavior="disable"],
  .vixviu-paralactyl-css[data-mode="container"][data-mobile-behavior="disable"] {
    transform: none !important;
    will-change: auto;
    transition: none;
  }
  
  .vixviu-paralactyl[data-mode="container"][data-mobile-behavior="static"],
  .vixviu-paralactyl-css[data-mode="container"][data-mobile-behavior="static"] {
    transform: none !important;
    position: relative !important;
    will-change: auto;
  }
}



/* Reduced motion preference for container mode */
@media (prefers-reduced-motion: reduce) {
  .vixviu-paralactyl[data-mode="container"] {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  
  .vixviu-paralactyl[data-mode="container"] * {
    transform: none !important;
    transition: none !important;
  }
}

/* Focus styles for container mode (accessibility) */
.vixviu-paralactyl[data-mode="container"]:focus-within {
  outline: 2px solid #007cba;
  outline-offset: 2px;
}

/* Print styles for container mode */
@media print {
  .vixviu-paralactyl[data-mode="container"] {
    transform: none !important;
    position: static !important;
    will-change: auto !important;
  }
}

/* ===== ELEMENTOR EDITOR COMPATIBILITY ===== */

/* Force proper accordion behavior for our widget sections */
.elementor-control-type-section .elementor-panel-heading-toggle {
  transition: transform 0.3s ease !important;
}

.elementor-control-type-section.elementor-open .elementor-panel-heading-toggle {
  transform: rotate(180deg) !important;
}

.elementor-control-type-section:not(.elementor-open) .elementor-panel-heading-toggle {
  transform: rotate(0deg) !important;
}

/* Ensure proper spacing in Elementor editor */
.elementor-control-custom_scale .elementor-control-input-wrapper,
.elementor-control-custom_width .elementor-control-input-wrapper,
.elementor-control-custom_height .elementor-control-input-wrapper {
  margin-bottom: 0;
}

.parallax-content a {
  color: inherit;
  text-decoration: underline;
}

.parallax-content a:hover {
  text-decoration: none;
}

/* ===== BROWSER-SPECIFIC OPTIMIZATIONS ===== */

/* Safari-specific optimizations */
@supports (-webkit-backdrop-filter: blur(1px)) {
  .vixviu-paralactyl[data-mode="background"] {
    /* Better performance on Safari */
    -webkit-transform: translateZ(0);
  }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  .vixviu-paralactyl[data-mode="background"] {
    /* iOS Safari has issues with background-attachment */
    background-attachment: scroll !important;
    /* Use local for better iOS performance */
    -webkit-overflow-scrolling: touch;
  }
}

/* iOS mobile specific adjustments */
@media (max-width: 768px) and (-webkit-touch-callout: none) {
  .vixviu-paralactyl[data-mobile-behavior="enable"] {
    background-attachment: local !important;
    /* Prevent iOS zoom on background */
    -webkit-background-size: cover;
  }
}

/* Firefox-specific optimizations */
@-moz-document url-prefix() {
  .vixviu-paralactyl[data-mode="background"] {
    /* Ensure smooth scrolling on Firefox */
    scroll-behavior: auto;
  }
}

/* Edge/Webkit specific fixes */
@supports (-ms-ime-align: auto) {
  .vixviu-paralactyl[data-mode="background"] {
    /* Better Edge compatibility */
    background-attachment: scroll;
  }
}

/* ===== COMING SOON STYLES ===== */

/* Container Transform Mode coming soon styles */
.vixviu-paralactyl[data-mode="container"] .container-coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
  border: 2px dashed #f39c12;
  border-radius: 8px;
  margin: 20px;
}