/*
 * By Calie: motion.
 * Classes are added by the Motion panel (bc-m bc-m--name) and played by motion.js.
 * Everything here is switched off for reduced motion, and when Motion is set to Off.
 */

.bc-w, .bc-wi { display: inline-block; }
.bc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Hold text that will be split until motion.js has split it. Fails safe after 2.5s. */
.bc-js .bc-m--focus:not(.is-split),
.bc-js .bc-m--word:not(.is-split),
.bc-js .bc-m--sweep:not(.is-split) {
	visibility: hidden;
	animation: bc-failsafe 0s 2.5s forwards;
}
@keyframes bc-failsafe { to { visibility: visible; } }

/* Focus only */
.bc-m--focus.is-split .bc-w {
	animation: bc-focus 1.5s ease both;
	animation-delay: calc(var(--bc-d, 0s) + var(--i, 0) * .09s);
}
@keyframes bc-focus { from { opacity: 0; filter: blur(16px); } to { opacity: 1; filter: blur(0); } }

/* Word by word, and the first half of Highlight sweep */
.bc-m--word .bc-w, .bc-m--sweep .bc-w { overflow: hidden; padding: .06em .04em .14em; margin: -.06em -.04em -.14em; vertical-align: top; }
.bc-m--word.is-split .bc-wi, .bc-m--sweep.is-split .bc-wi {
	animation: bc-rise 1.2s var(--bc-out) both;
	animation-delay: calc(var(--bc-d, 0s) + var(--i, 0) * .07s);
}
@keyframes bc-rise { from { transform: translateY(110%); filter: blur(8px); } to { transform: none; filter: blur(0); } }

/* Letter spacing settles */
.bc-m--track { animation: bc-track 1.8s var(--bc-out) both; animation-delay: var(--bc-d, 0s); }
@keyframes bc-track { from { letter-spacing: .12em; opacity: 0; filter: blur(6px); } }

/* Mask wipe */
.bc-m--wipe { width: fit-content; max-width: 100%; animation: bc-wipe 1.3s var(--bc-io) both; animation-delay: var(--bc-d, 0s); }
@keyframes bc-wipe { from { clip-path: inset(-.1em 100% -.2em 0); transform: translateX(-.25em); } to { clip-path: inset(-.1em -.1em -.2em 0); transform: none; } }

/* Highlight sweep: the band sweeps behind highlighted text, or the last word */
.bc-m--sweep .is-key { overflow: visible; }
.bc-m--sweep .is-key .bc-wi {
	padding: 0 .1em;
	margin: 0 -.1em;
	border-radius: .12em;
	background: linear-gradient(var(--bc-accent), var(--bc-accent)) no-repeat 0 62% / 0% 86%;
}
.bc-m--sweep .is-key mark, .bc-m--sweep .is-key em { font-style: normal; color: inherit !important; background: none !important; }
.bc-m--sweep.is-split .is-key .bc-wi {
	animation: bc-rise 1.2s var(--bc-out) both, bc-sweep .9s var(--bc-io) both;
	animation-delay: calc(var(--bc-d, 0s) + var(--i, 0) * .07s), calc(var(--bc-d, 0s) + 1.1s);
}
@keyframes bc-sweep { from { background-size: 0% 86%; color: var(--bc-text); } to { background-size: 100% 86%; color: var(--bc-on-accent); } }

/* Scroll fill: words fill to full colour as the reader scrolls */
@supports (animation-timeline: view()) {
	.bc-m--scrollfill.is-split { view-timeline: --bc-sf block; }
	.bc-m--scrollfill.is-split .bc-w {
		animation: bc-fill linear both;
		animation-timeline: --bc-sf;
		animation-range: contain calc(12% + var(--i, 0) * (40% / var(--n, 20))) contain calc(17% + var(--i, 0) * (40% / var(--n, 20)));
	}
	.bc-m--scrollfill.is-dim.is-split .bc-w { animation-name: bc-fill-dim; }
}
/* The start colours come from Appearance > Colours, which keeps them at AA contrast (4.5:1 body, 3:1 lead) on the background. */
@keyframes bc-fill { from { color: var(--bc-fill-start); } to { color: var(--bc-text); } }
@keyframes bc-fill-dim { from { color: var(--bc-fill-dim); } to { color: var(--bc-text); } }

/* Fade up on load (supporting text near a headline) */
.bc-m--fade { animation: bc-fade 1.4s var(--bc-out) both; animation-delay: var(--bc-d, 0s); }
@keyframes bc-fade { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* Reveal on scroll, parallax and the footer name */
@supports (animation-timeline: view()) {
	.bc-m--reveal { animation: bc-rv linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
	.bc-m--parallax { animation: bc-par linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
	.bc-fx-wordmark .bc-wordmark { animation: bc-wm linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
}
@keyframes bc-rv { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes bc-wm { from { transform: translateY(55%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Subtle: keep headline and reveal motion, drop parallax and blur stacking */
.bc-motion-subtle .bc-m--parallax { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.bc-js .bc-m:not(.is-split) { visibility: visible; }
	.bc-loader, .bc-cur { display: none !important; }
	.bc-m--sweep .is-key .bc-wi { background-size: 100% 86%; color: var(--bc-on-accent); }
}