/* CIPHER 모션 카탈로그 — transform/opacity만. 카탈로그 밖 모션 금지. */

/* M1 reveal */
.anim-reveal > [data-reveal] {
  opacity: 0; transform: translateY(8px);
  animation: reveal var(--dur-3) var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

/* M5 pop */
.anim-pop { animation: pop var(--dur-2) var(--ease-spring); }
@keyframes pop { 50% { transform: scale(1.25); } }

/* M9 pulse */
.anim-pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* M6 modal — components.css의 .modal-back/.modal transition과 연동 */
/* M7 toast — components.css의 .toast transition과 연동 */

/* M10 skeleton shimmer */
.skeleton { background: var(--bg-2); border-radius: var(--r-sm); position: relative; overflow: hidden; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  /* 예외: shimmer의 gradient는 허용 (step-10 grep 화이트리스트) */
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .anim-reveal > [data-reveal] { opacity: 1; transform: none; }
  .skeleton::after { display: none; }
}