/* =====================================================================
   View Transitions API (Timeline ⇄ Thread Transitions)
   ===================================================================== */

/* Keep the site header fixed in place during page transitions */
header-chrome {
  view-transition-name: site-header;
}

@media (prefers-reduced-motion: no-preference) {

  ::view-transition-group(site-header) {
    animation: none;
  }

  /* Root page transition defaults (Fluid physics-based timing) */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 240ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
  }

  /* Forward navigation (Drilling down into a thread) */
  :root[data-nav-direction="forward"]::view-transition-old(root) {
    animation-name: vt-out-to-left;
  }
  :root[data-nav-direction="forward"]::view-transition-new(root) {
    animation-name: vt-in-from-right;
  }

  /* Back navigation (Returning up to timeline) */
  :root[data-nav-direction="back"]::view-transition-old(root) {
    animation-name: vt-out-to-right;
  }
  :root[data-nav-direction="back"]::view-transition-new(root) {
    animation-name: vt-in-from-left;
  }

  /* The morphing post card between timeline item and thread root */
  ::view-transition-group(thread-focus) {
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* Keyframes with subtle scale depth to give spatial awareness */
@keyframes vt-out-to-left {
  to {
    opacity: 0;
    transform: translateX(-32px) scale(0.985);
  }
}

@keyframes vt-in-from-right {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
}

@keyframes vt-out-to-right {
  to {
    opacity: 0;
    transform: translateX(32px) scale(0.985);
  }
}

@keyframes vt-in-from-left {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
}