/*
 * Background star/heart decorations: host span holds layout + JS parallax transform;
 * opacity float stays on the inner <img> (Chrome drops transform when it shares the <img> with opacity animation).
 * Loaded after app.css. Hosts are created by wrapDecoParallaxHosts() in main.js.
 */
@media (prefers-reduced-motion: no-preference) {
  .lassy-deco-host.zine-body__deco,
  .lassy-deco-host.paste-strip__deco,
  .lassy-deco-host.reach-zine__deco,
  .lassy-deco-host.zine-foot__deco,
  .lassy-deco-host.spite-spotlight__deco {
    animation: none;
    transform: none;
  }

  .lassy-deco-host > img {
    width: 100%;
    height: auto;
    display: block;
    animation: zine-deco-float-a 18s ease-in-out infinite;
  }
}

/* Hosts are excluded from app.css mobile `animation: none` so parallax can run; keep the same dimmed opacity. */
@media (max-width: 768px) {
  .lassy-deco-host.zine-body__deco,
  .lassy-deco-host.paste-strip__deco,
  .lassy-deco-host.ransom-block__deco,
  .lassy-deco-host.reach-zine__deco,
  .lassy-deco-host.zine-foot__deco,
  .lassy-deco-host.spite-spotlight__deco {
    opacity: 0.24;
  }
}