/* Home<->Details "magic move" transition. Linked ONLY by index.html and
   details.html — deliberately NOT by rsvp.html, whose clover card/content
   are named differently (rsvp-card/rsvp-content in its own <style> block)
   and must stay unaffected by this file.

   The pill card is named identically on both pages (view-transition-name:
   pill-card, set in styles.css), so the browser morphs its size/position
   by default — no custom transform needed for that part. This file only
   times the pieces: the content is pulled into its own named group so it
   can fade out quickly, then fade back in only once the shape has mostly
   finished resizing, instead of crossfading old/new text mid-resize. */

::view-transition-group(pill-card){
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

::view-transition-old(page-content){
  animation: page-content-out .16s ease-in both;
}
::view-transition-new(page-content){
  animation: page-content-in .3s ease-out .34s both;
}

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