/* Landing page motion: hero entrance, the self-playing hero conversation,
   and gentle accents. All of it is switched off under reduced motion. */

@keyframes landing-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes landing-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

@keyframes landing-ping {
  0%       { transform: scale(1); opacity: 0.7; }
  80%, 100% { transform: scale(2.4); opacity: 0; }
}

.landing-rise {
  animation: landing-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--rise-delay, 0ms);
}

.landing-float { animation: landing-float 9s ease-in-out infinite; }

.landing-ping { position: relative; }
.landing-ping::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: currentColor;
  animation: landing-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.convo-stage { transition: opacity 0.45s ease; }
.convo-stage.convo-fade { opacity: 0; }

.convo-stage [data-part] {
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.convo-stage [data-part].convo-hidden {
  opacity: 0;
  transform: translateY(10px);
}

.convo-stage [data-part="chip"].convo-hidden { transform: scale(0.85); }
.convo-stage [data-part="match"].convo-hidden { transform: scaleY(0); transform-origin: top; }

/* On phones the hero text is the Largest Contentful Paint, and a fade from
   opacity 0 holds LCP back until the animation ends. Desktop keeps it. */
@media (max-width: 639px) {
  .landing-rise { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-rise, .landing-float, .landing-ping::after { animation: none; }
  [data-animate] { opacity: 1; transform: none; transition: none; }
}