/**
 * Performance Optimizations for Animations and Parallax
 * Version: 1.0.0
 *
 * These optimizations improve scroll performance by:
 * - Forcing GPU acceleration for transforms
 * - Using CSS containment to isolate layouts
 * - Optimizing will-change usage
 * - Reducing repaints and reflows
 */

/* ============================================
   GPU Acceleration for Animated Elements
   ============================================ */

/* Force GPU layer for all parallax elements */
[data-parallax-speed],
.decoration,
.animated-element {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Hint for browser optimization */
[data-parallax-speed] {
  will-change: transform;
}

/* Remove will-change after animation completes (set via JS) */
[data-parallax-speed].animation-complete,
.decoration.animation-complete {
  will-change: auto;
}

/* ============================================
   SVG Animation Optimizations
   ============================================ */

.decoration svg {
  /* Better rendering for animations */
  shape-rendering: geometricPrecision;

  /* Force GPU */
  transform: translateZ(0);
}

.decoration svg path {
  /* Improve stroke-dashoffset performance */
  vector-effect: non-scaling-stroke;

  /* Force GPU layer */
  transform: translateZ(0);
}

/* ============================================
   Layout Containment for Sections
   ============================================ */

/* Isolate individual parallax elements */
[data-parallax-speed] {
  contain: layout paint;
}

/* ============================================
   Content Visibility for Off-Screen Sections
   ============================================ */

/* Sections below the fold - browser won't render until visible */
.matches,
.results,
.statistics-basketball,
.photos-handball {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* Specific intrinsic sizes for better accuracy */
.hero-basketball,
.hero-handball {
  contain-intrinsic-size: auto 600px;
}

.about {
  contain-intrinsic-size: auto 700px;
}

/* ============================================
   Reduce Repaints for Images
   ============================================ */

/* Images in parallax containers */
[data-parallax] img {
  /* Reduce repaints during scroll */
  transform: translateZ(0);

  /* Improve image quality during transforms */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ============================================
   Hover States Optimization
   ============================================ */

/* Only hint will-change on hover */
.interactive-element {
  transition: transform 0.3s ease;
}

.interactive-element:hover {
  will-change: transform;
}

.interactive-element:not(:hover) {
  will-change: auto;
}

/* ============================================
   Optimize Decorations
   ============================================ */

/* Golden decorations in matches/results sections */
.decoration--one,
.decoration--two,
.decoration--three {
  /* GPU acceleration */
  transform: translateZ(0);

  /* Isolate paint */
  contain: layout paint;
}

/* Court decorations in hero sections */
.decoration-court {
  /* These are large and move, needs GPU */
  will-change: transform;
  transform: translateZ(0);
}

/* ============================================
   Reduce Motion for Accessibility
   ============================================ */

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  /* Disable all animations and parallax */
  [data-parallax-speed],
  .decoration,
  .animated-element {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Remove will-change to save resources */
  * {
    will-change: auto !important;
  }

  /* Disable SVG animations */
  svg path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* ============================================
   Mobile Optimizations
   ============================================ */

@media (max-width: 1023px) {
  /* Disable parallax effects on mobile (handled by JS too) */
  [data-parallax-speed] {
    will-change: auto !important;
    transform: none !important;
  }

  /* Disable content-visibility on mobile (can cause layout issues) */
  .matches,
  .results,
  .statistics-basketball,
  .photos-handball,
  .hero-basketball,
  .hero-handball,
  .about {
    content-visibility: visible;
  }

  /* Simplify decorations on mobile */
  .decoration-court {
    will-change: auto;
    display: none; /* Or simplify if visible */
  }
}

/* ============================================
   Print Optimizations
   ============================================ */

@media print {
  /* Disable all animations for printing */
  [data-parallax-speed],
  .decoration,
  .animated-element {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* Remove content-visibility for printing */
  * {
    content-visibility: visible !important;
  }
}

/* ============================================
   Specific Element Optimizations
   ============================================ */

/* About section decoration (circle + line animation) */
.decoration--about {
  transform: translateZ(0);
  contain: layout paint;
}

.decoration--about circle,
.decoration--about line {
  /* Smooth SVG animations */
  transform: translateZ(0);
}

/* Arc decoration in about section */
.decoration--about-arc {
  transform: translateZ(0);
  contain: paint;
}

/* Results table decorations */
.results__table {
  position: relative;
  contain: layout style;
}

.decoration--curve {
  transform: translateZ(0);
}

/* Statistics section decorations */
.statistics-basketball .decoration--one,
.statistics-basketball .decoration--two,
.statistics-basketball .decoration--three {
  /* Large circle needs GPU */
  will-change: transform;
  transform: translateZ(0);
}

/* Photos section (multiple images with different speeds) */
.photos-handball__image {
  /* Each image is a GPU layer */
  transform: translateZ(0);
  will-change: transform;
}

/* ============================================
   Performance Monitoring Helpers (Dev Only)
   ============================================ */

/* Uncomment to see GPU layers in development */
/*
[data-parallax-speed],
.decoration {
  outline: 2px solid rgba(255, 0, 0, 0.3);
}
*/

/* Uncomment to see paint areas */
/*
* {
  outline: 1px solid rgba(0, 255, 0, 0.1);
}
*/