/* ============================================================
   Aethox AI & IT Solutions - Animations & Micro-interactions
   ============================================================ */

/* ── Typing Effect ── */
.typing-cursor::after {
  content: '|';
  animation: blink .75s step-end infinite;
  color: var(--accent-cyan);
  margin-left: 2px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Float Animation ── */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.float-anim { animation: floatY 4s ease-in-out infinite; }
.float-anim-delayed { animation: floatY 4s ease-in-out 1s infinite; }
.float-anim-slow { animation: floatY 6s ease-in-out infinite; }

/* ── Glow Pulse ── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(26,109,255,.3); }
  50% { box-shadow: 0 0 40px rgba(26,109,255,.6); }
}

.glow-pulse { animation: glowPulse 3s ease infinite; }

/* ── Spin Slow ── */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin-slow { animation: spinSlow 20s linear infinite; }

/* ── Orbit Animation ── */
@keyframes orbit {
  from { transform: rotate(0deg) translateX(80px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}

/* ── Gradient Shift ── */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-animate {
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}

/* ── Shimmer ── */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.shimmer-btn { overflow: hidden; }

.shimmer-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: translateX(-100%);
}

.shimmer-btn:hover::before { animation: shimmer .6s ease; }

/* ── Ripple Effect ── */
.btn-ripple { position: relative; overflow: hidden; }

.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: rippleOut .6s linear;
  pointer-events: none;
}

@keyframes rippleOut {
  to { transform: scale(4); opacity: 0; }
}

/* ── Counter Animation ── */
.counter-animated { display: inline-block; }

/* ── Particle Dots (Hero) ── */
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(26,109,255,.5);
  animation: particleDrift linear infinite;
  pointer-events: none;
}

@keyframes particleDrift {
  0% { transform: translateY(0) translateX(0); opacity: .7; }
  50% { opacity: .3; }
  100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
}

/* ── Fade-in Variants ── */
[data-aos="fade-up-custom"] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .6s ease, transform .6s ease;
}

[data-aos="fade-up-custom"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hover Scale ── */
.hover-scale { transition: transform var(--transition-base); }
.hover-scale:hover { transform: scale(1.03); }

/* ── Hover Lift ── */
.hover-lift { transition: transform var(--transition-base), box-shadow var(--transition-base); }
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ── Stagger children ── */
.stagger-children > *:nth-child(1) { animation-delay: .05s; }
.stagger-children > *:nth-child(2) { animation-delay: .1s; }
.stagger-children > *:nth-child(3) { animation-delay: .15s; }
.stagger-children > *:nth-child(4) { animation-delay: .2s; }
.stagger-children > *:nth-child(5) { animation-delay: .25s; }
.stagger-children > *:nth-child(6) { animation-delay: .3s; }

/* ── Scroll Reveal (AOS custom) ── */
[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }

/* ── Hero SVG Network ── */
.hero-network {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  max-width: 680px;
  opacity: .7;
}

/* ── Number highlight ── */
.highlight-number {
  font-family: var(--font-display);
  font-weight: 800;
  background: linear-gradient(135deg, var(--blue-400), var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Gradient line ── */
.gradient-line {
  height: 3px;
  background: linear-gradient(90deg, var(--blue-400), var(--accent-cyan));
  border: none;
  border-radius: var(--radius-full);
}

/* ── Typing animation for hero ── */
#typed-text {
  color: var(--accent-cyan);
  font-weight: 800;
}

/* ── Dot matrix background ── */
.dot-matrix {
  background-image: radial-gradient(rgba(26,109,255,.2) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}

/* ── Glassy badge ── */
.glass-badge {
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-full);
  padding: 6px 20px;
  font-size: .875rem;
  color: rgba(255,255,255,.8);
}

/* ── Animated border ── */
@keyframes borderRotate {
  from { --border-angle: 0turn; }
  to { --border-angle: 1turn; }
}

/* ── Hover image zoom ── */
.img-zoom-wrap { overflow: hidden; border-radius: inherit; }
.img-zoom-wrap img { transition: transform var(--transition-slow); }
.img-zoom-wrap:hover img { transform: scale(1.07); }

/* ── Tag animate in ── */
.tech-pill-wrap { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Step connector line ── */
.steps-connector {
  position: relative;
}

.steps-connector::after {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(100% / 8);
  right: calc(100% / 8);
  height: 2px;
  background: linear-gradient(90deg, var(--blue-400), var(--accent-cyan));
  z-index: 0;
}