/* ===========================================================================
   site-v3-chapteh.css - the bouncing chapteh scroll mascot.

   Paired with site-v3-chapteh.js. Kept out of site-v3.css so a retrofitted
   legacy page can carry the mascot without pulling in the page primitives.
   =========================================================================== */

/* Driven entirely by custom properties set from one requestAnimationFrame in
   site-v3-chapteh.js, so the scroll handler never touches layout. */
.sa-chapteh {
  position: fixed;
  z-index: 15;
  left: 0;
  top: 0;
  width: var(--tile-size, 72px);
  height: var(--tile-size, 72px);
  pointer-events: none;
  opacity: var(--tile-opacity, 0);
  transform: translate(var(--tile-x, 0), var(--tile-y, 0))
             rotate(var(--tile-rotate, 0deg))
             scale(var(--tile-scale-x, 1), var(--tile-scale-y, 1));
  will-change: transform;
}

.sa-chapteh img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (max-width: 620px) { .sa-chapteh { --tile-size: 46px; } }
@media (prefers-reduced-motion: reduce) { .sa-chapteh { display: none; } }