/* ============================================================
   Qentrixa — Animations
   qx-animations.css
   ============================================================ */

/* ---- Keyframe Definitions --------------------------------- */
@keyframes qx-fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes qx-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes qx-fade-in-left {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes qx-fade-in-right {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes qx-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes qx-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
@keyframes qx-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(30,158,138,0.4); }
  70%  { box-shadow: 0 0 0 16px rgba(30,158,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,158,138,0); }
}
@keyframes qx-shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}
@keyframes qx-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes qx-draw-line {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
@keyframes qx-count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes qx-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Hero Entrance Animations ----------------------------- */
.qx-hero-animate-1 {
  animation: qx-fade-in-up 0.8s ease forwards;
  animation-delay: 0.1s;
  opacity: 0;
}
.qx-hero-animate-2 {
  animation: qx-fade-in-up 0.8s ease forwards;
  animation-delay: 0.25s;
  opacity: 0;
}
.qx-hero-animate-3 {
  animation: qx-fade-in-up 0.8s ease forwards;
  animation-delay: 0.4s;
  opacity: 0;
}
.qx-hero-animate-4 {
  animation: qx-fade-in-up 0.8s ease forwards;
  animation-delay: 0.55s;
  opacity: 0;
}
.qx-hero-animate-5 {
  animation: qx-fade-in-up 0.8s ease forwards;
  animation-delay: 0.7s;
  opacity: 0;
}
.qx-hero-img-animate {
  animation: qx-fade-in-right 1s ease forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

/* ---- Float Elements --------------------------------------- */
.qx-float-slow { animation: qx-float 6s ease-in-out infinite; }
.qx-float-mid  { animation: qx-float 4s ease-in-out infinite; }

/* ---- Pulse Badge ----------------------------------------- */
.qx-pulse-badge { animation: qx-pulse-ring 2.5s ease-in-out infinite; }

/* ---- Gradient Text ---------------------------------------- */
.qx-gradient-text {
  background: linear-gradient(135deg, var(--qx-teal-light), var(--qx-accent-warm), var(--qx-teal));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: qx-gradient-shift 4s ease infinite;
}

/* ---- Scroll Progress Bar --------------------------------- */
#qx-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--qx-teal), var(--qx-teal-light));
  z-index: 9999;
  transition: width 0.1s;
  width: 0%;
}

/* ---- Loading Skeleton ------------------------------------ */
.qx-skeleton {
  background: linear-gradient(90deg, var(--qx-grey-light) 25%, #e8ecf2 50%, var(--qx-grey-light) 75%);
  background-size: 400px 100%;
  animation: qx-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--qx-radius-sm);
}

/* ---- Hover Lift ------------------------------------------ */
.qx-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.qx-hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: var(--qx-shadow-md);
}

/* ---- Animated Underline ---------------------------------- */
.qx-animated-link {
  position: relative;
  display: inline-block;
}
.qx-animated-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--qx-teal);
  transition: width 0.3s ease;
}
.qx-animated-link:hover::after { width: 100%; }

/* ---- Stagger Children ------------------------------------ */
.qx-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.qx-stagger.qx-visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.0s; }
.qx-stagger.qx-visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.qx-stagger.qx-visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.qx-stagger.qx-visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.qx-stagger.qx-visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.qx-stagger.qx-visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }

/* ---- Process Step Entrance -------------------------------- */
.qx-process-reveal {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.qx-process-reveal.qx-visible {
  opacity: 1;
  transform: translateX(0);
}
.qx-process-step:nth-child(even) .qx-process-reveal {
  transform: translateX(20px);
}
.qx-process-step:nth-child(even) .qx-process-reveal.qx-visible {
  transform: translateX(0);
}