/* ============================================
   App-like feel: hide-on-scroll header and
   cross-document view-transition morph.
   Loaded after theme.css.
   ============================================ */

/* Hide-on-scroll mobile header. body.kj-header-hidden is set by app-feel.js. */
@media not all and (min-width: 73.75rem) {
  @media (prefers-reduced-motion: no-preference) {
    .kj-site > header {
      transition: transform 0.22s var(--ease-out);
    }
  }

  /* Slide past the breaking-news bar the header is pinned under. */
  body.kj-header-hidden:not(.kj-menu-open) .kj-site > header {
    transform: translateY(calc(-100% - var(--kj-breaking-inset, 0px)));
  }

  /* A transform would become the containing block of the fixed drawer. */
  body.kj-menu-open .kj-site > header {
    transform: none;
    transition: none;
  }
}

/* Tapped card image grows into the article hero (names are set by app-feel.js). */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(kj-hero-img) {
    animation-duration: 0.3s;
    animation-timing-function: var(--ease-out);
    overflow: clip;
  }

  ::view-transition-old(kj-hero-img),
  ::view-transition-new(kj-hero-img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  ::view-transition-group(kj-header) {
    animation-duration: 0s;
  }
}