/**
 * Motion System
 *
 * scroll-behavior, keyframes, transition utilities. All durations/easing
 * reference tokens. Respects prefers-reduced-motion via theme.css's
 * zeroed duration tokens plus the global !important safety net here.
 *
 * @package    Recipes_Lola
 * @version    1.0.0
 */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@keyframes rl-skeleton-shine {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.rl-skeleton {
  background: linear-gradient(90deg, var(--rl-color-skeleton-base) 25%, var(--rl-color-skeleton-shine) 50%, var(--rl-color-skeleton-base) 75%);
  background-size: 200% 100%;
  animation: rl-skeleton-shine var(--rl-ad-skeleton-speed) ease-in-out infinite;
  border-radius: var(--rl-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .rl-skeleton { animation: none; background: var(--rl-color-skeleton-base); }
}

@keyframes rl-fade-in {
  from { opacity: var(--rl-opacity-0); }
  to   { opacity: var(--rl-opacity-100); }
}

.rl-animate-fade-in { animation: rl-fade-in var(--rl-duration-normal) var(--rl-ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .rl-animate-fade-in { animation: none; opacity: var(--rl-opacity-100); }
}

@keyframes rl-slide-up {
  from { opacity: var(--rl-opacity-0); transform: translateY(var(--rl-space-4)); }
  to   { opacity: var(--rl-opacity-100); transform: translateY(0); }
}

.rl-animate-slide-up { animation: rl-slide-up var(--rl-duration-normal) var(--rl-ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .rl-animate-slide-up { animation: none; opacity: var(--rl-opacity-100); transform: none; }
}

.rl-transition        { transition: all var(--rl-transition-default); }
.rl-transition-fast   { transition: all var(--rl-transition-fast); }
.rl-transition-colors { transition: color var(--rl-transition-fast), background-color var(--rl-transition-fast), border-color var(--rl-transition-fast); }
.rl-transition-opacity{ transition: opacity var(--rl-transition-default); }
.rl-transition-shadow { transition: box-shadow var(--rl-transition-fast); }
.rl-transition-transform { transition: transform var(--rl-transition-default); }
.rl-transition-none   { transition: none; }