/* ============================================
   Homepage — page styles on top of shared/lx/lx.css
   ============================================ */

/* Methods sit on the stone-100 tint, so the sideways-scroll fade matches it. */
.home-methods {
  --lx-tabs-bg: rgb(245 245 244);
}

/* Deep links (/#video-responses) scroll the tab row clear of the fixed
   64px header. */
.home-methods .lx-tabs-wrap {
  scroll-margin-top: 96px;
}

/* Short lines in the expert card and story titles read better balanced. */
.expert-deck dd,
.expert-slide .text-sm,
.story-card-wrapper p {
  text-wrap: balance;
}

/* ---- Expert data for AI: profile card, six people cycle ---- */
.expert-rotator {
  display: grid;
}
.expert-rotator .expert-slide {
  grid-area: 1 / 1;
  opacity: 0;
  animation: expert-cycle 27s infinite;
}
.expert-rotator .expert-slide-1 {
  animation-delay: 0s;
}
.expert-rotator .expert-slide-2 {
  animation-delay: 4.5s;
}
.expert-rotator .expert-slide-3 {
  animation-delay: 9s;
}
.expert-rotator .expert-slide-4 {
  animation-delay: 13.5s;
}
.expert-rotator .expert-slide-5 {
  animation-delay: 18s;
}
.expert-rotator .expert-slide-6 {
  animation-delay: 22.5s;
}

/* Each profile hands over to the next on the 4.5s mark with short fades,
   so the card is never left empty between people. */
@keyframes expert-cycle {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  1.2%,
  15.4% {
    opacity: 1;
    transform: translateY(0);
  }
  16.67% {
    opacity: 0;
    transform: translateY(-6px);
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .expert-rotator .expert-slide {
    animation: none;
    opacity: 0;
  }
  .expert-rotator .expert-slide-1 {
    opacity: 1;
  }
}