/* =========================================================
   TJ Biker Banner Animation — Scoped / Conflict Safe
   Wrap the complete banner markup with: .banner-animation
   ========================================================= */

.site-header,
.banner-animation {
	--biker-black: hsl(0, 0%, 7%);
	--dark-gray: hsl(0, 0%, 12%);
	--golden-yellow: hsl(0, 73%, 41%);
	--metallic-gray: hsl(0, 0%, 53%);

	--red-600: #dc2626;
	--red-500: #ef4444;
	--yellow-400: #facc15;
	--yellow-300: #fde047;
	--yellow-200: #fef08a;
	--orange-400: #fb923c;
	--orange-500: #f97316;
	--orange-600: #ea580c;
	--slate-900: #0f172a;
	--slate-800: #1e293b;
	--slate-700: #334155;
	--slate-600: #475569;
	--slate-500: #64748b;
	--slate-400: #94a3b8;
	--gray-400: #9ca3af;
	--gray-500: #6b7280;

	--header-h: 6rem;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: #0d090985;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid #342c2a70;
	transition:
		background 0.5s ease,
		border-color 0.5s ease,
		backdrop-filter 0.5s ease;
}
.site-header.is-scrolled {
	background: rgba(18, 18, 18, 0.98);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border-bottom-color: rgba(220, 38, 38, 0.3);
}

.header-inner {
	max-width: 96rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 640px) {
	.header-inner {
		padding: 0 1.5rem;
	}
}
@media (min-width: 1024px) {
	.header-inner {
		padding: 0 2rem;
	}
}

