/* Shuffle — CSS half of the Nova Spread motion library (load after nova-spread.css).
   Ambient loops (Flicker, Twinkle) and the instant fallback used under reduced motion. */
.ns-flicker { transform-origin: 50% 100%; animation: ns-flicker var(--dur-flicker) var(--ease-breathe) infinite; }
@keyframes ns-flicker {
  0%, 100% { transform: scale(1, 1) rotate(-1deg); opacity: .95; }
  30% { transform: scale(.94, 1.06) rotate(1.5deg); }
  55% { transform: scale(1.03, .96) rotate(-.5deg); opacity: .85; }
  80% { transform: scale(.97, 1.04) rotate(1deg); }
}
.ns-twinkle { animation: ns-twinkle 5500ms var(--ease-breathe) infinite; }
@keyframes ns-twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Story scenes: a tall .ns-scene[data-scene="pin"] holds a sticky .ns-stage; scroll drives --p (0..1).
   .is-static (reduced motion) unpins the stage and shows the final layout. */
.ns-scene { position: relative; }
.ns-scene[data-scene="pin"] > .ns-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; }
.ns-scene.is-static { height: auto !important; }
.ns-scene.is-static > .ns-stage { position: relative; height: auto; min-height: 0; overflow: visible; }

/* Reveal under reduced motion: the card shows its face with no turn */
.ns-tcard.is-instant, .ns-tcard.is-instant .ns-tcard__inner { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .ns-flicker, .ns-twinkle { animation: none; }
}
/* Same fallback, switched on by a page (e.g. the playground's "Reduced motion" preview) */
.ns-reduced .ns-flicker, .ns-reduced .ns-twinkle { animation: none; }
.ns-reduced .ns-tcard, .ns-reduced .ns-tcard__inner, .ns-reduced .ns-btn { transition: none; }
.ns-reduced .ns-tcard.is-open, .ns-reduced .ns-tcard:hover:not(.is-open) { transform: none; }
.ns-reduced .ns-btn:hover::after, .ns-reduced .ns-tcard.is-open .ns-tcard__front::after { animation: none; }