/* Hero: a chat window — user typing, user message, bot typing, bot reply, loop */
.hero-visual .device-glow {
  animation: deviceGlow 4s ease-in-out infinite;
}
.hero-visual .chat-user-typing {
  animation: chatUserTyping 7s ease-in-out infinite;
}
.hero-visual .chat-user-message {
  animation: chatUserMessage 7s ease-in-out infinite;
  transform-origin: center right;
}
.hero-visual .chat-bot-typing {
  animation: chatBotTyping 7s ease-in-out infinite;
}
.hero-visual .chat-bot-message {
  animation: chatBotMessage 7s ease-in-out infinite;
  transform-origin: center left;
}
.hero-visual .typing-dot {
  animation: typingDot 1.1s ease-in-out infinite;
}
.hero-visual .typing-dot:nth-child(2) { animation-delay: 0.15s; }
.hero-visual .typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes deviceGlow {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.5; }
}
@keyframes chatUserTyping {
  0%, 8% { opacity: 0; }
  14%, 24% { opacity: 1; }
  30%, 100% { opacity: 0; }
}
@keyframes chatUserMessage {
  0%, 26% { opacity: 0; transform: translateY(6px); }
  33%, 88% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes chatBotTyping {
  0%, 44% { opacity: 0; }
  50%, 60% { opacity: 1; }
  66%, 100% { opacity: 0; }
}
@keyframes chatBotMessage {
  0%, 62% { opacity: 0; transform: translateY(6px); }
  69%, 88% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* How-it-works step icons: small looping details, play once revealed */
.step-icon .draw-path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.step.is-visible .step-icon .draw-path {
  animation: drawLine 0.6s ease forwards 0.15s;
}
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}
.step-icon .snippet-cursor {
  animation: blinkCursor 1s steps(1, end) infinite;
}
@keyframes blinkCursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.step-icon .knowledge-fill {
  animation: fillUp 3s ease-in-out infinite;
  transform-origin: bottom;
}
@keyframes fillUp {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(0.85); }
}

/* Shared: scroll-reveal for generic blocks (feature cards, split cards) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }