.kt-pageTransition {
  /*
    Cloud Page Transition v2
    - 2 lớp "đám mây" che phủ 120vw x 120vh để không lộ mép ở mọi viewport
    - Ưu tiên GPU: transform/opacity + will-change
    - Có layer depth: scrim gradient + backdrop-filter (fallback an toàn)
  */
  --kt-cloud-opacity: 0.97;
  --kt-scrim-opacity: 0.36;
  --kt-ease-open: cubic-bezier(0.4, 0, 0.2, 1);
  --kt-ease-close: cubic-bezier(0.22, 1, 0.36, 1);
  --kt-ease: var(--kt-ease-open);
  --kt-close-ms: 420ms;
  --kt-open-ms: 1000ms;
  --kt-left-delay: 0ms;
  --kt-right-delay: 35ms;
  --kt-open-fade-ms: 400ms;
  --kt-cloud-scale-open: 1.1;
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint size style;
}

html.kt-transition-pending body {
  visibility: hidden;
}

.kt-pageTransition__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(78% 62% at 50% 22%, rgba(255, 255, 255, 0.66), transparent 62%),
    radial-gradient(95% 78% at 50% 62%, rgba(208, 239, 242, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(2, 35, 41, 0.18), rgba(255, 255, 255, 0.38));
  backdrop-filter: blur(14px) saturate(152%);
  -webkit-backdrop-filter: blur(14px) saturate(152%);
  opacity: 0;
  will-change: opacity;
}

.kt-pageTransition__cloud {
  position: absolute;
  top: 50%;
  width: 230vw;
  height: 230vh;
  opacity: var(--kt-cloud-opacity);
  will-change: transform, opacity;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(65% 55% at 58% 42%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 68%),
    radial-gradient(58% 48% at 35% 56%, rgba(232, 249, 250, 0.86), rgba(232, 249, 250, 0) 70%),
    radial-gradient(78% 72% at 52% 55%, rgba(7, 28, 33, 0.34), rgba(7, 28, 33, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(210, 241, 244, 0.66));
  background-color: rgba(236, 250, 252, 0.94);
  backdrop-filter: blur(22px) saturate(158%);
  -webkit-backdrop-filter: blur(22px) saturate(158%);
  transform: translate3d(0, -50%, 0);
}

.kt-pageTransition__cloud::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: radial-gradient(58% 46% at 42% 44%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 72%),
    radial-gradient(54% 44% at 62% 58%, rgba(218, 244, 246, 0.78), rgba(218, 244, 246, 0) 74%),
    radial-gradient(72% 68% at 56% 52%, rgba(6, 20, 24, 0.22), rgba(6, 20, 24, 0) 76%);
  filter: blur(34px);
  opacity: 0.85;
  mix-blend-mode: screen;
  transform: translate3d(0, 0, 0);
}

.kt-pageTransition__cloud::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: repeating-radial-gradient(circle at 15% 22%, rgba(255, 255, 255, 0.085) 0 10px, rgba(255, 255, 255, 0) 10px 26px),
    repeating-radial-gradient(circle at 72% 58%, rgba(10, 30, 34, 0.05) 0 12px, rgba(10, 30, 34, 0) 12px 30px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(10, 30, 34, 0.05));
  filter: blur(18px);
  opacity: 0.9;
  mix-blend-mode: overlay;
  transform: translate3d(0, 0, 0);
}

.kt-pageTransition__cloud--left {
  left: 0;
  transform: translate3d(var(--kt-left-x, -100%), -50%, 0) scale(var(--kt-cloud-scale, 1)) rotate(-2deg);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 74%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 74%, transparent 100%);
}

.kt-pageTransition__cloud--right {
  right: 0;
  transform: translate3d(var(--kt-right-x, 100%), -50%, 0) scale(var(--kt-cloud-scale, 1)) rotate(-2deg);
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 74%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, #000 74%, transparent 100%);
}

/*
  Transition wiring:
  - JS set data-phase="closing|opening" trên overlay
  - JS thay đổi --kt-left-x/--kt-right-x và opacity để chạy transition
*/
.kt-pageTransition__scrim {
  transition: opacity var(--kt-close-ms) var(--kt-ease);
}

.kt-pageTransition__cloud {
  transition-property: transform, opacity;
  transition-timing-function: var(--kt-ease-open);
  opacity: var(--kt-cloud-opacity);
}

.kt-pageTransition[data-phase="closing-start"] .kt-pageTransition__cloud {
  opacity: 0;
  transition: none;
  animation: none;
}

.kt-pageTransition[data-phase="closing"] .kt-pageTransition__scrim {
  transition-duration: var(--kt-close-ms);
  transition-timing-function: var(--kt-ease-close);
  transition-delay: 0ms;
  opacity: var(--kt-scrim-opacity);
}

.kt-pageTransition[data-phase="closing"] .kt-pageTransition__cloud {
  transition-property: transform;
  transition-timing-function: var(--kt-ease-close);
  animation-name: kt-cloud-close-fade-in;
  animation-duration: var(--kt-close-ms);
  animation-timing-function: var(--kt-ease-close);
  animation-fill-mode: both;
}

.kt-pageTransition[data-phase="closing"][data-resume="1"] .kt-pageTransition__cloud {
  animation: none;
}

.kt-pageTransition[data-phase="closing"] .kt-pageTransition__cloud--left {
  transition-duration: var(--kt-close-ms);
  transition-delay: var(--kt-left-delay);
  animation-delay: var(--kt-left-delay);
}

.kt-pageTransition[data-phase="closing"] .kt-pageTransition__cloud--right {
  transition-duration: var(--kt-close-ms);
  transition-delay: var(--kt-right-delay);
  animation-delay: var(--kt-right-delay);
}

.kt-pageTransition[data-phase="opening"] .kt-pageTransition__scrim {
  transition-duration: var(--kt-open-ms);
  transition-timing-function: var(--kt-ease-open);
  transition-delay: 0ms;
  opacity: var(--kt-scrim-opacity);
}

.kt-pageTransition[data-phase="opening"] .kt-pageTransition__cloud--left,
.kt-pageTransition[data-phase="opening"] .kt-pageTransition__cloud--right {
  transition-duration: var(--kt-open-ms);
  transition-timing-function: var(--kt-ease-open);
  transition-delay: 0ms;
}

.kt-pageTransition[data-phase="opening"] .kt-pageTransition__cloud {
  opacity: 1;
}

.kt-pageTransition[data-phase="opening"][data-fade="1"] .kt-pageTransition__cloud {
  transition-duration: var(--kt-open-fade-ms);
  transition-delay: 0ms;
  opacity: 0;
}

.kt-pageTransition[data-phase="opening"][data-fade="1"] .kt-pageTransition__scrim {
  transition-duration: var(--kt-open-fade-ms);
  transition-delay: 0ms;
  opacity: 0;
}

@keyframes kt-cloud-close-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: var(--kt-cloud-opacity);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kt-pageTransition {
    display: none !important;
  }
}