/* ============================================================
   INTELTEK AFRICA — Animations (Light Theme Compatible)
   ============================================================ */

/* ===== Scroll Reveal ===== */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal       { transform: translateY(36px); }
.reveal-left  { transform: translateX(-48px); }
.reveal-right { transform: translateX(48px); }
.reveal-scale { transform: scale(0.92); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible {
  opacity: 1; transform: none;
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ===== Hero Entry ===== */
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn{ from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }

.hero-anim-1 { animation: fadeUp 0.6s ease 0.1s both; }
.hero-anim-2 { animation: fadeUp 0.7s ease 0.25s both; }
.hero-anim-3 { animation: fadeUp 0.7s ease 0.4s both; }
.hero-anim-4 { animation: fadeUp 0.7s ease 0.55s both; }
.hero-anim-5 { animation: fadeUp 0.7s ease 0.7s both; }

/* ===== Counter animation ===== */
@keyframes countPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
.counting { animation: countPulse 0.3s ease; }

/* ===== Pulse Badge ===== */
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,0.35)} 50%{box-shadow:0 0 0 10px rgba(124,58,237,0)} }
.pulse-badge { animation: pulse 2.5s infinite; }

/* ===== Gradient Shift ===== */
@keyframes gradientShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.gradient-animate {
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}

/* ===== Float ===== */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.float-anim { animation: float 4s ease-in-out infinite; }

/* ===== Shimmer (skeleton) ===== */
@keyframes shimmer { from{background-position:-200% 0} to{background-position:200% 0} }
.shimmer {
  background: linear-gradient(90deg, var(--bg-surface) 25%, var(--border) 50%, var(--bg-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ===== Hover Icon ===== */
.icon-hover { transition: transform var(--tr-normal); display:inline-block; }
.icon-hover:hover { transform: rotate(15deg) scale(1.15); }

/* ===== Flagship card overlay on hover ===== */
.flagship-card .flagship-card__banner::after {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(26,26,46,0.5) 0%, transparent 60%);
}

/* ===== Particle Canvas ===== */
#particles-canvas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.35;
}

/* ===== Slide-in animations for slide content ===== */
.hero-slide.active .hero-eyebrow { animation: fadeUp 0.5s ease 0.1s both; }
.hero-slide.active h1            { animation: fadeUp 0.6s ease 0.2s both; }
.hero-slide.active p             { animation: fadeUp 0.6s ease 0.35s both; }
.hero-slide.active .hero-actions { animation: fadeUp 0.6s ease 0.5s both; }