/* Progressive cross-document transitions: native links, history and opening
   new tabs keep their usual behavior. No navigation interception or delay.
   https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root) {
    animation: event-page-out 180ms ease-out both;
  }
  ::view-transition-new(root) {
    animation: event-page-in 280ms cubic-bezier(.2, .7, .3, 1) both;
  }
  ::view-transition-group(root) { animation-duration: 280ms; }

  /* Also runs when details arrive asynchronously, and in browsers without
     cross-document transitions. Backwards fill releases transforms at rest. */
  .event-page .det-artwork,
  .event-page .det-overview {
    animation: event-content-in 360ms cubic-bezier(.2, .7, .3, 1) backwards;
  }
  .event-page .det-overview { animation-delay: 45ms; }

  .events-section .card-image,
  .featured-card-media > img:not(.poster-backdrop),
  .det-rel-card {
    transition: transform 160ms ease-out, opacity 160ms ease-out;
  }
  .events-section .card-image-container:active:not(:has(button:active)) .card-image,
  .events-section .card:has(.btn-card-action:active) .card-image,
  .featured-card-media-link:active .featured-card-media > img:not(.poster-backdrop),
  .det-rel-card:active {
    transform: scale(.985);
    opacity: .9;
  }
}

@keyframes event-page-out { to { opacity: 0; } }
@keyframes event-page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes event-content-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(root) { animation: none; }
  .event-page .det-artwork,
  .event-page .det-overview { animation: none; }
}