/* Advanced Language Loading States - Prevents Flash */

/* Critical CSS - Load inline in head */
.language-preload {
  /* Prevent content shift during loading */
  min-height: 100vh;
  overflow: hidden;
}

.language-preload [data-translate] {
  /* Hide translatable content initially */
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* Prevent layout shift */
  transform: translateZ(0);
  will-change: opacity, visibility;
}

/* Ready state - show content smoothly */
.language-ready [data-translate] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Loading state for individual elements */
.language-loading {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

.language-loading.loaded {
  opacity: 1;
  pointer-events: auto;
}

/* Skeleton placeholders for critical content */
.language-preload .hero-title[data-translate],
.language-preload .hero-subtitle[data-translate] {
  position: relative;
  overflow: hidden;
}

.language-preload .hero-title[data-translate]::before,
.language-preload .hero-subtitle[data-translate]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.1) 25%,
    rgba(255,255,255,0.2) 50%,
    rgba(255,255,255,0.1) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

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

/* Language switcher loading states */
.language-switcher.lang-loading,
.language-switcher-mobile.lang-loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.language-switcher.lang-loading::after,
.language-switcher-mobile.lang-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  animation: loading-sweep 2s infinite;
}

@keyframes loading-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Success animation */
.language-switcher.lang-success,
.language-switcher-mobile.lang-success {
  animation: success-pulse 0.6s ease-out;
}

@keyframes success-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Smooth direction change animation */
.direction-changing {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.9;
}

/* Prevent FOUC (Flash of Unstyled Content) */
.language-preload * {
  /* Disable animations during load */
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

.language-ready * {
  /* Re-enable animations after load */
  animation-duration: initial !important;
  animation-delay: initial !important;
  transition-duration: initial !important;
  transition-delay: initial !important;
}

/* Progressive enhancement for better perceived performance */
.language-preload .navbar,
.language-preload .footer,
.language-preload .sidebar {
  /* Keep structure visible but hide translatable text */
  visibility: visible;
}

.language-preload .navbar [data-translate],
.language-preload .footer [data-translate],
.language-preload .sidebar [data-translate] {
  opacity: 0;
  visibility: hidden;
}

/* Staggered reveal animation */
.language-ready [data-translate] {
  animation: fadeInUp 0.4s ease-out forwards;
}

.language-ready [data-translate]:nth-child(1) { animation-delay: 0ms; }
.language-ready [data-translate]:nth-child(2) { animation-delay: 50ms; }
.language-ready [data-translate]:nth-child(3) { animation-delay: 100ms; }
.language-ready [data-translate]:nth-child(4) { animation-delay: 150ms; }
.language-ready [data-translate]:nth-child(5) { animation-delay: 200ms; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .language-preload [data-translate]::before {
    background: linear-gradient(90deg,
      rgba(0,0,0,0.1) 25%,
      rgba(0,0,0,0.2) 50%,
      rgba(0,0,0,0.1) 75%);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .language-preload [data-translate],
  .language-ready [data-translate] {
    transition: none;
    animation: none;
  }

  .language-preload [data-translate]::before {
    animation: none;
    background: rgba(255,255,255,0.1);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .language-preload [data-translate]::before {
    background: linear-gradient(90deg,
      rgba(255,255,255,0.05) 25%,
      rgba(255,255,255,0.1) 50%,
      rgba(255,255,255,0.05) 75%);
  }
}

/* Mobile optimization */
@media (max-width: 768px) {
  .language-preload {
    /* Optimize for mobile performance */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .language-preload [data-translate] {
    /* Reduce complexity on mobile */
    transition-duration: 0.2s;
  }
}

/* Print styles */
@media print {
  .language-preload [data-translate] {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .language-preload [data-translate]::before {
    display: none;
  }
}