/* ──────────────────────────────────────────────────────────────────
   LitigateIQ — Sitewide Animation Library
   Shared by index.html, admin.html, articles.html, article.html,
   privacy-policy.html, terms-of-service.html, nda-confidentiality.html
   ────────────────────────────────────────────────────────────────── */

/* ── 1. Page-load fade-in ────────────────────────────────────── */
html { background: #000; }
body {
  opacity: 0;
  animation: site-page-in 0.45s ease-out 0.05s forwards;
}
@keyframes site-page-in {
  to { opacity: 1; }
}

/* ── Page-leaving fade (used by site-animations.js for nav) ──── */
body.site-page-leaving {
  opacity: 0;
  transition: opacity 0.22s ease;
}

/* ── 2. Universal button press feedback ──────────────────────── */
button:not(:disabled):active,
.btn-primary:active, .btn-outline:active, .btn-confirm:active,
.back-btn:active, .nav-cta:active, .cta-btn:active,
.crop-cancel:active, .crop-confirm:active, .crop-tool-btn:active,
.btn-fc-send:active, .btn-publish:active, .btn-draft:active,
.gate-btn:active, .nav-hamburger:active, .mobile-menu-close:active,
.icon-btn:active, .category-tab:active, .platform-tab:active {
  transform: scale(0.97);
  transition: transform 0.08s ease;
}

/* ── 3. Image fade-in on load (driven by JS class toggling) ─── */
img.img-fading {
  opacity: 0;
  transition: opacity 0.5s ease;
}
img.img-fading.img-loaded {
  opacity: 1;
}

/* ── 4. Scroll progress bar ──────────────────────────────────── */
#site-scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0%;
  z-index: 100000;
  pointer-events: none;
  background: linear-gradient(90deg, #7c3aed 0%, #a78bfa 50%, #22d3ee 100%);
  box-shadow: 0 0 10px rgba(124,58,237,0.55), 0 0 16px rgba(34,211,238,0.25);
  transition: width 0.12s ease-out;
  border-radius: 0 2px 2px 0;
  will-change: width;
}

/* ── 5b. Logo "IQ" cyberpunk glitch — sitewide ───────────────── */
.glitch-iq {
  position: relative;
  display: inline-block;
  color: #22D3EE;
  vertical-align: baseline;
}
.glitch-iq::before,
.glitch-iq::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.glitch-iq::before { color: rgba(0,255,220,.85); }
.glitch-iq::after  { color: rgba(255,0,110,.70); }

.glitch-iq.is-glitching         { animation: iq-jitter  var(--iq-dur,220ms) steps(1) forwards; }
.glitch-iq.is-glitching::before { animation: iq-cyan    var(--iq-dur,220ms) steps(1) forwards; }
.glitch-iq.is-glitching::after  { animation: iq-magenta var(--iq-dur,220ms) steps(1) forwards; }

@keyframes iq-jitter {
  0%,100% { transform: none; }
  16%     { transform: translateX(-1px)   skewX( 0.5deg); }
  33%     { transform: translateX( 1.5px); }
  50%     { transform: translateX(-2px)   skewX(-0.4deg); }
  66%     { transform: translateX( 1px); }
  83%     { transform: translateX(-0.5px); }
}
@keyframes iq-cyan {
  0%   { opacity:.85; transform:translateX(-2px); clip-path:inset(0   0 62% 0); }
  25%  { opacity:.9;  transform:translateX( 1px); clip-path:inset(22% 0 33% 0); }
  50%  { opacity:.75; transform:translateX(-3px); clip-path:inset(48% 0 16% 0); }
  75%  { opacity:.8;  transform:translateX( 2px); clip-path:inset(10% 0 56% 0); }
  100% { opacity:0;   transform:translateX( 0);  clip-path:inset(0   0 0   0); }
}
@keyframes iq-magenta {
  0%   { opacity:.7;  transform:translateX( 2px); clip-path:inset(62% 0 0   0); }
  25%  { opacity:.75; transform:translateX(-1px); clip-path:inset(38% 0 28% 0); }
  50%  { opacity:.65; transform:translateX( 3px); clip-path:inset(14% 0 52% 0); }
  75%  { opacity:.7;  transform:translateX(-2px); clip-path:inset(58% 0  8% 0); }
  100% { opacity:0;   transform:translateX( 0);  clip-path:inset(0   0  0  0); }
}

/* ── 6. prefers-reduced-motion — accessibility safeguard ─────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.05s !important;
    scroll-behavior: auto !important;
  }
  /* Hide decorative effects */
  #canvas-cursor { display: none !important; }
  #site-scroll-progress { display: none !important; }
  /* Show reveal elements immediately */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* Disable cosmetic glitch / pulse effects */
  .glitch-iq::before, .glitch-iq::after { opacity: 0 !important; }
  .bk-pulse, .bk-rays, .bk-sparkle, .bk-ray { display: none !important; }
  .platform-img-float, .platform-img-float img,
  .accuracy-card { animation: none !important; }
  .blog-latest-badge, .article-latest-badge { animation: none !important; }
  .latest-pulse, .latest-blink { animation: none !important; }
  /* Booking success — go static */
  .booking-success-icon { animation: none !important; transform: none !important; opacity: 1 !important; }
  .bk-disk { animation: none !important; transform: scale(1) !important; }
  .bk-ring { animation: none !important; stroke-dashoffset: 0 !important; }
  .bk-check { animation: none !important; stroke-dashoffset: 0 !important; }
  .booking-success-title, .booking-success-line1,
  .booking-success-time, .booking-success-note,
  .booking-success-done { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* Body fade-in disabled for instant load */
  body { animation: none !important; opacity: 1 !important; }
}