/* Site-wide motion, driven by site.js. Everything here either sits behind prefers-reduced-motion or
   only styles classes that site.js adds, so with reduced motion, without JavaScript, or in print,
   every page renders exactly as it does still. */

@media (prefers-reduced-motion: no-preference) {
  /* Pages crossfade into each other, the header stays put, and a series or episode picture flies
     from its card into the hero of the page it opens (see view-transition-name in the templates). */
  @view-transition { navigation: auto; }
  .header { view-transition-name: site-header; }
  ::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  /* Keep the browser's own crossfade for the page: its two halves always add up to fully opaque, so
     nothing behind the pages (white) shows through mid-fade. Only the timing is ours. */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: ease; }
  /* The header does not fade at all: it shows the new page's header from the first frame. */
  ::view-transition-old(site-header) { display: none; }
  ::view-transition-new(site-header) { animation: none; }
}

/* Card entrances. The individual translate property leaves transform free for anything else on the
   card; site.js removes these classes once the entrance has finished. */
.reveal { opacity: 0; translate: 0 24px; transition: opacity .6s ease, translate .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-in { opacity: 1; translate: none; }

.friend-live { transform-origin: 50% 90%; cursor: pointer; }

@media print {
  .reveal { opacity: 1 !important; translate: none !important; }
}