/*
 * Inprodi Hero — scoped, self-contained styles.
 *
 * Everything is namespaced under .inprodi-hero. There is NO global reset here
 * (Tailwind Preflight is intentionally absent), so this section cannot restyle
 * the rest of an Elementor site. The hero fills the full viewport height with a
 * FIXED slogan title centered vertically (it never fades) while the backgrounds
 * crossfade behind it (two layers). A 20% black overlay sits above the images and
 * the content sits above that. A minimalist progress indicator (short segments,
 * one per slide) is anchored to the bottom-left.
 */

.inprodi-hero {
	position: relative;
	width: 100%;
	/* Full viewport height on desktop and mobile (dvh avoids the mobile URL-bar jump). */
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Two crossfading background layers, swapped by JS for a smooth image transition. */
.inprodi-hero__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.8s ease;
	will-change: opacity, transform;
	backface-visibility: hidden;
}

/* 20% black overlay, above the images and below the content. */
.inprodi-hero::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.2);
	pointer-events: none;
	z-index: 1;
}

/* Bottom scrim: darkens only the lower band so the slogan and progress indicator
   stay readable over bright photos, without changing the look up top. */
.inprodi-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
	pointer-events: none;
	z-index: 1;
}

.inprodi-hero *,
.inprodi-hero *::before,
.inprodi-hero *::after {
	box-sizing: border-box;
}

.inprodi-hero__section {
	position: relative; /* positioning context for the fixed slogan overlay */
	z-index: 2;
	width: 100%;
	padding-top: 2rem;
	padding-bottom: 2rem;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.inprodi-hero__container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	max-width: 80rem; /* max-w-7xl */
	padding-left: 1rem; /* px-4 */
	padding-right: 1rem;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* Main slider — purely functional now: empty slides that carry only the per-slide
   background (data-bg). It grows to fill so the progress indicator sits at the
   bottom; the slogan is a separate fixed overlay (see below). */
.inprodi-hero__slider {
	width: 100%;
	flex: 1 1 auto;
	overflow: hidden;
}

.inprodi-hero__slider .swiper-wrapper {
	height: auto;
}

/* ---- Fixed slogan title ---- */
/* Vertically centered over the whole section and left-aligned to the container
   gutter. It lives OUTSIDE the slider, so it stays perfectly still while the
   backgrounds crossfade. pointer-events:none lets clicks reach the progress
   segments underneath. */
.inprodi-hero__slogan {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.inprodi-hero__slogan-inner {
	width: 100%;
	max-width: 80rem;
	margin: 0 auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* White artwork (built for dark backgrounds); a soft drop-shadow keeps it legible
   over bright photos. Width scales with the viewport, capped so the wide wordmark
   stays elegant. */
.inprodi-hero__slogan-img {
	display: block;
	width: min(92vw, 640px);
	height: auto;
	filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.4));
}

/* ---- Minimalist progress indicator ---- */
/* A small row of short segments (one per slide) at the bottom-left, echoing the
   slogan's left alignment. The active segment widens and fills white with the
   autoplay timer; the others stay as faint tracks. Segments are buttons so a
   click jumps to that slide. */
.inprodi-hero__progress {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.inprodi-hero__progress-seg {
	position: relative;
	width: 22px;
	height: 2px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background-color: rgba(255, 255, 255, 0.3);
	overflow: hidden;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.4s ease;
}

.inprodi-hero__progress-seg:hover {
	background-color: rgba(255, 255, 255, 0.5);
}

/* The active segment stretches into a longer pill. */
.inprodi-hero__progress-seg.is-active {
	width: 48px;
}

.inprodi-hero__progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #ffffff;
	border-radius: inherit;
	transform: scaleX(0);
	transform-origin: left center;
}

/* Premium scroll-down cue — hidden on desktop, shown only on mobile (below). */
.inprodi-hero__scroll {
	display: none;
}

/* sm */
@media (min-width: 640px) {
	.inprodi-hero__container,
	.inprodi-hero__slogan-inner {
		padding-left: 1.5rem; /* sm:px-6 */
		padding-right: 1.5rem;
	}
}

/* md */
@media (min-width: 768px) {
	.inprodi-hero__slogan-img {
		width: min(86vw, 1000px);
	}
}

/* lg */
@media (min-width: 1024px) {
	.inprodi-hero__container,
	.inprodi-hero__slogan-inner {
		padding-left: 2rem; /* lg:px-8 */
		padding-right: 2rem;
	}
}

/* xl */
@media (min-width: 1280px) {
	.inprodi-hero__slogan-img {
		width: 1120px;
	}
}

/* Mobile only: drop the progress indicator and show a single premium scroll-down
   cue instead. Desktop untouched. */
@media (max-width: 767px) {
	.inprodi-hero__progress {
		display: none;
	}

	.inprodi-hero__scroll {
		position: absolute;
		left: 50%;
		bottom: 26px;
		transform: translateX(-50%);
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 9px;
		pointer-events: none;
	}

	/* Thin vertical track with a luminous dot travelling down it. */
	.inprodi-hero__scroll-track {
		position: relative;
		width: 1px;
		height: 46px;
		background-color: rgba(255, 255, 255, 0.28);
		overflow: hidden;
	}
	.inprodi-hero__scroll-dot {
		position: absolute;
		left: 50%;
		top: 0;
		width: 3px;
		height: 10px;
		margin-left: -1.5px;
		border-radius: 2px;
		background-color: #ffffff;
		box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
		animation: inprodi-hero-scroll-dot 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}

	/* Downward chevron that gently bobs. */
	.inprodi-hero__scroll-chevron {
		width: 10px;
		height: 10px;
		border-right: 1.5px solid rgba(255, 255, 255, 0.85);
		border-bottom: 1.5px solid rgba(255, 255, 255, 0.85);
		animation: inprodi-hero-scroll-chevron 2s ease-in-out infinite;
	}
}

@keyframes inprodi-hero-scroll-dot {
	0%   { transform: translateY(-12px); opacity: 0; }
	25%  { opacity: 1; }
	70%  { opacity: 1; }
	100% { transform: translateY(46px); opacity: 0; }
}

@keyframes inprodi-hero-scroll-chevron {
	0%, 100% { transform: rotate(45deg) translate(0, 0); }
	50%      { transform: rotate(45deg) translate(2px, 2px); }
}

/* ---- Entrance animation on page load ---- */
@keyframes inprodi-hero-intro {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}

/* Slogan rises in first, then the progress indicator / scroll cue, in a soft cascade. */
.inprodi-hero__slogan {
	animation: inprodi-hero-intro 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s both;
}

.inprodi-hero__progress {
	animation: inprodi-hero-intro 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s both;
}

.inprodi-hero__scroll {
	animation: inprodi-hero-intro 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s both;
}

/* ---- Slow Ken Burns zoom on the background (subtle, always-on) ---- */
@keyframes inprodi-hero-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}

.inprodi-hero__bg {
	animation: inprodi-hero-kenburns 20s ease-in-out infinite alternate;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.inprodi-hero__bg,
	.inprodi-hero__progress-seg {
		transition: none;
	}
	.inprodi-hero__bg,
	.inprodi-hero__scroll-dot,
	.inprodi-hero__scroll-chevron,
	.inprodi-hero__slogan,
	.inprodi-hero__progress,
	.inprodi-hero__scroll {
		animation: none;
	}
}