/*
 * Mirrors the previous Slider Revolution setup: fullscreen, fade transitions,
 * "zeus" arrows, captions dropping in from above.
 */
.tmf-slider {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: #000;
	color: #fff;
	isolation: isolate;
	container-type: size;
}

.tmf-slider__track,
.tmf-slider__slide,
.tmf-slider__link {
	position: absolute;
	inset: 0;
}

.tmf-slider__link {
	display: block;
}

.tmf-slider__slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease, visibility 0s linear 1s;
}

.tmf-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 1s ease, visibility 0s;
	z-index: 1;
}

.tmf-slider__poster,
.tmf-slider__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-width: none;
	margin: 0;
	border: 0;
}

.tmf-slider__media {
	opacity: 0;
	transition: opacity 0.6s ease;
}

/*
 * YouTube background: cover the slide at 16:9, then oversize it so the player's
 * title bar and logo fall outside the visible area.
 */
.tmf-slider__yt {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 177.78cqh);
	height: max(56.25cqw, 100cqh);
	transform: translate(-50%, -50%) scale(1.3);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.tmf-slider__yt iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.tmf-slider__yt.is-ready,
.tmf-slider__media.is-ready {
	opacity: 1;
}

/* Title and caption layers: positioned by slider.js on the Revolution grid. */
.tmf-slider__layer {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.tmf-slider__caption {
	transform: translateY(-48px);
}

.tmf-slider__caption p {
	margin: 0;
	padding: 0;
	font-family: Montserrat, sans-serif;
	color: #fff;
	text-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
}

.tmf-slider .tmf-slider__title {
	transform: translateY(-32px);
	font-family: Montserrat, sans-serif;
	color: #fff;
	letter-spacing: 0;
	text-transform: none;
	text-shadow: 0 0 12px #000;
	white-space: nowrap;
}

/* Revolution placed this above the text layers too. */
.tmf-slider__overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

/* In: 1.6s after the slide appears, 0.7s, power2.in. */
.tmf-slider__slide.is-active .tmf-slider__layer {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53) 1.6s, transform 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53) 1.6s;
}

/* Out: fades at the end of the slide, 0.7s, power2.out. */
.tmf-slider__slide.is-active .tmf-slider__layer.is-leaving {
	opacity: 0;
	transform: none;
	transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* "Zeus" arrows. */
.tmf-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 1000;
	display: block;
	width: 70px;
	height: 70px;
	margin-top: -35px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.1);
	color: #fff;
	cursor: pointer;
}

.tmf-slider__arrow--prev { left: 20px; }
.tmf-slider__arrow--next { right: 20px; }

.tmf-slider__arrow svg {
	position: relative;
	z-index: 2;
	display: block;
	width: 20px;
	height: 20px;
	margin: 25px auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tmf-slider__arrow-img,
.tmf-slider__arrow-shade {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition: all 0.3s;
}

.tmf-slider__arrow-img {
	background-position: center center;
	background-size: cover;
	transform: translateX(-100%);
}

.tmf-slider__arrow--next .tmf-slider__arrow-img {
	transform: translateX(100%);
}

.tmf-slider__arrow-shade {
	z-index: 1;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transform: scale(0);
}

.tmf-slider__arrow:hover .tmf-slider__arrow-img,
.tmf-slider__arrow:focus-visible .tmf-slider__arrow-img {
	transform: translateX(0);
}

.tmf-slider__arrow:hover .tmf-slider__arrow-shade,
.tmf-slider__arrow:focus-visible .tmf-slider__arrow-shade {
	opacity: 1;
	transform: scale(1);
}

.tmf-slider__arrow:focus-visible,
.tmf-slider__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* Revolution hid the arrows below 1140px. */
@media (max-width: 1139px) {
	.tmf-slider__arrow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tmf-slider__slide,
	.tmf-slider__yt,
	.tmf-slider__media,
	.tmf-slider__slide.is-active .tmf-slider__layer {
		transition: none;
	}
}