/* 跨頁斜切色幕：實色遮罩與原始 PNG Logo，不影響頁面排版。 */
html.is-page-leaving::before,
html.is-page-entering::before {
  content: '';
  position: fixed;
  z-index: 2147483646;
  inset: 0 auto 0 -20vw;
  width: 140vw;
  height: 100vh;
  height: 100dvh;
  background: #eee7f1;
  clip-path: polygon(12% 0,100% 0,88% 100%,0 100%);
  pointer-events: auto;
  will-change: transform;
}
html.is-page-leaving::after,
html.is-page-entering::after {
  content: '';
  position: fixed;
  z-index: 2147483647;
  left: 50%;
  top: 50%;
  width: clamp(190px,22vw,280px);
  aspect-ratio: 337 / 93;
  transform: translate(-50%,-50%);
  background: #b69a6d;
  -webkit-mask: url('../images/logo.png') center / contain no-repeat;
  mask: url('../images/logo.png') center / contain no-repeat;
  pointer-events: none;
}
html.is-page-leaving::before { animation: pageCurtainIn .24s cubic-bezier(.65,0,.35,1) both; }
html.is-page-leaving::after { animation: pageLogoIn .24s ease both; }
html.is-page-entering.is-page-revealing::before { animation: pageCurtainOut .28s cubic-bezier(.65,0,.35,1) both; }
html.is-page-entering.is-page-revealing::after { animation: pageLogoOut .18s ease both; }
@keyframes pageCurtainIn { from { transform: translateX(110%); } to { transform: translateX(0); } }
@keyframes pageCurtainOut { from { transform: translateX(0); } to { transform: translateX(-110%); } }
@keyframes pageLogoIn { 0%,40% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pageLogoOut { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion:reduce) {
  html.is-page-leaving::before, html.is-page-leaving::after,
  html.is-page-entering::before, html.is-page-entering::after { display: none; animation: none; }
}