/**
 * CHỊ ƠI! — View Transitions + Page Load Optimization
 * 
 * 1. View Transitions API: Smooth fade animation khi chuyển trang
 * 2. Instant Click: Bắt đầu navigate ngay khi mousedown (thay vì click)
 * 3. Page Visibility: Preload khi quay lại tab
 */

/* ============================================================
   VIEW TRANSITIONS — Smooth page transition animation
   Supported: Chrome 111+, Edge 111+
   Fallback: Graceful — trên browser cũ sẽ bỏ qua
   ============================================================ */

/* Trigger transitions cho same-origin navigation */
@view-transition {
  navigation: auto;
}

/* Old page fades out */
::view-transition-old(root) {
  animation: chioi-fade-out 0.12s ease-out forwards;
}

/* New page fades in */
::view-transition-new(root) {
  animation: chioi-fade-in 0.18s ease-in forwards;
  animation-delay: 0.05s;
}

@keyframes chioi-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes chioi-fade-in {
  from {
    opacity: 0;
    transform: scale(1.01);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================================
   LOADING INDICATOR — Hiển thị khi đang tải trang mới
   ============================================================ */

/* Progress bar ở top khi navigate */
@keyframes chioi-loading-bar {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(0.7); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* Page enter animation (cho trang mới load) */
@keyframes chioi-page-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Áp dụng enter animation cho main content */
main, [role="main"] {
  animation: chioi-page-enter 0.25s ease-out;
}

/* ============================================================
   SKELETON SHIMMER — Loading effect cho content
   ============================================================ */
@keyframes chioi-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton-loading {
  background: linear-gradient(90deg, #f0eded 25%, #fae4da 50%, #f0eded 75%);
  background-size: 200px 100%;
  animation: chioi-shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}