/* ============================================================
   FILE: animations.css
   MÔ TẢ: Lớp nâng cấp hoạt ảnh cho trang chủ (index.html).
           Nạp SAU base.css và game.css, chỉ ghi đè phần chuyển
           động, không thay đổi bố cục.
   ============================================================ */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   1. INTRO
   ============================================================ */
#intro-overlay {
  transition: opacity 1.2s var(--ease-smooth), filter 1.2s var(--ease-smooth);
}
/* Khi intro mờ đi: nhòe nhẹ để chuyển cảnh mềm hơn */
#intro-overlay.is-leaving { filter: blur(6px); }

#intro-line2 {
  transform: translateY(12px);
  filter: blur(4px);
  transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo), filter 1s var(--ease-out-expo);
}
#intro-line2.is-visible { transform: translateY(0); filter: blur(0); }

#skip-intro {
  opacity: 0;
  animation: skipIn 0.8s var(--ease-out-expo) 0.6s forwards;
}
#skip-intro i { transition: transform 0.25s var(--ease-spring); }
#skip-intro:hover i { transform: translateX(3px); }

@keyframes skipIn {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}

/* Cánh hoa đung đưa thay vì rơi thẳng */
.petal { animation-name: petalFall; animation-timing-function: linear; }
@keyframes petalFall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg);        opacity: 0; }
  10%  { opacity: 0.9; }
  25%  { transform: translate3d(18px, 25vh, 0) rotate(180deg); }
  50%  { transform: translate3d(-14px, 55vh, 0) rotate(360deg); }
  75%  { transform: translate3d(16px, 85vh, 0) rotate(540deg); }
  100% { transform: translate3d(-8px, 110vh, 0) rotate(720deg); opacity: 0; }
}

/* ============================================================
   2. TIÊU ĐỀ CHÍNH
   ============================================================ */
.content {
  transition:
    opacity 0.5s var(--ease-out-expo),
    transform 0.5s var(--ease-out-expo),
    filter 0.5s var(--ease-out-expo);
}
.content.hide { filter: blur(8px); transform: scale(0.94) translateY(-8px); }

.content h1 {
  background-size: 200% 200%;
  animation:
    titleReveal 1.2s var(--ease-out-expo) both,
    titleGlow 3s ease-in-out 1.2s infinite,
    titleShimmer 8s ease-in-out infinite;
}
.content p { animation: subtitleReveal 1.2s var(--ease-out-expo) 0.25s both; }

@keyframes titleReveal {
  from { opacity: 0; transform: translateY(24px); letter-spacing: 0.25em; }
  to   { opacity: 1; transform: translateY(0);    letter-spacing: 0.05em; }
}
@keyframes subtitleReveal {
  from { opacity: 0; transform: translateY(12px); letter-spacing: 0.4em; }
  to   { opacity: 1; transform: translateY(0);    letter-spacing: 0.2em; }
}
@keyframes titleShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ============================================================
   3. NÚT TOGGLE
   ============================================================ */
.toggle-btn {
  transition:
    background 0.3s var(--ease-smooth),
    border-color 0.3s var(--ease-smooth),
    box-shadow 0.3s var(--ease-smooth),
    transform 0.35s var(--ease-spring);
}
.toggle-btn:active { transform: scale(0.92); }

/* Vòng sóng gợi ý bấm khi menu đang đóng */
#toggleBar::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 16px;
  border: 2px solid rgba(160, 210, 255, 0.5);
  opacity: 0;
  pointer-events: none;
  animation: togglePulse 2.8s var(--ease-smooth) infinite;
}
#toggleBar.active::after { animation: none; }
@keyframes togglePulse {
  0%   { opacity: 0.7; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}

/* Biểu tượng đổi (gamepad ↔ x) xoay vào mượt */
.toggle-btn i.icon-swap { animation: iconSwap 0.4s var(--ease-spring); }
@keyframes iconSwap {
  from { opacity: 0; transform: rotate(-90deg) scale(0.5); }
}

/* ============================================================
   4. UTILITY BAR & BỘ LỌC
   ============================================================ */
.utility-bar {
  transform-origin: top left;
  transition:
    transform 0.5s var(--ease-out-expo),
    opacity 0.35s var(--ease-smooth),
    filter 0.5s var(--ease-out-expo);
  filter: blur(4px);
}
.utility-bar.show { filter: none; }

.filter-btn {
  transition:
    background 0.25s var(--ease-smooth),
    border-color 0.25s var(--ease-smooth),
    color 0.25s var(--ease-smooth),
    box-shadow 0.25s var(--ease-smooth),
    transform 0.3s var(--ease-spring);
}
.filter-btn:hover  { transform: translateY(-2px); }
.filter-btn:active { transform: scale(0.94); }

.utility-bar.show .filter-btn { animation: filterIn 0.5s var(--ease-out-expo) both; }
.utility-bar.show .filter-btn:nth-child(2) { animation-delay: 0.03s; }
.utility-bar.show .filter-btn:nth-child(3) { animation-delay: 0.06s; }
.utility-bar.show .filter-btn:nth-child(4) { animation-delay: 0.09s; }
.utility-bar.show .filter-btn:nth-child(5) { animation-delay: 0.12s; }
.utility-bar.show .filter-btn:nth-child(6) { animation-delay: 0.15s; }
.utility-bar.show .filter-btn:nth-child(7) { animation-delay: 0.18s; }
.utility-bar.show .filter-btn:nth-child(n+8) { animation-delay: 0.21s; }
@keyframes filterIn {
  from { opacity: 0; translate: 0 -6px; }
  to   { opacity: 1; translate: 0 0; }
}
/* Nút vừa được chọn nảy nhẹ */
.utility-bar.show .filter-btn.active { animation: filterPop 0.4s var(--ease-spring) both; }
@keyframes filterPop {
  from { scale: 0.9; }
  to   { scale: 1; }
}

/* ============================================================
   5. THẺ GAME
   ============================================================ */
.games-grid { perspective: 800px; }

.game-card {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 0%;
  animation: cardReveal 0.6s var(--ease-out-expo) forwards;
  transition:
    background 0.3s var(--ease-smooth),
    border-color 0.3s var(--ease-smooth),
    box-shadow 0.35s var(--ease-smooth),
    transform 0.35s var(--ease-out-expo);
  will-change: transform;
}
/* Đèn chiếu đi theo con trỏ */
.game-card::before {
  background: radial-gradient(circle at var(--mx) var(--my), rgba(160, 200, 255, 0.16), transparent 65%);
}
/* Viền sáng mảnh chạy theo con trỏ */
.game-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(120px circle at var(--mx) var(--my), rgba(180, 210, 255, 0.55), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth);
  pointer-events: none;
}
.game-card:hover::after { opacity: 1; }
.game-card:hover {
  transform: translateY(-4px) rotateX(var(--rx)) rotateY(var(--ry));
}
.game-card:active {
  transform: translateY(-1px) scale(0.96);
  transition-duration: 0.12s;
}
.game-card .util-btn { transition: transform 0.4s var(--ease-spring); }
.game-card:hover .util-btn { transform: scale(1.08); }

