/*
* ========================================================================================
* Video Performance Optimizations
* Ensures smooth video playback and fast loading
* ========================================================================================
*/

/* Hero video container optimizations */
#home {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* Video element optimizations */
#hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  /* Hardware acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  /* Smooth rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Ensure video loads quickly */
video {
  /* Optimize video decoding */
  content-visibility: auto;
  contain: layout style paint;
}

/* Responsive video optimizations */
@media (max-width: 768px) {
  #hero-video {
    /* Reduce opacity on mobile for better text readability */
    opacity: 0.6;
  }
}

/* Preload animation for smooth transition */
@keyframes videoFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}

#hero-video.loaded {
  animation: videoFadeIn 0.5s ease-in;
}

/* Ensure video doesn't cause layout shift */
.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Performance: Reduce paint operations */
#home .absolute {
  will-change: auto;
}

/* Optimize for different connection speeds */
@media (prefers-reduced-data: reduce) {
  #hero-video {
    display: none;
  }
}

/* Smooth scrolling over video */
#home {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Professional button hover effects - subtle and elegant */
a.inline-flex,
.theme-btn,
button:not(.mobile-menu-button):not(#sidebar__close-btn):not(.carousel-dot):not(.carousel-prev):not(.carousel-next) {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Primary CTA buttons (white background) */
a.inline-flex[href="#services"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

a.inline-flex[href="#services"]:active {
  transform: translateY(0);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Secondary buttons (border style) */
a.inline-flex.rounded-lg.border:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Theme buttons (project cards) */
.theme-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Remove excessive scale transforms */
* {
  /* Override any scale transforms on buttons */
}

a.inline-flex:hover,
.theme-btn:hover {
  /* Ensure no scale transform is applied */
  scale: 1 !important;
}