/* Shared motion primitives for the classic themes (see shared/js/motion.js). */

html[data-motion-ready] .mc-rv {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.985);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.85s cubic-bezier(0.16, 0.84, 0.24, 1);
  transition-delay: calc(var(--rv-i, 0) * 70ms);
  will-change: opacity, transform;
}
html[data-motion-ready] .mc-rv.mc-in {
  opacity: 1;
  transform: none;
}
html[data-motion='off'] .mc-rv,
html[data-motion='reduced'] .mc-rv {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion='live']):not([data-motion='standard']) .mc-rv { opacity: 1 !important; transform: none !important; }
}
@media print {
  .mc-rv { opacity: 1 !important; transform: none !important; }
}

/* Card size tokens — each theme maps these onto its own grids and paddings. */
html { --card-scale: 1; --card-min: 300px; --shot-min: 220px; }
html[data-card='s'] { --card-scale: 0.86; --card-min: 230px; --shot-min: 160px; }
html[data-card='l'] { --card-scale: 1.14; --card-min: 400px; --shot-min: 320px; }

/* Phones: the floating music player and appearance button collapse to compact icons so they
   don't cover content; the page gets room at the bottom for them. */
@media (max-width: 600px) {
  body.mc-app { padding-bottom: 76px; }
  .mc-player { left: 12px !important; bottom: 12px !important; }
  .mc-player__mini-meta { display: none !important; }
  .mc-player__mini { padding: 5px !important; gap: 4px !important; }
  .mc-appearance { right: 12px !important; bottom: 12px !important; }
  .mc-appearance__label, .mc-appearance__theme { display: none !important; }
  .mc-appearance__trigger { padding: 11px !important; }
}