/* Caldiors page transitions — cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+). */
@view-transition { navigation: auto; }

::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(.22, .8, .18, 1); }

/* page behind: soft fade + gentle depth */
::view-transition-old(root) { animation: vt-page-out .42s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-page-in .6s cubic-bezier(.2, .8, .2, 1) .12s both; }
@keyframes vt-page-out { to { opacity: 0; transform: scale(.985); filter: blur(2px); } }
@keyframes vt-page-in { from { opacity: 0; transform: translateY(14px); } }

/* shared elements: guide image → cover, title → headline, "See all" tag → journal hero */
::view-transition-group(guide-cover),
::view-transition-group(journal-panel) { animation-duration: .78s; z-index: 10; }
::view-transition-old(guide-cover), ::view-transition-new(guide-cover) { height: 100%; object-fit: cover; overflow: clip; }
::view-transition-group(guide-title) { animation-duration: .7s; }
::view-transition-old(guide-title) { animation: vt-fade-out .25s ease both; }
::view-transition-new(guide-title) { animation: vt-fade-in .45s ease .25s both; }
::view-transition-old(journal-panel) { animation: vt-fade-out .35s ease both; }
::view-transition-new(journal-panel) { animation: vt-fade-in .5s ease .2s both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }

/* destination names (static) */
.ah-cover .cover-img { view-transition-name: guide-cover; }
#article-title { view-transition-name: guide-title; }
.jr-hero-panel { view-transition-name: journal-panel; }

/* when arriving through a transition, skip the page's own reveal animations on shared elements */
html.vt-in .ah-cover .cover-img, html.vt-in .ah-cover .cover-img img,
html.vt-in #article-title, html.vt-in #article-title *,
html.vt-in .jr-hero-panel, html.vt-in .jr-hero-panel * { animation: none !important; clip-path: none !important; scale: 1 !important; opacity: 1 !important; transform: none; }

/* fallback for browsers without cross-document transitions */
.pt-fade { position: fixed; inset: 0; z-index: 3000; background: #fbfaf7; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.pt-fade.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}