/* Hero copy carousel on the /g/:slug ad-destination pages: the headline and
 * subhead of every page in the theme, cross-fading in place. Slides are stacked
 * in one grid cell so the hero keeps the height of the tallest one and nothing
 * below it moves as they change.
 *
 * The grid lives on .hero-carousel, which is a wrapper of its own and never
 * the slide element. .hero__copy in hero.css is `display: flex`, Propshaft
 * serves these files in path order, and "hero-carousel.css" sorts before
 * "hero.css" — so putting both classes on one element hands the display
 * property to hero.css and stacks the slides vertically.
 *
 * Literal transition times, not tokens: the gem has no duration token and its
 * own components write the times literally (objects/panel.css, disclosure.css).
 * If durations ever become tokens, these go with them. */

.hero-carousel { display: grid; }

/* The copy block and its dots travel together; the hero's own container gap is
 * too large to separate them. */
.hero-carousel-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

/* The hand-off is a slide, not a cross-fade: the outgoing copy leaves to the
 * left while the incoming copy arrives from the right, both fading. Two
 * headlines at hero size fading through each other in place read as a double
 * exposure rather than as a transition.
 *
 * An inactive slide waits one step to the right (--hero-slide-from). The
 * controller adds .is-leaving to the one being replaced, which flips its offset
 * to the left, so it travels out the way the eye is already moving. */
.hero-carousel__slide {
  --hero-slide-from: var(--spacing-48);
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateX(var(--hero-slide-from));
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-carousel__slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Even line lengths rather than a long first line and one orphaned word: the
 * headline is the only text on the page big enough for the difference to read
 * as a ragged shape. The subhead keeps normal wrapping — balancing a
 * three-line paragraph at measure-740 buys nothing. */
.hero-carousel__slide .headline-xxl {
  text-wrap: balance;
}

.hero-carousel__slide.is-leaving {
  --hero-slide-from: calc(-1 * var(--spacing-48));
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel__slide,
  .hero-carousel__slide.is-active {
    transform: none;
    transition: none;
  }
}

.hero-carousel__dots {
  display: flex;
  gap: var(--spacing-8);
  align-items: center;
}

.hero-carousel__dot {
  width: var(--spacing-8);
  height: var(--spacing-8);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--text-tertiary);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.hero-carousel__dot:hover { opacity: 0.8; }

.hero-carousel__dot.is-active {
  background-color: transparent;
  background-image: var(--brand-gradient);
  opacity: 1;
}