.header-row {
	height: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	flex: 0 0 auto;
}
.brand-mark {
	font-family: "Oswald", Impact, sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
	padding: 0.35rem 0.5rem;
	border-radius: 0.5rem;
	color: #fff;
	background: linear-gradient(135deg, var(--red-600), #7f1d1d);
	box-shadow: 0 0 18px rgba(220, 38, 38, 0.45);
}
.brand-word {
	font-family: "Oswald", Impact, sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.14em;
	color: var(--yellow-300);
}

/* ---------- nav pills ---------- */
.main-nav {
	align-items: center;
	gap: 0.25rem;
	margin: 0 1rem;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
	max-width: 56rem;
}
@media (min-width: 1600px) {
	.main-nav {
		gap: 0.5rem;
	}
}
/* thoda chhota text taake 12 items comfortably fit ho jayen */
@media (max-width: 1599px) {
	.main-nav {
		gap: 2px;
		margin: 0 0.5rem 0 1rem;
		max-width: none;
	}
	.nav-text {
		font-size: 0.72rem;
		letter-spacing: 0.05em;
	}
	.nav-pill {
		padding: 0.4rem 0.35rem;
	}
	.nav-home {
		padding: 0.4rem 0.45rem;
		gap: 0.3rem;
	}
	.nav-home .ico {
		width: 1.05rem;
		height: 1.05rem;
	}
	.nav-caret .ico {
		width: 0.85rem;
		height: 0.85rem;
	}
	.icon-btn {
		width: 2.5rem;
		height: 2.5rem;
	}
	.socials {
		margin-right: 0.25rem;
	}
	.brand-word {
		display: none;
	}
}

.nav-item-wrap {
	position: relative;
}

.nav-pill {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 5px;
	border-radius: 0.75rem;
	cursor: pointer;
	text-decoration: none;
	background-color: rgba(220, 38, 38, 0);
	transition: background-color 0.3s ease;
}
.nav-home {
	gap: 0.5rem;
	padding: 0.5rem 1rem;
}

.nav-text {
	font-family: var(--sub-font);
	font-weight: 400;
	font-size: 9px;
	letter-spacing: 3px;
	white-space: nowrap;
	color: var(--extra-color-6);
	display: inline-block;
	text-transform: uppercase;
	transition:
		color 0.3s ease,
		filter 0.3s ease;
	text-shadow: none !important;
}
.nav-pill:hover .nav-text {
	color: var(--yellow-400);
	filter: drop-shadow(0 2px 4px rgba(248, 198, 12, 0.2));
}
.nav-pill.is-active .nav-text {
	color: var(--yellow-400);
	filter: drop-shadow(0 2px 4px rgba(248, 198, 12, 0.3));
}

.nav-icon,
.nav-caret {
	display: inline-flex;
	color: var(--yellow-300);
	transition:
		color 0.3s ease,
		filter 0.3s ease;
}
.nav-pill:hover .nav-icon {
	color: var(--yellow-400);
}
.nav-caret.is-open {
	color: var(--yellow-400);
	filter: drop-shadow(0 2px 4px rgba(248, 198, 12, 0.3));
}

.ico {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}
.nav-caret .ico {
	width: 1rem;
	height: 1rem;
}

.active-bar {
	position: absolute;
	bottom: -0.25rem;
	left: 0.5rem;
	right: 0.5rem;
	height: 0.25rem;
	border-radius: 9999px;
	background: linear-gradient(
		to right,
		var(--red-600),
		var(--yellow-400),
		var(--red-600)
	);
	opacity: 0;
	transform: scaleX(0);
}
.nav-pill.is-active .active-bar {
	opacity: 1;
}

.nav-hover-glow {
	position: absolute;
	inset: -4px;
	border-radius: 0.75rem;
	background: linear-gradient(
		to right,
		rgba(220, 38, 38, 0.1),
		rgba(250, 204, 21, 0.1),
		rgba(220, 38, 38, 0.1)
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.nav-pill:hover .nav-hover-glow {
	opacity: 1;
}

/* ---------- dropdown ---------- */
.nav-dropdown {
	position: absolute;
	top: 100%;
	margin-top: 1rem;
	background: rgba(18, 18, 18, 0.98);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border: 1px solid rgba(220, 38, 38, 0.3);
	border-radius: 1rem;
	box-shadow: 0 25px 50px -12px rgba(220, 38, 38, 0.2);
	z-index: 50;
	overflow: hidden;
	max-width: 90vw;
	display: none;
	opacity: 0;
}
.nav-dropdown.is-mounted {
	display: block;
}
.nav-dropdown.pos-left {
	left: 0;
}
.nav-dropdown.pos-right {
	right: 0;
}
.nav-dropdown.pos-center {
	left: 50%;
	margin-left: 0;
}

.dd-sheen {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom right,
		rgba(220, 38, 38, 0.05),
		transparent,
		rgba(250, 204, 21, 0.05)
	);
	pointer-events: none;
}

.dd-body {
	position: relative;
	padding: 1rem;
	display: grid;
	gap: 1rem;
}
.dd-body.cols-1 {
	grid-template-columns: repeat(1, 1fr);
}
.dd-body.cols-2 {
	grid-template-columns: repeat(2, 1fr);
}
.dd-body.cols-3 {
	grid-template-columns: repeat(3, 1fr);
}
.dd-body.is-wide {
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}

.dd-group {
	min-width: 0;
}
.dd-group.span-all {
	grid-column: 1 / -1;
}

.dd-title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid rgba(220, 38, 38, 0.3);
	background: linear-gradient(to right, var(--red-600), var(--yellow-400));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.dd-links {
	display: grid;
	gap: 0.25rem;
}
.dd-links.grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dd-link {
	position: relative;
	display: block;
	padding: 0.375rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--yellow-300);
	border-radius: 0.375rem;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition:
		background-color 0.2s ease-out,
		color 0.2s ease;
}
.dd-link:hover {
	background: var(--red-600);
	color: #fff;
}

.dd-underline {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 0.25rem;
	transform-origin: left center;
	background: linear-gradient(
		to right,
		var(--red-600),
		var(--yellow-400),
		var(--red-600)
	);
}

/* ---------- header actions ---------- */
.header-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.icon-btn {
	position: relative;
	width: 3rem;
	height: 3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: transparent;
	color: var(--yellow-300);
	border: 1px solid rgba(220, 38, 38, 0.2);
	transition:
		color 0.3s ease,
		background-color 0.3s ease,
		border-color 0.3s ease;
}
.icon-btn:hover {
	color: var(--yellow-400);
	background: rgba(220, 38, 38, 0.1);
	border-color: rgba(220, 38, 38, 0.4);
}

.cart-badge {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	width: 1.25rem;
	height: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: var(--red-600);
	color: var(--yellow-300);
	font-size: 0.7rem;
	font-weight: 700;
	border: 1px solid rgba(250, 204, 21, 0.3);
}

.socials {
	align-items: center;
	gap: 0.25rem;
	margin-right: 1rem;
}
.social-link {
	display: inline-flex;
	padding: 0.5rem;
	border-radius: 9999px;
	color: var(--yellow-300);
	transition:
		color 0.3s ease,
		background-color 0.3s ease;
}
.social-link .ico {
	width: 1rem;
	height: 1rem;
}
.social-link:hover {
	color: #ec4899;
	background: rgba(236, 72, 153, 0.1);
}

/* ---------- mobile panel ---------- */
.mobile-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: rgba(18, 18, 18, 0.95);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border-top: 1px solid rgba(220, 38, 38, 0.2);
	overflow: hidden;
	height: 0;
	opacity: 0;
	display: none;
}
.mobile-panel.is-mounted {
	display: block;
}
.mobile-panel-inner {
	padding: 1.5rem 1rem;
	display: grid;
	gap: 1rem;
}

