/* mowasay Enhancements: site-wide scroll motion for posts, pages and archives.
   Uses native scroll-driven animations; browsers without them show the content as is. */

/* Registered here because @property is ignored inside shadow roots. The homepage story glow animates it. */
@property --mwe-h { syntax: "<number>"; inherits: true; initial-value: 215; }

@keyframes mwe-zoom-in { from { transform: scale(.86); opacity: .15; } to { transform: none; opacity: 1; } }
@keyframes mwe-rise { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Media blocks grow into place as they scroll in, like the product shots on apple.com. */
    :is(.lc-entry-content, .entry-content) > :is(figure, .wp-block-image, .wp-block-video, .wp-block-embed, .wp-block-cover, .wp-block-gallery) {
      animation: mwe-zoom-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
      transform-origin: 50% 80%;
    }
    :is(.lc-entry-content, .entry-content) > :is(h2, h3, blockquote, .wp-block-quote, .wp-block-pullquote) {
      animation: mwe-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
    /* Post tiles on the blog, categories, tags, archives and search. */
    .lc-tile {
      animation: mwe-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
  }
}