/* Chuyển cảnh giữa các trang: "màn sương" quét lên.
   Rời trang: tấm màn tối ngả rượu vang có sương và mép hồng đỏ trượt từ dưới
   lên che trang cũ. Tới trang mới: tấm màn đang che sẵn rồi trượt tiếp lên
   trên, để lộ trang mới — hai nửa nối thành một cú quét liền mạch.
   Điều khiển bởi static/transition.js (class .pt-leave / .pt-enter trên <html>).
   Tự chứa màu, không dựa vào biến của site.css, vì các trang tài khoản
   (pages.shell) cũng dùng file này. */

html.pt-leave::before,
html.pt-enter::before{
  content:""; position:fixed; inset:0; z-index:120; pointer-events:none;
  background:
    url("/static/fog.webp") center 115%/150% 55% no-repeat,
    radial-gradient(ellipse 120% 80% at 50% 100%, #3a1320 0%, #1a080e 55%, #0b0507 100%);
}
html.pt-leave::before{
  border-top:4px solid #ff4d6d; box-shadow:0 -24px 80px rgba(255,77,109,.35);
  animation:pt-cover .55s cubic-bezier(.7,0,.3,1) both;
}
html.pt-enter::before{
  border-bottom:4px solid #ff4d6d; box-shadow:0 24px 80px rgba(255,77,109,.35);
  animation:pt-uncover .8s cubic-bezier(.7,0,.3,1) .18s both;
}

/* Tên thương hiệu hiện giữa màn khi đang chuyển. */
html.pt-leave::after,
html.pt-enter::after{
  content:"Video \0110\00E8  Tem"; position:fixed; left:0; right:0; top:50%; z-index:121;
  pointer-events:none; text-align:center; text-transform:uppercase; color:#f6c3ce;
  font:400 clamp(44px,8vw,120px)/1 "Anton",Impact,"Arial Narrow",sans-serif;
  transform:translateY(-50%);
}
html.pt-leave::after{animation:pt-word-in .55s ease both}
html.pt-enter::after{animation:pt-word-out .55s ease both}

/* Trang cũ lùi nhẹ và mờ đi phía sau tấm màn. */
html.pt-leave body{filter:blur(4px); opacity:.6; transition:filter .5s ease, opacity .5s ease}

@keyframes pt-cover{from{transform:translateY(102%)}to{transform:translateY(0)}}
@keyframes pt-uncover{from{transform:translateY(0)}to{transform:translateY(-104%)}}
@keyframes pt-word-in{0%,35%{opacity:0; filter:blur(12px); letter-spacing:.25em}100%{opacity:1; filter:blur(0); letter-spacing:0}}
@keyframes pt-word-out{0%{opacity:1; filter:blur(0)}100%{opacity:0; filter:blur(10px); transform:translateY(-120%)}}

@media (prefers-reduced-motion:reduce){
  html.pt-leave::before,html.pt-enter::before,
  html.pt-leave::after,html.pt-enter::after{display:none}
  html.pt-leave body{filter:none; opacity:1}
}