/* Motion is decorative: no content is hidden by CSS, and no effect changes layout. */
.motion-ready .pcard { animation: none; }
.results__count b { display: inline-block; font-variant-numeric: tabular-nums; }

.motion-page { transform-box: fill-box; transform-origin: 50% 100%; }
.motion-board-face { transform-box: fill-box; transform-origin: center; }
.motion-pens { transform-box: fill-box; transform-origin: 60% 60%; }
.motion-magnet { transform-box: fill-box; transform-origin: center; }

@keyframes motion-page-lift {
  0%, 100% { transform: none; }
  45% { transform: skewX(-11deg) scaleY(1.15) translateY(-2px); }
}
@keyframes motion-board-turn {
  0%, 100% { transform: scaleY(1); }
  42% { transform: scaleY(.08); }
  70% { transform: scaleY(1.04); }
}
@keyframes motion-magnet-snap {
  0% { transform: translate(0, 0); }
  35% { transform: translate(0, -13px) scale(1.08); }
  68% { transform: translate(0, 2px) scale(.92); }
  100% { transform: translate(0, 0); }
}
@keyframes motion-pens-nudge {
  0%, 100% { transform: none; }
  45% { transform: translateY(-6px) rotate(-6deg); }
}
@keyframes motion-cart-nudge {
  0%, 100% { transform: none; }
  40% { transform: translateX(3px) rotate(-8deg); }
  70% { transform: translateX(-1px) rotate(3deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .cat:is(:focus-visible, [aria-pressed="true"]) .motion-page { animation: motion-page-lift .7s var(--ease); }
  .cat:is(:focus-visible, [aria-pressed="true"]) .motion-board-face { animation: motion-board-turn .85s var(--ease); }
  .cat:is(:focus-visible, [aria-pressed="true"]) .motion-magnet { animation: motion-magnet-snap .6s var(--ease) var(--magnet-delay); }
  .cat:is(:focus-visible, [aria-pressed="true"]) .motion-pens { animation: motion-pens-nudge .7s var(--ease); }
  [data-cart]:focus-visible svg { animation: motion-cart-nudge .5s var(--ease); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cat:hover .motion-page { animation: motion-page-lift .7s var(--ease); }
  .cat:hover .motion-board-face { animation: motion-board-turn .85s var(--ease); }
  .cat:hover .motion-magnet { animation: motion-magnet-snap .6s var(--ease) var(--magnet-delay); }
  .cat:hover .motion-pens { animation: motion-pens-nudge .7s var(--ease); }
  [data-cart]:hover svg { animation: motion-cart-nudge .5s var(--ease); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero__room {
    transform: translate(var(--room-x, 0px), var(--room-y, 0px)) scale(1.025);
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__room { transform: none; }
  .motion-page, .motion-board-face, .motion-magnet, .motion-pens,
  [data-cart] svg { animation: none !important; }
}