/**
 * Hero Video Optimization
 * - Disables video on mobile (< 768px) for performance
 * - Shows poster image as static background on mobile
 * - Respects prefers-reduced-motion
 * - Slows down video playback via CSS
 */

/* ==========================================================================
   MOBILE: Hide Video, Show Poster Image
   ========================================================================== */

@media (max-width: 767px) {
  /* Hide the video element completely on mobile */
  .hero--homepage video,
  .brxe-section.hero--homepage video {
    display: none !important;
  }

  /* Force poster image as background on mobile */
  .hero--homepage,
  .brxe-section.hero--homepage {
    background-image: url('/wp-content/uploads/2024/11/visualelectric-1731693847116-1024x559.avif') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* ==========================================================================
   REDUCED MOTION: Pause Video
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero--homepage video,
  .brxe-section.hero--homepage video {
    display: none !important;
  }

  .hero--homepage,
  .brxe-section.hero--homepage {
    background-image: url('/wp-content/uploads/2024/11/visualelectric-1731693847116-1024x559.avif') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* ==========================================================================
   DESKTOP: Video Styling
   ========================================================================== */

@media (min-width: 768px) {
  /* Ensure video covers container */
  .hero--homepage video,
  .brxe-section.hero--homepage video {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}