/* ===== WEBSITE ANIMATIONS ===== */

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── HERO TYPING EFFECT ── */
.typing-text {
  display: inline-block;
  border-right: 3px solid var(--teal);
  animation: blink 0.8s step-end infinite;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
}
.typing-text.animate {
  animation: typing 1.5s steps(20, end) forwards, blink 0.8s step-end infinite;
}
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blink {
  50% { border-color: transparent; }
}
/* Remove cursor after typing completes */
.typing-done { border-right-color: transparent; animation: none; }

/* ── COUNT-UP NUMBERS ── */
.count-up { display: inline-block; }

/* ── STAGGERED ENTRANCE ── */
.stagger-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.stagger-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── EMPLOYEE CARD HOVER ICON BOUNCE ── */
.employee-card:hover .employee-icon {
  animation: iconBounce 0.4s ease;
}
@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
  60% { transform: translateY(-3px); }
}

/* ── PIPELINE FLOW SEQUENTIAL ── */
.flow-node {
  opacity: 0;
  transform: translateY(16px);
}
.flow-node.animate {
  animation: nodeAppear 0.5s ease-out forwards;
}
@keyframes nodeAppear {
  to { opacity: 1; transform: translateY(0); }
}
/* Arrow drawing effect */
.flow-node::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease-out;
}
.flow-node.animate::after {
  transform: scaleX(1);
}

/* ── PATIENT JOURNEY SEQUENTIAL ── */
.journey-step, .journey-arrow {
  opacity: 0;
  transform: translateX(-10px);
}
.journey-step.animate, .journey-arrow.animate {
  animation: journeySlide 0.4s ease-out forwards;
}
@keyframes journeySlide {
  to { opacity: 1; transform: translateX(0); }
}

/* ── PRICING CARD ENTRANCE ── */
.price-card {
  opacity: 0;
  transform: translateY(24px);
}
.price-card.animate {
  animation: cardRise 0.6s ease-out forwards;
}
@keyframes cardRise {
  to { opacity: 1; transform: translateY(0); }
}

/* ── PRICING "MOST POPULAR" PULSE ── */
.price-card.featured::before {
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 99, 141, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(30, 99, 141, 0); }
}

/* ── CONSOLE PREVIEW STATUS DOT PULSE ── */
.console-status-dot {
  animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(5, 150, 105, 0); }
}

/* ── CONSOLE PREVIEW ACTIVITY SLIDE-IN ── */
.console-activity-item {
  opacity: 0;
  transform: translateX(-12px);
}
.console-activity-item.animate {
  animation: actSlide 0.4s ease-out forwards;
}
@keyframes actSlide {
  to { opacity: 1; transform: translateX(0); }
}

/* ── TRUST BAR SLIDE IN ── */
.trust-item {
  opacity: 0;
  transform: translateY(10px);
}
.trust-item.animate {
  animation: trustIn 0.4s ease-out forwards;
}
@keyframes trustIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── TEAM HUB PARTICLE FLOW ── */
.hub-connector span {
  position: relative;
  overflow: hidden;
}
.hub-connector span::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0;
  animation: particleFlow 2s linear infinite;
}
@keyframes particleFlow {
  0% { left: 0; opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { left: 100%; opacity: 0; }
}

/* ── HUB CENTER GLOW ── */
.hub-center-node {
  animation: hubGlow 2.5s ease-in-out infinite alternate;
}
@keyframes hubGlow {
  from { box-shadow: 0 8px 24px rgba(30, 99, 141, 0.15); }
  to { box-shadow: 0 8px 32px rgba(30, 99, 141, 0.35); }
}

/* ── PHONE MOCKUP CHAT MESSAGES ── */
.phone-msg {
  opacity: 0;
  transform: translateY(8px);
}
.phone-msg.animate {
  animation: msgAppear 0.4s ease-out forwards;
}
@keyframes msgAppear {
  to { opacity: 1; transform: translateY(0); }
}

/* ── SECTION LABEL SLIDE IN ── */
.section-label {
  opacity: 0;
  transform: translateX(-12px);
}
.section-label.animate {
  animation: labelSlide 0.5s ease-out forwards;
}
@keyframes labelSlide {
  to { opacity: 1; transform: translateX(0); }
}

/* ── HANDOFF FLOW ANIMATION ── */
.handoff-box {
  opacity: 0;
  transform: scale(0.9);
}
.handoff-box.animate {
  animation: handoffPop 0.3s ease-out forwards;
}
.handoff-arrow {
  opacity: 0;
}
.handoff-arrow.animate {
  animation: arrowFade 0.3s ease-out forwards;
}
@keyframes handoffPop {
  to { opacity: 1; transform: scale(1); }
}
@keyframes arrowFade {
  to { opacity: 1; }
}

/* ── VERTICAL CARDS STAGGER ── */
.vertical-card {
  opacity: 0;
  transform: translateY(16px);
}
.vertical-card.animate {
  animation: cardRise 0.5s ease-out forwards;
}

/* ── FLOATING PLUS ONE ── */
.float-plus {
  position: absolute;
  top: -10px; right: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--success);
  pointer-events: none;
  animation: floatUp 1.2s ease-out forwards;
}
@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-28px); }
}

/* ── LIVE TICKER (for console preview on website) ── */
.site-ticker {
  overflow: hidden;
  white-space: nowrap;
  background: var(--off-white);
  border-top: 1px solid var(--border);
  padding: 6px 0;
  font-size: 11px;
}
.site-ticker-inner {
  display: inline-block;
  animation: tickerScroll 40s linear infinite;
}
@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.site-ticker-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #DC2626;
  margin-right: 4px;
  animation: statusPulse 1.5s ease-in-out infinite;
}