/* ============================================
   VIEW TRANSITIONS
   Cinematic transitions between views
   ============================================ */

/* --- View Transition API Styles --- */

/* Default cross-fade for all transitions */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: var(--ease-in-out-quart);
}

/* Old view fades out and slightly scales down */
::view-transition-old(root) {
  animation-name: fadeScaleOut;
}

/* New view fades in and slightly scales up from smaller */
::view-transition-new(root) {
  animation-name: fadeScaleIn;
}

@keyframes fadeScaleOut {
  from {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
  to {
    opacity: 0;
    transform: scale(0.97);
    filter: brightness(0.5);
  }
}

@keyframes fadeScaleIn {
  from {
    opacity: 0;
    transform: scale(1.03);
    filter: brightness(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}

/* --- Fallback for browsers without View Transitions --- */
#app {
  transition: opacity 0.15s var(--ease-gentle);
}

/* --- Stagger animation for cards entering a room --- */
@keyframes revealFromDark {
  from {
    opacity: 0;
    filter: brightness(0);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    filter: brightness(1);
    transform: translateY(0);
  }
}