.m-link {
	display: block;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	color: var(--yellow-300);
	text-decoration: none;
	font-family: "Oswald", Impact, sans-serif;
	font-weight: 700;
	font-size: 1.125rem;
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}
.m-link:hover {
	background: rgba(250, 204, 21, 0.1);
	color: var(--yellow-400);
}

.banner-animation * {
	box-sizing: border-box;
}

.banner-animation,
.banner-animation {
	background: var(--biker-black);
}

.banner-animation {
	font-family:
		"Inter",
		system-ui,
		-apple-system,
		"Segoe UI",
		sans-serif;
	color: var(--yellow-300);
	overflow-x: hidden;
}

.banner-animation .font-oswald {
	font-family: "Oswald", Impact, sans-serif;
}

.banner-animation .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: rgba(18, 18, 18, 0.9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(220, 38, 38, 0.2);
	transition:
		background 0.5s ease,
		border-color 0.5s ease,
		backdrop-filter 0.5s ease;
}
.banner-animation .site-header.is-scrolled {
	background: rgba(18, 18, 18, 0.98);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border-bottom-color: rgba(220, 38, 38, 0.3);
}

.banner-animation .header-inner {
	max-width: 96rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 640px) {
	.banner-animation .header-inner {
		padding: 0 1.5rem;
	}
}
@media (min-width: 1024px) {
	.banner-animation .header-inner {
		padding: 0 2rem;
	}
}

