/*
 * Sheetal Metals - custom hero slider
 * Markup: inc/sheetal-hero.php   Behaviour: assets/js/sheetal-hero.js
 * Design tokens (--sm-*) come from sheetal-custom.css, which loads first.
 *
 *   1. Shell + full-bleed
 *   2. Slides, video, scrim
 *   3. Copy block
 *   4. Buttons
 *   5. Feature cards
 *   6. Arrows
 *   7. Numbered pagination
 *   8. Entrance animation
 *   9. Responsive
 */

/* ================================================ 1. Shell + full-bleed */

/* The page content sits in a centred .container, but the banner is edge to
   edge - so pull it back out to the full viewport width. */
.sm-hero-slider {
	/* Overridden inline from the "Overlay darkness" setting. */
	--sm-hero-scrim: 0.68;
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	height: 100vh;
	min-height: 680px;
	max-height: 940px;
	overflow: hidden;
	background: var(--sm-ink, #0a0c10);
	isolation: isolate;
}

/* 100vw counts the scrollbar, which would otherwise add a sliver of
   horizontal scroll on the page. */
.motov4_page_content_wrapper {
	overflow-x: hidden;
}

.sm-hero-track {
	position: absolute;
	inset: 0;
}

/* ============================================ 2. Slides, video, scrim */
.sm-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s ease, visibility 0s linear 0.9s;
	pointer-events: none;
}

.sm-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.9s ease, visibility 0s;
	pointer-events: auto;
	z-index: 1;
}

.sm-hero-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.sm-hero-video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%) scale(1.06);
	object-fit: cover;
	/* slow drift so a short looping clip does not feel static */
	transition: transform 9s linear;
}

.sm-hero-slide.is-active .sm-hero-video {
	transform: translate(-50%, -50%) scale(1);
}

/* Still-image background, for slides set to "Image" instead of "Video". */
.sm-hero-image {
	position: absolute;
	inset: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transform: scale(1.06);
	transition: transform 9s linear;
}

.sm-hero-slide.is-active .sm-hero-image {
	transform: scale(1);
}

/* Dark scrim: heavier top and bottom so the header, copy and pagination all
   keep contrast over bright factory footage. Every stop is scaled from the
   one --sm-hero-scrim value, so the admin slider moves the whole thing
   together instead of flattening the gradient. */
.sm-hero-scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,
			rgba(8, 10, 14, calc(var(--sm-hero-scrim) * 1.3)) 0%,
			rgba(8, 10, 14, calc(var(--sm-hero-scrim) * 0.8)) 38%,
			rgba(8, 10, 14, calc(var(--sm-hero-scrim) * 0.9)) 66%,
			rgba(8, 10, 14, calc(var(--sm-hero-scrim) * 1.35)) 100%),
		rgba(8, 10, 14, calc(var(--sm-hero-scrim) * 0.45));
}

.sm-hero-inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	/* The transparent header floats over the banner, so the top padding has to
	   clear it (topbar + header ≈ 150px) with room to breathe. It is heavier
	   than the bottom padding on purpose: that pushes the optically centred
	   copy down clear of the nav. */
	padding: 190px 90px 120px;
}

/* ========================================================= 3. Copy block */
.sm-hero {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	text-align: center;
	font-family: 'Exo', sans-serif;
}

.sm-hero-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 0 0 22px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 3.2px;
	text-transform: uppercase;
	color: var(--sm-orange, #f97307);
}

.sm-hero-eyebrow i {
	display: block;
	width: 54px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sm-orange, #f97307));
}

