/*
 * Home - Hero.
 *
 * Every figure here is read from cp-all-designer: index.html:44-97 for the
 * markup and css/app.css:770-895 for the values. The design file was drawn at
 * 1440 — `--vwu: 14.4px` at app.css:113 says so in as many words — so a fixed
 * measure carries across to 1920 unchanged and nothing is rescaled.
 *
 * What the Style tab sets is not repeated here: colour, type, padding, the
 * band's least height, the dots' width and the space beneath them all arrive
 * through the widget's own selector.
 *
 * Tiers: mobile up to 767px, tablet 768-1024px, desktop 1025px and up.
 */

/* ------------------------------------------------------------------ */
/* The band                                                            */
/* ------------------------------------------------------------------ */

/*
 * The design gives the band `height: 100svh` (app.css:805, 809). The build
 * writes the window's height as `min-height: 100vh`, with the design's floor
 * beside it as the Style tab's least height (see the foot of this file).
 */
.custom-home-hero {
	position: relative;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* The rail                                                            */
/* ------------------------------------------------------------------ */

.custom-home-hero__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.custom-home-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1400ms ease;      /* app.css:776 */
}

.custom-home-hero__slide.is-active {
	opacity: 1;                            /* app.css:777 */
}

/* The media slot is a box first: it keeps its size and is seen when empty. */
.custom-home-hero__picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.custom-home-hero__picture > img,
.custom-home-hero__picture > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.custom-home-hero__slide.is-active .custom-home-hero__picture > img,
.custom-home-hero__slide.is-active .custom-home-hero__picture > video {
	animation: custom-home-hero-zoom 14000ms ease-out both;   /* app.css:779 */
}

/* app.css:821 — a slide held from its top grows from there too */
.custom-home-hero__slide--top .custom-home-hero__picture > img,
.custom-home-hero__slide--top .custom-home-hero__picture > video {
	object-position: 50% 0%;
	transform-origin: 50% 0%;
}

/* One veil, on the left where the type sits — app.css:791-803. */
.custom-home-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(95deg,
		rgba(10, 20, 45, 0.72) 0%,
		rgba(10, 20, 45, 0.6) 24%,
		rgba(10, 20, 45, 0.34) 44%,
		rgba(10, 20, 45, 0.1) 60%,
		rgba(10, 20, 45, 0) 74%);
}

@keyframes custom-home-hero-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.11); }
}

/* ------------------------------------------------------------------ */
/* The words                                                           */
/* ------------------------------------------------------------------ */

.custom-home-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-height: inherit;
	margin: 0 auto;
	max-width: 1920px;                     /* the content cap, every band */
}

.custom-home-hero__text {
	max-width: 950px;                      /* app.css:805 */
	min-width: 0;
	animation: custom-home-hero-rise 850ms cubic-bezier(0.2, 0.8, 0.2, 1) both; /* app.css:807 */
}

@keyframes custom-home-hero-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* app.css:813-820 — the three carry the same shadow. */
.custom-home-hero__eyebrow,
.custom-home-hero__title,
.custom-home-hero__description {
	text-shadow: 0 2px 26px rgba(6, 14, 38, 0.78), 0 2px 4px rgba(6, 14, 38, 0.55);
}

/* ---- eyebrow — app.css:202-209 ---- */
.custom-home-hero .custom-home-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;                      /* app.css:174, the page's own */
	/* app.css:190 measures 1.15px; every px value here is even. */
	letter-spacing: 2px;
	text-transform: uppercase;
}

.custom-home-hero__pulse {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(206, 41, 41, 0.55);
	animation: custom-home-hero-pulse 2400ms infinite;
}

@keyframes custom-home-hero-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(206, 41, 41, 0.7); }
	70%  { box-shadow: 0 0 0 12px rgba(206, 41, 41, 0); }
	100% { box-shadow: 0 0 0 0 rgba(206, 41, 41, 0); }
}

/* ---- title — app.css:821-827 ---- */
.custom-home-hero__title {
	margin-top: 0;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
}

.custom-home-hero__title em {
	font-style: normal;
	font-weight: inherit;
	font-size: 108%;                       /* app.css:268-271 */
}

.custom-home-hero__title strong {
	font-weight: inherit;
	color: inherit;
}

/* app.css:284-287 measures the stop in `em`; it is written here in px per
   tier, against the title size each tier states. */
.custom-home-hero__title-dot {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	border-radius: 50%;
	vertical-align: baseline;
}

/* ---- description — app.css:828-832 ---- */
.custom-home-hero__description {
	margin-top: 0;
	font-weight: 300;
	line-height: 1.75;
}

/* ---- the press — app.css:290-297 ---- */
.custom-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
}

