/* =====================================================
   COGNEXRA ANIMATIONS CSS — SAFE REVEAL & HOVER EFFECTS
   All elements are 100% VISIBLE BY DEFAULT to guarantee
   instant page paint with zero layout shift or hidden content.
   ===================================================== */

/* ── Keyframes ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

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

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(2,132,199,0.3); }
  50%       { box-shadow: 0 0 45px rgba(34,211,238,0.6); }
}

/* ── Safe Reveal Styles (Always 100% visible) ── */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.stagger-children .stagger-item,
.process-step,
.intro-card,
.solution-card,
.industry-card,
.case-card,
.tech-cat-card,
.insight-card {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Counter Animations ── */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.3s ease;
}

/* ── Hover Effects ── */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.hover-glow:hover {
  box-shadow: 0 0 35px rgba(2,132,199,0.3);
}

.hover-scale {
  transition: transform 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.02);
}

/* ═══════════════════════════════════════
   HOW WE WORK — CONNECTED TIMELINE
   ═══════════════════════════════════════ */
.how-we-work-section {
  background: #ffffff;
  padding: 90px 0;
}
.hww-timeline-wrapper {
  position: relative;
  margin-top: 30px;
}
.hww-line-bg {
  position: absolute;
  top: 24px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: linear-gradient(90deg, #0284c7, #22d3ee);
  border-radius: 3px;
  z-index: 1;
}
.hww-steps-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  text-align: center;
}
.hww-step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
}
.hww-step-card:hover {
  transform: translateY(-4px);
}
.hww-badge-wrap { margin-bottom: 12px; }
.hww-step-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #22d3ee);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px #fff, 0 4px 16px rgba(2, 132, 199, 0.35);
}
.hww-phase-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.1);
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: 8px;
  display: inline-block;
}
.hww-icon-wrap {
  font-size: 22px;
  color: #07172c;
  margin-bottom: 10px;
}
.hww-step-title {
  font-size: 16px;
  font-weight: 700;
  color: #07172c;
  margin-bottom: 6px;
}
.hww-step-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
  max-width: 180px;
}
@media (max-width: 900px) {
  .hww-line-bg { display: none; }
  .hww-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 500px) {
  .hww-steps-grid { grid-template-columns: 1fr; gap: 24px; }
}