.sm-hero-eyebrow i:last-child {
	background: linear-gradient(90deg, var(--sm-orange, #f97307), transparent);
}

.sm-hero .sm-hero-title {
	margin: 0 0 24px;
	padding: 0;
	font-family: 'Exo', sans-serif;
	font-size: 72px;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -1px;
	color: #fff;
	text-align: center;
	text-transform: none;
}

.sm-hero .sm-hero-title span {
	color: var(--sm-orange, #f97307);
}

.sm-hero .sm-hero-text {
	max-width: 720px;
	margin: 0 auto 38px;
	padding: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.72;
	color: rgba(255, 255, 255, 0.72);
	text-align: center;
}

/* ============================================================ 4. Buttons */
.sm-hero-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0 0 44px;
}

/* Shape and size come from the --sm-btn-* tokens in sheetal-custom.css, so
   this matches every other button on the site. */
.sm-hero .sm-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-btn-gap);
	padding: var(--sm-btn-pad-y) var(--sm-btn-pad-x);
	border: 1px solid transparent;
	border-radius: var(--sm-btn-radius);
	font-size: var(--sm-btn-size);
	font-weight: var(--sm-btn-weight);
	line-height: 1.2;
	letter-spacing: var(--sm-btn-tracking);
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.sm-hero .sm-btn i {
	transition: transform 0.25s ease;
}

.sm-hero .sm-btn:hover i {
	transform: translateX(4px);
}

.sm-hero .sm-btn-solid {
	background: var(--sm-orange, #f97307);
	color: #fff;
}

.sm-hero .sm-btn-solid:hover,
.sm-hero .sm-btn-solid:focus-visible {
	background: var(--sm-orange-2, #f7a307);
	color: #fff;
}

.sm-hero .sm-btn-ghost {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.38);
	color: #fff;
}

.sm-hero .sm-btn-ghost:hover,
.sm-hero .sm-btn-ghost:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
}

/* ====================================================== 5. Feature cards */
.sm-hero-cards {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	text-align: left;
}

.sm-hero-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 34px;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.sm-hero-card:last-child {
	border-right: 0;
}

.sm-hero-card-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(249, 115, 7, 0.55);
	border-radius: 50%;
	color: var(--sm-orange, #f97307);
	font-size: 18px;
	line-height: 1;
}

.sm-hero-card-txt {
	display: block;
}

.sm-hero .sm-hero-card-txt b {
	display: block;
	max-width: 190px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.32;
	color: #fff;
}

.sm-hero .sm-hero-card-txt em {
	display: block;
	max-width: 210px;
	margin-top: 4px;
	font-size: 13.5px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.55);
}

/* ============================================================= 6. Arrows */
.sm-hero-arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-top: -28px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 3px;
	background: rgba(8, 10, 14, 0.72);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.sm-hero-arrow svg {
	width: 24px;
	height: 24px;
}

