/*
 * Sticky header compatibility for iOS/iPadOS WebKit.
 *
 * Routed pages are flex children inside the app's own momentum-scrolling
 * viewport. WebKit can treat a sticky descendant as ordinary flow content
 * when an ancestor is still carrying a transform from an entrance animation.
 * The explicit prefixed position and the Safari-only fade remove that
 * containing block while keeping the rest of the app's motion intact.
 */

.appbar,
.explore-brandbar,
.explore-top,
.cat-head,
.search-head,
.post-progress,
.chat-context {
  position: -webkit-sticky;
  position: sticky;
  flex: none;
  align-self: stretch;
}

@supports (-webkit-touch-callout: none) {
  .page {
    animation-name: page-in-webkit;
  }

  .appbar,
  .explore-brandbar,
  .explore-top,
  .cat-head,
  .search-head,
  .post-progress,
  .chat-context {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

@keyframes page-in-webkit {
  from { opacity: 0; }
  to { opacity: 1; }
}