46 lines
1.3 KiB
CSS
46 lines
1.3 KiB
CSS
/* motion.css ─ keyframes + global reduced-motion override.
|
|
* Keep keyframes here, not scattered across primitive files,
|
|
* so a single import disables them under prefers-reduced-motion. */
|
|
|
|
/* Skeleton shimmer — gradient sweep, NOT opacity pulse */
|
|
@keyframes wd-shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
/* "LIVE" tally-light stutter — bright 0.9s / dim 0.3s / bright 0.9s */
|
|
@keyframes wd-stutter {
|
|
0%, 42% { opacity: 1; }
|
|
42.01%, 56% { opacity: 0.55; }
|
|
56.01%, 100% { opacity: 1; }
|
|
}
|
|
|
|
/* Signal-strip sweep for recording cards */
|
|
@keyframes wd-signal-sweep {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
.wd-shimmer {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--bg-surface) 0%,
|
|
var(--bg-hover) 50%,
|
|
var(--bg-surface) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: wd-shimmer 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
.wd-stutter { animation: wd-stutter 2.1s ease-in-out infinite; }
|
|
.wd-sweep { animation: wd-signal-sweep 1.8s ease-in-out infinite; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wd-shimmer, .wd-stutter, .wd-sweep {
|
|
animation: none;
|
|
}
|
|
*, *::before, *::after {
|
|
transition-duration: 0ms !important;
|
|
animation-duration: 0ms !important;
|
|
}
|
|
}
|