/* =========================================================
   SECTION: HOME HERO
   Ultra-premium full-viewport hero — Apple / Tesla / Ather
   inspired. Uses CSS variables from style.css only — no
   variables redefined. Transitions only — no keyframes.
========================================================= */


/* ---------------------------------------------------------
   1. Full Viewport Hero
--------------------------------------------------------- */
.home-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	width: 100%;
	overflow: hidden;
	background-color: var(--color-background-dark);
	color: var(--color-text-inverse);
}


/* ---------------------------------------------------------
   2. Background Image / Video
--------------------------------------------------------- */
.home-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.home-hero__video,
.home-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}


/* ---------------------------------------------------------
   3. Overlay
--------------------------------------------------------- */
.home-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	background: linear-gradient(
		to top,
		var(--color-background-dark) 0%,
		transparent 60%
	);
	opacity: 0.8;
}


/* ---------------------------------------------------------
   4. Content Container
--------------------------------------------------------- */
.home-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-lg);
	width: 100%;
	max-width: var(--container-md);
	padding-inline: var(--container-padding-inline);
	padding-block: var(--space-4xl);
	text-align: center;
}


/* ---------------------------------------------------------
   5. Hero Badge
--------------------------------------------------------- */
.home-hero__badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-xxs) var(--space-md);
	border: 1px solid var(--color-border-dark);
	border-radius: var(--radius-full);
	background-color: rgba(255, 255, 255, 0.06);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-inverse);
}


/* ---------------------------------------------------------
   6. Heading
--------------------------------------------------------- */
.home-hero__heading {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-6xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-inverse);
	max-width: var(--container-sm);
}


/* ---------------------------------------------------------
   7. Supporting Text
--------------------------------------------------------- */
.home-hero__subtext {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-inverse);
	opacity: 0.85;
	max-width: var(--container-sm);
}


/* ---------------------------------------------------------
   8. CTA Buttons
--------------------------------------------------------- */
.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	margin-top: var(--space-sm);
}

.home-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-sm) var(--space-2xl);
	border-radius: var(--radius-full);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-normal);
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color var(--transition-base),
		color var(--transition-base),
		border-color var(--transition-base),
		transform var(--transition-fast);
}

.home-hero__cta:hover,
.home-hero__cta:focus-visible {
	transform: translateY(-2px);
}

.home-hero__cta--primary {
	background-color: var(--color-accent);
	color: var(--color-text-inverse);
	border-color: var(--color-accent);
}

.home-hero__cta--primary:hover,
.home-hero__cta--primary:focus-visible {
	background-color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: var(--color-text-inverse);
}

.home-hero__cta--secondary {
	background-color: transparent;
	color: var(--color-text-inverse);
	border-color: var(--color-text-inverse);
}

.home-hero__cta--secondary:hover,
.home-hero__cta--secondary:focus-visible {
	background-color: var(--color-text-inverse);
	color: var(--color-background-dark);
}


/* ---------------------------------------------------------
   9. Scroll Indicator
--------------------------------------------------------- */
.home-hero__scroll-indicator {
	position: absolute;
	bottom: var(--space-xl);
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 52px;
	border: 1px solid var(--color-text-inverse);
	border-radius: var(--radius-full);
	opacity: 0.7;
}

.home-hero__scroll-indicator-icon {
	width: 4px;
	height: 10px;
	margin-top: var(--space-xs);
	border-radius: var(--radius-full);
	background-color: var(--color-text-inverse);
}


/* ---------------------------------------------------------
   10. Desktop (default — see also min-width refinement)
--------------------------------------------------------- */
@media (min-width: 1280px) {

	.home-hero__content {
		padding-block: var(--space-5xl);
	}
}


/* ---------------------------------------------------------
   11. Responsive — Tablet
--------------------------------------------------------- */
@media (max-width: 1024px) {

	.home-hero {
		min-height: 90vh;
	}

	.home-hero__heading {
		font-size: var(--font-size-5xl);
	}

	.home-hero__subtext {
		font-size: var(--font-size-md);
	}

	.home-hero__content {
		padding-block: var(--space-3xl);
		gap: var(--space-md);
	}
}


