/* ==========================================================================
   Homepage page canvas — Deep Charcoal #141414
   Loaded only on is_front_page() (market URLs such as /uk/). Does not change
   product, DYR, cart, checkout, or the root market-choice landing.
   Individual homepage sections keep their own authored backgrounds.
   ========================================================================== */

body.home,
body.home #brx-content {
	background-color: #141414;
}

/* ==========================================================================
   EQUIPPEDLY — HOMEPAGE HERO (section 01)
   Floating rotating racket hero: copy left, product visual right.
   Load order: 4 of 4 (requires foundation.css)
   ========================================================================== */

.eq-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	/* Floor kept soft so short laptop heights (e.g. 1334×710) keep CTA in view. */
	min-height: clamp(640px, 100vh, 1020px);
	background-color: #141414;
	color: var(--eq-color-chalk-white);
	overflow: hidden;
	padding-top: var(--eq-header-h);
	padding-bottom: var(--eq-space-2xl);
}

/* Legacy full-bleed photo host — kept in the DOM for Bricks structure, visually idle. */
.eq-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-color: #141414;
	pointer-events: none;
}

.eq-hero__media > img,
.eq-hero__media > video,
.eq-hero__media > picture,
.eq-hero__media > picture > img {
	display: none;
}

.eq-hero__media--placeholder::before,
.eq-hero__media--placeholder::after {
	display: none;
}

/* Scrim not needed over charcoal + isolated product art. */
.eq-hero__scrim {
	display: none;
}

/* --- Content (left column) ---------------------------------------------- */

.eq-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: min(500px, 40%);
}

.eq-hero__title {
	text-transform: uppercase;
	color: var(--eq-color-chalk-white);
	/* Homepage-scoped: keep Display XL voice, tighten so copy/CTA sit closer to the visual centre. */
	font-size: clamp(52px, 5.6vw, 88px);
	line-height: 0.98;
}

.eq-hero__copy {
	margin-top: var(--eq-space-md);
	max-width: 42ch;
	color: color-mix(in srgb, var(--eq-color-chalk-white) 85%, transparent);
}

.eq-hero__actions {
	margin-top: var(--eq-space-xl);
}

.eq-hero__copy--mobile { display: none; }

/* --- Floating racket visual (right) ------------------------------------- */

.eq-hero__visual {
	position: absolute;
	z-index: 1;
	top: calc(var(--eq-header-h) - 4px);
	right: clamp(0.5rem, 2vw, 2rem);
	bottom: var(--eq-space-md);
	width: min(54%, 680px);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.eq-hero__racket {
	position: relative;
	width: min(100%, 620px);
	/* Matches cropped hero PNGs (635×1160) — square 1254 sources letterboxed to ~620². */
	aspect-ratio: 635 / 1160;
	max-height: min(90vh, 900px);
	background: transparent;
}

.eq-hero__racket-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* All four assets share identical opaque bounds — centre keeps crossfades stable. */
	object-position: center center;
	opacity: 0;
	transition: opacity 0.8s var(--eq-ease, cubic-bezier(0.22, 1, 0.36, 1));
	filter: drop-shadow(0 32px 56px rgba(0, 0, 0, 0.5));
	user-select: none;
	-webkit-user-drag: none;
}

.eq-hero__racket-img.is-active {
	opacity: 1;
}

/* --- Staged entrance ---------------------------------------------------- */

.eq-hero__title,
.eq-hero__copy,
.eq-hero__actions {
	opacity: 0;
	transform: translateY(16px);
	animation: eq-hero-enter var(--eq-motion-image) var(--eq-ease) forwards;
}

.eq-hero__title   { animation-delay: 0ms;   }
.eq-hero__copy    { animation-delay: 100ms; }
.eq-hero__actions { animation-delay: 200ms; }

.eq-hero__visual {
	opacity: 0;
	transform: translateY(18px);
	animation: eq-hero-enter 700ms var(--eq-ease, cubic-bezier(0.22, 1, 0.36, 1)) 180ms forwards;
}

@keyframes eq-hero-enter {
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.eq-hero__title,
	.eq-hero__copy,
	.eq-hero__actions,
	.eq-hero__visual {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.eq-hero__racket-img {
		transition: none;
	}
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1279px) {
	.eq-hero__content { max-width: min(460px, 42%); }
	.eq-hero__visual { width: min(50%, 560px); }
	.eq-hero__racket {
		width: min(100%, 540px);
		max-height: min(86vh, 820px);
	}
}

@media (max-width: 1023px) {
	.eq-hero {
		min-height: clamp(700px, 94vh, 900px);
		padding-top: var(--eq-header-h-mobile);
	}

	.eq-hero__content { max-width: min(400px, 46%); }
	.eq-hero__visual {
		top: calc(var(--eq-header-h-mobile) - 2px);
		width: min(48%, 440px);
		right: clamp(0.5rem, 2vw, 1.25rem);
		bottom: var(--eq-space-md);
	}

	.eq-hero__racket {
		width: min(100%, 420px);
		max-height: min(82vh, 760px);
	}
}

/* Mobile — stack: copy first, racket below */
@media (max-width: 767px) {
	.eq-hero {
		min-height: auto;
		justify-content: flex-start;
		padding-bottom: var(--eq-space-2xl);
		gap: var(--eq-space-xl);
	}

	/* Visual is appended as a direct child of .eq-hero; Bricks content stays first. */
	.eq-hero > .eq-hero__media,
	.eq-hero > .eq-hero__scrim {
		order: 0;
	}

	.eq-hero > :not(.eq-hero__media):not(.eq-hero__scrim):not(.eq-hero__visual) {
		order: 1;
		width: 100%;
	}

	.eq-hero__content {
		max-width: 100%;
		padding-top: var(--eq-space-lg);
	}

	.eq-hero__copy {
		margin-top: var(--eq-space-md);
		max-width: 40ch;
	}

	.eq-hero__copy--desktop { display: none; }
	.eq-hero__copy--mobile  { display: block; }

	.eq-hero__actions { margin-top: var(--eq-space-lg); }

	.eq-hero__visual {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		order: 2;
		width: min(84%, 360px);
		height: auto;
		margin: 0 auto;
		max-height: none;
	}

	.eq-hero__racket {
		width: 100%;
		max-height: 56vh;
	}
}

@media (max-width: 479px) {
	.eq-hero__title { font-size: clamp(36px, 11vw, 48px); }
	.eq-hero__visual { width: min(90%, 320px); }
}

@media (max-height: 560px) and (orientation: landscape) {
	.eq-hero { min-height: 480px; }
	.eq-hero__visual { max-height: 70vh; }
}

/* RTL: mirror the two-column composition */
html[dir="rtl"] .eq-hero__visual {
	right: auto;
	left: clamp(0.5rem, 2vw, 2rem);
}

@media (max-width: 767px) {
	html[dir="rtl"] .eq-hero__visual {
		left: auto;
		right: auto;
	}
}