/* ============================================
   REACHR HERO ANIMATION
   Split conveyor belt: inputs (left→center), tags (center→right).
   Both on one straight horizontal line.
   GPU-only: transform + opacity.
   ============================================ */

.hero-anim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* ============================================
   CONVEYOR TRACK — single horizontal row
   ============================================ */
.hero-anim__track {
  position: absolute;
  left: 0;
  width: 100%;
  top: var(--track-y, 40%);
  height: 0;
  pointer-events: none;
}

/* ============================================
   INPUT CARDS — Glassmorphism pills
   ============================================ */
.hero-anim__input {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 0.82rem;
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.045), 0 1px 3px rgba(0, 0, 0, 0.025);
  font-size: 0.73rem;
  font-weight: 500;
  color: #4b5563;
  white-space: nowrap;
  will-change: transform, opacity;
  transform: translate3d(0, -50%, 0);
  opacity: 0;
}

.hero-anim__input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 0.45rem;
  flex-shrink: 0;
  font-size: 0.8rem;
}

.hero-anim__input-icon--violet {
  background: rgba(128, 0, 128, 0.12);
  color: #800080;
}
.hero-anim__input-icon--teal {
  background: rgba(67, 179, 174, 0.14);
  color: #2A7A76;
}
.hero-anim__input-icon--mixed {
  background: linear-gradient(135deg, rgba(128, 0, 128, 0.09), rgba(67, 179, 174, 0.09));
  color: #6b21a8;
}

/* ============================================
   CENTER GLOW — Persistent matching engine
   ============================================ */
.hero-anim__center-glow {
  position: absolute;
  left: var(--cx, 50%);
  top: 0;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(67, 179, 174, 0.06) 34%,
    rgba(128, 0, 128, 0.02) 56%,
    transparent 72%
  );
  filter: blur(28px);
  opacity: 0.3;
  animation: glowBreath 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes glowBreath {
  0%, 100% { opacity: 0.25; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.38; transform: translate(-50%, -50%) scale(1.05); }
}

.hero-anim__center-core {
  position: absolute;
  left: var(--cx, 50%);
  top: 0;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(67, 179, 174, 0.08) 60%,
    transparent 100%
  );
  filter: blur(8px);
  opacity: 0.3;
  animation: coreBreath 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes coreBreath {
  0%, 100% { opacity: 0.22; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.35; transform: translate(-50%, -50%) scale(1.1); }
}

.hero-anim__center-ring {
  position: absolute;
  left: var(--cx, 50%);
  top: 0;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(67, 179, 174, 0.1);
  opacity: 0.15;
  animation: ringBreath 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes ringBreath {
  0%, 100% { opacity: 0.12; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.22; transform: translate(-50%, -50%) scale(1.08); }
}

/* ============================================
   BURST — Subtle flash when item crosses center
   ============================================ */
.hero-anim__burst {
  position: absolute;
  top: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(67, 179, 174, 0.1) 55%,
    transparent 100%
  );
  filter: blur(5px);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  animation: softBurst 1.4s ease-out forwards;
}
@keyframes softBurst {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.6); }
  22%  { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.6); }
}

/* ============================================
   OUTPUT TAGS — Same line as inputs, center→right
   ============================================ */
.hero-anim__tag {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.36rem 0.75rem;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  will-change: transform, opacity;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: translate3d(0, -50%, 0);
  transform-origin: center center;
}

.hero-anim__tag--teal {
  background: rgba(67, 179, 174, 0.12);
  color: #1f6b67;
  border: 1px solid rgba(67, 179, 174, 0.18);
}
.hero-anim__tag--violet {
  background: rgba(128, 0, 128, 0.1);
  color: #6b006b;
  border: 1px solid rgba(128, 0, 128, 0.15);
}
.hero-anim__tag--white {
  background: rgba(255, 255, 255, 0.76);
  color: #374151;
  border: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero-anim__tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hero-anim__tag-dot--teal   { background: #43B3AE; }
.hero-anim__tag-dot--violet { background: #800080; }

/* ============================================
   RESPONSIVE — Tablet
   ============================================ */
@media (max-width: 1024px) {
  .hero-anim__input {
    font-size: 0.66rem;
    padding: 0.38rem 0.65rem;
  }
  .hero-anim__input-icon { width: 1.4rem; height: 1.4rem; font-size: 0.7rem; }
  .hero-anim__tag { font-size: 0.62rem; padding: 0.3rem 0.62rem; }
  .hero-anim__center-glow { width: 120px; height: 120px; opacity: 0.2; }
  .hero-anim__center-core { width: 28px; height: 28px; opacity: 0.2; }
  .hero-anim__center-ring { width: 44px; height: 44px; opacity: 0.1; }
}

/* ============================================
   RESPONSIVE — Mobile
   ============================================ */
@media (max-width: 640px) {
  .hero-anim__input {
    font-size: 0.56rem;
    padding: 0.24rem 0.48rem;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .hero-anim__input-icon { width: 1.1rem; height: 1.1rem; font-size: 0.58rem; }
  .hero-anim__tag {
    font-size: 0.54rem; padding: 0.22rem 0.48rem;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .hero-anim__center-glow { width: 70px; height: 70px; opacity: 0.15; }
  .hero-anim__center-core { width: 18px; height: 18px; opacity: 0.15; }
  .hero-anim__center-ring { width: 36px; height: 36px; opacity: 0.16; }
  .hero-anim__burst { width: 40px; height: 40px; }
}

/* ============================================
   ACCESSIBILITY: Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-anim__input,
  .hero-anim__tag,
  .hero-anim__burst {
    animation: none !important;
    transition: none !important;
  }
  .hero-anim__center-glow,
  .hero-anim__center-core,
  .hero-anim__center-ring {
    animation: none !important;
  }
}