/**
 * TactNexa — Shop Hero
 *
 * Main Shop page only.
 * Load after woocommerce/shop.css.
 *
 * Blocksy supplies the native H1.
 * functions.php adds supporting content through hero hooks.
 *
 * Artwork:
 * assets/images/shop/tactnexa-shop-gear.png
 *
 * Decorative grid, lighting, and rings are CSS only.
 */


/* =========================================================
   Foundation and CSS Lighting
   ========================================================= */

body.woocommerce-shop .hero-section {
	position: relative;
	isolation: isolate;

	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 430px;
	padding: 60px 0;

	overflow: hidden;

	background-color: #031126 !important;

	background-image:
		linear-gradient(
			90deg,
			rgba(3, 17, 38, 0.45) 0%,
			transparent 65%
		),
		linear-gradient(
			rgba(82, 215, 255, 0.075) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(82, 215, 255, 0.075) 1px,
			transparent 1px
		),
		radial-gradient(
			ellipse at 83% 22%,
			rgba(22, 119, 255, 0.46),
			transparent 48%
		),
		radial-gradient(
			ellipse at 75% 90%,
			rgba(11, 93, 194, 0.36),
			transparent 50%
		),
		linear-gradient(
			110deg,
			#031126 0%,
			#061a36 51%,
			#0b3264 100%
		) !important;

	background-repeat:
		no-repeat,
		repeat,
		repeat,
		no-repeat,
		no-repeat,
		no-repeat !important;

	background-size:
		auto,
		46px 46px,
		46px 46px,
		auto,
		auto,
		auto !important;

	box-shadow:
		inset 0 -1px 0 rgba(82, 215, 255, 0.20);
}


/* =========================================================
   Transparent Gaming Accessories PNG
   ========================================================= */

body.woocommerce-shop .hero-section::before {
	content: "";

	position: absolute;
	z-index: 1;

	top: 0;
	right: 0;
	bottom: 0;
	left: auto;

	width: min(800px, 59%);
	height: 100%;

	background-image:
		url("../../images/shop/tactnexa-shop-gear.png");

	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;

	-webkit-mask-image: none;
	mask-image: none;

	opacity: 1;
	pointer-events: none;

	transform: translateY(0);

	animation:
		tnx-shop-gear-float 8s ease-in-out infinite;
}


/* =========================================================
   Energy Rings Behind PNG
   ========================================================= */

body.woocommerce-shop .hero-section::after {
	content: "";

	position: absolute;
	z-index: 0;

	top: 50%;
	right: -55px;
	left: auto;

	width: min(520px, 44vw);
	height: auto;
	aspect-ratio: 1;

	border: 1px solid rgba(82, 215, 255, 0.25);
	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			transparent 33%,
			rgba(82, 215, 255, 0.19) 33.3%,
			transparent 34%,
			transparent 56%,
			rgba(82, 215, 255, 0.13) 56.4%,
			transparent 57.3%
		),
		conic-gradient(
			from 18deg,
			transparent 0 24deg,
			rgba(82, 215, 255, 0.28) 55deg,
			transparent 82deg 179deg,
			rgba(22, 119, 255, 0.32) 218deg,
			transparent 240deg 360deg
		);

	box-shadow:
		0 0 0 38px rgba(82, 215, 255, 0.025),
		0 0 0 84px rgba(82, 215, 255, 0.018),
		inset 0 0 80px rgba(22, 119, 255, 0.12);

	opacity: 0.8;
	pointer-events: none;

	transform:
		translateY(-50%) rotate(0deg);

	animation:
		tnx-shop-orbit 50s linear infinite;
}


/* =========================================================
   Blocksy Hero Content Container
   ========================================================= */

body.woocommerce-shop .hero-section > .entry-header {
	--theme-text-align: left;

	position: relative;
	z-index: 2;

	display: flex;
	flex-direction: column;

	align-items: flex-start;
	justify-content: center;

	width: min(1220px, calc(100% - 64px));
	max-width: none;
	min-width: 0;

	margin-inline: auto;
	padding: 0;

	text-align: left;
}


/* =========================================================
   Hero Eyebrow
   ========================================================= */

body.woocommerce-shop .tnx-shop-hero__eyebrow {
	margin: 0 0 12px;

	color: #60d8ff;

	font-size: 0.76rem;
	font-weight: 800;
	line-height: 1.5;

	letter-spacing: 0.22em;
	text-transform: uppercase;
}


/* =========================================================
   Hero Heading
   ========================================================= */

