/* Motion between pages and tabs (view transitions). The header stays put while the page under it
   slides: in from the right when the tab clicked is right of the current one, in from the left when
   it is left of it (js/page-transition.js decides, and sets html[data-slide]). Any other link fades
   the page up. Tabs that swap a panel in place (js/components/slide.js) slide just that panel.
   Links to a spot on the same page scroll there smoothly. Reduced motion turns all of it off. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

@layer base {
  html { scroll-behavior: smooth; }
}

@layer components {
  /* A view-transition name makes each of these its own stacking layer; the header is lifted above the
     page so the Style menu hanging out of it stays on top and clickable. */
  .site-header { z-index: var(--z-header); view-transition-name: site-header; }
  #main { view-transition-name: page; }
  html[data-slide-panel] [data-tab-panel] { view-transition-name: tab-panel; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: var(--dur); }

  ::view-transition-group(page),
  ::view-transition-group(tab-panel) { animation-duration: var(--dur-slow); animation-timing-function: var(--ease); }

  /* Any link: fade out, rise in. */
  ::view-transition-old(page) { animation: var(--dur) ease-in both page-fade-out; }
  ::view-transition-new(page) { animation: var(--dur-slow) var(--ease) both page-rise-in; }

  /* Tabs: slide. */
  html[data-slide="forward"]::view-transition-old(page),
  html[data-slide-panel="forward"]::view-transition-old(tab-panel) { animation: var(--dur) ease-in both page-out-left; }
  html[data-slide="forward"]::view-transition-new(page),
  html[data-slide-panel="forward"]::view-transition-new(tab-panel) { animation: var(--dur-slow) var(--ease) both page-in-right; }
  html[data-slide="back"]::view-transition-old(page),
  html[data-slide-panel="back"]::view-transition-old(tab-panel) { animation: var(--dur) ease-in both page-out-right; }
  html[data-slide="back"]::view-transition-new(page),
  html[data-slide-panel="back"]::view-transition-new(tab-panel) { animation: var(--dur-slow) var(--ease) both page-in-left; }

  @keyframes page-fade-out { to { opacity: 0; } }
  @keyframes page-rise-in { from { opacity: 0; transform: translateY(14px); } }
  @keyframes page-out-left { to { opacity: 0; transform: translateX(-72px); } }
  @keyframes page-in-right { from { opacity: 0; transform: translateX(72px); } }
  @keyframes page-out-right { to { opacity: 0; transform: translateX(72px); } }
  @keyframes page-in-left { from { opacity: 0; transform: translateX(-72px); } }
}