/* Keep the photograph still while longer expanded content can scroll. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(12, 9, 8, 0.72) 0%, rgba(12, 9, 8, 0.12) 30%, rgba(12, 9, 8, 0.12) 52%, rgba(12, 9, 8, 0.88) 100%),
    url('./assets/birthday-evening.jpg') center 55% / cover no-repeat;
}

@media (min-aspect-ratio: 4/3) {
  body::before { background-position: center, center 62%; }
}


/* Both pages share the same crop; only the shade changes. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: rgba(12, 9, 8, 0.65);
  opacity: 0;
}
.booking-page::after { opacity: 1; animation: shade-in 600ms ease-out both; }
.returning-booking body::after { animation: shade-out 600ms ease-out both; }
@keyframes shade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shade-out { from { opacity: 1; } to { opacity: 0; } }
.invitation, .booking-content { position: relative; z-index: 1; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 250ms; }
@media (prefers-reduced-motion: reduce) {
  .booking-page::after, .returning-booking body::after { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}