/* ════════ PAGE TRANSITION — 오른쪽에서 들어와 왼쪽으로 빠지는 사선 와이프 ════════
   모든 페이지 공통. 검은 판(#pageTransition)의 상태는 <html>의 클래스로 정한다 (/home/transition.js):
     (클래스 없음)   화면을 덮고 있음 — 페이지가 처음 그려질 때의 기본 상태(깜빡임 방지)
     .pt-hidden      왼쪽 화면 밖으로 빠져나감 → 페이지가 드러남
     .pt-parked      오른쪽 화면 밖에서 대기(애니메이션 없이 순간 이동) — 다음 이동 때 여기서 들어옴
   판 크기는 220vw x 220vh(화면 기준 -60 ~ 160 범위)라서, 자기 너비의 100%만큼 옆으로 밀어야
   기울어진 모서리까지 완전히 화면 밖으로 나간다. */

#pageTransition {
    position: fixed;
    inset: -60vh -60vw;
    width: 220vw;
    height: 220vh;
    background: #0b0908;
    transform: translate3d(0, 0, 0) rotate(-9deg);
    transform-origin: center;
    z-index: 99999;
    pointer-events: none;
    will-change: transform;
    /* 속도 조절은 여기 1.05s 와 transition.js 의 DURATION 을 같이 바꾸면 됨 */
    transition: transform 1.05s cubic-bezier(0.5, 0, 0.3, 1);
}

/* 드러내기 — 왼쪽으로 빠져나가고, 다 나간 뒤에 숨김 */
html.pt-hidden #pageTransition {
    transform: translate3d(-100%, 0, 0) rotate(-9deg);
    visibility: hidden;
    transition: transform 1.05s cubic-bezier(0.5, 0, 0.3, 1), visibility 0s linear 1.05s;
}

/* 대기 — 오른쪽 화면 밖으로 순간 이동(안 보이는 상태라 티가 안 남) */
html.pt-parked #pageTransition {
    transform: translate3d(100%, 0, 0) rotate(-9deg);
    visibility: hidden;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    #pageTransition { transition: opacity 0.25s linear; transform: none !important; visibility: visible; }
    html.pt-hidden #pageTransition, html.pt-parked #pageTransition { opacity: 0; transition: opacity 0.25s linear; }
}