/*
 * Home page motion, 2026-10-21 (storybee-landing-motion-v2.mjs):
 * - the white (black on touch) dot over the hero wordmark;
 * - the waiting states of the library covers, the feature icons and the critter prints (the
 *   classes are only added by the scripts, never with reduced motion).
 */
@layer landing-motion {
  /* Sky colour of low_poly.webp while the hero image loads. */
  .hero {
    background: #7cc4ee;
  }

  .hero__content {
    position: relative;
  }

  .hero-dot {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    opacity: 0;
    pointer-events: none;
  }

  .hero-dot__ball {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    transform-origin: 50% 100%;
  }

  .feature-grid.is-icons-pending .feature-card > img {
    opacity: 0;
    transform: scale(0.1);
  }

  .critter-collection__photos.is-reveal-pending > li {
    opacity: 0;
  }

  /* Library covers waiting to rise in. Still laid out (no display or
     content-visibility change), so lazy images keep loading and nothing shifts. */
  .bookcase-row.is-books-pending .bookcase-row__books > li {
    opacity: 0;
    transform: translateY(0.9rem) scale(0.92);
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-dot {
      display: none;
    }

    .bookcase-row.is-books-pending .bookcase-row__books > li,
    .feature-grid.is-icons-pending .feature-card > img,
    .critter-collection__photos.is-reveal-pending > li {
      opacity: 1;
      transform: none;
    }
  }

  @media (forced-colors: active), print {
    .hero-dot {
      display: none;
    }
  }
}