/*
 * FJWP front-page hero.
 *
 * Vanilla-JS replacement for the LayerSlider 7.2.1 "Home Primary Slider"
 * (slider id 2). See changes/012-replace-layerslider-hero-with-vanilla-js.md.
 *
 * Geometry mirrors what LayerSlider 7.2.1 actually produces on production:
 * a full-bleed box 950px tall with absolutely positioned elements at their
 * authored pixel offsets. LayerSlider stretches the stage to the viewport
 * width but does NOT scale it, so authored px values are reproduced verbatim.
 * `left:50%` elements are centred on the 50% line.
 */

.fjwp-hero {
	position: relative;
	width: 100%;
	height: 950px;
	overflow: hidden;
	background: #000;
}

/* LayerSlider: hideUnder 768 + hideOnMobile - no hero on small screens. */
@media (max-width: 767px) {
	.fjwp-hero { display: none; }
}

/* --------------------------------------------------------------- slides */

.fjwp-hero__slide {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	perspective: 500px; /* parallaxtransformperspective */
	transition: opacity 350ms ease-out; /* sliderfadeinduration */
}

.fjwp-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

/* Two nested nodes so the Ken Burns zoom and the cursor parallax can drive
 * separate transforms without overwriting one another. */
.fjwp-hero__bgwrap {
	position: absolute;
	z-index: 1;
	top: -14px;
	left: -14px;
	right: -14px;
	bottom: -14px;
	transition: transform 1500ms cubic-bezier(.25, .46, .45, .94); /* parallaxdurationmove */
}

.fjwp-hero__bg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* slideBGSize */
	object-position: 50% 50%; /* slideBGPosition */
	transform-origin: 50% 50%;
}

.fjwp-hero__slide.is-active .fjwp-hero__bg {
	animation: fjwpHeroKenburns var(--fjwp-dwell, 4000ms) linear both;
}

@keyframes fjwpHeroKenburns {
	from { transform: scale(1); }
	to   { transform: scale(var(--fjwp-kb, 1.2)); }
}

.fjwp-hero__tint {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

/* ------------------------------------------------------------- elements */

/* The wrapper owns position so the element is free to own its entrance /
 * exit transform without fighting a translateX(-50%) centring rule. */
.fjwp-hero__pos {
	position: absolute;
	z-index: 2;
}

/* Mirrors LayerSlider's own .ls-layer resets so authored inline styles are
 * not fighting theme heading/button defaults. */
.fjwp-hero__el {
	display: block;
	margin: 0;
	border-width: 0;
	box-sizing: content-box;
	line-height: normal;
	/* LayerSlider's .ls-l default; the hero title overrides this inline. */
	font-family: Arial, sans-serif;
	white-space: nowrap;
	opacity: 0;
	transform: translate3d(var(--fjwp-x, 0px), var(--fjwp-y, 0px), 0) rotateX(var(--fjwp-rx, 0deg));
	transition:
		opacity 400ms cubic-bezier(.755, .05, .855, .06),
		transform 400ms cubic-bezier(.755, .05, .855, .06);
}

.fjwp-hero__slide.is-active .fjwp-hero__el {
	opacity: 1;
	transform: translate3d(0, 0, 0) rotateX(0deg);
	transition:
		opacity 1000ms cubic-bezier(.755, .05, .855, .06) var(--fjwp-delay, 0ms),
		transform 1000ms cubic-bezier(.755, .05, .855, .06) var(--fjwp-delay, 0ms);
}

/* ------------------------------------------------------------ navigation */

.fjwp-hero__nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	pointer-events: none;
}

.fjwp-hero__nav button { pointer-events: auto; }

.fjwp-hero__arrow {
	position: absolute;
	top: 50%;
	margin-top: -25px;
	width: 40px;
	height: 50px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.fjwp-hero__arrow--prev { left: 10px; }
.fjwp-hero__arrow--next { right: 10px; }

.fjwp-hero__arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border-top: 3px solid rgba(255, 255, 255, .85);
	border-right: 3px solid rgba(255, 255, 255, .85);
	transition: border-color 150ms ease;
}

.fjwp-hero__arrow--prev::before { transform: rotate(-135deg); }
.fjwp-hero__arrow--next::before { transform: rotate(45deg); }
.fjwp-hero__arrow:hover::before { border-color: #fff; }

.fjwp-hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 26px;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.fjwp-hero__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
}

.fjwp-hero__dot.is-active { background: #fff; }

.fjwp-hero__toggle {
	position: absolute;
	left: 24px;
	bottom: 22px;
	width: 25px;
	height: 25px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.fjwp-hero__toggle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -8px 0 0 -6px;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 11px solid rgba(255, 255, 255, .85);
}

.fjwp-hero__toggle.is-paused::before {
	margin: -8px 0 0 -7px;
	width: 12px;
	height: 14px;
	border: 0;
	background:
		linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, .85)) left center / 4px 14px no-repeat,
		linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, .85)) right center / 4px 14px no-repeat;
}

.fjwp-hero__toggle:hover::before { border-left-color: #fff; }

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.fjwp-hero__slide.is-active .fjwp-hero__bg { animation: none; }
	.fjwp-hero__bgwrap { transition: none; }
	.fjwp-hero__el,
	.fjwp-hero__slide.is-active .fjwp-hero__el { transition: none; }
	.fjwp-hero__slide.is-active .fjwp-hero__el { opacity: 1; transform: none; }
}