/**
 * Premium Curtain Wipe Page Transition Styles
 * Staggered vertical blocks animation
 */

.page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  opacity: 0;
}

.page-transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.transition-block {
  background: #0B0F19;
  will-change: transform;
  transform: scaleY(0);
}

/* Top row blocks - origin at top */
.transition-block.top-row {
  transform-origin: top;
}

/* Bottom row blocks - origin at bottom */
.transition-block.bottom-row {
  transform-origin: bottom;
}

/* Cover animation - blocks drop/rise to meet in middle */
.page-transition-overlay.cover .transition-block {
  animation: coverAnimation 900ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
  animation-delay: var(--delay);
}

/* Reveal animation - blocks retract */
.page-transition-overlay.reveal .transition-block {
  transform: scaleY(1); /* Start fully visible */
}

.page-transition-overlay.reveal .transition-block.top-row {
  transform-origin: bottom; /* flip origin for retraction */
  animation: revealAnimation 1000ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
  animation-delay: var(--delay);
}

.page-transition-overlay.reveal .transition-block.bottom-row {
  transform-origin: top; /* flip origin for retraction */
  animation: revealAnimation 1000ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
  animation-delay: var(--delay);
}

@keyframes coverAnimation {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes revealAnimation {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

/* Light mode support */
body.light-mode .transition-block {
  background: #1A1D29;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .page-transition-overlay,
  .transition-block {
    animation-duration: 100ms !important;
    transition-duration: 100ms !important;
  }
  
  .page-transition-overlay.cover .transition-block,
  .page-transition-overlay.reveal .transition-block {
    animation-duration: 100ms !important;
  }
}

/* Mobile optimization */
@media (max-width: 768px) {
  .page-transition-overlay {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Adjust stagger for fewer blocks on mobile */
  .transition-block:nth-child(n+6) {
    display: none;
  }
}