/* ========================================
   PERFORMANCE OPTIMIZATIONS
   Skeleton screens & loading states
   ======================================== */

/* Skeleton Animation */
@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Section Header Skeleton - Shows while image loads */
.section-header-with-image {
  position: relative;
  min-height: 200px; /* Prevent layout shift */
}

.section-header-with-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e8e8e8 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show skeleton while loading */
.section-header-with-image:not(.loaded)::before {
  opacity: 1;
}

/* Hide skeleton when image loads */
.section-header-with-image.loaded::before {
  opacity: 0;
}

/* Image loading states */
.card-icon,
.section-header-img {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.card-icon.loaded,
.section-header-img.loaded {
  opacity: 1;
}

/* Card skeleton screens */
.service-card,
.approach-card,
.innovation-card,
.validation-card,
.tech-system-mini {
  position: relative;
  min-height: 120px; /* Prevent layout shift */
}

.service-card::before,
.approach-card::before,
.innovation-card::before,
.validation-card::before,
.tech-system-mini::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  width: 48px;
  height: 48px;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e8e8e8 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 0;
}

/* Show icon skeleton while loading */
.service-card:not(.icons-loaded)::before,
.approach-card:not(.icons-loaded)::before,
.innovation-card:not(.icons-loaded)::before,
.validation-card:not(.icons-loaded)::before,
.tech-system-mini:not(.icons-loaded)::before {
  opacity: 1;
}

/* Prevent invisible text flash (FOIT) */
body {
  /* Ensure text is visible during webfont load */
  font-display: optional;
}

/* Hero skeleton - most important for UX */
.hero-background {
  background: linear-gradient(
    135deg,
    #002d1a 0%,
    #004d2a 50%,
    #002d1a 100%
  );
  background-size: 200% 200%;
  animation: skeleton-loading 2s ease-in-out;
}

/* Show background color immediately while image loads */
.hero-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  z-index: 0;
}

.hero-bg-image {
  z-index: 1;
  position: relative;
}

/* Smooth fade-in for hero */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-bg-image {
  animation: fadeIn 0.5s ease-in-out;
}

/* Content shift prevention */
img:not([width]),
img:not([height]) {
  /* Set aspect ratio to prevent layout shift */
  aspect-ratio: attr(width) / attr(height);
}

/* Progressive enhancement for modern browsers */
@supports (font-display: swap) {
  /* Modern browsers get swap for instant text */
  body {
    font-display: swap;
  }
}