/* Motion (docs/superpowers/specs/2026-09-27-scroll-motion-design.md; docs/slices/motion-and-category-buttons-2026-10-01.md).
   Nothing here applies until scroll-motion.js has set motion-ready, so reduced motion, no scripts or a script error
   leave the page exactly as it was. Only opacity and transforms are animated. */

/* Rise: content wholly below the fold fades up once, 28px over 0.45s */
html.motion-ready .motion-wait{opacity:0;translate:0 28px}
html.motion-ready .motion-wait.motion-in{opacity:1;translate:0 0;transition:opacity .45s cubic-bezier(.2,.7,.2,1),translate .45s cubic-bezier(.2,.7,.2,1)}
@media print{html.motion-ready .motion-wait{opacity:1!important;translate:none!important}}

/* Drift: a ranges tile below the fold is drawn 8% larger inside its frame, which already clips, so it has room to move */
html.motion-ready [data-range-grid] img.motion-depth[data-card-setting-image]{scale:1.08}

/* The category glide: one outline slides to the chosen button (after SmoothUI's Animated Tabs, MIT) */
html.motion-ready .simple-filters.has-glide{position:relative}
html.motion-ready .category-glide{position:absolute;top:0;left:0;z-index:1;box-sizing:border-box;border:2px solid #332483;border-radius:6px;pointer-events:none;
 transition:transform .32s cubic-bezier(.2,.7,.2,1),width .32s cubic-bezier(.2,.7,.2,1),height .32s cubic-bezier(.2,.7,.2,1),opacity .2s ease}
html.motion-ready body .simple-filters.has-glide button.category-button[aria-pressed=true]{border-color:#DDD9E5;box-shadow:none}