/* View transitions (transitions.js). Only active when the browser supports them and motion is not reduced: the
   script never starts a transition otherwise, so nothing here applies. */
:root { --vt-in: 260ms; --vt-out: 190ms; --vt-morph: 280ms; --vt-ease: cubic-bezier(.2, .8, .2, 1); }

/* The page itself swaps instantly; only the named parts move. */
html[data-vt]::view-transition-old(root), html[data-vt]::view-transition-new(root) { animation: none; }

/* Tabs: directional slide with a little depth */
::view-transition-group(fh-panel) { animation-duration: var(--vt-in); animation-timing-function: var(--vt-ease); }
::view-transition-old(fh-panel) { animation: var(--vt-out) ease-in both fh-vt-out-left; }
::view-transition-new(fh-panel) { animation: var(--vt-in) var(--vt-ease) both fh-vt-in-right; }
html[data-vt-dir=back]::view-transition-old(fh-panel) { animation-name: fh-vt-out-right; }
html[data-vt-dir=back]::view-transition-new(fh-panel) { animation-name: fh-vt-in-left; }
@keyframes fh-vt-out-left { to { opacity: 0; transform: translateX(-28px) scale(.985); } }
@keyframes fh-vt-out-right { to { opacity: 0; transform: translateX(28px) scale(.985); } }
@keyframes fh-vt-in-right { from { opacity: 0; transform: translateX(36px) scale(.985); } }
@keyframes fh-vt-in-left { from { opacity: 0; transform: translateX(-36px) scale(.985); } }

/* Chip -> sheet / viewer, card -> insight: the element morphs (size and position), contents cross-fade */
::view-transition-group(fh-sheet), ::view-transition-group(fh-insight) {
  animation-duration: var(--vt-morph); animation-timing-function: var(--vt-ease); border-radius: 14px; overflow: hidden; }
::view-transition-old(fh-sheet), ::view-transition-new(fh-sheet),
::view-transition-old(fh-insight), ::view-transition-new(fh-insight) { height: 100%; object-fit: cover; object-position: top; }
/* the small element fades out early, so its snapshot is never seen stretched; the destination fades in */
::view-transition-old(fh-sheet), ::view-transition-old(fh-insight) { animation: 110ms ease-out both fh-vt-out; }
::view-transition-new(fh-sheet), ::view-transition-new(fh-insight) { animation: var(--vt-morph) var(--vt-ease) both fh-vt-in; }
@keyframes fh-vt-out { to { opacity: 0; } }
@keyframes fh-vt-in { from { opacity: 0; } 35% { opacity: 1; } }
/* The sheet's backdrop fades with the page, not with the panel */
html[data-vt^=sheet]::view-transition-new(root) { animation: var(--vt-out) ease-out both fh-vt-fade-in; }
@keyframes fh-vt-fade-in { from { opacity: .4; } }

/* Highlights: each card can open its insight */
.hl-card[data-vt] { cursor: pointer; }
.hl-card[data-vt]:hover { border-color: var(--rapha-accent-line); }
.hl-go { align-self: flex-start; white-space: nowrap; min-height: 32px; }