/* Chuyển động + phản hồi chạm. Một chỗ duy nhất chỉnh "cảm giác" của app. */
:root {
  --ease: cubic-bezier(.22, .8, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .12s;   /* hover, đổi màu */
  --dur-2: .2s;    /* panel, tab */
  --dur-3: .3s;    /* modal, popover */
}

/* Ai tắt hiệu ứng trong hệ điều hành thì tôn trọng ngay — không tranh cãi. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes menu-in { from { opacity: 0; transform: scale(.97); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes flash-pop {
  0% { opacity: 0; transform: scale(1.05); }
  18% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* Modal: nền mờ dần, hộp nảy nhẹ lên */
.modal-backdrop { animation: fade-in var(--dur-2) ease-out; }
.modal { animation: pop-in var(--dur-3) var(--ease-out); }

/* Menu ngữ cảnh + quick insert: bung ra từ điểm chuột */
.ctx-menu, .qi { animation: menu-in var(--dur-1) var(--ease-out); transform-origin: top left; }

/* Vừa chèn xong thì nháy xanh đúng chỗ nó rơi vào — khỏi phải đi tìm */
.flash-box {
  position: absolute; pointer-events: none; border-radius: 6px;
  border: 2px solid var(--ok); background: rgba(56, 211, 159, .16);
  animation: flash-pop .72s var(--ease-out) forwards;
}

/* Lưới dự án trồi lên lần lượt — mở app thấy có nhịp, không phải bụp một phát */
.proj-grid.stagger > .proj-card { animation: rise-in var(--dur-3) var(--ease-out) both; }
.proj-grid.stagger > .proj-card:nth-child(2) { animation-delay: .04s; }
.proj-grid.stagger > .proj-card:nth-child(3) { animation-delay: .08s; }
.proj-grid.stagger > .proj-card:nth-child(4) { animation-delay: .12s; }
.proj-grid.stagger > .proj-card:nth-child(5) { animation-delay: .16s; }
.proj-grid.stagger > .proj-card:nth-child(n+6) { animation-delay: .2s; }

#stage-empty { animation: pop-in var(--dur-3) var(--ease-out); }

/* Màn đang mở: vạch nhấn bên trái, liếc là thấy mình đang ở đâu */
.screen-item.active { box-shadow: inset 3px 0 0 var(--accent); }

/* Trạng thái chạm được: nhấc nhẹ khi hover, lún xuống khi bấm */
.screen-item { transition: background var(--dur-1), border-color var(--dur-1); }
.rail-tab { transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
.toast { animation: pop-in var(--dur-2) var(--ease-out); }

/* Bàn phím cũng phải thấy mình đang ở đâu */
.btn:focus-visible, .rail-tab:focus-visible, .seg-btn:focus-visible,
.pick-card:focus-visible, .ctx-item:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}