/*
 * Mobile homepage resilience.
 *
 * Framer Motion server-renders entrance animations with inline opacity/transform
 * values. If hydration is delayed or interrupted in an Android/Google in-app
 * browser, those elements can remain invisible even though the HTML loaded.
 * Keep the homepage fully readable on small screens by disabling only the
 * entrance-motion inline state inside homepage content sections. Desktop keeps
 * the existing animations unchanged.
 */
@media (max-width: 767px) {
  body:has(#books) {
    overflow-x: hidden;
  }

  body:has(#books) header.sticky ~ section [style*="opacity: 0"],
  body:has(#books) header.sticky ~ section [style*="opacity:0"] {
    opacity: 1 !important;
  }

  body:has(#books) header.sticky ~ section [style*="transform"] {
    transform: none !important;
  }

  /* Keep expensive decorative animation from becoming a mobile rendering
     dependency; the content remains visually complete without it. */
  body:has(#books) header.sticky ~ section .brand-shimmer::after {
    animation: none !important;
    opacity: 0 !important;
  }
}