/* Motion (Site Options → Motion = Subtle / Expressive). Loaded only when Motion is on; driven by js/ct-motion.js.
   Start states apply only under html.cc-motion-ready, which the script adds: without it every element shows as normal.
   Only transform (the scale / translate properties) and opacity move, so nothing shifts the layout. */

/* Buttons: a calmer, decelerating hover. */
@media (prefers-reduced-motion: no-preference) {
	body.cc-motion-subtle a.button, body.cc-motion-subtle button.button,
	body.cc-motion-expressive a.button, body.cc-motion-expressive button.button {
		transition: background-color .3s cubic-bezier(.22,1,.36,1), color .3s cubic-bezier(.22,1,.36,1), border-color .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1), filter .3s cubic-bezier(.22,1,.36,1), translate .3s cubic-bezier(.22,1,.36,1);
	}
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	body.cc-motion-expressive a.button:hover, body.cc-motion-expressive button.button:hover { translate: 0 -2px; }
}

/* Hover (Motion on): a linked or carded photo zooms a little inside its frame; a card's title link draws an underline. */
@media (prefers-reduced-motion: no-preference) {
	.cc-motion-ready [data-ccm="img"] { transition: scale .9s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.cc-motion-ready *:is(a, .panel):is(:hover, :focus-within) [data-ccm="img"].ccm-in { scale: 1.05; }
	.cc-motion-ready .cc-motion-expressive *:is(a, .panel):is(:hover, :focus-within) [data-ccm-drift].ccm-in { scale: 1.13; }
}
body.cc-motion-subtle .panel *:is(h2, h3).titles a, body.cc-motion-expressive .panel *:is(h2, h3).titles a {
	background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
}
body.cc-motion-subtle .panel:is(:hover, :focus-within) *:is(h2, h3).titles a, body.cc-motion-expressive .panel:is(:hover, :focus-within) *:is(h2, h3).titles a { background-size: 100% 1px; }
@media (prefers-reduced-motion: no-preference) {
	body.cc-motion-subtle .panel *:is(h2, h3).titles a, body.cc-motion-expressive .panel *:is(h2, h3).titles a { transition: background-size .5s cubic-bezier(.22,1,.36,1); }
}

/* Start states (the script animates from these, once per element). */
@media (prefers-reduced-motion: no-preference) {
	.cc-motion-ready [data-ccm]:not(.ccm-in):not([data-ccm="img"]):not([data-ccm="split"]) { opacity: 0; }
	.cc-motion-ready [data-ccm="split"]:not(.ccm-in) { opacity: 0; }
	.cc-motion-ready [data-ccm="img"]:not(.ccm-in) { scale: 1.08; }
	.cc-motion-ready .cc-motion-expressive [data-ccm="img"]:not(.ccm-in) { scale: 1.14; }
	/* Expressive: photos big enough to drift rest slightly enlarged so the drift never shows an edge. */
	.cc-motion-ready .cc-motion-expressive [data-ccm-drift] { scale: 1.09; }
}

/* The frame that crops a moving photo isolates, so its rounded corners keep clipping mid-animation. */
.cc-motion-ready [data-ccm-frame] { isolation: isolate; }

/* Split titles: words are inline-blocks (they must be to move); Expressive clips each word for the masked rise. */
.ccm-w { display: inline-block; }
.cc-motion-expressive .ccm-w { clip-path: inset(-.25em -.2em -.3em -.2em); }
.ccm-wi { display: inline-block; }