.custom-home-hero__button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	letter-spacing: normal;
	line-height: 1.4;
	border-width: 2px;
	border-style: solid;
	border-radius: 16px;
	cursor: pointer;
	transition: background-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
	/* the resting values the base's `[data-custom-press]` rule reads — red, app.css:328 */
	--custom-press-ink: var(--custom-home-hero-red-ink, #FFFFFF);
	--custom-press-ground: var(--custom-home-hero-red-ground, #CE2929);
	--custom-press-edge: transparent;
	--custom-press-shadow: none;
}

.custom-home-hero__button:hover {
	transform: translateY(-2px);
	--custom-press-ground: var(--custom-home-hero-red-ground-on, #6B170C);
	--custom-press-shadow: 0 14px 30px rgba(206, 41, 41, 0.34);
}

/* app.css:334-335 — clear over the picture with a white edge; reached, it brightens
   and its edge turns white, and it does not lift */
.custom-home-hero .custom-home-hero__button--ghost {
	--custom-press-ink: var(--custom-home-hero-ghost-ink, #FFFFFF);
	--custom-press-ground: var(--custom-home-hero-ghost-ground, rgba(255, 255, 255, 0.06));
	--custom-press-edge: var(--custom-home-hero-ghost-edge, rgba(255, 255, 255, 0.42));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: background-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-home-hero .custom-home-hero__button--ghost:hover {
	transform: none;
	--custom-press-ground: var(--custom-home-hero-ghost-ground-on, rgba(255, 255, 255, 0.18));
	--custom-press-edge: var(--custom-home-hero-ghost-edge-on, #FFFFFF);
	--custom-press-shadow: none;
}

.custom-home-hero__button-mark {
	line-height: 1;
}

/* ------------------------------------------------------------------ */
/* The dots                                                            */
/* ------------------------------------------------------------------ */

.custom-home-hero__ui {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 4;
}

.custom-home-hero__dots {
	display: flex;
	justify-content: center;
	gap: 8px;                              /* app.css:854 */
}

.custom-home-hero__dot {
	position: relative;
	height: 4px;                           /* app.css:855 measures 3px */
	padding: 0;
	border: 0;
	overflow: hidden;
	cursor: pointer;
	appearance: none;
}

.custom-home-hero__dot.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	animation: custom-home-hero-fill var(--custom-home-hero-dwell, 2500ms) linear both;
}

@keyframes custom-home-hero-fill {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px                                            */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.custom-home-hero__text {
		max-width: 100%;                   /* app.css:874 */
	}
	/* app.css:208 — min(22, 2.4 --vhu): 19.2 at 1024, 18.24 at 390 */
	.custom-home-hero .custom-home-hero__eyebrow {
		margin-bottom: 20px;
	}
	.custom-home-hero__title-dot {
		width: 10px;                       /* app.css:285, the min the design keeps */
		height: 10px;
		margin-left: 6px;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px                                                */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-home-hero__description {
		line-height: 1.65;                 /* app.css:887 */
	}
	/* a phone sets the eyebrow's foot at 14 (app.css, 640px tier) */
	.custom-home-hero .custom-home-hero__eyebrow {
		margin-bottom: 14px;
	}
}

/* ------------------------------------------------------------------ */
/* A reader who has asked for less movement                            */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.custom-home-hero__slide,
	.custom-home-hero__slide.is-active .custom-home-hero__picture > img,
	.custom-home-hero__slide.is-active .custom-home-hero__picture > video,
	.custom-home-hero__text,
	.custom-home-hero__pulse,
	.custom-home-hero__dot.is-active::after {
		animation: none;
		transition: none;
	}
	.custom-home-hero__dot.is-active::after {
		content: "";
		position: absolute;
		inset: 0;
		transform: none;
	}
	.custom-home-hero__button:hover {
		transform: none;
	}
}

/* Elementor's sheet (frontend.min.css, `.elementor img`) comes after the plugin's
   and sets a picture's height to auto and caps its width: the slot's picture
   says its own here, heavily enough to stand */
.custom-home-hero .custom-home-hero__picture > img {
	height: 100%;
	max-width: none;
}

/* ------------------------------------------------------------------ */
/* One band, one screen — every width                                  */
/* ------------------------------------------------------------------ */

/* app.css:805, 809, 920 — the hero is the window's height at every width,
   with a floor beside it (520, 480 on a phone) that the Style tab's least
   height writes. min-height rather than the design's `height`: what outgrows
   the band takes the room it needs instead of being cut.
   The words are the band's one part in the flow, so they stretch to the
   band's height and carry the floor: on a window shorter than the floor
   they hold the band open. */
.custom-home-hero {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.custom-home-hero .custom-home-hero__content {
	flex: 1 1 auto;
	width: 100%;
	min-height: var(--custom-home-hero-floor, 520px);
}