/* ---------------------------------------------------------
   12. Responsive — Mobile
--------------------------------------------------------- */
@media (max-width: 767px) {

	.home-hero {
		min-height: 85vh;
	}

	.home-hero__badge {
		font-size: var(--font-size-xs);
	}

	.home-hero__heading {
		font-size: var(--font-size-3xl);
	}

	.home-hero__subtext {
		font-size: var(--font-size-sm);
	}

	.home-hero__content {
		padding-block: var(--space-2xl);
		gap: var(--space-sm);
	}

	.home-hero__actions {
		flex-direction: column;
		width: 100%;
		gap: var(--space-sm);
	}

	.home-hero__cta {
		width: 100%;
	}

	.home-hero__scroll-indicator {
		bottom: var(--space-lg);
		width: 26px;
		height: 42px;
	}
}
/* =========================================================
   PREMIUM HERO SLIDER
   Uses existing GPIPL design variables
   ========================================================= */

.home-hero--slider {
	position: relative;
	display: block;
	min-height: 100vh;
	isolation: isolate;
}

/* ---------------------------------------------------------
   Slides
--------------------------------------------------------- */

.home-hero__slides {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.home-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 900ms cubic-bezier(.22, 1, .36, 1),
		visibility 900ms ease;
}

.home-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
}

/* ---------------------------------------------------------
   Slide Media
--------------------------------------------------------- */

.home-hero__slide .home-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.home-hero__slide-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.04);
	transition:
		transform 7s cubic-bezier(.16, 1, .3, 1);
}

.home-hero__slide.is-active .home-hero__slide-image {
	transform: scale(1.10);
}

/* ---------------------------------------------------------
   Cinematic Gradient
--------------------------------------------------------- */

.home-hero__gradient {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, .78) 0%,
			rgba(0, 0, 0, .52) 35%,
			rgba(0, 0, 0, .12) 72%,
			rgba(0, 0, 0, .20) 100%
		),
		linear-gradient(
			0deg,
			rgba(0, 0, 0, .55) 0%,
			transparent 45%
		);
}

/* ---------------------------------------------------------
   Premium Glow
--------------------------------------------------------- */

.home-hero__glow {
	position: absolute;
	z-index: 2;
	width: 45vw;
	height: 45vw;
	max-width: 650px;
	max-height: 650px;
	right: -12vw;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(255, 255, 255, .10) 0%,
		rgba(255, 255, 255, 0) 68%
	);
	filter: blur(10px);
	pointer-events: none;
}

/* ---------------------------------------------------------
   Slide Content
--------------------------------------------------------- */

.home-hero--slider .home-hero__content {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	align-items: flex-start;
	max-width: 760px;
	padding-left: max(
		var(--container-padding-inline),
		5vw
	);
	padding-right: var(--container-padding-inline);
	text-align: left;
}

/* ---------------------------------------------------------
   Badge
--------------------------------------------------------- */

.home-hero--slider .home-hero__badge {
	opacity: 0;
	transform: translateY(25px);
	transition:
		opacity 700ms ease 150ms,
		transform 700ms cubic-bezier(.22, 1, .36, 1) 150ms;
}

.home-hero__slide.is-active .home-hero__badge {
	opacity: 1;
	transform: translateY(0);
}

.home-hero__badge-line {
	display: inline-block;
	width: 28px;
	height: 1px;
	margin-right: 10px;
	background: currentColor;
	vertical-align: middle;
}

/* ---------------------------------------------------------
   Heading Animation
--------------------------------------------------------- */

.home-hero--slider .home-hero__heading {
	margin: 0;
	opacity: 0;
	transform: translateY(45px);
	transition:
		opacity 800ms ease 250ms,
		transform 900ms cubic-bezier(.22, 1, .36, 1) 250ms;
}

.home-hero__slide.is-active .home-hero__heading {
	opacity: 1;
	transform: translateY(0);
}

/* ---------------------------------------------------------
   Supporting Text
--------------------------------------------------------- */

.home-hero--slider .home-hero__subtext {
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 700ms ease 400ms,
		transform 800ms cubic-bezier(.22, 1, .36, 1) 400ms;
}

.home-hero__slide.is-active .home-hero__subtext {
	opacity: .88;
	transform: translateY(0);
}

/* ---------------------------------------------------------
   CTA Animation
--------------------------------------------------------- */

.home-hero--slider .home-hero__actions {
	opacity: 0;
	transform: translateY(25px);
	transition:
		opacity 700ms ease 520ms,
		transform 800ms cubic-bezier(.22, 1, .36, 1) 520ms;
}

.home-hero__slide.is-active .home-hero__actions {
	opacity: 1;
	transform: translateY(0);
}

/* ---------------------------------------------------------
   CTA Premium Hover
--------------------------------------------------------- */

.home-hero--slider .home-hero__cta {
	position: relative;
	overflow: hidden;
}

