/* =====================================================================
 * P2-GAMEFEEL: chuyển màn liền mạch (cktrans) — overlay wipe RA/VÀO giữa
 * các trang royal. Chỉ animate opacity/transform. url() tương đối →
 * đúng subpath mọi môi trường (localhost/chesskingdom lẫn prod root).
 * ===================================================================== */

/* Cross-document View Transitions (Chrome 126+) — progressive, không bắt buộc. */
@view-transition {
  navigation: auto;
}

.cktrans {
  position: fixed;
  inset: 0;
  z-index: 99999; /* trên MỌI ceremony/chrome — màn đang rời đi */
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 42%, #fde9a8 0%, #f6c945 34%, #b9821f 72%, #7c5613 100%);
  pointer-events: all; /* chặn click trong lúc chuyển màn */
}
.cktrans-crest {
  width: clamp(96px, 22vw, 160px);
  height: clamp(96px, 22vw, 160px);
  background: url("../img/theory/kingdom/v1/ui/crest.png") center / contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(60, 35, 5, 0.5));
}

/* Wipe RA: overlay hiện nhanh + crest phóng nhẹ vào. */
.cktrans.is-out { animation: cktransOut 0.3s ease-out both; }
.cktrans.is-out .cktrans-crest { animation: cktransCrestIn 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
@keyframes cktransOut {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cktransCrestIn {
  from { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

/* Wipe VÀO: trang mới mở với overlay che sẵn (opacity 1 tức thời) rồi tan. */
.cktrans.is-in { animation: cktransIn 0.42s ease-in 0.08s both; }
.cktrans.is-in .cktrans-crest { animation: cktransCrestOut 0.42s ease-in 0.08s both; }
@keyframes cktransIn {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes cktransCrestOut {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(1.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cktrans { display: none !important; } /* JS cũng tự skip — 2 lớp */
}