/* Crossfading photo slides, shared by the capability cards and the page hero.
   The owning figure provides the fixed-ratio box; slides stack inside it and
   cross-fade on opacity. The Stimulus controller only moves pk-slide--active,
   so without JavaScript — and under prefers-reduced-motion, where base.css
   drops the transition — the first slide is the only visible one. */
@layer components {
  .pk-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .pk-slide--active {
    opacity: 1;
  }

  /* The <picture> wrapper picture_tag_for emits is taken out of the box so the
     <img> is sized by the slide itself. */
  .pk-slide picture {
    display: contents;
  }

  .pk-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}