/**
 * Khả Văn — Chuyển cảnh trang public (film / slide)
 */
:root {
  --kv-pt-duration: 0.72s;
  --kv-pt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kv-pt-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: kv-pt-vt-out var(--kv-pt-duration) var(--kv-pt-ease) both;
  z-index: 1;
}

::view-transition-new(root) {
  animation: kv-pt-vt-in calc(var(--kv-pt-duration) + 0.1s) var(--kv-pt-ease-out) both;
  z-index: 2;
}

@keyframes kv-pt-vt-out {
  from { opacity: 1; transform: none; filter: blur(0); }
  to { opacity: 0; transform: translate3d(-28px, -10px, 0) scale(0.982); filter: blur(8px); }
}

@keyframes kv-pt-vt-in {
  from { opacity: 0; transform: translate3d(36px, 14px, 0) scale(1.014); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

.kv-pt-curtain {
  position: fixed;
  inset: 0;
  z-index: 99990;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    linear-gradient(118deg, rgba(0, 61, 34, 0.94) 0%, rgba(11, 110, 62, 0.82) 46%, rgba(255, 198, 23, 0.28) 100%);
  backdrop-filter: blur(0);
  transition:
    opacity var(--kv-pt-duration) var(--kv-pt-ease),
    visibility var(--kv-pt-duration),
    backdrop-filter var(--kv-pt-duration) var(--kv-pt-ease);
}

.kv-pt-curtain::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.95s var(--kv-pt-ease), opacity 0.5s ease;
}

html.kv-pt-enter .kv-pt-curtain,
html.kv-pt-leave .kv-pt-curtain {
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(12px);
}

html.kv-pt-leave .kv-pt-curtain {
  pointer-events: all;
}

html.kv-pt-enter .kv-pt-curtain::after,
html.kv-pt-leave .kv-pt-curtain::after {
  opacity: 1;
  transform: translate3d(100%, 0, 0);
}

html.kv-pt-ready .kv-pt-curtain {
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(0);
  transition-delay: 0.08s;
}

html.kv-pt-boot body,
html.kv-pt-enter body {
  opacity: 0;
  transform: translate3d(32px, 18px, 0) scale(1.01);
  filter: blur(8px);
}

html.kv-pt-ready body {
  opacity: 1;
  transform: none;
  /* Phải là `none` (không phải blur(0)) — filter khác none tạo containing block,
     làm position:fixed (Agentation, FAB...) dính theo chiều cao document thay vì viewport. */
  filter: none;
  transition:
    opacity calc(var(--kv-pt-duration) + 0.14s) var(--kv-pt-ease-out),
    transform calc(var(--kv-pt-duration) + 0.14s) var(--kv-pt-ease-out),
    filter calc(var(--kv-pt-duration) + 0.08s) var(--kv-pt-ease-out);
}

html.kv-pt-leave body {
  opacity: 0;
  transform: translate3d(-26px, -14px, 0) scale(0.986);
  filter: blur(7px);
  transition:
    opacity var(--kv-pt-duration) var(--kv-pt-ease),
    transform var(--kv-pt-duration) var(--kv-pt-ease),
    filter calc(var(--kv-pt-duration) - 0.08s) var(--kv-pt-ease);
}

html.kv-pt-leave .kv-site-header,
html.kv-pt-leave .kvx-header,
html.kv-pt-leave .kv-footer,
html.kv-pt-leave .kvx-footer {
  transition: opacity 0.38s ease, transform 0.5s var(--kv-pt-ease);
  opacity: 0;
  transform: translate3d(0, -10px, 0);
}

.kv-pt-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 99991;
  background: linear-gradient(90deg, #ffc617, #0b6e3e);
  box-shadow: 0 0 14px rgba(255, 198, 23, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

html.kv-pt-leave .kv-pt-progress {
  opacity: 1;
  animation: kv-pt-progress 0.9s var(--kv-pt-ease-out) forwards;
}

@keyframes kv-pt-progress {
  from { width: 0; }
  to { width: 78%; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }

  html.kv-pt-boot body,
  html.kv-pt-enter body,
  html.kv-pt-leave body {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .kv-pt-curtain,
  .kv-pt-progress { display: none !important; }
}