/**
 * Mild motion (docs/design.md §6): hover and press, reveal on scroll, and the
 * crossfade between pages.
 */

/*
 * Hover and press: only with a mouse (no lift left behind after a tap) and
 * not under reduced motion; colour changes stay for everyone. Before the
 * reveal rules, so a card still revealing finishes its reveal first.
 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	.button:hover {
		transform: translateY(-1px);
	}

	.button:active {
		transform: none;
		transition-duration: 50ms;
	}

	.course-card:hover,
	.post-card:hover {
		transform: translateY(-2px);
	}

	.link-arrow .icon,
	.course-card__more .icon {
		transition: transform var(--duration-fast) var(--ease);
	}

	.link-arrow:hover .icon,
	.course-card:hover .course-card__more .icon {
		transform: translateX(3px);
	}
}

/**
 * Reveal on scroll (assets/js/motion.js): an element below the screen waits
 * a little lower and transparent, then settles into place once, when it
 * scrolls into view. The script removes both classes when it is done, so
 * the element's own transitions (hover) are untouched afterwards.
 */

/* Waiting: hidden at once (no transition, so nothing fades out). */
.reveal {
	opacity: 0;
	transform: translateY(var(--reveal-distance));
}

/* Revealed: the transition belongs to this state, so only showing moves. */
.reveal.is-revealed {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--duration-slow) var(--ease-out),
		transform var(--duration-slow) var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}

/*
 * Between pages (view transitions; Chrome, Edge, Safari 18.2+; elsewhere the
 * page simply changes): the content crossfades softly while the header stays
 * still. Not under reduced motion.
 */
@media (prefers-reduced-motion: no-preference) {

	@view-transition {
		navigation: auto;
	}

	.site-header {
		view-transition-name: site-header;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: var(--duration-base);
		animation-timing-function: var(--ease);
	}
}