/**
 * Axencia.co — Hover Animations Fix
 * All card gradient bars: top-aligned, transform-origin left top (0 0)
 * Consistent behavior across expertise, plan, ci, dev, globe, cs cards
 */

/* ===== EXPERTISE CARD — top bar from left ===== */
.expertise-card::before {
  transform-origin: 0 0 !important;
  top: 0 !important;
  left: 0 !important;
  border-radius: 20px 20px 0 0 !important;
}

/* ===== PLAN CARD — top bar, scaleX from left ===== */
.plan-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #6366f1);
  background-size: 200% 100%;
  border-radius: 20px 20px 0 0;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
  box-sizing: border-box;
}

.plan-card:hover::before {
  transform: scaleX(1);
  animation: planBarFlow 3s ease-in-out infinite;
}

@keyframes planBarFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== CI CARD (Customers) — top bar from left ===== */
.ci-card::before {
  transform-origin: 0 0 !important;
  top: 0 !important;
  left: 0 !important;
  border-radius: 20px 20px 0 0 !important;
}

/* ===== DEV CARD (Services) — top bar from left ===== */
.dev-card::before {
  transform-origin: 0 0 !important;
  top: 0 !important;
  left: 0 !important;
  height: 4px !important;
  border-radius: 20px 20px 0 0 !important;
}

/* ===== GLOBE FEATURE — top bar, use scaleX for consistency ===== */
.globe-feature::before {
  transform: scaleX(0);
  transform-origin: 0 0;
  opacity: 1 !important;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.globe-feature:hover::before {
  transform: scaleX(1);
}

/* ===== CS-WHY & CS-PLATFORM — add top bar ===== */
.cs-why-card::before,
.cs-platform-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #6366f1);
  background-size: 200% 100%;
  border-radius: 20px 20px 0 0;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
  box-sizing: border-box;
}

.cs-why-card:hover::before,
.cs-platform-card:hover::before {
  transform: scaleX(1);
  animation: csBarFlow 3s ease-in-out infinite;
}

@keyframes csBarFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== CI-IT CARD — add top bar ===== */
.ci-it-card {
  position: relative;
  overflow: visible;
}

.ci-it-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  background-size: 200% 100%;
  border-radius: 16px 16px 0 0;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
  box-sizing: border-box;
}

.ci-it-card:hover::before {
  transform: scaleX(1);
  animation: ciItBarFlow 3s ease-in-out infinite;
}

@keyframes ciItBarFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== CI-VISION CARD — add top bar ===== */
.ci-vision-card {
  position: relative;
  overflow: visible;
}

.ci-vision-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #6366f1);
  background-size: 200% 100%;
  border-radius: 20px 20px 0 0;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
  box-sizing: border-box;
}

.ci-vision-card:hover::before {
  transform: scaleX(1);
  animation: ciVisionBarFlow 3s ease-in-out infinite;
}

@keyframes ciVisionBarFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== TESTIMONIAL CARD — add top bar ===== */
.testimonial-card {
  position: relative;
  overflow: visible;
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  background-size: 200% 100%;
  border-radius: 20px 20px 0 0;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
  box-sizing: border-box;
}

.testimonial-card:hover::before {
  transform: scaleX(1);
  animation: testimonialBarFlow 3s ease-in-out infinite;
}

@keyframes testimonialBarFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== PORTFOLIO CATEGORY — top bar ===== */
.portfolio-category {
  position: relative;
  overflow: visible;
}

.portfolio-category::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  background-size: 200% 100%;
  border-radius: 20px 20px 0 0;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
  box-sizing: border-box;
}

.portfolio-category:hover::before {
  transform: scaleX(1);
  animation: portfolioBarFlow 3s ease-in-out infinite;
}

@keyframes portfolioBarFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== CI-METRIC — add top bar ===== */
.ci-metric {
  position: relative;
  overflow: visible;
}

.ci-metric::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  background-size: 200% 100%;
  border-radius: 20px 20px 0 0;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
  box-sizing: border-box;
}

.ci-metric:hover::before {
  transform: scaleX(1);
  animation: ciMetricBarFlow 3s ease-in-out infinite;
}

@keyframes ciMetricBarFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}