/* ZOVIA demo – animation.css
   Chuyển động chính: ánh bạc quét qua logo khi tải trang.
   Còn lại chỉ phản hồi thao tác của người dùng. */

@keyframes sheen {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

@keyframes can-rise {
  from { opacity: 0; transform: translateY(40px) rotate(-4deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes can-swap {
  0%   { transform: scale(0.96); }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes shelf-drop {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-in {
  0%   { transform: translate(-50%, 150%); }
  12%  { transform: translate(-50%, 0); }
  85%  { transform: translate(-50%, 0); }
  100% { transform: translate(-50%, 150%); }
}

/* Logo: quét ánh bạc một lần khi tải, lặp lại khi rê chuột */
.hero .wordmark {
  animation: sheen 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s 1 both;
}
.wordmark:hover {
  animation: sheen 1.4s ease-in-out 1 both;
}

/* Lon trong hero: bay lên khi tải trang */
.hero__can .can {
  animation: can-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both;
}
.hero__can .can.is-swapping {
  animation: can-swap 0.45s ease-out;
}

/* Kệ hàng: các lon rơi vào vị trí sau khi xáo trộn */
.shelf .can.is-shuffled {
  animation: shelf-drop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* Thông báo đã sao chép */
.toast.is-visible {
  animation: toast-in 2.2s ease both;
}

/* Tôn trọng người dùng muốn giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}