/* The page turn between a generation's tabs. Only generation pages load
   this file, and a turn needs it on both pages, so ordinary links never
   animate. The browser's own view transitions do the work, with no
   script; a browser without them simply opens the page. Kept under
   400 ms, and off when the reader asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .appbar { view-transition-name: appbar; }
  .folder-tabs { view-transition-name: folder-tabs; }
  .sheet { view-transition-name: dossier-sheet; }

  /* The old sheet lifts from its right edge and turns over to the left,
     showing the new one beneath, which settles up into place. */
  ::view-transition-group(dossier-sheet) { animation-duration: 0s; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  ::view-transition-old(dossier-sheet), ::view-transition-new(dossier-sheet) { mix-blend-mode: normal; }
  ::view-transition-old(dossier-sheet) {
    /* Turned about its left edge, level with the top of the screen the
       reader sees, so the near edge swings toward them. */
    z-index: 2; transform-origin: 0 40vh; backface-visibility: hidden;
    animation: sheet-turn 0.4s var(--ease-turn) both;
  }
  ::view-transition-new(dossier-sheet) { animation: sheet-settle 0.4s var(--ease-out) both; }
  ::view-transition-old(folder-tabs), ::view-transition-new(folder-tabs) { animation-duration: 0.2s; }

  /* Going back to an earlier tab, which dossier.js tells the browser, the
     new sheet turns back over onto the stack instead. */
  :root:active-view-transition-type(back) {
    &::view-transition-old(dossier-sheet) { z-index: 1; animation: sheet-sink 0.4s var(--ease-out) both; }
    &::view-transition-new(dossier-sheet) {
      z-index: 2; transform-origin: 0 40vh; backface-visibility: hidden;
      animation: sheet-turn 0.4s var(--ease-turn) reverse both;
    }
  }
}
@keyframes sheet-turn {
  0% { transform: perspective(1800px) rotateY(0); filter: drop-shadow(0 0 0 rgb(0 0 0 / 0)); }
  80% { opacity: 1; }
  100% { transform: perspective(1800px) rotateY(-90deg); filter: drop-shadow(24px 0 24px rgb(0 0 0 / 25%)); opacity: 0; }
}
@keyframes sheet-settle {
  0% { transform: translateY(8px) scale(0.99); filter: brightness(0.92); }
  100% { transform: none; filter: none; }
}
@keyframes sheet-sink {
  to { transform: translateY(8px) scale(0.99); filter: brightness(0.92); }
}