.banner-animation .header-row {
	height: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.banner-animation .brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	flex: 0 0 auto;
}
.banner-animation .brand-mark {
	font-family: "Oswald", Impact, sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
	padding: 0.35rem 0.5rem;
	border-radius: 0.5rem;
	color: #fff;
	background: linear-gradient(135deg, var(--red-600), #7f1d1d);
	box-shadow: 0 0 18px rgba(220, 38, 38, 0.45);
}
.banner-animation .brand-word {
	font-family: "Oswald", Impact, sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.14em;
	color: var(--yellow-300);
}

.banner-animation .main-nav {
	align-items: center;
	gap: 0.25rem;
	margin: 0 1rem;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
	max-width: 56rem;
}
@media (min-width: 1600px) {
	.banner-animation .main-nav {
		gap: 0.5rem;
	}
}

@media (max-width: 1599px) {
	.banner-animation .main-nav {
		gap: 2px;
		margin: 0 0.5rem 0 1rem;
		max-width: none;
	}
	.banner-animation .nav-text {
		font-size: 0.72rem;
		letter-spacing: 0.05em;
	}
	.banner-animation .nav-pill {
		padding: 0.4rem 0.35rem;
	}
	.banner-animation .nav-home {
		padding: 0.4rem 0.45rem;
		gap: 0.3rem;
	}
	.banner-animation .nav-home .ico {
		width: 1.05rem;
		height: 1.05rem;
	}
	.banner-animation .nav-caret .ico {
		width: 0.85rem;
		height: 0.85rem;
	}
	.banner-animation .icon-btn {
		width: 2.5rem;
		height: 2.5rem;
	}
	.banner-animation .socials {
		margin-right: 0.25rem;
	}
	.banner-animation .brand-word {
		display: none;
	}
}

.banner-animation .nav-item-wrap {
	position: relative;
}

.banner-animation .nav-pill {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.75rem;
	cursor: pointer;
	text-decoration: none;
	background-color: rgba(220, 38, 38, 0);
	transition: background-color 0.3s ease;
}
.banner-animation .nav-home {
	gap: 0.5rem;
	padding: 0.5rem 1rem;
}

.banner-animation .nav-text {
	font-family: "Oswald", Impact, sans-serif;
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
	color: var(--yellow-300);
	display: inline-block;
	transition:
		color 0.3s ease,
		filter 0.3s ease;
}
.banner-animation .nav-pill:hover .nav-text {
	color: var(--yellow-400);
	filter: drop-shadow(0 2px 4px rgba(248, 198, 12, 0.2));
}
.banner-animation .nav-pill.is-active .nav-text {
	color: var(--yellow-400);
	filter: drop-shadow(0 2px 4px rgba(248, 198, 12, 0.3));
}

.banner-animation .nav-icon,
.banner-animation .nav-caret {
	display: inline-flex;
	color: var(--yellow-300);
	transition:
		color 0.3s ease,
		filter 0.3s ease;
}
.banner-animation .nav-pill:hover .nav-icon {
	color: var(--yellow-400);
}
.banner-animation .nav-caret.is-open {
	color: var(--yellow-400);
	filter: drop-shadow(0 2px 4px rgba(248, 198, 12, 0.3));
}

.banner-animation .ico {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}
.banner-animation .nav-caret .ico {
	width: 1rem;
	height: 1rem;
}

.banner-animation .active-bar {
	position: absolute;
	bottom: -0.25rem;
	left: 0.5rem;
	right: 0.5rem;
	height: 0.25rem;
	border-radius: 9999px;
	background: linear-gradient(
		to right,
		var(--red-600),
		var(--yellow-400),
		var(--red-600)
	);
	opacity: 0;
	transform: scaleX(0);
}
.banner-animation .nav-pill.is-active .active-bar {
	opacity: 1;
}

.banner-animation .nav-hover-glow {
	position: absolute;
	inset: -4px;
	border-radius: 0.75rem;
	background: linear-gradient(
		to right,
		rgba(220, 38, 38, 0.1),
		rgba(250, 204, 21, 0.1),
		rgba(220, 38, 38, 0.1)
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.banner-animation .nav-pill:hover .nav-hover-glow {
	opacity: 1;
}

.banner-animation .nav-dropdown {
	position: absolute;
	top: 100%;
	margin-top: 1rem;
	background: rgba(18, 18, 18, 0.98);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border: 1px solid rgba(220, 38, 38, 0.3);
	border-radius: 1rem;
	box-shadow: 0 25px 50px -12px rgba(220, 38, 38, 0.2);
	z-index: 50;
	overflow: hidden;
	max-width: 90vw;
	display: none;
	opacity: 0;
}
.banner-animation .nav-dropdown.is-mounted {
	display: block;
}
.banner-animation .nav-dropdown.pos-left {
	left: 0;
}
.banner-animation .nav-dropdown.pos-right {
	right: 0;
}
.banner-animation .nav-dropdown.pos-center {
	left: 50%;
	margin-left: 0;
}

.banner-animation .dd-sheen {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom right,
		rgba(220, 38, 38, 0.05),
		transparent,
		rgba(250, 204, 21, 0.05)
	);
	pointer-events: none;
}

.banner-animation .dd-body {
	position: relative;
	padding: 1rem;
	display: grid;
	gap: 1rem;
}
.banner-animation .dd-body.cols-1 {
	grid-template-columns: repeat(1, 1fr);
}
.banner-animation .dd-body.cols-2 {
	grid-template-columns: repeat(2, 1fr);
}
.banner-animation .dd-body.cols-3 {
	grid-template-columns: repeat(3, 1fr);
}
.banner-animation .dd-body.is-wide {
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}

.banner-animation .dd-group {
	min-width: 0;
}
.banner-animation .dd-group.span-all {
	grid-column: 1 / -1;
}

.banner-animation .dd-title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid rgba(220, 38, 38, 0.3);
	background: linear-gradient(to right, var(--red-600), var(--yellow-400));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.banner-animation .dd-links {
	display: grid;
	gap: 0.25rem;
}
.banner-animation .dd-links.grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.banner-animation .dd-link {
	position: relative;
	display: block;
	padding: 0.375rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--yellow-300);
	border-radius: 0.375rem;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition:
		background-color 0.2s ease-out,
		color 0.2s ease;
}
.banner-animation .dd-link:hover {
	background: var(--red-600);
	color: #fff;
}

.banner-animation .dd-underline {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 0.25rem;
	transform-origin: left center;
	background: linear-gradient(
		to right,
		var(--red-600),
		var(--yellow-400),
		var(--red-600)
	);
}

.banner-animation .header-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.banner-animation .icon-btn {
	position: relative;
	width: 3rem;
	height: 3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: transparent;
	color: var(--yellow-300);
	border: 1px solid rgba(220, 38, 38, 0.2);
	transition:
		color 0.3s ease,
		background-color 0.3s ease,
		border-color 0.3s ease;
}
.banner-animation .icon-btn:hover {
	color: var(--yellow-400);
	background: rgba(220, 38, 38, 0.1);
	border-color: rgba(220, 38, 38, 0.4);
}

.banner-animation .cart-badge {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	width: 1.25rem;
	height: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: var(--red-600);
	color: var(--yellow-300);
	font-size: 0.7rem;
	font-weight: 700;
	border: 1px solid rgba(250, 204, 21, 0.3);
}

.banner-animation .socials {
	align-items: center;
	gap: 0.25rem;
	margin-right: 1rem;
}
.banner-animation .social-link {
	display: inline-flex;
	padding: 0.5rem;
	border-radius: 9999px;
	color: var(--yellow-300);
	transition:
		color 0.3s ease,
		background-color 0.3s ease;
}
.banner-animation .social-link .ico {
	width: 1rem;
	height: 1rem;
}
.banner-animation .social-link:hover {
	color: #ec4899;
	background: rgba(236, 72, 153, 0.1);
}

.banner-animation .mobile-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: rgba(18, 18, 18, 0.95);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border-top: 1px solid rgba(220, 38, 38, 0.2);
	overflow: hidden;
	height: 0;
	opacity: 0;
	display: none;
}
.banner-animation .mobile-panel.is-mounted {
	display: block;
}
.banner-animation .mobile-panel-inner {
	padding: 1.5rem 1rem;
	display: grid;
	gap: 1rem;
}

