/* ====================================================================
   HANS Global Tech — Premium Interactions Add-on
   Append to assets/css/style.css OR include after the main stylesheet.
   Provides: spotlight, pulse animations, header shrink, mobile menu,
   smoother card hovers, hero chart draw-in support.
==================================================================== */

/* --- HERO SPOTLIGHT (mouse-follow glow) --- */
.hero-visual-frame {
  position: relative;
  overflow: hidden;  /* keeps the spotlight inside the frame */
}
.spotlight-glow {
  position: absolute;
  top: 0; left: 0;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(254, 116, 27, 0.22) 0%,
    rgba(254, 116, 27, 0.10) 30%,
    rgba(254, 116, 27, 0) 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .15s ease-out;
  mix-blend-mode: screen;
  z-index: 5;
  will-change: transform, opacity;
}

/* --- ACCENT SERVER UNIT PULSE (the orange "ACTIVE" row in hero SVG) --- */
@keyframes hansPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.hero-visual-frame svg [fill="#FE741B"] {
  animation: hansPulse 2.4s ease-in-out infinite;
}

/* --- STATUS DOT BLINK (green dots in dashboard) --- */
@keyframes hansBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.hero-visual-frame svg [fill="#22c55e"] {
  animation: hansBlink 1.6s ease-in-out infinite;
}

/* --- HEADER SHRINK ON SCROLL --- */
.site-header {
  transition: min-height .25s ease, box-shadow .25s ease, background .25s ease;
}
.site-header .header-inner {
  transition: min-height .25s ease;
}
.site-header.scrolled {
  background: rgba(255,255,255,.98);
  box-shadow: 0 2px 12px rgba(10,14,42,.08);
}
.site-header.scrolled .header-inner {
  min-height: 64px;
}
.site-header.scrolled .brand img {
  max-height: 38px;
  transition: max-height .25s ease;
}
.brand img { transition: max-height .25s ease; }

/* --- IMPROVED CAPABILITY CARD HOVER --- */
.cap-cell {
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cap-cell:hover {
  background: var(--navy-50);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10,14,42,.06);
  z-index: 2;
}
.cap-cell .cap-icon {
  transition: transform .3s ease, color .25s ease;
}
.cap-cell:hover .cap-icon {
  transform: scale(1.08);
}

/* --- INDUSTRY ROW HOVER --- */
.industry-row {
  transition: background .25s ease;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}
.industry-row:hover {
  background: var(--navy-50);
}

/* --- PROCESS STEP HOVER --- */
.process-step {
  transition: background .25s ease;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}
.process-step:hover {
  background: rgba(255,255,255,.04);
}

/* --- SCROLL REVEAL ANIMATIONS --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,0,.2,1), transform .7s cubic-bezier(.2,0,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger child reveals when applied to grids */
.cap-grid .cap-cell.reveal { transition-delay: 0s; }
.cap-grid .cap-cell.reveal:nth-child(2) { transition-delay: .05s; }
.cap-grid .cap-cell.reveal:nth-child(3) { transition-delay: .10s; }
.cap-grid .cap-cell.reveal:nth-child(4) { transition-delay: .15s; }
.cap-grid .cap-cell.reveal:nth-child(5) { transition-delay: .20s; }
.cap-grid .cap-cell.reveal:nth-child(6) { transition-delay: .25s; }
.cap-grid .cap-cell.reveal:nth-child(7) { transition-delay: .30s; }
.cap-grid .cap-cell.reveal:nth-child(8) { transition-delay: .35s; }
.cap-grid .cap-cell.reveal:nth-child(9) { transition-delay: .40s; }

/* --- BUTTON SUBTLE LIFT --- */
.btn {
  position: relative;
  transition: all .2s ease, transform .15s ease;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-whatsapp:hover { transform: translateY(-1px); }

/* --- WHATSAPP FLOAT — pulse ring --- */
@keyframes hansFloatPulse {
  0%, 100% { box-shadow: 0 12px 28px rgba(37,211,102,.40); }
  50% { box-shadow: 0 12px 32px rgba(37,211,102,.55), 0 0 0 12px rgba(37,211,102,.10); }
}
.whatsapp-float {
  animation: hansFloatPulse 2.5s ease-in-out infinite;
}

/* --- MOBILE MENU SLIDE-IN --- */
@media (max-width: 920px) {
  .nav-list {
    transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  }
  .nav-list.is-open {
    transform: translateY(0);
  }
}

/* --- RESPECT REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .spotlight-glow { display: none; }
  .hero-visual-frame svg [fill="#FE741B"],
  .hero-visual-frame svg [fill="#22c55e"],
  .whatsapp-float {
    animation: none;
  }
  * { transition-duration: .01s !important; animation-duration: .01s !important; }
}