/* Staggered sequence */
.sequence-item {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal 400ms ease-out forwards;
}

.sequence-item:nth-child(1) { animation-delay: 0ms; }
.sequence-item:nth-child(2) { animation-delay: 80ms; }
.sequence-item:nth-child(3) { animation-delay: 160ms; }
.sequence-item:nth-child(4) { animation-delay: 240ms; }

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page transition choreography */
.page-exit {
  animation: page-out 250ms ease-in forwards;
}

.page-enter {
  animation: page-in 300ms ease-out 200ms forwards;
}

@keyframes page-out {
  to { opacity: 0; transform: translateX(-30px); }
}

@keyframes page-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

// Calculate stagger delays
const items = document.querySelectorAll('.sequence-item');
const totalDuration = 600; // ms
const overlap = 0.4; // 40% overlap

items.forEach((item, index) => {
  const stepDuration = totalDuration / items.length;
  const delay = index * stepDuration * (1 - overlap);
  item.style.animationDelay = `${delay}ms`;
});