/* Motion Kit: shared styles for the cinematic blocks' loops and pause control. */

/* Height of the site's fixed Trip Planner button (bottom-right on every page). Blocks keep their
   bottom-edge buttons above it. */
:root {
	--lp-dock: 52px;
}

/* Video loops: the poster underneath is the largest paint; the video fades in once it plays.
   The .maine prefix beats the theme's `.maine video { height: auto }`. */
.lp-poster,
.lp-poster img,
.maine .lp-loop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.lp-loop {
	opacity: 0;
	transition: opacity 0.5s ease;
}
.lp-loop.is-ready {
	opacity: 1;
}
.lp-reduced .lp-loop,
.lp-savedata .lp-loop {
	display: none;
}

/* Pause control for looping video (WCAG 2.2.2). There is no audio, so it is icon-only;
   aria-label carries the words. One state pauses every loop on the page. */
.lp-pause {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	cursor: pointer;
	color: #fff;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	transition: background-color 0.2s;
}
.lp-pause:hover {
	background: rgba(0, 0, 0, 0.5);
}
.lp-pause svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
.lp-pause .lp-pause__play,
.lp-pause[aria-pressed="true"] .lp-pause__pause {
	display: none;
}
.lp-pause[aria-pressed="true"] .lp-pause__play {
	display: block;
}
.lp-pause:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
.lp-reduced .lp-pause,
.lp-savedata .lp-pause {
	display: none;
}