/* ============================================
   PAGE TRANSITION — Block Grid Effect
   Inspired by nico-palmer
   ============================================ */

.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 999999;
}

.page-transition .pt-row {
  flex: 1;
  width: 100%;
  display: flex;
}

.page-transition .pt-block {
  position: relative;
  flex: 1;
  background: var(--color-bg, #ffffff);
  margin: -0.5px;
  will-change: transform;
}

/* ENTERING a new page: blocks start covering the screen, then reveal (scaleY 1 → 0) */
.page-transition.transition-in .pt-block {
  transform-origin: top;
  transform: scaleY(1);
  animation: pt-reveal 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* LEAVING a page: blocks grow to cover the screen (scaleY 0 → 1) */
.page-transition.transition-out .pt-block {
  transform-origin: bottom;
  transform: scaleY(0);
  animation: pt-cover 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes pt-reveal {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0); }
}

@keyframes pt-cover {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}