/* ========================================================================
   XORVIAN — Premium Enterprise Animations
   Inspired by: Infosys | Capgemini | Cognizant | Accenture
   ======================================================================== */

/* ------------------------------------------
   HERO VIDEO BG OVERLAY
   ------------------------------------------ */
@keyframes heroMeshMove {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(30px, -20px) rotate(90deg); }
  50% { transform: translate(-20px, 30px) rotate(180deg); }
  75% { transform: translate(20px, 20px) rotate(270deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

.hero-mesh-bg {
  position: absolute;
  inset: -50%;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(124, 58, 237, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.02) 0%, transparent 50%);
  animation: heroMeshMove 60s linear infinite;
  pointer-events: none;
  will-change: transform;
}

/* ------------------------------------------
   FLOATING GEOMETRIC SHAPES
   ------------------------------------------ */
@keyframes floatShape1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(40px, -30px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
}

@keyframes floatShape2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-35px, 25px) rotate(-90deg); }
  66% { transform: translate(25px, -35px) rotate(-180deg); }
}

@keyframes floatShape3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 30px) scale(1.1); }
}

.floating-shape {
  position: absolute;
  pointer-events: none;
  opacity: 0.04;
}

.floating-shape-1 {
  width: 300px;
  height: 300px;
  border: 2px solid var(--blue);
  border-radius: 32% 68% 37% 63% / 51% 42% 58% 49%;
  top: 10%;
  right: 5%;
  animation: floatShape1 20s ease-in-out infinite;
}

.floating-shape-2 {
  width: 200px;
  height: 200px;
  border: 2px solid var(--purple);
  border-radius: 63% 37% 42% 58% / 51% 58% 42% 49%;
  bottom: 15%;
  left: 5%;
  animation: floatShape2 25s ease-in-out infinite;
}

.floating-shape-3 {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(59,130,246,0.06) 0%, transparent 70%);
  border-radius: 50%;
  top: 30%;
  left: 50%;
  animation: floatShape3 15s ease-in-out infinite;
}

/* ------------------------------------------
   GRID OVERLAY PATTERN
   ------------------------------------------ */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* ------------------------------------------
   GLOW LINE ANIMATION
   ------------------------------------------ */
@keyframes glowLine {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.glow-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), var(--purple), transparent);
  animation: glowLine 4s ease-in-out infinite;
  opacity: 0.3;
}

/* ------------------------------------------
   STAT COUNTER ENHANCED
   ------------------------------------------ */
@keyframes countReveal {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

.counter-reveal {
  animation: countReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ------------------------------------------
   CLIENT LOGOS SCROLL
   ------------------------------------------ */
@keyframes scrollLogos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.client-logo-track {
  display: flex;
  gap: 64px;
  animation: scrollLogos 30s linear infinite;
  width: max-content;
}

.client-logo-track:hover {
  animation-play-state: paused;
}

/* ------------------------------------------
   TESTIMONIAL CAROUSEL
   ------------------------------------------ */
@keyframes testimonialFade {
  0% { opacity: 0; transform: translateX(30px); }
  10% { opacity: 1; transform: translateX(0); }
  85% { opacity: 1; transform: translateX(0); }
  95% { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 0; transform: translateX(-30px); }
}

.testimonial-slide {
  animation: testimonialFade 8s ease-in-out infinite;
}

.testimonial-slide:nth-child(2) { animation-delay: 8s; }
.testimonial-slide:nth-child(3) { animation-delay: 16s; }

/* ------------------------------------------
   SHIMMER / SKELETON LOADING
   ------------------------------------------ */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-card) 25%,
    var(--bg-tertiary) 50%,
    var(--bg-card) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ------------------------------------------
   PAGE TRANSITION
   ------------------------------------------ */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-enter {
  animation: pageIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ------------------------------------------
   GRADIENT TEXT ANIMATION
   ------------------------------------------ */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.text-gradient-animated {
  background: linear-gradient(135deg, var(--blue), var(--cyan), var(--purple), var(--blue));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}

/* ------------------------------------------
   PULSE DOT
   ------------------------------------------ */
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
  70% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  animation: pulseDot 2s infinite;
}

/* ------------------------------------------
   MORPHING BLOB
   ------------------------------------------ */
@keyframes morphBlob {
  0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
  50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
  75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
  100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
}

.morph-blob {
  animation: morphBlob 12s ease-in-out infinite;
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(124,58,237,0.08));
}

/* ------------------------------------------
   ENTERPRISE COUNTER STYLE
   ------------------------------------------ */
@keyframes enterCounter {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.enter-counter {
  animation: enterCounter 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ------------------------------------------
   STAGGER REVEAL
   ------------------------------------------ */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-children.reveal > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.reveal > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.reveal > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-children.reveal > *:nth-child(4) { transition-delay: 0.2s; }
.stagger-children.reveal > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-children.reveal > *:nth-child(6) { transition-delay: 0.3s; }
.stagger-children.reveal > *:nth-child(7) { transition-delay: 0.35s; }
.stagger-children.reveal > *:nth-child(8) { transition-delay: 0.4s; }

.stagger-children.reveal > * {
  opacity: 1;
  transform: translateY(0);
}