/**
 * Hiệu ứng chuyển trang — "Rèm đôi & logo".
 *
 * Hai tấm rèm kem khép lại từ trên và dưới, logo Thịnh Thế Vinh Hoa sáng lên ở
 * chỗ hai rèm gặp nhau, rồi rèm lại mở ra ở trang kế tiếp.
 *
 * Nửa "đi tới" phải che kín màn hình TRƯỚC khi trình duyệt vẽ bất cứ thứ gì —
 * sớm hơn mọi đoạn script đặt ở cuối <body>. Một pseudo-element trên <html> lo
 * việc đó: đoạn mã nhỏ trong <head> chỉ thêm class, còn file này vẽ sẵn trạng
 * thái "rèm đang khép". page-transition.js sau đó tiếp quản và mở rèm ra.
 *
 * Màu để cứng (không dùng biến CSS) vì mỗi trang có bộ biến riêng — rèm phải
 * giống hệt nhau ở mọi trang thì nối hai nửa mới liền mạch.
 */

:root {
  --ttvh-pt-panel: linear-gradient(180deg, #fffdf7 0%, #fff1e1 100%);
  --ttvh-pt-panel-flip: linear-gradient(0deg, #fffdf7 0%, #fff1e1 100%);
  --ttvh-pt-ease: cubic-bezier(.33, 1, .68, 1);
}

/* Lớp che vẽ trước: giống hệt trạng thái khép của overlay, nên lúc bàn giao
   sang overlay thật mắt không nhận ra. */
html.ttvh-pt-arriving::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: var(--ttvh-pt-panel);
  pointer-events: none;
}

html.ttvh-pt-ready::before {
  display: none;
}

/* Overlay thật ------------------------------------------------------------ */
.ttvh-pt {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  visibility: hidden;
}

.ttvh-pt.is-live {
  visibility: visible;
}

.ttvh-pt-panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.6%;
  background: var(--ttvh-pt-panel);
  box-shadow: 0 0 40px rgba(120, 96, 48, .12);
}

.ttvh-pt-top {
  top: 0;
  transform: translateY(-101%);
}

.ttvh-pt-bottom {
  bottom: 0;
  background: var(--ttvh-pt-panel-flip);
  transform: translateY(101%);
}

/* Logo là ảnh vuông có nền riêng nên bo góc + đổ bóng cho khớp các ô logo
   dùng ở chỗ khác trong trang. */
.ttvh-pt-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: clamp(88px, 15vw, 152px);
  border-radius: clamp(16px, 2.2vw, 24px);
  box-shadow: 0 22px 50px -22px rgba(198, 147, 32, .6);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.92);
}

/* Trạng thái khép: đúng những gì overlay trông như thế ngay lúc trang mới tiếp quản. */
.ttvh-pt.is-closed .ttvh-pt-top,
.ttvh-pt.is-closed .ttvh-pt-bottom {
  transform: translateY(0);
}

.ttvh-pt.is-closed .ttvh-pt-mark {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Ai đã chọn giảm chuyển động thì không nhận hiệu ứng nào. */
@media (prefers-reduced-motion: reduce) {
  html.ttvh-pt-arriving::before {
    display: none;
  }

  .ttvh-pt {
    display: none;
  }
}