/* Selector list keeps specificity above the Divi Builder plugin's .et-db #et-boc .et-l rules. */
.et-db #et-boc .et-l .mvs_video_stage,
.mvs_video_stage {
	--mvs-accent: #48658a;
	--mvs-tint: #2f4663;
	--mvs-ring: #f6f0eb;
	--mvs-ease: cubic-bezier(.22, .8, .24, 1);

	width: 100%;
	max-width: 600px;
	margin-inline: auto;
	/* Same as the old slider. !important because Divi's gutter rules are more specific. */
	margin-bottom: 0 !important;
	@media (max-width: 980px) { margin-bottom: 20px !important; }

	& button { min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; line-height: 1; cursor: pointer; }
	& button:focus-visible { outline: 3px solid var(--mvs-accent); outline-offset: 2px; }

	/* Without JS, and in the builder: a plain row of playable videos. */
	& .mvs-stage { display: flex; gap: 10px; overflow-x: auto; }
	& .mvs_video_item { position: relative; flex: 0 0 200px; margin: 0; overflow: hidden; border-radius: 16px; background: var(--mvs-tint); aspect-ratio: 9 / 16; }
	& .mvs_video_item > .et_pb_module_inner { position: absolute; inset: 0; }
	& .mvs-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
	& .mvs-caption { position: absolute; left: 18px; right: 18px; bottom: 56px; color: #fff; pointer-events: none; }
	& .mvs-caption b { display: block; font-size: 20px; font-weight: 600; line-height: 1.2; }
	& .mvs-caption span { display: block; font-size: 13px; opacity: .85; text-wrap: balance; }

	/* Upgraded by stage.js. */
	/* The stage has 36px of room above and below so card shadows aren't clipped (padY in stage.js). The negative margin keeps that room out of the page layout, and it mustn't catch clicks meant for neighbours. */
	& .mvs-stage.is-ready { position: relative; display: block; margin-block: -36px; overflow: hidden; touch-action: pan-y; pointer-events: none; }
	& .is-ready .mvs_video_item { pointer-events: auto; }
	/* Permanent layers: without them the hover fade promotes and demotes a layer, and edges at fractional pixels re-snap visibly. The placeholder colour moves to the video so it can't show at the rounded corners. */
	& .is-ready .mvs_video_item { background: none; will-change: transform; }
	& .is-ready .mvs-video { background: var(--mvs-tint); }
	& .is-ready .mvs-tint, & .is-ready .mvs-fade { will-change: opacity; }
	& .is-ready .mvs-big { will-change: opacity, transform; }
	& .is-ready .mvs-arrow { will-change: scale; }
	& .is-ready .mvs-arrow svg { will-change: translate; }
	& .is-ready .mvs_video_item { position: absolute; top: 0; left: 0; aspect-ratio: auto; box-shadow: 0 10px 24px rgb(47 70 99 / .18); transition: transform .55s var(--mvs-ease), width .55s var(--mvs-ease), height .55s var(--mvs-ease); }
	& .is-ready .mvs_video_item.is-active { box-shadow: 0 14px 28px rgb(47 70 99 / .3); }
	& .is-ready .mvs-caption { right: 46%; bottom: 16px; opacity: 0; transition: opacity .25s, bottom .3s var(--mvs-ease); }
	& .is-ready .is-active:not(.is-started) .mvs-caption { opacity: 1; transition-delay: .25s, 0s; }
	& .is-ready .is-paused .mvs-caption { opacity: 1; bottom: 62px; }

	& .mvs-tint { position: absolute; inset: 0; background: var(--mvs-tint); opacity: .72; pointer-events: none; transition: opacity .35s; }
	& .mvs_video_item:hover .mvs-tint { opacity: .5; }
	& .mvs_video_item.is-active .mvs-tint { opacity: 0; }
	& .mvs-fade { position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgb(20 30 44 / .78)); opacity: 0; pointer-events: none; transition: opacity .35s; }
	& .is-active .mvs-fade { opacity: 1; }
	& .is-active.is-playing .mvs-fade { opacity: .55; }
	/* Pause screen: the house blue over the frozen frame, with the site's italic accent under the play button. */
	& .mvs-paused { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 128px; background: rgb(47 70 99 / .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: #fff; font-family: Chambery, Georgia, serif; font-size: 30px; font-style: italic; line-height: 1.1; opacity: 0; pointer-events: none; transition: opacity .3s; }
	& .is-paused .mvs-paused { opacity: 1; }
	& .mvs-name { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; writing-mode: vertical-rl; pointer-events: none; transition: opacity .25s; }
	& .is-left .mvs-name { transform: rotate(180deg); }
	& .is-active .mvs-name { opacity: 0; }

	& .mvs-hit { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 16px; }
	& .mvs-hit:focus-visible { outline-color: #fff; outline-offset: -5px; }
	& .mvs-big { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center; color: var(--mvs-accent); opacity: 0; transform: scale(.7); pointer-events: none; transition: opacity .25s, transform .25s; }
	/* Only the circle grows on hover. Scaling the icon with it makes the small triangle re-draw and jitter. */
	& .mvs-big::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; box-shadow: 0 8px 24px rgb(20 30 44 / .3); will-change: transform; transition: transform .3s var(--mvs-ease); }
	& .mvs-big svg { position: relative; }
	& .is-active:not(.is-playing) .mvs-big { opacity: 1; transform: none; }
	& .mvs-hit:hover ~ .mvs-big::before { transform: scale(1.07); }
	& .is-active.is-buffering .mvs-big { opacity: 1; transform: none; }
	& .is-buffering .mvs-big svg, & .is-buffering .mvs-big::before { display: none; }
	& .is-buffering .mvs-big::after { content: ""; width: 44px; height: 44px; border: 4px solid rgb(255 255 255 / .35); border-top-color: #fff; border-radius: 50%; animation: mvs-spin .9s linear infinite; }

	& .mvs-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; display: none; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 100px; background: rgb(20 30 44 / .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
	& .is-active.is-started .mvs-bar { display: flex; }
	& .mvs-bar button { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
	& .mvs-bar button:hover { background: rgb(255 255 255 / .18); }
	& .mvs-bar button:focus-visible, & .mvs-seek:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
	& .mvs-seek { flex: 1; width: auto; min-width: 0; height: 32px; margin: 0; padding: 0; border: 0; background: none; accent-color: #fff; cursor: pointer; }

	& .mvs_video_item:fullscreen { transform: none !important; width: 100% !important; height: 100% !important; border-radius: 0; background: #000; }
	& .mvs_video_item:fullscreen .mvs-video { object-fit: contain; background: #000; }

	/* Overlay on the active slot. Only its controls take clicks, so the video below stays clickable. */
	& .mvs-hud { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; }

	/* Position marker, bottom right of the active video: Chambery numeral over a rounded line. It rises above the control bar once a video has started. */
	& .mvs-pos { position: absolute; right: 16px; bottom: 10px; width: 40%; transition: bottom .3s var(--mvs-ease); }
	& .mvs-hud.is-started .mvs-pos { bottom: 56px; }
	& .mvs-count { color: #fff; font-family: Chambery, Georgia, serif; font-size: 15px; font-style: italic; line-height: 1; text-align: right; }
	& .mvs-count b { display: inline-block; font-size: 28px; font-weight: 400; }
	& .mvs-count span { margin-left: 2px; opacity: .8; }
	& .mvs-rail { position: relative; display: flex; height: 22px; }
	& .mvs-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 100px; background: rgb(255 255 255 / .4); }
	& .mvs-seg { flex: 1; min-width: 0; height: 22px; border-radius: 100px; pointer-events: auto; transition: background .2s; }
	& .mvs-seg:hover { background: rgb(255 255 255 / .16); }
	& .mvs-seg:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
	/* The marker glides between videos: the leading edge goes first and the trailing edge catches up. */
	& .mvs-line { position: absolute; top: 9px; height: 4px; border-radius: 100px; background: #fff; pointer-events: none; transition: right .3s var(--mvs-ease), left .6s var(--mvs-ease); }
	& .mvs-line.is-back { transition: left .3s var(--mvs-ease), right .6s var(--mvs-ease); }

	/* Round, with the arrow of the site's buttons. The ring has the section's colour, so the button looks cut out of the card's edge. */
	& .mvs-arrow { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; border: 4px solid var(--mvs-ring); border-radius: 50%; background: var(--mvs-accent); color: #fff; pointer-events: auto; transition: scale .3s var(--mvs-ease); }
	& .mvs-prev { left: 0; translate: -50% 0; }
	& .mvs-next { right: 0; translate: 50% 0; }
	& .mvs-arrow svg { transition: translate .3s var(--mvs-ease); }
	& .mvs-prev:hover svg { translate: -2px 0; }
	& .mvs-next:hover svg { translate: 2px 0; }
	& .mvs-hud.is-playing .mvs-arrow { scale: .82; }
	& .mvs-hud .mvs-arrow:hover { scale: 1.06; }
	& .mvs-hud .mvs-arrow:focus-visible { outline-offset: 0; }
	@media (max-width: 480px) {
		& .mvs-arrow { width: 40px; height: 40px; margin-top: -20px; }
		& .mvs-arrow svg { width: 15px; height: 15px; }
		/* The card is too short here for the name and "Verder kijken" together. */
		& .is-ready .is-paused .mvs-caption { opacity: 0; }
		& .mvs-paused { padding-top: 112px; font-size: 26px; }
	}

	& .mvs-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

	@media (prefers-reduced-motion: reduce) {
		& .is-ready .mvs_video_item, & .mvs-tint, & .mvs-fade, & .mvs-name, & .mvs-big, & .mvs-big::before, & .mvs-line, & .mvs-line.is-back, & .mvs-pos, & .mvs-paused, & .is-ready .mvs-caption, & .mvs-arrow, & .mvs-arrow svg { transition: none; }
	}
}

@keyframes mvs-spin { to { transform: rotate(360deg); } }