/* ==========================================================================
   Nexora Talent Solutions — Animations
   AOS overrides + hover/lift/glow keyframes. Restrained, not flashy.
   ========================================================================== */

/* ---- AOS global overrides ---- */
[data-aos] {
  transition-duration: 700ms !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-aos="fade-up"] {
  transform: translateY(32px);
}

[data-aos="fade-left"] {
  transform: translateX(32px);
}

[data-aos="fade-right"] {
  transform: translateX(-32px);
}

[data-aos="zoom-in"] {
  transform: scale(0.92);
}

/* ---- Reduced motion respect ---- */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    transition: none !important;
    transform: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---- Hover lift (generic, used by cards not already handling their own) ---- */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(var(--lift-distance));
  box-shadow: var(--shadow-hover);
}

/* ---- Gold glow hover ---- */
.hover-glow:hover {
  box-shadow: var(--shadow-gold-glow);
}

/* ---- Counter pulse-in (subtle scale-in when counter starts) ---- */
@keyframes counterPop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.stat-block.is-counting .stat-number {
  animation: counterPop 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Icon float (very subtle, decorative) ---- */
@keyframes iconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.card-service:hover .card-service__icon,
.industry-tile:hover .industry-tile__icon {
  animation: iconFloat 1.8s ease-in-out infinite;
}

/* ---- Hero decorative shapes: slow drift ---- */
@keyframes shapeDrift {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-16px, 16px);
  }
}

.hero__shape--one {
  animation: shapeDrift 14s ease-in-out infinite;
}

.hero__shape--two {
  animation: shapeDrift 18s ease-in-out infinite reverse;
}

@media (prefers-reduced-motion: reduce) {
  .hero__shape--one,
  .hero__shape--two,
  .card-service:hover .card-service__icon,
  .industry-tile:hover .industry-tile__icon {
    animation: none;
  }
}

/* ---- Hero visual: network graphic drift + node pulse ---- */
@keyframes networkDrift {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-10px, 12px);
  }
}

@keyframes networkDriftSlow {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(8px, -10px);
  }
}

@keyframes networkRingPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.8;
  }
}

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

.hero-network__mesh,
.hero-network__nodes {
  animation: networkDrift 16s ease-in-out infinite;
  transform-origin: center;
}

.hero-network__nodes {
  animation-name: networkDrift, networkNodePulse;
  animation-duration: 16s, 5s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

.hero-network__ring {
  transform-origin: center;
  animation: networkRingPulse 8s ease-in-out infinite;
}

.hero-network__ring--inner {
  animation-duration: 10s;
  animation-direction: reverse;
}

/* Particles drift independently (slower, opposite direction) for a subtle
   parallax layer — they carry no connecting lines so they don't need to
   stay in sync with .hero-network__mesh. */
.hero-network__particles {
  animation: networkDriftSlow 20s ease-in-out infinite;
  transform-origin: center;
}

.hero__visual-glow--gold,
.hero__visual-glow--navy {
  animation: shapeDrift 16s ease-in-out infinite;
}

.hero__visual-glow--navy {
  animation-direction: reverse;
  animation-duration: 20s;
}

.cta-banner__glow--gold {
  animation: shapeDrift 16s ease-in-out infinite;
}

.cta-banner__glow--navy {
  animation: shapeDrift 20s ease-in-out infinite reverse;
}

/* ---- Hero India map: soft "breathing" glow on city nodes only —
   the outline and route lines stay static per the "dots are the primary
   effect, don't over-animate lines" lesson from the earlier network
   version. Each dot's own fill-opacity is set on the element; this
   animates the separate CSS `opacity` property as a multiplier, so one
   keyframe works uniformly regardless of each dot's base opacity. ---- */
@keyframes cityBreathe {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes hqHaloBreathe {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

.hero-india-map__city {
  animation: cityBreathe 14s ease-in-out infinite;
  transform-origin: center;
}

.hero-india-map__hq {
  animation: cityBreathe 11s ease-in-out infinite;
  transform-origin: center;
}

.hero-india-map__hq-halo {
  animation: hqHaloBreathe 11s ease-in-out infinite;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .hero-network__mesh,
  .hero-network__nodes,
  .hero-network__ring,
  .hero-network__ring--inner,
  .hero-network__particles,
  .hero-india-map__city,
  .hero-india-map__hq,
  .hero-india-map__hq-halo,
  .hero__visual-glow--gold,
  .hero__visual-glow--navy,
  .cta-banner__glow--gold,
  .cta-banner__glow--navy {
    animation: none;
  }
}

/* ---- Link underline slide (generic utility) ---- */
.link-underline {
  position: relative;
}

.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-base);
}

.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}