/**
 * motion.css — 전체일정 섹션 모션 그래픽
 * style.css 다음에 로드하면 전체일정 UI에만 적용됩니다.
 * 애니메이션 끄기: 이 파일 링크를 제거하거나, OS에서 "동작 줄이기" 설정 시 자동 완화됩니다.
 */

/* ── 키프레임 정의 ── */
@keyframes motion-section-enter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes motion-header-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

@keyframes motion-title-shine {
  0% { background-position: 120% 50%; }
  100% { background-position: -20% 50%; }
}

@keyframes motion-row-enter {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes motion-bar-draw {
  from {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
  }
  to {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left center;
  }
}

@keyframes motion-day-pop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes motion-empty-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes motion-empty-icon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ── 전체일정 섹션: 진입 모션 ── */
.schedule-section {
  animation: motion-section-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.schedule-header {
  animation: motion-header-glow 3s ease-in-out 0.3s infinite;
}

/* 타이틀 그라데이션 미세 흐름 (선택적) */
.schedule-title {
  background-size: 200% 100%;
  animation: motion-title-shine 8s ease-in-out 0.5s infinite;
}

/* 월 네비 버튼: 첫 로드 시 살짝 강조 */
.month-nav button {
  animation: motion-day-pop 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) backwards;
}
.month-nav button:first-of-type { animation-delay: 0.1s; }
#current-month-label {
  animation: motion-day-pop 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) 0.15s backwards;
}
.month-nav button:last-of-type { animation-delay: 0.2s; }

/* 날짜 라벨(일~토): 순차 등장 */
.gantt-day-label {
  animation: motion-day-pop 0.35s cubic-bezier(0.34, 1.2, 0.64, 1) backwards;
}
.gantt-days-row .gantt-day-label:nth-child(1) { animation-delay: 0.25s; }
.gantt-days-row .gantt-day-label:nth-child(2) { animation-delay: 0.28s; }
.gantt-days-row .gantt-day-label:nth-child(3) { animation-delay: 0.31s; }
.gantt-days-row .gantt-day-label:nth-child(4) { animation-delay: 0.34s; }
.gantt-days-row .gantt-day-label:nth-child(5) { animation-delay: 0.37s; }
.gantt-days-row .gantt-day-label:nth-child(6) { animation-delay: 0.40s; }
.gantt-days-row .gantt-day-label:nth-child(7) { animation-delay: 0.43s; }
.gantt-days-row .gantt-day-label:nth-child(8) { animation-delay: 0.46s; }
.gantt-days-row .gantt-day-label:nth-child(9) { animation-delay: 0.49s; }
.gantt-days-row .gantt-day-label:nth-child(10) { animation-delay: 0.52s; }
.gantt-days-row .gantt-day-label:nth-child(n+11) { animation-delay: 0.55s; }

/* 할일 행: 순차 슬라이드 인 */
.gantt-body .gantt-row {
  animation: motion-row-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.gantt-body .gantt-row:nth-child(1) { animation-delay: 0.35s; }
.gantt-body .gantt-row:nth-child(2) { animation-delay: 0.42s; }
.gantt-body .gantt-row:nth-child(3) { animation-delay: 0.49s; }
.gantt-body .gantt-row:nth-child(4) { animation-delay: 0.56s; }
.gantt-body .gantt-row:nth-child(5) { animation-delay: 0.63s; }
.gantt-body .gantt-row:nth-child(6) { animation-delay: 0.70s; }
.gantt-body .gantt-row:nth-child(7) { animation-delay: 0.77s; }
.gantt-body .gantt-row:nth-child(8) { animation-delay: 0.84s; }
.gantt-body .gantt-row:nth-child(9) { animation-delay: 0.91s; }
.gantt-body .gantt-row:nth-child(10) { animation-delay: 0.98s; }
.gantt-body .gantt-row:nth-child(n+11) { animation-delay: 1.05s; }

/* 간트 막대: 그리기 효과 (행 등장 후) */
.gantt-body .gantt-row .gantt-bar {
  animation: motion-bar-draw 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.gantt-body .gantt-row:nth-child(1) .gantt-bar { animation-delay: 0.5s; }
.gantt-body .gantt-row:nth-child(2) .gantt-bar { animation-delay: 0.57s; }
.gantt-body .gantt-row:nth-child(3) .gantt-bar { animation-delay: 0.64s; }
.gantt-body .gantt-row:nth-child(4) .gantt-bar { animation-delay: 0.71s; }
.gantt-body .gantt-row:nth-child(5) .gantt-bar { animation-delay: 0.78s; }
.gantt-body .gantt-row:nth-child(6) .gantt-bar { animation-delay: 0.85s; }
.gantt-body .gantt-row:nth-child(7) .gantt-bar { animation-delay: 0.92s; }
.gantt-body .gantt-row:nth-child(8) .gantt-bar { animation-delay: 0.99s; }
.gantt-body .gantt-row:nth-child(9) .gantt-bar { animation-delay: 1.06s; }
.gantt-body .gantt-row:nth-child(10) .gantt-bar { animation-delay: 1.13s; }
.gantt-body .gantt-row:nth-child(n+11) .gantt-bar { animation-delay: 1.2s; }

/* 빈 상태 메시지 */
.gantt-empty {
  animation: motion-empty-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;
}
.gantt-empty::before {
  animation: motion-empty-icon 2s ease-in-out 0.8s infinite;
}

/* ── 동작 줄이기: 접근성 ── */
@media (prefers-reduced-motion: reduce) {
  .schedule-section,
  .schedule-header,
  .schedule-title,
  .month-nav button,
  #current-month-label,
  .gantt-day-label,
  .gantt-body .gantt-row,
  .gantt-body .gantt-row .gantt-bar,
  .gantt-empty,
  .gantt-empty::before {
    animation: none !important;
  }
}