/* premium-motion-system — companion stylesheet.
 * Only the bits that are awkward to inline from JS: the marquee keyframes, the
 * spotlight gradient, and a global reduced-motion clamp. Colors come from your
 * own tokens — override --pm-accent or just set the properties on the elements. */

:root { --pm-accent: #c4837f; } /* Liebe Blüme blush */

/* marquee: track scrolls -50% because motion.js duplicates the children */
[data-marquee] {
  display: flex;
  width: max-content;
  animation: pm-scroll 42s linear infinite;
}
[data-marquee]:hover, [data-marquee]:focus-within { animation-play-state: paused; }
@keyframes pm-scroll { to { transform: translateX(-50%); } }

/* spotlight: put data-spotlight on a positioned element; this paints the glow */
[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(620px circle at var(--mx, 70%) var(--my, 20%),
              color-mix(in srgb, var(--pm-accent) 14%, transparent), transparent 65%);
}

/* beam: a thin rail with a glowing fill <i> that grows with scroll */
[data-beam] { position: relative; }
[data-beam] > i {
  position: absolute; left: 0; top: 0; width: 1px; height: 0; display: block;
  background: linear-gradient(to bottom, var(--pm-accent), transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--pm-accent) 50%, transparent);
}

/* progress bar */
[data-progress] { background: var(--pm-accent); height: 2px; width: 0; }

/* native view-transition default cross-fade tuning */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

@media (prefers-reduced-motion: reduce) {
  [data-marquee] { animation: none; }
  [data-rv] { opacity: 1 !important; transform: none !important; }
  ::view-transition-group(*) { animation: none !important; }
}

/* native cross-document view transitions (progressive enhancement) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }