/* ============================================================
   INDUSTRIAL INTEGRITY AGENTS — LOADING STATES & TRANSITIONS
   Pure CSS animations. No external dependencies.
   Matches theme: bg #07090b, cyan #06b6d4, amber #d97706
   ============================================================ */

/* --- 1. TOP PAGE LOADING BAR --- */
#lia-loading-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #06b6d4, #d97706, #06b6d4);
  background-size: 200% 100%;
  z-index: 99999;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 10px rgba(6,182,212,0.5), 0 0 4px rgba(217,119,6,0.4);
  animation: lia-bar-grow 1s ease-out forwards, lia-bar-shimmer 1.8s linear infinite;
  will-change: width, opacity;
}

#lia-loading-bar.lia-bar-done {
  width: 100% !important;
  animation: lia-bar-shimmer 1.8s linear infinite;
  opacity: 0;
  transition: opacity 0.35s ease 0.15s;
}

@keyframes lia-bar-grow {
  0%   { width: 0%; }
  25%  { width: 35%; }
  55%  { width: 65%; }
  80%  { width: 85%; }
  100% { width: 95%; }
}

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

/* --- 2. SCROLL REVEAL (scoped under body.lia-ready to prevent FOUC) --- */

body.lia-ready [data-lia-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  will-change: opacity, transform;
}

body.lia-ready [data-lia-reveal].lia-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger grids: parent gets data-lia-stagger, children animate in sequence */
body.lia-ready [data-lia-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.38s ease-out, transform 0.38s ease-out;
  will-change: opacity, transform;
}

body.lia-ready [data-lia-stagger].lia-visible > *:nth-child(1)  { transition-delay: 0ms;   opacity: 1; transform: translateY(0); }
body.lia-ready [data-lia-stagger].lia-visible > *:nth-child(2)  { transition-delay: 65ms;  opacity: 1; transform: translateY(0); }
body.lia-ready [data-lia-stagger].lia-visible > *:nth-child(3)  { transition-delay: 130ms; opacity: 1; transform: translateY(0); }
body.lia-ready [data-lia-stagger].lia-visible > *:nth-child(4)  { transition-delay: 195ms; opacity: 1; transform: translateY(0); }
body.lia-ready [data-lia-stagger].lia-visible > *:nth-child(5)  { transition-delay: 260ms; opacity: 1; transform: translateY(0); }
body.lia-ready [data-lia-stagger].lia-visible > *:nth-child(6)  { transition-delay: 325ms; opacity: 1; transform: translateY(0); }
body.lia-ready [data-lia-stagger].lia-visible > *:nth-child(7)  { transition-delay: 390ms; opacity: 1; transform: translateY(0); }
body.lia-ready [data-lia-stagger].lia-visible > *:nth-child(8)  { transition-delay: 455ms; opacity: 1; transform: translateY(0); }
body.lia-ready [data-lia-stagger].lia-visible > *:nth-child(n+9){ transition-delay: 520ms; opacity: 1; transform: translateY(0); }

/* --- 3. IMAGE FADE-IN --- */
img.lia-img {
  opacity: 0;
  transition: opacity 0.4s ease-in;
  will-change: opacity;
}
img.lia-img.lia-img-loaded {
  opacity: 1;
}

/* --- 4. SKELETON SCREENS --- */
.lia-skeleton {
  background: linear-gradient(90deg, #111820 25%, #1b2438 50%, #111820 75%);
  background-size: 200% 100%;
  animation: lia-skeleton-pulse 1.6s ease-in-out infinite;
  border-radius: 6px;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}

.lia-skeleton-line {
  background: linear-gradient(90deg, #111820 25%, #1b2438 50%, #111820 75%);
  background-size: 200% 100%;
  animation: lia-skeleton-pulse 1.6s ease-in-out infinite;
  border-radius: 3px;
  height: 14px;
  margin-bottom: 10px;
}

.lia-skeleton-line.wide  { width: 80%; }
.lia-skeleton-line.med   { width: 60%; }
.lia-skeleton-line.short { width: 40%; }

.lia-skeleton-block {
  background: linear-gradient(90deg, #111820 25%, #1b2438 50%, #111820 75%);
  background-size: 200% 100%;
  animation: lia-skeleton-pulse 1.6s ease-in-out infinite;
  border-radius: 8px;
  min-height: 160px;
  border: 1px solid rgba(255,255,255,0.05);
}

@keyframes lia-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- 5. MOBILE MENU TRANSITIONS --- */
.mobile-menu {
  transition: transform 0.22s ease, opacity 0.22s ease !important;
}

/* --- 6. ACTIVE NAV LINK --- */
.lia-nav-active {
  color: var(--amber-l, #f59e0b) !important;
  font-weight: 600;
}