/* Slider da home - recriação estática do antigo MasterSlider (id 1 - "Flat Design Style") */

.ms-slider {
	position: relative;
	width: 100%;
	aspect-ratio: 1200 / 360;
	overflow: hidden;
	container-type: inline-size;
	background: #f56858;
}

.ms-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	background: var(--bg, #f56858);
	transition: opacity .7s ease, visibility 0s linear .7s;
	z-index: 1;
}

.ms-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .7s ease, visibility 0s;
	z-index: 2;
}

.ms-layer {
	position: absolute;
	margin: 0;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	animation: msLayerIn var(--dur, 1s) var(--ease, cubic-bezier(.23,1,.32,1)) var(--delay, 0s) both;
}

.ms-slide:not(.is-active) .ms-layer {
	animation-play-state: paused;
}

.ms-layer--tl { left: var(--x); top: var(--y); }
.ms-layer--tr { right: var(--x); top: var(--y); }
.ms-layer--bl { left: var(--x); bottom: var(--y); }
.ms-layer--br { right: var(--x); bottom: var(--y); }

.ms-layer--heading {
	width: var(--w);
	font-size: var(--fs);
	line-height: var(--lh);
	letter-spacing: var(--ls);
	font-weight: 200;
}

.ms-layer--copy {
	width: var(--w);
	font-size: var(--fs);
	line-height: var(--lh);
	font-weight: 300;
}

.ms-layer--copy p { margin: 0; }

.ms-layer--img { width: var(--w); }
.ms-layer--img img { display: block; width: 100%; height: auto; }

.ms-layer--touch {
	animation:
		msLayerIn var(--dur) var(--ease) var(--delay) both,
		msLayerOut var(--hdur, .3s) var(--hease, cubic-bezier(.23,1,.32,1)) var(--hdelay, 0s) both;
}

@keyframes msLayerIn {
	from {
		opacity: var(--op0, 0);
		transform: translate3d(var(--tx, 0), var(--ty, 0), 0) rotateZ(var(--rz, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sx, 1), var(--sy, 1));
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes msLayerOut {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: scale(0, 0); }
}

.ms-bullets {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 10px;
}

.ms-bullets button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid rgba(255,255,255,.8);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background .3s ease;
}

.ms-bullets button.is-active {
	background: #fff;
}

.ms-timebar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 0%;
	background: rgba(255,255,255,.5);
	z-index: 5;
}

.ms-timebar.is-running {
	transition: width linear;
}