.home-hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("/app-voice.png") center / cover no-repeat;
}

.home-sms-visual [role="img"] {
  --journey-duration: 14s;
}

.journey-voice-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 8px;
  color: var(--primary-dark);
  font-size: .57rem;
  font-weight: 800;
}

.journey-voice-entry .home-mic-mark {
  width: 28px;
  height: 28px;
}

.journey-voice-entry .home-mic-mark i {
  width: 8px;
  height: 12px;
}

.journey-voice-scene {
  position: absolute;
  inset: 0;
  z-index: 19;
  opacity: 0;
  pointer-events: none;
  animation: journey-voice-scene var(--journey-duration) ease-in-out infinite;
}

.journey-voice-scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journey-voice-pulse {
  position: absolute;
  top: 57.5%;
  left: 50%;
  width: 12%;
  aspect-ratio: 1;
  border: 2px solid var(--primary);
  border-radius: 50%;
  animation: journey-voice-pulse var(--journey-duration) ease-out infinite;
  transform: translate(-50%, -50%) scale(.8);
}

.journey-voice-transcript {
  position: absolute;
  top: 64.6%;
  inset-inline: 20%;
  color: var(--ink);
  background: var(--white);
  border-radius: 4px;
  opacity: 0;
  padding: 2px;
  font-size: .58rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  animation: journey-voice-transcript var(--journey-duration) ease-in-out infinite;
}

.home-sms-visual [class*="_saveLabel_"] {
  animation: journey-save-label var(--journey-duration) ease-in-out infinite;
}

.home-sms-visual [class*="_savedLabel_"] {
  animation: journey-saved-label var(--journey-duration) ease-in-out infinite;
}

.home-sms-visual [class*="_registeredMessage_"] {
  animation: journey-registered-message var(--journey-duration) ease-in-out infinite;
}

@keyframes journey-voice-scene {
  0%, 50%, 88%, 100% { opacity: 0; }
  54%, 84% { opacity: 1; }
}

@keyframes journey-voice-pulse {
  0%, 57%, 67%, 77%, 85%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
  61%, 71%, 81% { opacity: .9; transform: translate(-50%, -50%) scale(1); }
  65%, 75%, 84% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}

@keyframes journey-voice-transcript {
  0%, 68%, 88%, 100% { opacity: 0; }
  74%, 84% { opacity: 1; }
}

@keyframes journey-save-label {
  0%, 86%, 98%, 100% { opacity: 1; transform: translateY(0); }
  89%, 95% { opacity: 0; transform: translateY(-8px); }
}

@keyframes journey-saved-label {
  0%, 86%, 98%, 100% { opacity: 0; transform: translateY(8px); }
  89%, 95% { opacity: 1; transform: translateY(0); }
}

@keyframes journey-registered-message {
  0%, 88%, 98%, 100% { opacity: 0; height: 0; margin-top: 0; }
  91%, 95% { opacity: 1; height: 18px; margin-top: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-voice-scene {
    animation: none;
    opacity: 1;
  }

  .journey-voice-pulse, .journey-voice-transcript {
    display: none;
  }

  .home-sms-visual [class*="_saveLabel_"],
  .home-sms-visual [class*="_savedLabel_"],
  .home-sms-visual [class*="_registeredMessage_"] {
    animation: none;
  }
}