/* Hiệu ứng gợn sóng khi bấm */
.card-ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: rgba(180, 210, 255, 0.35);
  pointer-events: none;
  animation: cardRipple 0.6s var(--ease-out-expo) forwards;
}
@keyframes cardRipple {
  from { transform: scale(0);  opacity: 1; }
  to   { transform: scale(14); opacity: 0; }
}

/* Dùng translate/scale riêng (không dùng transform) để hiệu ứng hover
   bằng transform vẫn hoạt động sau khi hoạt ảnh xuất hiện kết thúc. */
@keyframes cardReveal {
  from { opacity: 0; translate: 0 18px; scale: 0.94; filter: blur(4px); }
  to   { opacity: 1; translate: 0 0;    scale: 1;    filter: none; }
}

/* Lưới mờ đi trước khi đổi bộ lọc */
.games-grid { transition: opacity 0.18s var(--ease-smooth), transform 0.18s var(--ease-smooth); }
.games-grid.is-switching { opacity: 0; transform: translateY(6px); }

/* Thanh độ khó lấp đầy lần lượt */
.difficulty-segment {
  transform-origin: left center;
  animation: segmentFill 0.45s var(--ease-out-expo) both;
}
.difficulty-segment:nth-child(1) { animation-delay: 0.25s; }
.difficulty-segment:nth-child(2) { animation-delay: 0.32s; }
.difficulty-segment:nth-child(3) { animation-delay: 0.39s; }
.difficulty-segment:nth-child(4) { animation-delay: 0.46s; }
.difficulty-segment:nth-child(5) { animation-delay: 0.53s; }
@keyframes segmentFill {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ============================================================
   6. NÚT TIỆN ÍCH CHUNG
   ============================================================ */
.util-btn {
  transition:
    background 0.25s var(--ease-smooth),
    transform 0.3s var(--ease-spring);
}

/* ============================================================
   7. CHILL BAR
   ============================================================ */
.chill-bar {
  transition:
    opacity 0.3s var(--ease-smooth),
    transform 0.45s var(--ease-out-expo),
    visibility 0.3s var(--ease-smooth);
}
.chill-bar.open .chill-game-btn { animation: chillItemIn 0.5s var(--ease-out-expo) both; }
.chill-bar.open .chill-game-btn:nth-child(2) { animation-delay: 0.04s; }
.chill-bar.open .chill-game-btn:nth-child(3) { animation-delay: 0.08s; }
.chill-bar.open .chill-game-btn:nth-child(4) { animation-delay: 0.12s; }
.chill-bar.open .chill-game-btn:nth-child(5) { animation-delay: 0.16s; }
.chill-bar.open .chill-game-btn:nth-child(n+6) { animation-delay: 0.2s; }
@keyframes chillItemIn {
  from { opacity: 0; translate: -12px 0; }
  to   { opacity: 1; translate: 0 0; }
}

/* ============================================================
   8. LOADING OVERLAY
   ============================================================ */
#loading-overlay { animation: fadeIn 0.35s var(--ease-smooth); }
.loading-content { animation: loadingIn 0.6s var(--ease-out-expo) both; }
@keyframes loadingIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.loading-spinner { animation: spin 1s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite; }
.loading-progress-bar {
  background-size: 200% 100%;
  animation:
    progress 2s ease-in-out forwards,
    progressShine 1.5s linear infinite;
}
@keyframes progressShine {
  from { background-position: 200% 0; }
  to   { background-position: 0 0; }
}

/* ============================================================
   9. GIẢM CHUYỂN ĐỘNG
   Tôn trọng cài đặt "giảm chuyển động" của hệ điều hành:
   tắt hoạt ảnh lặp, rút ngắn chuyển tiếp, giữ trạng thái cuối.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .game-card:hover { transform: none; }
  #toggleBar::after,
  #petal-container { display: none; }
}