/* ==========================================================================
   PAGE & CARD TRANSITIONS
   Buttery smooth page reveals, GSAP morph animation hooks, state transitions
   ========================================================================== */

.page-transition-wrapper {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-enter {
  opacity: 0;
  transform: translateY(12px);
}

.page-exit {
  opacity: 0;
  transform: translateY(-8px);
}

/* Stagger Animation Targets */
.stagger-item {
  opacity: 0;
  transform: translateY(16px);
}

/* Selected Brand Card Expanding Overlay */
.card-expanding-clone {
  position: fixed;
  z-index: 999;
  background-color: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Command Palette Animation */
.command-palette-modal {
  transform: scale(0.96) translateY(-10px);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
}

.modal-backdrop.open .command-palette-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Counter animation styling */
.counter-val {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}