/* ============================================================
   AI LABS — cinematic loader overlay (source pages).
   Full-bleed bot-eye video shown when the AI Labs tab is clicked,
   bridging the navigation into ai-labs.html.
   ============================================================ */
#ai-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #060E2B;            /* brand ink — fills any object-fit gap */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
#ai-loader-overlay.show { opacity: 1; }

#ai-loader-overlay video {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* full-bleed, no letterboxing */
  display: block;
}

/* ----- screen FX over the loader video (matches the AI Labs page) ----- */
/* aberration is applied to the video via inline style in JS (only after the
   SVG filter is injected) so a missing filter can never hide the video. */
#ai-loader-overlay .ldr-fx { position: absolute; inset: 0; pointer-events: none; }
#ai-loader-overlay .ldr-vig {
  z-index: 2;
  background:
    radial-gradient(ellipse 120% 120% at 50% 50%, transparent 54%, rgba(0,0,0,0.72) 100%),
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(0,0,0,0.18), transparent 42%),
    radial-gradient(ellipse 100% 70% at 50% 100%, rgba(0,0,0,0.18), transparent 42%);
}
#ai-loader-overlay .ldr-scan {
  z-index: 3; mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.30) 0 1px, transparent 1px 3px);
}
#ai-loader-overlay .ldr-glass {
  z-index: 4; background: radial-gradient(ellipse 60% 45% at 50% 16%, rgba(255,255,255,0.06), transparent 55%);
}
#ai-loader-overlay .ldr-grain { z-index: 5; }
#ai-loader-overlay .ldr-roll {
  z-index: 4; height: 40%; top: -40%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.05) 50%, transparent);
  animation: ldrRoll 6s linear infinite;
}
@keyframes ldrRoll { 0%{transform:translateY(0)} 100%{transform:translateY(280vh)} }

/* Users who prefer reduced motion never see the overlay — JS navigates
   directly, but this is a hard backstop. */
@media (prefers-reduced-motion: reduce) {
  #ai-loader-overlay { display: none; }
}
