/* Voice-only orb placement for the home-page hero. */
.hero-voice-grid {
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(240px, 1fr);
  align-items: center;
  gap: clamp(32px, 7vw, 110px);
}

.hero-voice-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 340px;
}

/* visible caption — says what the orb is, and its live state during a call */
.hero-voice-cap {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 22ch;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(230, 226, 255, 0.82);
  white-space: pre-line;
}
.hero-voice-cap a {
  color: #b8aeff;
  text-decoration: underline;
}

/* text equivalent of the spoken conversation (hidden until a call starts) */
.hero-voice-log {
  position: relative;
  z-index: 1;
  width: min(340px, 78vw);
  max-height: 168px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 2px;
  text-align: left;
}
.hv-line {
  font-size: 0.82rem;
  line-height: 1.45;
  padding: 8px 11px;
  border-radius: 11px;
  overflow-wrap: anywhere;
}
.hv-line b {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 2px;
}
.hv-line.ai {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e4e1f5;
}
.hv-line.you {
  align-self: flex-end;
  background: linear-gradient(145deg, #7467ef, #7548d7);
  color: #fff;
}

.hero-voice-shell::before,
.hero-voice-shell::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.hero-voice-shell::before {
  width: min(390px, 34vw);
  background: radial-gradient(
    circle,
    rgba(139, 124, 255, 0.24) 0%,
    rgba(109, 92, 255, 0.1) 38%,
    transparent 70%
  );
  filter: blur(14px);
}

.hero-voice-shell::after {
  width: min(430px, 38vw);
  background-image: radial-gradient(
    circle,
    rgba(184, 174, 255, 0.72) 0 1px,
    transparent 1.4px
  );
  background-size: 13px 13px;
  opacity: 0.32;
  -webkit-mask-image: radial-gradient(
    circle,
    transparent 0 28%,
    #000 43%,
    rgba(0, 0, 0, 0.68) 62%,
    transparent 78%
  );
  mask-image: radial-gradient(
    circle,
    transparent 0 28%,
    #000 43%,
    rgba(0, 0, 0, 0.68) 62%,
    transparent 78%
  );
  animation: hero-orb-drift 32s linear infinite;
}

.hero-voice-orb.va-orb {
  width: clamp(210px, 22vw, 280px);
  height: clamp(210px, 22vw, 280px);
  margin: 0;
  z-index: 1;
}

.hero-voice-orb .va-ring {
  opacity: 0;
  border-color: rgba(169, 156, 255, 0.45);
  box-shadow: inset 0 0 24px rgba(109, 92, 255, 0.08);
  animation: hero-orb-breathe 4.8s ease-out infinite;
}

.hero-voice-orb .va-ring:nth-child(2) {
  animation-delay: 1.6s;
}

.hero-voice-orb .va-ring:nth-child(3) {
  animation-delay: 3.2s;
}

.hero-voice-orb .va-core {
  width: clamp(138px, 15vw, 176px);
  height: clamp(138px, 15vw, 176px);
  overflow: hidden;
  background: radial-gradient(
      circle at 34% 24%,
      rgba(255, 255, 255, 0.32),
      transparent 27%
    ),
    linear-gradient(145deg, #7467ef 0%, #7548d7 55%, #49329e 100%);
  border: 1px solid rgba(218, 212, 255, 0.32);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.34),
    inset 0 -18px 34px rgba(35, 20, 92, 0.2),
    0 18px 45px rgba(16, 11, 48, 0.48),
    0 0 72px rgba(109, 92, 255, 0.52),
    0 0 130px rgba(139, 92, 246, 0.2);
  transition: transform 0.2s, background 0.3s, box-shadow 0.3s;
}

.hero-voice-orb .va-core::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: inherit;
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.hero-voice-orb .va-core::after {
  content: "";
  position: absolute;
  inset: 52% 13% 8%;
  border-radius: 50%;
  background: linear-gradient(180deg, transparent, rgba(31, 20, 83, 0.3));
  filter: blur(8px);
  pointer-events: none;
}

.hero-voice-orb:hover .va-core {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -18px 34px rgba(35, 20, 92, 0.18),
    0 20px 50px rgba(16, 11, 48, 0.52),
    0 0 86px rgba(109, 92, 255, 0.62),
    0 0 150px rgba(139, 92, 246, 0.24);
}

.hero-voice-orb .va-mic,
.hero-voice-orb .va-bars {
  position: relative;
  z-index: 1;
}

.hero-voice-orb .va-mic {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 3px 8px rgba(26, 16, 72, 0.42));
}

@keyframes hero-orb-breathe {
  0% {
    transform: scale(0.62);
    opacity: 0.58;
  }
  75%,
  100% {
    transform: scale(1.18);
    opacity: 0;
  }
}

@keyframes hero-orb-drift {
  to {
    transform: rotate(360deg);
  }
}

.hero-voice-orb:focus-visible {
  outline: 2px solid rgba(169, 156, 255, 0.78);
  outline-offset: 8px;
  border-radius: 50%;
}

@media (max-width: 900px) {
  .hero-voice-grid {
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 24px;
  }

  .hero-voice-orb.va-orb {
    width: 190px;
    height: 190px;
  }

  .hero-voice-orb .va-core {
    width: 126px;
    height: 126px;
  }
}

@media (max-width: 680px) {
  .hero-voice-grid {
    grid-template-columns: 1fr;
  }

  .hero-voice-shell {
    min-height: 220px;
    margin-top: 2px;
  }

  .hero-voice-shell::before,
  .hero-voice-shell::after {
    width: 270px;
  }

  .hero-voice-orb.va-orb {
    width: 150px;
    height: 150px;
  }

  .hero-voice-orb .va-core {
    width: 104px;
    height: 104px;
  }

  .hero-voice-orb .va-mic {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-voice-shell::after,
  .hero-voice-orb .va-ring {
    animation: none;
  }

  .hero-voice-orb .va-ring:first-child {
    transform: scale(0.86);
    opacity: 0.35;
  }
}