/**
 * ECAD Bridge — Global Site Footer Stylesheet
 * Exact match to canonical enterprise design with blurred glowing brand watermark.
 * Completely self-contained so #site-footer renders identically and flawlessly
 * across all pages, whether Tailwind CSS is active or not.
 */

/* ==========================================================================
   1. Base Footer Outer Wrapper
   ========================================================================== */
#site-footer {
  position: relative;
  width: 100%;
  z-index: 20;
  padding: 32px 16px 48px;
  background-color: #080D14;
  color: #E2E8F0;
  box-sizing: border-box;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#site-footer *,
#site-footer *::before,
#site-footer *::after {
  box-sizing: border-box;
}

/* Rounded Inner Glowing Container — Matches Screenshot */
#site-footer .footer-reveal-container {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(11, 20, 36, 0.98) 0%, rgba(7, 13, 24, 0.99) 60%, #050810 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 50px -15px rgba(249, 115, 22, 0.16);
  padding: 42px 48px 26px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1), transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  #site-footer {
    padding: 40px 24px 56px;
  }
  #site-footer .footer-reveal-container {
    padding: 44px 52px 28px;
  }
}

/* Ambient Radial Glow Backdrop */
#site-footer .footer-ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 75% 45% at 50% 0%, rgba(249, 115, 22, 0.14) 0%, rgba(37, 99, 235, 0.06) 50%, transparent 80%);
}

/* ==========================================================================
   2. Main Two-Area Unified Grid (Left Brand + Right 4 Columns)
   ========================================================================== */
#site-footer .grid,
#site-footer .grid-cols-1,
#site-footer .footer-main-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 32px !important;
  align-items: flex-start !important;
  position: relative !important;
  z-index: 10 !important;
  padding-bottom: 16px !important;
}

@media (min-width: 1024px) {
  #site-footer .relative.z-10.grid,
  #site-footer .lg\:grid-cols-12,
  #site-footer .footer-main-grid {
    display: grid !important;
    grid-template-columns: 340px 1fr !important;
    gap: 48px !important;
    align-items: flex-start !important;
  }

  #site-footer .footer-brand-col {
    grid-column: 1 !important;
    width: 100% !important;
  }

  #site-footer .footer-nav-cols {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 28px !important;
    padding-top: 2px !important;
  }
}

/* ==========================================================================
   3. Left Column: Brand Identity, Spec Description & Status Badge
   ========================================================================== */
#site-footer .footer-col-about,
#site-footer .footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#site-footer .footer-brand-logo,
#site-footer .footer-col-about img,
#site-footer .footer-brand-col img {
  height: 38px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

#site-footer .footer-col-about p,
#site-footer .footer-brand-col p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #94A3B8;
  max-width: 320px;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Operational Status Pill Badge */
#site-footer .all-systems-pill,
#site-footer .inline-flex.items-center.gap-2,
#site-footer .bg-emerald-500\/10 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4.5px 12px !important;
  border-radius: 9999px !important;
  background: rgba(13, 38, 40, 0.9) !important;
  border: 1px solid rgba(45, 212, 191, 0.3) !important;
  color: #2DD4BF !important;
  font-size: 11px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 500 !important;
  width: fit-content !important;
}

#site-footer .status-dot,
#site-footer .animate-pulse,
#site-footer .bg-emerald-400.animate-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #2DD4BF;
  display: inline-block;
  animation: siteFooterPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes siteFooterPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

/* ==========================================================================
   4. Right Area: 4 Corporate Navigation Columns (Quick, Resources, Tool, Other)
   ========================================================================== */
#site-footer .footer-nav-cols,
#site-footer .lg\:col-span-8,
#site-footer .grid-cols-2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px 16px !important;
}

@media (min-width: 640px) {
  #site-footer .footer-nav-cols,
  #site-footer .lg\:col-span-8,
  #site-footer .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
  }
}

#site-footer .footer-reveal-col,
#site-footer .footer-col-1,
#site-footer .footer-col-2,
#site-footer .footer-col-3,
#site-footer .footer-col-resources {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Column Header Titles */
#site-footer .footer-col-title,
#site-footer .font-mono.text-xs.uppercase,
#site-footer .font-semibold.text-primary,
#site-footer .text-primary {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
  color: #F97316 !important;
  margin: 0 !important;
}

/* Unstyled Lists */
#site-footer ul,
#site-footer ul.space-y-3 {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#site-footer li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Navigation Links */
#site-footer a {
  color: #CBD5E1 !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}

#site-footer a:hover,
#site-footer a:focus {
  color: #F97316 !important;
  text-decoration: none !important;
  transform: translateX(2px) !important;
}