body.woocommerce-shop .hero-section :is(
	.page-title,
	.entry-title
) {
	width: auto;
	max-width: 570px;

	margin: 0;

	background:
		linear-gradient(
			100deg,
			#ffffff 8%,
			#ffffff 57%,
			#72ddff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: #ffffff !important;
	-webkit-text-fill-color: transparent;

	font-size: clamp(3.8rem, 6vw, 5.6rem);
	font-weight: 800;
	line-height: 1.04;

	letter-spacing: -0.052em;

	text-align: left;
	text-shadow: none;
}


/* =========================================================
   Hero Description
   ========================================================= */

body.woocommerce-shop .tnx-shop-hero__description {
	width: min(490px, 46%);
	max-width: 100%;

	margin: 20px 0 0;

	color: #d9e7f7;

	font-size: clamp(0.98rem, 1.15vw, 1.12rem);
	font-weight: 400;
	line-height: 1.75;

	text-align: left;
}


/* =========================================================
   Hero Highlights Grid
   ========================================================= */

body.woocommerce-shop .tnx-shop-hero__highlights {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 15px;

	width: min(610px, 54%);
	max-width: 100%;

	margin-top: 33px;
}


/* =========================================================
   Highlight Item
   ========================================================= */

body.woocommerce-shop .tnx-shop-hero__highlight {
	display: flex;
	align-items: center;

	gap: 10px;
	min-width: 0;
}


/* =========================================================
   Highlight Icon
   ========================================================= */

body.woocommerce-shop .tnx-shop-hero__highlight-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 42px;

	width: 42px;
	height: 42px;

	border: 1px solid rgba(82, 215, 255, 0.30);
	border-radius: 50%;

	background: rgba(22, 119, 255, 0.16);

	color: #52d7ff;

	box-shadow:
		inset 0 0 18px rgba(22, 119, 255, 0.10);
}


body.woocommerce-shop .tnx-shop-hero__highlight-icon svg {
	display: block;

	width: 21px;
	height: 21px;

	stroke: currentColor;
	stroke-width: 1.7;

	stroke-linecap: round;
	stroke-linejoin: round;
}


/* =========================================================
   Highlight Typography
   ========================================================= */

body.woocommerce-shop .tnx-shop-hero__highlight-copy {
	display: flex;
	flex-direction: column;

	gap: 3px;
	min-width: 0;

	text-align: left;
}


body.woocommerce-shop .tnx-shop-hero__highlight-copy strong {
	color: #ffffff;

	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.35;
}


body.woocommerce-shop .tnx-shop-hero__highlight-copy > span {
	color: #b9cee8;

	font-size: 0.69rem;
	line-height: 1.35;
}


/* =========================================================
   Product Floating Animation
   ========================================================= */

@keyframes tnx-shop-gear-float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-7px);
	}
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

	body.woocommerce-shop .hero-section {
		min-height: 390px;
		padding: 52px 0;
	}

	body.woocommerce-shop .hero-section::before {
		width: 57%;
	}

	body.woocommerce-shop .hero-section > .entry-header {
		width: calc(100% - 48px);
	}

	body.woocommerce-shop .tnx-shop-hero__description {
		width: min(450px, 48%);
	}

	body.woocommerce-shop .tnx-shop-hero__highlights {
		width: min(510px, 55%);
		gap: 10px;
	}

	body.woocommerce-shop .tnx-shop-hero__highlight {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

	body.woocommerce-shop .hero-section {
		min-height: 625px;

		padding: 38px 0 265px;

		align-items: flex-start;

		background-size:
			auto,
			38px 38px,
			38px 38px,
			auto,
			auto,
			auto !important;
	}

	body.woocommerce-shop .hero-section > .entry-header {
		width: calc(100% - 36px);
		align-items: flex-start;
	}

	body.woocommerce-shop .hero-section :is(
		.page-title,
		.entry-title
	) {
		max-width: 100%;

		font-size: clamp(3.2rem, 13vw, 4.6rem);

		text-align: left;
	}

	body.woocommerce-shop .tnx-shop-hero__description {
		width: min(520px, 100%);

		margin-top: 15px;

		font-size: 0.94rem;
		line-height: 1.6;
	}

	body.woocommerce-shop .tnx-shop-hero__highlights {
		width: 100%;

		margin-top: 23px;

		gap: 12px;
	}

	body.woocommerce-shop .tnx-shop-hero__highlight-icon {
		flex-basis: 36px;

		width: 36px;
		height: 36px;
	}

	body.woocommerce-shop .tnx-shop-hero__highlight-copy strong {
		font-size: 0.72rem;
	}

	body.woocommerce-shop .tnx-shop-hero__highlight-copy > span {
		font-size: 0.64rem;
	}

	body.woocommerce-shop .hero-section::before {
		top: auto;
		bottom: 2px;

		right: 0;
		left: 0;

		width: 100%;
		height: 250px;

		background-position: center bottom;

		opacity: 0.98;

		animation: none;
	}

	body.woocommerce-shop .hero-section::after {
		top: 80%;
		right: -95px;

		width: 320px;

		opacity: 0.5;
	}
}


/* =========================================================
   Small Mobile
   ========================================================= */

@media (max-width: 390px) {

	body.woocommerce-shop .hero-section {
		min-height: 630px;
		padding-bottom: 220px;
	}

	body.woocommerce-shop .tnx-shop-hero__eyebrow {
		font-size: 0.68rem;
	}

	body.woocommerce-shop .tnx-shop-hero__highlights {
		gap: 8px;
	}

	body.woocommerce-shop .tnx-shop-hero__highlight-copy > span {
		display: none;
	}

	body.woocommerce-shop .hero-section::before {
		height: 210px;
	}
}


/* =========================================================
   Reduced Motion
   ========================================================= */

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

	body.woocommerce-shop .hero-section::before,
	body.woocommerce-shop .hero-section::after {
		animation: none;
	}
}