/* Page-to-page transitions (View Transitions API).
   - Same-document: htmx swaps into #page-root with `transition:true`.
   - Cross-document: full loads between pages that link this sheet (learn/home
     course cards -> course page -> /practice) via @view-transition.
   A clicked course card gets the same view-transition-names as the course
   page hero (course_card_transition.js), so its banner, icon and title morph
   into the header. Browsers without the API fall back to a plain navigation. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
	animation: tt-vt-root-out 0.26s cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(root) {
	animation: tt-vt-root-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes tt-vt-root-out {
	to { opacity: 0; transform: scale(0.985); }
}
@keyframes tt-vt-root-in {
	from { opacity: 0; transform: translateY(16px); }
}

/* Course page hero: the targets the card elements morph into. */
.course-modern-page #course-header-section { view-transition-name: course-hero; }
.course-modern-page .course-icon-container { view-transition-name: course-icon; }
.course-modern-page .course-main-title { view-transition-name: course-title; }

::view-transition-group(course-hero),
::view-transition-group(course-icon),
::view-transition-group(course-title) {
	animation-duration: 0.55s;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(course-hero),
::view-transition-new(course-hero) {
	height: 100%;
	object-fit: cover;
}
::view-transition-old(course-icon),
::view-transition-new(course-icon) {
	height: 100%;
	object-fit: contain;
}
::view-transition-old(course-title),
::view-transition-new(course-title) {
	height: 100%;
	object-fit: contain;
	object-position: left center;
}
/* The hero's own entrance animation would fight the morph (and be captured
   mid-flight); skip it when the page arrived through a view transition. */
html.tt-vt-arrived .course-header-content { animation: none; }

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation-duration: 0.01ms !important;
	}
}