/* Badge on "NEW" */
#site-footer .tool-new-badge,
#site-footer .bg-primary\/20,
#site-footer .text-primary.border,
#site-footer .px-1\.5.py-0\.5 {
  padding: 1.5px 5px !important;
  border-radius: 4px !important;
  background: rgba(249, 115, 22, 0.15) !important;
  color: #F97316 !important;
  border: 1px solid rgba(249, 115, 22, 0.35) !important;
  font-size: 9px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-left: 6px !important;
}

/* ==========================================================================
   5. Giant Brand Watermark SVG (Exact Blurred Vibrant Design — Ref Screenshot)
   ========================================================================== */
#site-footer .footer-reveal-watermark {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 26px !important;
  pointer-events: none !important;
  user-select: none !important;
  overflow: hidden !important;
  z-index: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 24px !important;
}

#site-footer .footer-reveal-watermark svg {
  width: 100% !important;
  max-width: 960px !important;
  height: auto !important;
  max-height: 150px !important;
  filter: blur(0.9px) !important;
  -webkit-filter: blur(0.9px) !important;
  opacity: 0.65 !important;
  display: block !important;
  pointer-events: none !important;
  transform: translateZ(0);
  transition: all 0.3s ease;
}

@media (min-width: 640px) {
  #site-footer .footer-reveal-watermark svg {
    max-height: 155px !important;
    max-width: 980px !important;
    filter: blur(1.0px) !important;
    -webkit-filter: blur(1.0px) !important;
    opacity: 0.65 !important;
  }
}

@media (min-width: 1024px) {
  #site-footer .footer-reveal-watermark svg {
    max-height: 165px !important;
    max-width: 1040px !important;
    filter: blur(1.0px) !important;
    -webkit-filter: blur(1.0px) !important;
    opacity: 0.68 !important;
  }
}

/* Mobile specific footer refinements */
@media (max-width: 639px) {
  #site-footer {
    padding: 20px 12px 32px !important;
  }
  #site-footer .footer-reveal-container {
    padding: 26px 18px 20px !important;
    border-radius: 20px !important;
    min-height: auto !important;
  }
  #site-footer .footer-reveal-watermark {
    bottom: 40px !important;
  }
  #site-footer .footer-reveal-watermark svg {
    opacity: 0.65 !important;
    max-height: 110px !important;
    filter: blur(0.8px) !important;
    -webkit-filter: blur(0.8px) !important;
  }
}

/* ==========================================================================
   6. Bottom Legal & Compliance Bar
   ========================================================================== */
#site-footer .footer-reveal-bottom {
  position: relative !important;
  z-index: 10 !important;
  padding-top: 18px !important;
  margin-top: 24px !important;
  border-top: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  font-size: 11.5px !important;
  font-family: 'JetBrains Mono', monospace !important;
  color: #94A3B8 !important;
}

@media (max-width: 639px) {
  #site-footer .footer-reveal-bottom {
    text-align: center !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11px !important;
    padding-top: 14px !important;
    margin-top: 18px !important;
  }
  #site-footer .footer-reveal-bottom .flex {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
}

@media (min-width: 640px) {
  #site-footer .footer-reveal-bottom {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

#site-footer .footer-reveal-bottom .flex {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#site-footer .footer-reveal-bottom .text-slate-400 {
  color: #94A3B8 !important;
}

#site-footer .footer-reveal-bottom .text-slate-600 {
  color: #475569 !important;
}

#site-footer .footer-reveal-bottom .material-symbols-outlined {
  font-size: 14px !important;
  vertical-align: middle !important;
}

/* ==========================================================================
   7. Scroll Reveal Animation Classes
   ========================================================================== */
.footer-reveal-col {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-reveal-watermark {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.footer-reveal-bottom {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.38s;
}

/* Revealed active state */
footer.footer-revealed .footer-reveal-container {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
footer.footer-revealed .footer-reveal-col {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
footer.footer-revealed .footer-col-about      { opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.08s; }
footer.footer-revealed .footer-col-1          { opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.18s; }
footer.footer-revealed .footer-col-2          { opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.28s; }
footer.footer-revealed .footer-col-3          { opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.38s; }
footer.footer-revealed .footer-col-resources  { opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.23s; }
footer.footer-revealed .footer-reveal-watermark { opacity: 1 !important; transform: translateY(0) scale(1) !important; }
footer.footer-revealed .footer-reveal-bottom    { opacity: 1 !important; transform: translateY(0) !important; }

@media (prefers-reduced-motion: reduce) {
  .footer-reveal-container,
  .footer-reveal-col,
  .footer-reveal-watermark,
  .footer-reveal-bottom {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}