.banner-animation .m-link {
	display: block;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	color: var(--yellow-300);
	text-decoration: none;
	font-family: "Oswald", Impact, sans-serif;
	font-weight: 700;
	font-size: 1.125rem;
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}
.banner-animation .m-link:hover {
	background: rgba(250, 204, 21, 0.1);
	color: var(--yellow-400);
}

.banner-animation.hero {
	position: relative;
	height: 100vh;
	min-height: 40rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding-top: 5rem;
	background: linear-gradient(
		to bottom right,
		var(--biker-black),
		var(--slate-900),
		var(--biker-black)
	);
}
.banner-animation .hero-vignette {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.8),
		rgba(0, 0, 0, 0.6),
		rgba(0, 0, 0, 0.8)
	);
}
.banner-animation .hero-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.banner-animation .fx {
	position: absolute;
	will-change: transform, opacity;
}
.banner-animation .fill-svg {
	width: 100%;
	height: 100%;
	display: block;
}
.banner-animation .c-gold {
	color: var(--golden-yellow);
}
.banner-animation .c-metal {
	color: var(--metallic-gray);
}

.banner-animation .glow {
	position: absolute;
	inset: 0;
	border-radius: 9999px;
}
.banner-animation .glow-gold {
	background: var(--golden-yellow);
	opacity: 0.4;
}
.banner-animation .glow-metal {
	background: var(--metallic-gray);
	opacity: 0.3;
}
.banner-animation .blur-sm {
	filter: blur(4px);
}
.banner-animation .blur-md {
	filter: blur(12px);
}
.banner-animation .blur-lg {
	filter: blur(16px);
}
.banner-animation .blur-xl {
	filter: blur(24px);
}
.banner-animation .blur-3xl {
	filter: blur(64px);
}

