/* Main Styles */

/* Global Performance Optimizations */
html {
  scroll-behavior: auto; /* Disable smooth scroll for better performance */
}

/* Force GPU compositing for smooth scrolling */
body {
  -webkit-overflow-scrolling: touch;
}

/* ========================================
   Global Viewport-Based Responsive Styles
   ======================================== */

/* Section wrapper common styles */
.about-wrapper,
.ai-edits-container,
.retouch-wrapper,
.masking-wrapper,
.color-wrapper,
.ghost-wrapper,
.shadow-wrapper,
.channel-wrapper,
.swatch-wrapper,
.jewellery-wrapper {
  gap: var(--section-gap, clamp(30px, 4vw, 60px));
}

/* Comparison card wrappers - viewport based sizing */
.comparison-cards-wrapper,
.retouch-comparison-wrapper,
.masking-comparison-wrapper,
.color-comparison-wrapper,
.ghost-comparison-wrapper,
.shadow-comparison-wrapper,
.channel-comparison-wrapper,
.swatch-comparison-wrapper,
.jewellery-comparison-wrapper {
  width: var(--card-width, clamp(350px, 40vw, 650px));
  height: var(--card-height, clamp(450px, 60vh, 800px));
}

/* Text containers - viewport based sizing */
.about-content,
.ai-edits-content,
.retouch-container,
.masking-container,
.color-container,
.ghost-container,
.shadow-container,
.channel-container,
.swatch-container,
.jewellery-container {
  max-width: var(--content-width, clamp(300px, 40vw, 550px));
}

/* Headings - viewport based font size */
.about-heading,
.ai-edits-heading,
.retouch-heading,
.masking-heading,
.color-heading,
.ghost-heading,
.shadow-heading,
.channel-heading,
.swatch-heading,
.jewellery-heading {
  font-size: var(--heading-size, clamp(2rem, 4vw, 4rem));
}

/* Text content - viewport based font size */
.about-text,
.ai-edits-text,
.retouch-text,
.masking-text,
.color-text,
.ghost-text,
.shadow-text,
.channel-text,
.swatch-text,
.jewellery-text {
  font-size: var(--text-size, clamp(0.9rem, 1.2vw, 1.2rem));
}

/* Large desktop screens */
@media (min-width: 1920px) {
  :root {
    --heading-size: clamp(3rem, 3vw, 4.5rem);
    --text-size: clamp(1.1rem, 1vw, 1.4rem);
    --card-width: min(700px, 35vw);
    --card-height: min(850px, 65vh);
    --content-width: min(650px, 38vw);
  }
}

/* Ultra-wide screens */
@media (min-width: 2560px) {
  :root {
    --card-width: min(700px, 25vw);
    --card-height: min(850px, 55vh);
    --content-width: min(700px, 30vw);
  }
  
  .about-container,
  .ai-edits-container,
  .retouch-wrapper,
  .masking-wrapper,
  .color-wrapper,
  .ghost-wrapper,
  .shadow-wrapper,
  .channel-wrapper,
  .swatch-wrapper,
  .jewellery-wrapper {
    max-width: 2200px;
    margin: 0 auto;
  }
}

/* Tablet landscape */
@media (max-width: 1366px) {
  :root {
    --card-width: clamp(400px, 42vw, 550px);
    --card-height: clamp(500px, 55vh, 700px);
    --content-width: clamp(400px, 42vw, 500px);
  }
}

