/* Design System Motion — メログラフィ / Phase 2 設計 */

@keyframes ds-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ds-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ds-scale-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes ds-breathe { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.02); } }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@keyframes ds-spin-rev { to { transform: rotate(-360deg); } }
@keyframes ds-particle-up { 0% { opacity: 0; transform: translate(0,0); } 10% { opacity: .8; } 100% { opacity: 0; transform: translate(var(--ds-drift,0px), -220px); } }
@keyframes ds-caret-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes ds-summon-pop { 0% { opacity: 0; transform: scale(.94); } 60% { opacity: 1; transform: scale(1.02); } 100% { transform: scale(1); } }

.ds-anim-fade-in { animation: ds-fade-in var(--ds-motion-normal) var(--ds-easing-out) both; }
.ds-anim-fade-out { animation: ds-fade-out var(--ds-motion-normal) var(--ds-easing-out) both; }
.ds-anim-scale-in { animation: ds-scale-in var(--ds-motion-normal) var(--ds-easing-cubic) both; }
.ds-anim-breathe { animation: ds-breathe var(--ds-motion-cinematic) ease-in-out infinite; }
.ds-anim-summon-pop { animation: ds-summon-pop var(--ds-motion-slow) var(--ds-easing-cubic) both; }
.ds-anim-particle-up { animation: ds-particle-up var(--ds-motion-cinematic) linear infinite; }
.ds-anim-caret-blink { animation: ds-caret-blink 1s steps(1) infinite; }
.ds-spin-slow { animation: ds-spin var(--ds-spin-slow) linear infinite; }
.ds-spin-fast { animation: ds-spin var(--ds-spin-fast) linear infinite; }
.ds-spin-rev  { animation: ds-spin-rev var(--ds-spin-rev) linear infinite; }
.ds-trans-default { transition: all var(--ds-motion-fast) var(--ds-easing-out); }
.ds-stagger > * { animation: ds-fade-in var(--ds-motion-normal) var(--ds-easing-out) both; }
.ds-stagger > *:nth-child(1) { animation-delay: 0ms; }
.ds-stagger > *:nth-child(2) { animation-delay: 80ms; }
.ds-stagger > *:nth-child(3) { animation-delay: 160ms; }
.ds-stagger > *:nth-child(4) { animation-delay: 240ms; }
.ds-stagger > *:nth-child(5) { animation-delay: 320ms; }
.ds-stagger > *:nth-child(6) { animation-delay: 400ms; }
.ds-stagger > *:nth-child(7) { animation-delay: 480ms; }
.ds-stagger > *:nth-child(8) { animation-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
  .ds-anim-fade-in, .ds-anim-fade-out, .ds-anim-scale-in, .ds-anim-summon-pop,
  .ds-anim-particle-up, .ds-stagger > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ds-anim-breathe { animation: none !important; }
  .ds-trans-default { transition: none !important; }
}