/* ============================================================================
   PALETTE GRID — Animations (Indigo + Cyan redesign)
   Keyframes used by style.css. Pure CSS.
   ========================================================================== */
@keyframes pg-rise   { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes pg-fade   { from { opacity:0; } to { opacity:1; } }
@keyframes pg-pop    { 0% { opacity:0; transform:scale(.92) translateY(10px); } 100% { opacity:1; transform:scale(1) translateY(0); } }
@keyframes pg-grad-pan { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
@keyframes pg-float  { 0%,100% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(0,-16px,0) scale(1.03); } }
@keyframes pg-swatch-in { 0% { opacity:0; transform:translateY(26px) rotate(-6deg) scale(.9); } 100% { opacity:1; transform:translateY(0) rotate(0) scale(1); } }
@keyframes pg-shake  { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(4px); } }
@keyframes pg-spin   { to { transform:rotate(360deg); } }
@keyframes pg-pulse  { 0%,100% { opacity:1; } 50% { opacity:.55; } }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}