/* Tablet portrait */
@media (max-width: 1024px) {
  :root {
    --heading-size: clamp(1.8rem, 4vw, 3rem);
    --text-size: clamp(0.95rem, 1.5vw, 1.1rem);
    --card-width: clamp(320px, 55vw, 380px);
    --card-height: clamp(380px, 42vh, 500px);
    --content-width: 100%;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --heading-size: clamp(1.5rem, 5vw, 2.5rem);
    --text-size: clamp(0.85rem, 2.5vw, 1rem);
    --card-width: clamp(280px, 80vw, 350px);
    --card-height: clamp(350px, 50vh, 450px);
    --section-padding: clamp(15px, 4vw, 20px);
    --section-gap: clamp(20px, 4vh, 30px);
  }
  
  /* ========================================
     Mobile Performance Optimizations
     ======================================== */
  
  /* Improve scroll performance */
  html {
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  body {
    overflow-x: hidden;
    overscroll-behavior-y: contain;
  }
  
  /* Reduce paint complexity on mobile */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Optimize sections for mobile scroll */
  .hero-section,
  .about-section,
  .video-section,
  .ai-edits-section,
  .retouch-section,
  .masking-section,
  .color-section,
  .ghost-section,
  .shadow-section,
  .channel-section,
  .swatch-section,
  .jewellery-section {
    contain: layout style;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  
  /* Remove will-change on mobile to reduce memory usage */
  .comparison-card,
  .retouch-comparison-card,
  .masking-comparison-card,
  .color-comparison-card,
  .ghost-comparison-card,
  .shadow-comparison-card,
  .channel-comparison-card,
  .swatch-comparison-card,
  .jewellery-comparison-card {
    will-change: auto !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  
  /* Optimize slider animations */
  .comparison-slider,
  .retouch-comparison-slider,
  .masking-comparison-slider,
  .color-comparison-slider,
  .ghost-comparison-slider,
  .shadow-comparison-slider,
  .channel-comparison-slider,
  .swatch-comparison-slider,
  .jewellery-comparison-slider {
    will-change: auto !important;
  }
  
  /* Optimize clip-path animations */
  .comparison-image.before,
  .retouch-comparison-image.before,
  .masking-comparison-image.before,
  .color-comparison-image.before,
  .ghost-comparison-image.before,
  .shadow-comparison-image.before,
  .channel-comparison-image.before,
  .swatch-comparison-image.before,
  .jewellery-comparison-image.before {
    will-change: auto !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  
  /* Simplify shadows for better performance */
  .comparison-card,
  .retouch-comparison-card,
  .masking-comparison-card,
  .color-comparison-card,
  .ghost-comparison-card,
  .shadow-comparison-card,
  .channel-comparison-card,
  .swatch-comparison-card,
  .jewellery-comparison-card {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Optimize images */
  img {
    content-visibility: auto;
    contain-intrinsic-size: 300px 400px;
  }
  
  /* Pause animations when cards are not active to save GPU */
  .comparison-card:not(.active) .comparison-image.before,
  .comparison-card:not(.active) .comparison-slider,
  .retouch-comparison-card:not(.active) .retouch-comparison-image.before,
  .retouch-comparison-card:not(.active) .retouch-comparison-slider,
  .masking-comparison-card:not(.active) .masking-comparison-image.before,
  .masking-comparison-card:not(.active) .masking-comparison-slider,
  .color-comparison-card:not(.active) .color-comparison-image.before,
  .color-comparison-card:not(.active) .color-comparison-slider,
  .ghost-comparison-card:not(.active) .ghost-comparison-image.before,
  .ghost-comparison-card:not(.active) .ghost-comparison-slider,
  .shadow-comparison-card:not(.active) .shadow-comparison-image.before,
  .shadow-comparison-card:not(.active) .shadow-comparison-slider,
  .channel-comparison-card:not(.active) .channel-comparison-image.before,
  .channel-comparison-card:not(.active) .channel-comparison-slider,
  .swatch-comparison-card:not(.active) .swatch-comparison-image.before,
  .swatch-comparison-card:not(.active) .swatch-comparison-slider,
  .jewellery-comparison-card:not(.active) .jewellery-comparison-image.before,
  .jewellery-comparison-card:not(.active) .jewellery-comparison-slider {
    animation: none !important;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  :root {
    --heading-size: clamp(1.3rem, 6vw, 2rem);
    --text-size: clamp(0.8rem, 3vw, 0.9rem);
    --card-width: clamp(260px, 85vw, 300px);
    --card-height: clamp(320px, 45vh, 400px);
  }
}

/* Aspect ratio adjustments for unusual screens */
@media (min-aspect-ratio: 21/9) {
  :root {
    --card-height: clamp(350px, 70vh, 600px);
  }
}

@media (max-aspect-ratio: 3/4) {
  :root {
    --card-width: clamp(300px, 70vw, 450px);
    --card-height: clamp(350px, 35vh, 500px);
  }
}

/* GPU acceleration for all sections */
.hero-section,
.about-section,
.video-section,
.ai-edits-section,
.retouch-section,
.masking-section,
.color-section,
.ghost-section,
.shadow-section,
.channel-section,
.swatch-section,
.jewellery-section {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: auto;
}

/* Contain paint for better isolation */
.ai-edits-section,
.retouch-section,
.masking-section,
.color-section,
.ghost-section,
.shadow-section,
.channel-section,
.swatch-section,
.jewellery-section {
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 300vh;
}

/* Prevent layout shifts from images */
img {
  width: 100%;
  height: 100%;
  content-visibility: auto;
}

/* Comparison images - fixed dimensions to prevent layout shift */
.comparison-image img,
.retouch-comparison-image img,
.masking-comparison-image img,
.color-comparison-image img,
.ghost-comparison-image img,
.shadow-comparison-image img,
.channel-comparison-image img,
.swatch-comparison-image img,
.jewellery-comparison-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: auto;
}

/* Optimize comparison cards for smooth transitions */
.comparison-card,
.retouch-comparison-card,
.masking-comparison-card,
.color-comparison-card,
.ghost-comparison-card,
.shadow-comparison-card,
.channel-comparison-card,
.swatch-comparison-card,
.jewellery-comparison-card {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Optimize sliders */
.comparison-slider,
.retouch-comparison-slider,
.masking-comparison-slider,
.color-comparison-slider,
.ghost-comparison-slider,
.shadow-comparison-slider,
.channel-comparison-slider,
.swatch-comparison-slider,
.jewellery-comparison-slider {
  will-change: left;
}

/* Optimize before images for clip-path animation */
.comparison-image.before,
.retouch-comparison-image.before,
.masking-comparison-image.before,
.color-comparison-image.before,
.ghost-comparison-image.before,
.shadow-comparison-image.before,
.channel-comparison-image.before,
.swatch-comparison-image.before,
.jewellery-comparison-image.before {
  will-change: clip-path;
}

/* Optimize meteor images */
.meteor-image {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .custom-cursor {
    display: none !important;
  }
}

/* ========================================
   Mobile Text Visibility Fallback
   Ensures text is visible even if JS animations fail
   ======================================== */

/* Fallback: Show text content from data-text attribute if empty */
.stream-text:empty::after,
.falling-text:empty::after {
  content: attr(data-text);
  opacity: 1;
}

/* Ensure falling text words are visible after animation */
.falling-text .word {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Mobile-specific: Ensure text containers are visible */
@media (max-width: 768px) {
  .about-text,
  .ai-edits-text,
  .retouch-text,
  .masking-text,
  .color-text,
  .ghost-text,
  .shadow-text,
  .channel-text,
  .swatch-text,
  .jewellery-text {
    min-height: auto;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Ensure headings are visible */
  .about-heading .letter,
  .retouch-heading .letter,
  .masking-heading .letter {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .ai-edits-heading .word,
  .color-heading .word,
  .ghost-heading .word,
  .shadow-heading .word,
  .channel-heading .word,
  .swatch-heading .word,
  .jewellery-heading .word {
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* Ensure comparison cards and sliders stay below header */
  .comparison-cards-wrapper,
  .retouch-comparison-wrapper,
  .masking-comparison-wrapper,
  .color-comparison-wrapper,
  .ghost-comparison-wrapper,
  .shadow-comparison-wrapper,
  .channel-comparison-wrapper,
  .swatch-comparison-wrapper,
  .jewellery-comparison-wrapper {
    z-index: 5 !important;
  }
  
  .comparison-card,
  .retouch-comparison-card,
  .masking-comparison-card,
  .color-comparison-card,
  .ghost-comparison-card,
  .shadow-comparison-card,
  .channel-comparison-card,
  .swatch-comparison-card,
  .jewellery-comparison-card {
    z-index: 5 !important;
  }
  
  /* Improve touch targets for mobile - wider touch area */
  .comparison-slider,
  .retouch-comparison-slider,
  .masking-comparison-slider,
  .color-comparison-slider,
  .ghost-comparison-slider,
  .shadow-comparison-slider,
  .channel-comparison-slider,
  .swatch-comparison-slider,
  .jewellery-comparison-slider {
    width: 50px !important;
    z-index: 10 !important;
    background: transparent !important;
    touch-action: none;
  }
  
  /* Larger slider handles for touch - ensure they stay below header */
  .slider-handle,
  .retouch-slider-handle,
  .masking-slider-handle,
  .color-slider-handle,
  .ghost-slider-handle,
  .shadow-slider-handle,
  .channel-slider-handle,
  .swatch-slider-handle,
  .jewellery-slider-handle {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    z-index: 15 !important;
    touch-action: none;
    pointer-events: auto;
  }
  
  /* Slider lines also need pointer events */
  .slider-line,
  .retouch-slider-line,
  .masking-slider-line,
  .color-slider-line,
  .ghost-slider-line,
  .shadow-slider-line,
  .channel-slider-line,
  .swatch-slider-line,
  .jewellery-slider-line {
    pointer-events: auto;
    touch-action: none;
  }
  
  /* Comparison containers - allow touch on slider */
  .comparison-container,
  .retouch-comparison-container,
  .masking-comparison-container,
  .color-comparison-container,
  .ghost-comparison-container,
  .shadow-comparison-container,
  .channel-comparison-container,
  .swatch-comparison-container,
  .jewellery-comparison-container {
    touch-action: none;
  }
  
  /* Ensure all sections stay below header */
  .hero-section,
  .about-section,
  .video-section,
  .ai-edits-section,
  .retouch-section,
  .masking-section,
  .color-section,
  .ghost-section,
  .shadow-section,
  .channel-section,
  .swatch-section,
  .jewellery-section {
    z-index: 1 !important;
  }
}

/* Small mobile - even larger touch targets */
@media (max-width: 480px) {
  .slider-handle,
  .retouch-slider-handle,
  .masking-slider-handle,
  .color-slider-handle,
  .ghost-slider-handle,
  .shadow-slider-handle,
  .channel-slider-handle,
  .swatch-slider-handle,
  .jewellery-slider-handle {
    width: 48px;
    height: 48px;
  }
}

/* Mobile card navigation dots */
@media (max-width: 768px) {
  .mobile-card-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    padding: 10px 0;
  }
  
  .mobile-card-dots .card-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    padding: 0;
  }
  
  .mobile-card-dots .card-dot.active {
    background: #6366f1;
    transform: scale(1.2);
  }
  
  /* Ensure comparison containers are interactive on mobile */
  .comparison-container,
  .retouch-comparison-container,
  .masking-comparison-container,
  .color-comparison-container,
  .ghost-comparison-container,
  .shadow-comparison-container,
  .channel-comparison-container,
  .swatch-comparison-container,
  .jewellery-comparison-container {
    touch-action: pan-y pinch-zoom;
    cursor: ew-resize;
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* Enable CSS animations on mobile - automatic slider transition */
  /* Only active cards will animate (controlled by individual section CSS) */
  
  /* Swipe hint for mobile - only show for multi-card sections */
  .comparison-cards-wrapper[data-cards="multiple"]::after,
  .retouch-comparison-wrapper[data-cards="multiple"]::after,
  .masking-comparison-wrapper[data-cards="multiple"]::after,
  .ghost-comparison-wrapper[data-cards="multiple"]::after,
  .shadow-comparison-wrapper[data-cards="multiple"]::after,
  .jewellery-comparison-wrapper[data-cards="multiple"]::after {
    content: 'Swipe to see more';
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Space Mono', monospace;
    white-space: nowrap;
    opacity: 0;
    animation: fadeInOut 4s ease-in-out 1s forwards;
  }
  
  @keyframes fadeInOut {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
  }
}

/* Hide dots on desktop */
@media (min-width: 769px) {
  .mobile-card-dots {
    display: none !important;
  }
}