/*
 * Sage Delight layer (Phase 3). Tokens only; reduced-motion-aware by default.
 * Provides: motion-safe transitions, content-shaped skeletons, hover-lift, and an
 * apply-check. Motion is short (<=250ms) and silent for users who reduce motion.
 */

/* Reduced-motion: honor the OS setting globally — animations become instant. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Motion-safe entrance + feedback animations (opt-in via class). */
@media (prefers-reduced-motion: no-preference) {
  .sage-fade-in { animation: sage-fade-in 200ms ease-out both; }
  .sage-scale-in { animation: sage-scale-in 200ms ease-out both; }
  .sage-slide-up { animation: sage-slide-up 200ms ease-out both; }
  .sage-hover-lift { transition: transform 150ms ease, box-shadow 150ms ease; }
  .sage-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 6px 18px hsl(222 47% 11% / 0.10); }
  .sage-apply-check { animation: sage-check-pop 300ms ease-out both; }
}

@keyframes sage-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sage-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes sage-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sage-check-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }

/* Content-shaped skeletons (loading) — never a bare spinner/blank. */
.sage-skeleton {
  background: linear-gradient(90deg,
    hsl(var(--muted, 210 40% 96%)) 25%,
    hsl(var(--border, 214 32% 91%)) 37%,
    hsl(var(--muted, 210 40% 96%)) 63%);
  background-size: 400% 100%;
  border-radius: 0.4rem;
  color: transparent !important;
}
@media (prefers-reduced-motion: no-preference) {
  .sage-skeleton { animation: sage-shimmer 1.4s ease infinite; }
}
@keyframes sage-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.sage-skeleton-line { height: 0.85rem; margin: 0.4rem 0; }
.sage-skeleton-line.w-60 { width: 60%; }
.sage-skeleton-line.w-40 { width: 40%; }