.sm-hero-arrow:hover,
.sm-hero-arrow:focus-visible {
	background: var(--sm-orange, #f97307);
	border-color: var(--sm-orange, #f97307);
}

.sm-hero-prev { left: 0; border-left: 0; }
.sm-hero-next { right: 0; border-right: 0; }

/* ======================================================= 7. Pagination */
.sm-hero-slide.is-active .sm-hero-cards {
    transition-delay: 0.63s;
    display: none;
}
.sm-hero-dots {
    position: absolute;
    left: 50%;
    bottom: 30px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
}

.sm-hero-dot {
	display: flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: 'Exo', sans-serif;
}

/*
 * The bar is the whole control now that the 01/02/03 numerals are gone, so it
 * carries the active state on its own. It is also no longer a separator
 * between numbers - every slide gets one, including the last, which is why
 * there is no :last-child rule hiding one of them any more.
 *
 * The button's aria-label still names the slide, so dropping the numeral cost
 * nothing in accessibility.
 */
.sm-hero-dot-line {
	display: block;
	width: 34px;
	height: 4px;
	margin: 0 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.3);
	transition: background-color 0.25s ease;
}

.sm-hero-dot:hover .sm-hero-dot-line,
.sm-hero-dot.is-active .sm-hero-dot-line {
	background: var(--sm-orange, #f97307);
}

/* ================================================= 8. Entrance animation */

/* Copy lifts in behind the crossfade, one element after the next. */
.sm-hero-slide .sm-hero-eyebrow,
.sm-hero-slide .sm-hero-title,
.sm-hero-slide .sm-hero-text,
.sm-hero-slide .sm-hero-btns,
.sm-hero-slide .sm-hero-cards {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.sm-hero-slide.is-active .sm-hero-eyebrow,
.sm-hero-slide.is-active .sm-hero-title,
.sm-hero-slide.is-active .sm-hero-text,
.sm-hero-slide.is-active .sm-hero-btns,
.sm-hero-slide.is-active .sm-hero-cards {
	opacity: 1;
	transform: translateY(0);
}

.sm-hero-slide.is-active .sm-hero-eyebrow { transition-delay: 0.15s; }
.sm-hero-slide.is-active .sm-hero-title   { transition-delay: 0.27s; }
.sm-hero-slide.is-active .sm-hero-text    { transition-delay: 0.39s; }
.sm-hero-slide.is-active .sm-hero-btns    { transition-delay: 0.51s; }
.sm-hero-slide.is-active .sm-hero-cards   { transition-delay: 0.63s; }

@media (prefers-reduced-motion: reduce) {
	.sm-hero-slide,
	.sm-hero-video,
	.sm-hero-image,
	.sm-hero-slide .sm-hero-eyebrow,
	.sm-hero-slide .sm-hero-title,
	.sm-hero-slide .sm-hero-text,
	.sm-hero-slide .sm-hero-btns,
	.sm-hero-slide .sm-hero-cards {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	.sm-hero-video,
	.sm-hero-slide.is-active .sm-hero-video {
		transform: translate(-50%, -50%) scale(1);
	}

	.sm-hero-image,
	.sm-hero-slide.is-active .sm-hero-image {
		transform: scale(1);
	}
}

/* ========================================================= 9. Responsive */
@media (max-width: 1600px) {
	.sm-hero .sm-hero-title { font-size: 62px; }
	.sm-hero-inner { padding: 180px 70px 110px; }
}

@media (max-width: 1400px) {
	.sm-hero .sm-hero-title { font-size: 54px; }
	.sm-hero .sm-hero-text { font-size: 17px; margin-bottom: 32px; }
	.sm-hero-card { padding: 16px 24px; }
}

@media (max-width: 1199px) {
	.sm-hero-slider { min-height: 620px; }
	.sm-hero-inner { padding: 165px 56px 100px; }
	.sm-hero .sm-hero-title { font-size: 44px; }
	.sm-hero-eyebrow { font-size: 12px; letter-spacing: 2.6px; }
	.sm-hero-eyebrow i { width: 34px; }
	.sm-hero-btns { margin-bottom: 40px; }
	.sm-hero-cards { padding: 6px 8px; }
	.sm-hero-card { padding: 14px 20px; gap: 12px; }
	.sm-hero-card-ico { width: 40px; height: 40px; font-size: 16px; }
	.sm-hero .sm-hero-card-txt b { font-size: 15px; }
	.sm-hero .sm-hero-card-txt em { font-size: 12.5px; }
	.sm-hero-dots { bottom: 36px; }
}

@media (max-width: 991px) {
	.sm-hero-slider { min-height: 580px; max-height: none; }
	.sm-hero-inner { padding: 145px 40px 96px; }
	.sm-hero .sm-hero-title { font-size: 36px; }
	.sm-hero .sm-hero-text { font-size: 16px; }
	/* Button sizing at this width comes from the --sm-btn-* tokens, which
	   sheetal-custom.css steps down for every button at once. */

	/* dividers read as clutter once the cards wrap */
	.sm-hero-cards { display: flex; width: 100%; }
	.sm-hero-card { flex: 1 1 45%; border-right: 0; }

	.sm-hero-arrow { width: 46px; height: 46px; margin-top: -23px; }
	.sm-hero-arrow svg { width: 20px; height: 20px; }
	.sm-hero-dots { bottom: 28px; }
	.sm-hero-dot-line { width: 22px; margin: 0 5px; }
}

@media (max-width: 767px) {
	.sm-hero-slider { height: auto; min-height: 0; }
	.sm-hero-track { position: relative; inset: auto; }

	/* Stacked absolutely on desktop; on phones let the active slide set the
	   height so long copy is never clipped. */
	.sm-hero-slide { position: absolute; inset: 0; }
	.sm-hero-slide.is-active { position: relative; inset: auto; }

	.sm-hero-inner { padding: 112px 20px 84px; }
	.sm-hero-eyebrow { gap: 10px; font-size: 11px; letter-spacing: 2px; margin-bottom: 16px; }
	.sm-hero-eyebrow i { width: 22px; }
	.sm-hero .sm-hero-title { font-size: 28px; letter-spacing: -0.4px; margin-bottom: 16px; }
	.sm-hero .sm-hero-text { font-size: 15px; line-height: 1.65; margin-bottom: 26px; }
	.sm-hero-btns { gap: 10px; margin-bottom: 28px; }

	.sm-hero-cards { flex-direction: column; gap: 2px; }
	.sm-hero-card { flex: 1 1 auto; width: 100%; padding: 12px 16px; }

	.sm-hero-arrow { display: none; }
	.sm-hero-dots { bottom: 20px; }
}