/* ============================================================
   NPR Solutions — Animation System
   ============================================================ */

/* ── Entrance Animation Base States ── */
[data-animate] {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1);
}
[data-animate].is-visible { opacity: 1; transform: none !important; }

[data-animate="fade-up"]    { transform: translateY(40px); }
[data-animate="fade-down"]  { transform: translateY(-30px); }
[data-animate="fade-left"]  { transform: translateX(-50px); }
[data-animate="fade-right"] { transform: translateX(50px); }
[data-animate="zoom-in"]    { transform: scale(.88); }
[data-animate="zoom-out"]   { transform: scale(1.08); }
[data-animate="flip-up"]    { transform: rotateX(-30deg) translateY(30px); }

/* Stagger children */
[data-animate="stagger"] { opacity: 1; transform: none; }
[data-animate="stagger"] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1),
              transform .6s cubic-bezier(.16,1,.3,1);
}
[data-animate="stagger"].is-visible > * { opacity: 1; transform: none; }
[data-animate="stagger"].is-visible > *:nth-child(1)  { transition-delay: .05s; }
[data-animate="stagger"].is-visible > *:nth-child(2)  { transition-delay: .12s; }
[data-animate="stagger"].is-visible > *:nth-child(3)  { transition-delay: .19s; }
[data-animate="stagger"].is-visible > *:nth-child(4)  { transition-delay: .26s; }
[data-animate="stagger"].is-visible > *:nth-child(5)  { transition-delay: .33s; }
[data-animate="stagger"].is-visible > *:nth-child(6)  { transition-delay: .40s; }
[data-animate="stagger"].is-visible > *:nth-child(7)  { transition-delay: .47s; }
[data-animate="stagger"].is-visible > *:nth-child(8)  { transition-delay: .54s; }

/* Counter animation handled by JS — just style the number */
[data-animate="counter"] { opacity: 1; transform: none; }

/* ── Hover Lift ── */
.hover-lift { transition: transform .25s ease, box-shadow .25s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.15); }

/* ── Shimmer / Skeleton ── */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease infinite;
}

/* ── Pulse Ring ── */
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.6); opacity: 0; }
}
.pulse-ring {
  position: relative;
  display: inline-flex;
}
.pulse-ring::before, .pulse-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--blue-bright);
  animation: pulseRing 2s ease-out infinite;
}
.pulse-ring::after { animation-delay: .8s; }

/* ── Typing Cursor ── */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--blue-light);
}

/* ── Gradient Text ── */
.gradient-text {
  background: linear-gradient(135deg, var(--blue-bright), var(--blue-light), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glow ── */
.glow-blue { text-shadow: 0 0 30px rgba(0,174,239,.4), 0 0 60px rgba(0,174,239,.2); }
.glow-gold { text-shadow: 0 0 30px rgba(255,184,0,.5), 0 0 60px rgba(255,184,0,.25); }

/* ── Card Icon Bounce ── */
@keyframes iconBounce {
  0%,100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-8px) scale(1.1); }
  60% { transform: translateY(-4px) scale(1.05); }
}
.service-card:hover .service-icon { animation: iconBounce .5s ease; }

/* ── Spin ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 8s linear infinite; }
.spin-slow { animation: spin 20s linear infinite; }

/* ── Gradient Shift ── */
@keyframes gradShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.grad-animate {
  background-size: 200% 200%;
  animation: gradShift 6s ease infinite;
}

/* ── Number Counter ── */
.counter-number {
  font-family: var(--font-accent);
  font-weight: 700;
  display: inline-block;
}

/* ── Underline Draw ── */
.underline-draw {
  position: relative;
  display: inline-block;
}
.underline-draw::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  height: 3px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  border-radius: 99px;
}
.is-visible .underline-draw::after { transform: scaleX(1); }

/* ── Image Reveal ── */
.img-reveal {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.img-reveal img {
  transform: scale(1.08);
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.img-reveal.is-visible img { transform: scale(1); }

/* ── Orbit Dot (hero decoration) ── */
@keyframes orbit {
  from { transform: rotate(0deg) translateX(80px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}
.orbit-dot {
  width: 10px; height: 10px;
  background: var(--gold);
  border-radius: 50%;
  position: absolute;
  animation: orbit 6s linear infinite;
}

/* ── Section Background Patterns ── */
.bg-dots {
  background-image: radial-gradient(circle, rgba(0,102,204,.08) 1px, transparent 1px);
  background-size: 28px 28px;
}
.bg-grid {
  background-image:
    linear-gradient(rgba(0,102,204,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,102,204,.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Marquee ── */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-wrapper { overflow: hidden; }