/*
[FILE]
c:/dolcu/hub/main/modules/hub_transition/hub_transition.css

[ROLE]
허브 페이지 전환 애니메이션 CSS
- 중앙에서 좌/우로 열리는 수직 미닫이문
- 문틈으로 기존 페이지 노출 차단
*/

/* ===============================
   기본 레이어 (문 뒤 배경)
=============================== */
.hub-transition-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;

  pointer-events: none;

  /* ⭐ 핵심: 문 뒤를 중립 배경으로 덮음 */
  background: #f4f5f7;
}

/* 기본 숨김 */
.hub-transition-layer.hidden {
  display: none;
}

/* 활성 상태 */
.hub-transition-layer.is-active {
  pointer-events: auto;
}

/* ===============================
   전환 스크린
=============================== */
.hub-transition-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ===============================
   좌 / 우 미닫이 문
=============================== */
.hub-transition-screen::before,
.hub-transition-screen::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;

  background: #ffffff;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.12);
}

/* 왼쪽 문 */
.hub-transition-screen::before {
  left: 0;
  transform: translateX(0);
}

/* 오른쪽 문 */
.hub-transition-screen::after {
  right: 0;
  transform: translateX(0);
}

/* ===============================
   애니메이션
=============================== */
.hub-transition-layer.animate .hub-transition-screen::before {
  animation: slideDoorLeft 1.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.hub-transition-layer.animate .hub-transition-screen::after {
  animation: slideDoorRight 1.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes slideDoorLeft {
  to {
    transform: translateX(-100%);
  }
}

@keyframes slideDoorRight {
  to {
    transform: translateX(100%);
  }
}