/* Pause decorative motion while the document is backgrounded. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
    scroll-behavior: auto !important;
  }
}

html.page-hidden *,
html.page-hidden *::before,
html.page-hidden *::after {
  animation-play-state: paused !important;
}

/* Cải thiện hiệu suất animation */
@keyframes move-forever,
@keyframes caret-blink,
@keyframes pulse,
@keyframes bounce-down,
@keyframes arrow-down,
@keyframes bellRing,
@keyframes nickname-appear,
@keyframes catNod,
@keyframes floatSlow {
  /* Tối ưu hóa với transform và opacity */
}

/* Giảm tải GPU cho thiết bị yếu */
@media (max-width: 768px) {
  .nest-canvas,
  .weather-canvas {
    will-change: auto;
  }
  
  .wave-layer,
  .progress-circle {
    will-change: auto;
  }
}