.home-hero--slider .home-hero__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-110%);
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, .22),
		transparent
	);
	transition: transform 600ms ease;
}

.home-hero--slider .home-hero__cta:hover::after {
	transform: translateX(110%);
}

/* ---------------------------------------------------------
   CTA Arrow
--------------------------------------------------------- */

.home-hero__cta-arrow {
	display: inline-block;
	margin-left: 9px;
	transition: transform 300ms ease;
}

.home-hero__cta:hover .home-hero__cta-arrow {
	transform: translate(4px, -3px);
}

/* ---------------------------------------------------------
   Slider Controls
--------------------------------------------------------- */

.home-hero__controls {
	position: absolute;
	left: max(
		var(--container-padding-inline),
		5vw
	);
	bottom: 55px;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 18px;
}

.home-hero__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: var(--color-text-inverse);
	cursor: pointer;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition:
		background-color 300ms ease,
		border-color 300ms ease,
		transform 300ms ease;
}

.home-hero__arrow:hover {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .7);
	transform: translateY(-2px);
}

.home-hero__arrow span {
	font-size: 20px;
	line-height: 1;
}

/* ---------------------------------------------------------
   Pagination
--------------------------------------------------------- */

.home-hero__pagination {
	display: flex;
	align-items: center;
	gap: 9px;
}

.home-hero__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .38);
	cursor: pointer;
	transition:
		width 400ms ease,
		background-color 400ms ease,
		transform 300ms ease;
}

.home-hero__dot:hover {
	transform: scale(1.25);
}

.home-hero__dot.is-active {
	width: 34px;
	border-radius: 999px;
	background: var(--color-text-inverse);
}

/* ---------------------------------------------------------
   Counter
--------------------------------------------------------- */

.home-hero__counter {
	position: absolute;
	right: max(
		var(--container-padding-inline),
		5vw
	);
	bottom: 58px;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--color-text-inverse);
	font-size: var(--font-size-xs);
	letter-spacing: var(--letter-spacing-wide);
}

.home-hero__counter-current {
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-md);
}

.home-hero__counter-total {
	opacity: .55;
}

.home-hero__counter-line {
	width: 45px;
	height: 1px;
	background: rgba(255, 255, 255, .35);
}

/* ---------------------------------------------------------
   Scroll Indicator
--------------------------------------------------------- */

.home-hero__scroll {
	position: absolute;
	right: 5vw;
	bottom: 125px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: var(--color-text-inverse);
	font-size: 9px;
	letter-spacing: .18em;
	writing-mode: vertical-rl;
	opacity: .65;
}

.home-hero__scroll i {
	display: block;
	width: 1px;
	height: 45px;
	background: linear-gradient(
		to bottom,
		transparent,
		currentColor
	);
}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 767px) {

	.home-hero--slider {
		min-height: 85vh;
	}

	.home-hero--slider .home-hero__content {
		left: 0;
		top: 52%;
		width: 100%;
		max-width: none;
		padding-inline: 22px;
		padding-block: 0;
		align-items: flex-start;
		text-align: left;
	}

	.home-hero--slider .home-hero__heading {
		max-width: 100%;
		font-size: var(--font-size-3xl);
	}

	.home-hero--slider .home-hero__subtext {
		max-width: 100%;
		font-size: var(--font-size-sm);
	}

	.home-hero--slider .home-hero__actions {
		justify-content: flex-start;
		align-items: stretch;
		width: auto;
	}

	.home-hero--slider .home-hero__cta {
		width: auto;
		min-width: 160px;
	}

	.home-hero__controls {
		left: 22px;
		bottom: 28px;
		gap: 10px;
	}

	.home-hero__arrow {
		width: 40px;
		height: 40px;
	}

	.home-hero__counter {
		right: 22px;
		bottom: 33px;
	}

	.home-hero__scroll {
		display: none;
	}

	.home-hero__glow {
		width: 80vw;
		height: 80vw;
		right: -30vw;
		opacity: .5;
	}

	.home-hero__gradient {
		background:
			linear-gradient(
				0deg,
				rgba(0, 0, 0, .82) 0%,
				rgba(0, 0, 0, .48) 48%,
				rgba(0, 0, 0, .18) 100%
			);
	}
}

/* ---------------------------------------------------------
   Reduced Motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.home-hero__slide,
	.home-hero__slide-image,
	.home-hero__badge,
	.home-hero__heading,
	.home-hero__subtext,
	.home-hero__actions {
		transition: none !important;
		transform: none !important;
	}

}