/* ============================================================
   CHUYỂN CẢNH — cho mỗi cú bấm đỡ khô
   Để riêng một file và nạp SAU styles.css, vì styles.css hay bị
   team tải bản mới lên đè. Ba việc:
     1. Bấm nút thì nút lún xuống, nhả ra thì bật lại
     2. Màn mới hiện ra thì trôi lên, không bật cái độp
     3. Chuyển giữa các trang thì mờ chồng, không chớp trắng
   ============================================================ */

/* ---------- 1. Phản hồi lúc bấm ---------- */
.nut {
  transition:
    transform .16s cubic-bezier(.2,.7,.3,1),
    box-shadow .16s ease,
    background .16s ease,
    color .16s ease,
    border-color .16s ease;
}
.nut:active { transform: translateY(1px) scale(.97); }
.nut-chinh:active { box-shadow: 0 4px 12px -5px rgba(238,92,27,.7); }
.nut[disabled], .nut[disabled]:active { transform: none; }

/* Mấy thứ bấm được nhưng không mang class .nut */
.q-dap-an button,
.ag-chip button,
.wk-chip button,
.ag-bam,
.ag-tieng,
.sc.the,
.nut-nhac-nen,
.intro-bo-qua,
.wk-menu a {
  transition:
    transform .16s cubic-bezier(.2,.7,.3,1),
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}
.q-dap-an button:active,
.ag-chip button:active,
.wk-chip button:active,
.ag-bam:active,
.ag-tieng:active,
.nut-nhac-nen:active,
.intro-bo-qua:active { transform: scale(.97); }
.sc.the:active { transform: translateY(-2px) scale(.99); }

/* ---------- 2. Khối mới hiện ra ---------- */
@keyframes cc-hien {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cc-tan {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px); }
}
.cc-hien { animation: cc-hien .28s cubic-bezier(.2,.7,.3,1) both; }
.cc-tan  { animation: cc-tan .15s ease both; }

/* ---------- 3. Chuyển giữa các trang ----------
   Trình duyệt nào hiểu thì tự mờ chồng hai trang vào nhau, trình duyệt
   cũ bỏ qua dòng này và chạy y như trước, không hỏng gì. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .2s; }
::view-transition-new(root) { animation-duration: .26s; }

/* ============================================================
   4. CHO NHẸ MÁY — mấy chỗ đang bắt trình duyệt làm việc thừa
   ============================================================ */

/* 4a. Bốn vạch sóng ở nút nhạc đang chạy vô tận bằng `height`. Đổi chiều cao
   là trình duyệt phải tính lại bố cục rồi vẽ lại, mỗi khung hình, trên mọi
   trang. Đổi sang `transform` thì card đồ hoạ lo, CPU không phải động tay. */
.song-nhac i { height: 15px; transform-origin: bottom; transition: none; }
.dang-phat .song-nhac i:nth-child(1) { animation: cc-song-1 .7s ease-in-out infinite alternate; }
.dang-phat .song-nhac i:nth-child(2) { animation: cc-song-2 .5s ease-in-out infinite alternate; }
.dang-phat .song-nhac i:nth-child(3) { animation: cc-song-3 .8s ease-in-out infinite alternate; }
.dang-phat .song-nhac i:nth-child(4) { animation: cc-song-4 .6s ease-in-out infinite alternate; }
@keyframes cc-song-1 { from { transform: scaleY(.27); } to { transform: scaleY(.93); } }
@keyframes cc-song-2 { from { transform: scaleY(.87); } to { transform: scaleY(.2); } }
@keyframes cc-song-3 { from { transform: scaleY(.33); } to { transform: scaleY(1); } }
@keyframes cc-song-4 { from { transform: scaleY(.8); } to { transform: scaleY(.27); } }

/* 4b. Chấm "đang mở đơn" nhấp nháy bằng `box-shadow` — vẽ lại mỗi khung hình.
   Đổi thành một vòng tròn riêng nằm sau, chỉ phóng to rồi mờ dần. */
.cham { position: relative; box-shadow: none; animation: none; }
.cham::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: rgba(142,224,51,.55);
  z-index: -1;
  animation: cc-tho 2s infinite;
}
@keyframes cc-tho {
  0%        { opacity: .75; transform: scale(.3); }
  70%, 100% { opacity: 0;   transform: scale(1); }
}

/* 4c. Làm mờ nền (`backdrop-filter`) là thứ tốn nhất lúc cuộn: mỗi khối phải
   làm mờ lại toàn bộ thứ nằm sau nó. Trang chủ đang có 15 khối như vậy.
   Bỏ ở những chỗ nền vốn đã gần đục — có mờ cũng không ai thấy khác. */
.dinh {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(248,251,245,.97);
}
.nut-nhac-nen { backdrop-filter: none; -webkit-backdrop-filter: none; }
.sc, .nhan-duoc .the {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255,255,255,.1);
}

/* Điện thoại thì bỏ nốt mấy ô nằm trên ảnh bìa, tô đặc thêm cho bù lại */
@media (max-width: 900px) {
  .the-he-chip, .nut-cta-phu, .o-dem {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .the-he-chip, .nut-cta-phu { background: rgba(255,255,255,.24); }
  .o-dem { background: rgba(255,255,255,.22); }
}

/* 4d. Trang "Ăn chi" và "Góc game" dán nền bằng `background-attachment: fixed`.
   Nền dính viewport thì cứ cuộn một nhịp là trình duyệt phải vẽ lại cả tấm
   nền — trên điện thoại Android đây là thủ phạm giật số một. Lấy đúng hai
   vầng sáng đó ra một lớp `::before` nằm cố định phía sau: nhìn y nguyên,
   nhưng lớp cố định chỉ vẽ một lần rồi card đồ hoạ giữ lại.
   Phải viết `body.ag-body` (hai bậc) vì an-gi.css nạp sau file này. */
body.ag-body, body.gm-body { background-attachment: scroll; background-image: none; }
body.ag-body::before, body.gm-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body.ag-body::before {
  background-image:
    radial-gradient(1000px 600px at 50% -8%, rgba(250,80,30,.34), transparent 62%),
    radial-gradient(760px 520px at 88% 104%, rgba(255,176,60,.16), transparent 60%);
}
body.gm-body::before {
  background-image:
    radial-gradient(900px 560px at 50% -10%, rgba(250,80,30,.3), transparent 62%),
    radial-gradient(700px 480px at 12% 100%, rgba(80,190,140,.12), transparent 58%);
}

/* ---------- 5. Máy bật giảm chuyển động thì bỏ hết ---------- */
@media (prefers-reduced-motion: reduce) {
  .cc-hien, .cc-tan { animation: none; }
  .nut:active,
  .q-dap-an button:active,
  .ag-chip button:active,
  .wk-chip button:active,
  .ag-bam:active,
  .ag-tieng:active,
  .nut-nhac-nen:active,
  .intro-bo-qua:active,
  .sc.the:active { transform: none; }

  /* Tắt hẳn chuyển trang chứ không chỉ rút ngắn: để nó chạy rồi bị bỏ giữa
     chừng thì trình duyệt ném một lời than "Transition was skipped" ra console. */
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .01ms; }
}