/**
 * Layout Shift Prevention CSS
 * Prevents cumulative layout shift (CLS) issues
 */

/* Cursor optimization - prevent layout shifts */
.mouse-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  transform: translateZ(0);
  visibility: visible;
  will-change: transform;
  /* Prevent cursor from affecting layout */
  contain: layout style paint;
}

.cursor-inner {
  width: 6px;
  height: 6px;
  z-index: 10000001;
  background-color: #f38924;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
    margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  /* Prevent layout shifts during cursor animations */
  contain: layout style paint;
}

.cursor-outer {
  margin-left: -12px;
  margin-top: -12px;
  width: 30px;
  height: 30px;
  border: 1px solid #f38924;
  box-sizing: border-box;
  z-index: 10000000;
  opacity: 0.5;
  transition: all 0.08s ease-out;
  /* Prevent layout shifts during cursor animations */
  contain: layout style paint;
}

/* Prevent layout shifts from dynamic content */
.dynamic-content {
  min-height: 1px; /* Prevent height collapse */
  contain: layout;
}

/* Reserve space for images to prevent layout shifts */
.image-container {
  position: relative;
  overflow: hidden;
}

.image-container::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio - adjust as needed */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Blog image containers */
.blog-thumbnail {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #1a1a1a; /* Placeholder background */
}

.blog-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Portfolio image containers */
.portfolio-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #1a1a1a;
}

.portfolio-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero image containers */
.hero-image-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: #1a1a1a;
}

.hero-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Prevent layout shifts from loading states */
.loading-skeleton {
  background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Text content minimum heights to prevent shifts */
.text-content {
  min-height: 1.2em;
  line-height: 1.6;
}

.heading-content {
  min-height: 1.2em;
  line-height: 1.3;
}

/* Animation elements - prevent layout shifts */
.wow {
  visibility: hidden;
}

.wow.animated {
  visibility: visible;
}

/* Ensure animations don't cause layout shifts */
.animated {
  animation-fill-mode: both;
}

/* Prevent layout shifts from dynamic navigation */
.navbar {
  contain: layout style;
}

/* Prevent layout shifts from scroll progress */
.progress-wrap {
  position: fixed;
  contain: layout style paint;
}

/* Prevent layout shifts from modal/overlay content */
.modal, .overlay {
  position: fixed;
  contain: layout style paint;
}

/* Prevent layout shifts from tooltips */
.tooltip {
  position: absolute;
  contain: layout style paint;
}

/* Responsive image containers */
@media (max-width: 768px) {
  .blog-thumbnail {
    aspect-ratio: 16 / 10;
  }
  
  .portfolio-image {
    aspect-ratio: 1 / 1;
  }
  
  .hero-image-container {
    aspect-ratio: 16 / 9;
  }
}

/* Prevent layout shifts from font loading */
.font-loading * {
  visibility: hidden;
}

.fonts-loaded * {
  visibility: visible;
}

/* Smooth transitions without layout shifts */
.smooth-transition {
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
}

/* Prevent layout shifts from interactive elements */
button, .button {
  contain: layout style;
  min-height: 44px; /* Minimum touch target */
}

/* Prevent layout shifts from form elements */
input, textarea, select {
  contain: layout style;
  min-height: 44px;
}

/* Prevent layout shifts from dynamic lists */
.dynamic-list {
  contain: layout;
}

.dynamic-list-item {
  contain: layout style;
  min-height: 1px;
}

/* Prevent layout shifts from carousels/sliders */
.swiper-container {
  contain: layout;
}

.swiper-slide {
  contain: layout style;
}

/* Critical rendering path optimization */
.above-fold {
  contain: layout style paint;
}

.below-fold {
  contain: layout;
}

/* Prevent layout shifts from lazy-loaded content */
.lazy-load {
  min-height: 200px; /* Adjust based on expected content */
  background: #1a1a1a;
}

.lazy-load.loaded {
  min-height: auto;
  background: transparent;
}

/* Performance optimizations */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

.no-layout-shift {
  contain: layout style paint;
}