.banner-animation .gear-a {
	top: 5rem;
	left: 5rem;
	width: 4rem;
	height: 4rem;
	opacity: 0.6;
}
.banner-animation .gear-b {
	top: 8rem;
	left: 8rem;
	width: 3rem;
	height: 3rem;
	opacity: 0.5;
}

.banner-animation .chain {
	bottom: 10rem;
	right: 8rem;
	width: 8rem;
	height: 1rem;
	opacity: 0.7;
}
.banner-animation .chain-bar {
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	opacity: 0.8;
	background: linear-gradient(
		to right,
		var(--metallic-gray),
		var(--golden-yellow)
	);
}
.banner-animation .chain-dots {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.banner-animation .chain-dots i {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background: var(--golden-yellow);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

.banner-animation .rod {
	top: 33.333%;
	left: 25%;
	width: 6rem;
	height: 0.5rem;
	opacity: 0.25;
}
.banner-animation .rod-bar {
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	background: linear-gradient(to right, var(--slate-600), var(--slate-400));
}

.banner-animation .needle-a {
	top: 8rem;
	right: 5rem;
	width: 3rem;
	height: 3rem;
	opacity: 0.25;
}
.banner-animation .needle-b {
	top: 5rem;
	right: 10rem;
	width: 2.5rem;
	height: 2.5rem;
	opacity: 0.2;
}
.banner-animation .needle-stick {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	transform-origin: bottom center;
	width: 2px;
}
.banner-animation .needle-stick.gold {
	height: 1.5rem;
	background: var(--golden-yellow);
}
.banner-animation .needle-stick.red {
	height: 1.25rem;
	background: var(--red-500);
}
.banner-animation .needle-ring {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 9999px;
}
.banner-animation .needle-ring.gold {
	top: 0.5rem;
	width: 2rem;
	height: 2rem;
	border: 2px solid var(--golden-yellow);
}
.banner-animation .needle-ring.red {
	top: 0.375rem;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--red-500);
}

.banner-animation .flame-a {
	bottom: 5rem;
	left: 8rem;
	width: 2rem;
	height: 4rem;
	opacity: 0.2;
}
.banner-animation .flame-body {
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	background: linear-gradient(to top, var(--orange-500), transparent);
}

.banner-animation .halo {
	top: 4rem;
	left: 50%;
	width: 5rem;
	height: 5rem;
	opacity: 0.1;
}
.banner-animation .halo-body {
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	background: radial-gradient(circle, var(--golden-yellow), transparent 70%);
}

.banner-animation .dial {
	bottom: 8rem;
	left: 4rem;
	width: 2.5rem;
	height: 2.5rem;
	opacity: 0.3;
}
.banner-animation .dial-sparks {
	position: absolute;
	inset: 0;
}
.banner-animation .dial-spark {
	position: absolute;
	width: 2px;
	height: 4px;
	background: var(--orange-400);
}

.banner-animation .piston {
	top: 50%;
	right: 4rem;
	width: 1rem;
	height: 3rem;
	opacity: 0.25;
}
.banner-animation .piston-head {
	width: 100%;
	height: 2rem;
	background: var(--metallic-gray);
	border-radius: 9999px 9999px 0 0;
}
.banner-animation .piston-rod {
	width: 0.5rem;
	height: 1rem;
	margin: 0 auto;
	background: var(--slate-500);
}

.banner-animation .smoke-puff {
	bottom: 0;
	left: 5rem;
	width: 10rem;
	height: 10rem;
	opacity: 0.5;
}
.banner-animation .smoke-body {
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	filter: blur(16px);
	background: linear-gradient(to top, var(--gray-500), transparent);
}
.banner-animation .smoke-body-2 {
	position: absolute;
	inset: 0;
	filter: blur(24px);
	opacity: 0.6;
	background: linear-gradient(to top, var(--gray-400), transparent);
}

.banner-animation .ground-fog {
	bottom: 0;
	left: 0;
	right: 0;
	height: 8rem;
	opacity: 0.1;
}
.banner-animation .fog-body {
	width: 100%;
	height: 100%;
	filter: blur(24px);
	background: linear-gradient(to top, var(--gray-500), transparent);
}

.banner-animation .exhaust {
	bottom: 6rem;
	right: 5rem;
	width: 2rem;
	height: 3rem;
	opacity: 0.3;
}
.banner-animation .exhaust-body {
	width: 100%;
	height: 100%;
	border-radius: 9999px 9999px 0 0;
	background: linear-gradient(
		to top,
		var(--orange-600),
		var(--red-500),
		transparent
	);
}

.banner-animation .spark {
	position: absolute;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: var(--orange-400);
	opacity: 0.8;
	filter: drop-shadow(0 0 4px rgba(251, 146, 60, 0.8));
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}
.banner-animation .dust {
	position: absolute;
	width: 2px;
	height: 2px;
	border-radius: 9999px;
	background: var(--gray-400);
	opacity: 0.4;
}
.banner-animation .blob {
	position: absolute;
	width: 0.75rem;
	height: 0.75rem;
	opacity: 0.15;
}
.banner-animation .blob-inner {
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	background: var(--slate-700);
	filter: blur(4px);
}

.banner-animation .blob-main {
	top: 33.333%;
	left: 25%;
	width: 1.5rem;
	height: 1.5rem;
	opacity: 0.2;
}
.banner-animation .blob-body {
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	background: var(--slate-800);
	filter: blur(4px);
}

.banner-animation .plate-a {
	top: 5rem;
	right: 10rem;
	width: 5rem;
	height: 5rem;
	opacity: 0.1;
}
.banner-animation .plate-b {
	bottom: 25%;
	right: 33.333%;
	width: 4rem;
	height: 4rem;
	opacity: 0.08;
}
.banner-animation .plate-body {
	width: 100%;
	height: 100%;
}
.banner-animation .plate-body-a {
	border-radius: 0.5rem;
	filter: blur(4px);
	background: linear-gradient(
		to bottom right,
		#9a3412,
		#7f1d1d,
		var(--slate-800)
	);
}
.banner-animation .plate-body-b {
	border-radius: 0.75rem;
	filter: blur(12px);
	background: linear-gradient(
		to top left,
		var(--slate-700),
		#1f2937,
		var(--slate-600)
	);
}

.banner-animation .hero-content {
	position: relative;
	z-index: 10;
	text-align: center;
	padding: 0 1rem;
	max-width: 42rem;
	margin: 0 auto;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.banner-animation .hero-logo-wrap {
	position: relative;
	margin-bottom: 1.5rem;
	width: 100%;
}

.banner-animation .logo-radial {
	position: absolute;
	inset: 0;
	border-radius: 9999px;
	filter: blur(64px);
	background: radial-gradient(circle, rgba(220, 38, 38, 0.2), transparent 70%);
	opacity: 0.2;
}

.banner-animation .logo-holder {
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1000px;
}

.banner-animation .hero-logo {
	height: 24rem;
	width: auto;
	object-fit: contain;
	cursor: pointer;
	outline: none;
}
@media (min-width: 768px) {
	.banner-animation .hero-logo {
		height: 28rem;
	}
}
@media (min-width: 1024px) {
	.banner-animation .hero-logo {
		height: 32rem;
		max-width: 300px;
	}
}

.banner-animation .logo-divider {
	height: 0.25rem;
	width: 0;
	margin: 0 auto;
	background: linear-gradient(
		to right,
		transparent,
		var(--red-600),
		transparent
	);
}

.banner-animation .feature-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	max-width: 56rem;
	margin: 0 auto;
	width: 100%;
}
@media (min-width: 768px) {
	.banner-animation .feature-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.banner-animation .feature-card {
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	padding: 1rem;
	cursor: pointer;
	background: linear-gradient(
		to bottom right,
		rgba(255, 255, 255, 0.1),
		rgba(255, 255, 255, 0.05)
	);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	transform-style: preserve-3d;
}
.banner-animation .feature-tint {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.banner-animation .feature-card:hover .feature-tint {
	opacity: 0.2 !important;
}
.banner-animation .tint-blue {
	background: linear-gradient(to bottom right, #3b82f6, #06b6d4);
}
.banner-animation .tint-yellow {
	background: linear-gradient(to bottom right, #eab308, #f97316);
}
.banner-animation .tint-green {
	background: linear-gradient(to bottom right, #22c55e, #10b981);
}
.banner-animation .tint-purple {
	background: linear-gradient(to bottom right, #a855f7, #ec4899);
}

.banner-animation .feature-body {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
}
.banner-animation .feature-icon-wrap {
	position: relative;
}
.banner-animation .feature-icon-wrap .ico {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--red-600);
}
.banner-animation .feature-icon-glow {
	position: absolute;
	inset: 0;
	border-radius: 9999px;
	background: var(--red-600);
	opacity: 0.3;
	filter: blur(12px);
}
.banner-animation .feature-title {
	font-family: "Oswald", Impact, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.08em;
	color: var(--yellow-400);
	margin: 0;
}
.banner-animation .feature-desc {
	font-size: 0.75rem;
	color: var(--yellow-300);
	margin: 0;
	transition: color 0.3s ease;
}
.banner-animation .feature-card:hover .feature-desc {
	color: var(--yellow-200);
}

.banner-animation .feature-particle {
	position: absolute;
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 9999px;
	background: var(--red-600);
	opacity: 0.6;
}

.banner-animation .after-hero {
	padding: 8rem 0;
	background: linear-gradient(
		to bottom right,
		var(--biker-black),
		var(--dark-gray),
		var(--biker-black)
	);
}
.banner-animation .after-title {
	font-family: "Oswald", Impact, sans-serif;
	font-weight: 700;
	background: linear-gradient(to right, var(--red-600), var(--yellow-400));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.banner-animation .after-sub {
	color: rgba(253, 224, 71, 0.8);
}

@media (prefers-reduced-motion: reduce) {
	.banner-animation .fx,
	.banner-animation .spark,
	.banner-animation .dust,
	.banner-animation .blob {
		animation: none !important;
	}
}