/* ============================================================
   ADVANCE TECH US — Visual Animations
   Loaded on all pages via nav-footer.js injection.
   All effects respect prefers-reduced-motion.
   No external dependencies. No canvas. Pure CSS + minimal JS.
   ============================================================ */

/* ── 1. SCROLL ENTRANCE ─────────────────────────────────────── */
.at-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
.at-reveal.at-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger siblings */
.at-reveal:nth-child(2) { transition-delay: .08s; }
.at-reveal:nth-child(3) { transition-delay: .16s; }
.at-reveal:nth-child(4) { transition-delay: .24s; }
.at-reveal:nth-child(5) { transition-delay: .32s; }
.at-reveal:nth-child(6) { transition-delay: .40s; }

/* ── 2. CARD HOVER GLOW ─────────────────────────────────────── */
/* Applied via JS — sets a CSS custom property --mx, --my
   for the mouse position, then a radial-gradient follows it */
.at-glow {
  position: relative;
  overflow: hidden;
}
.at-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(62,174,228,.10) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;
}
.at-glow:hover::before { opacity: 1; }
/* Ensure card content sits above the glow layer */
.at-glow > * { position: relative; z-index: 1; }

/* Light mode: slightly more visible glow on white cards */
@media (prefers-color-scheme: light) {
  .at-glow::before {
    background: radial-gradient(
      380px circle at var(--mx, 50%) var(--my, 50%),
      rgba(26,126,200,.08) 0%,
      transparent 60%
    );
  }
}

/* ── 3. HERO BACKGROUND SUBTLE ANIMATION ────────────────────── */
/* Slow gradient shift — pure CSS, no JS needed */
@keyframes at-hero-shift {
  0%   { background-position: 0% 50%;   }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%;   }
}
.hero {
  background-size: 220% 220% !important;
  background-image: linear-gradient(
    135deg,
    #060E1D 0%,
    #0A1628 30%,
    #0C1F3A 55%,
    #071525 80%,
    #060E1D 100%
  ) !important;
  animation: at-hero-shift 28s ease infinite;
}

/* ── 4. CTA BUTTON PULSE RING ───────────────────────────────── */
.btn-gold {
  position: relative;
}
.btn-gold::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid rgba(245,166,35,.55);
  opacity: 0;
  animation: at-pulse 3.2s ease-out infinite;
  pointer-events: none;
}
@keyframes at-pulse {
  0%   { opacity: 0;    transform: scale(1);    }
  15%  { opacity: .65;  transform: scale(1);    }
  80%  { opacity: 0;    transform: scale(1.18); }
  100% { opacity: 0;    transform: scale(1.18); }
}

/* ── 5. SCROLL PROGRESS BAR ─────────────────────────────────── */
#at-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--sky), var(--gold));
  z-index: 9999;
  transition: width .1s linear;
  pointer-events: none;
}

/* ── 6. STAT COUNT-UP — hide raw value until JS runs ────────── */
.stat-num[data-count] { transition: color .3s; }

/* ── ACCESSIBILITY — disable all motion if user prefers ─────── */
@media (prefers-reduced-motion: reduce) {
  .at-reveal,
  .at-reveal.at-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .at-glow::before     { display: none; }
  .hero                { animation: none !important; background-size: 100% 100% !important; }
  .btn-gold::after     { display: none; }
  #at-progress         { display: none; }
}

/* ── 7. SERVICE CARD ICON — float on hover ──────────────────── */
.card-icon {
  transition: transform .35s ease, color .35s ease;
}
.card:hover .card-icon {
  transform: translateY(-5px);
  color: var(--gold) !important;
}

/* ── 8. SERVICE HERO ICON — slow breathe pulse ──────────────── */
@keyframes at-breathe {
  0%, 100% { opacity: .18; transform: scale(1);    }
  50%       { opacity: .28; transform: scale(1.06); }
}
.service-hero-icon {
  animation: at-breathe 4s ease-in-out infinite;
}

/* ── 9. TYPING CURSOR — appears on hero headline ────────────── */
@keyframes at-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.at-cursor {
  display: inline-block;
  width: 3px;
  height: .85em;
  background: var(--sky);
  margin-left: 4px;
  vertical-align: middle;
  animation: at-blink .75s step-end infinite;
  border-radius: 1px;
}
/* Hide cursor once typing is done (JS removes it) */
.at-cursor.at-done { display: none; }

/* ── Reduced motion additions ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .card-icon          { transition: none !important; }
  .card:hover .card-icon { transform: none !important; }
  .service-hero-icon  { animation: none !important; }
  .at-cursor          { animation: none !important; opacity: 1; }
}