/**
 * Jedi-Robe Halloween homepage: muted amber-gold edition.
 *
 * Keeps the existing black/blue-green sci-fi design and star field.
 * Adds balanced, static Halloween accents around the campaign and costume.
 * Leaves the character animation, scan layers, hero structural pseudo-elements,
 * buttons, categories and all WooCommerce product sections unchanged.
 *
 * All image paths are relative to assets/css/pages/halloween.css.
 * Requires body.jr-home-halloween and must be loaded after home.css.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      1.0.4
 */

/* --------------------------------------------------------------------------
   1. Hero atmosphere: muted brand gold over the existing dark/blue/green base.
   The star field (.jr-home-hero__space) remains untouched.
   -------------------------------------------------------------------------- */
body.jr-dark-commerce.jr-home-halloween .jr-home-hero {
	background:
		radial-gradient(
			ellipse 42% 58% at 4% 62%,
			rgba(226, 164, 71, 0.13),
			transparent 78%
		),
		radial-gradient(
			ellipse 34% 54% at 96% 74%,
			rgba(194, 140, 71, 0.11),
			transparent 80%
		),
		radial-gradient(
			ellipse at 17% 42%,
			rgba(255, 255, 255, 0.045),
			transparent 28rem
		),
		radial-gradient(
			ellipse at 74% 50%,
			rgba(16, 58, 82, 0.21),
			transparent 32rem
		),
		radial-gradient(
			ellipse at 23% 78%,
			rgba(13, 75, 48, 0.075),
			transparent 27rem
		),
		linear-gradient(106deg, #010204 0%, #020508 43%, #030911 100%);
}

/* --------------------------------------------------------------------------
   2. Left: decorative cobweb and visible neutral-grey bats.
   Uses only unused pseudo-elements; does not replace technical traces.
   -------------------------------------------------------------------------- */
body.jr-dark-commerce.jr-home-halloween .jr-home-hero__content::after {
	position: absolute;
	top: -4.8rem;
	left: -2rem;
	z-index: 1;
	width: clamp(110px, 13vw, 205px);
	aspect-ratio: 1;
	background: url("../../images/home/halloween/cobweb.svg") left top / contain no-repeat;
	opacity: 0.4;
	content: "";
	pointer-events: none;
}

body.jr-dark-commerce.jr-home-halloween .jr-home-hero__campaign::before {
	position: absolute;
	top: -3.4rem;
	right: 4%;
	z-index: 3;
	width: clamp(120px, 11vw, 168px);
	aspect-ratio: 260 / 95;
	background: url("../../images/home/halloween/bats.svg") center / contain no-repeat;
	opacity: 0.82;
	filter: brightness(1.3);
	content: "";
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. Right: additional bats, but no hanging lights or moon.
   -------------------------------------------------------------------------- */
body.jr-dark-commerce.jr-home-halloween .jr-home-hero__inner::before {
	position: absolute;
	top: clamp(2rem, 4vw, 4.5rem);
	right: 3.5%;
	z-index: 5;
	width: clamp(135px, 12vw, 185px);
	aspect-ratio: 260 / 95;
	background: url("../../images/home/halloween/bats.svg") center / contain no-repeat;
	opacity: 0.82;
	filter: brightness(1.3);
	content: "";
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. A local soft gold lift beside the pumpkin, not across the scanner.
   Existing stage::before, floor and rotating figure rules are untouched.
   -------------------------------------------------------------------------- */
body.jr-dark-commerce.jr-home-halloween .jr-home-costume-stage {
	background: radial-gradient(
		ellipse 28% 17% at 76% 73%,
		rgba(226, 164, 71, 0.075),
		transparent 82%
	);
}

body.jr-dark-commerce.jr-home-halloween .jr-home-costume-stage::after {
	position: absolute;
	right: 19%;
	bottom: calc(10.5% + 4.25rem);
	z-index: 6;
	width: clamp(92px, 8vw, 124px);
	aspect-ratio: 1;
	background: url("../../images/home/halloween/pumpkin.webp") center bottom / contain no-repeat;
	filter: drop-shadow(0 9px 8px rgba(0, 0, 0, 0.55));
	content: "";
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Product sections stay exactly as in home.css.
   In particular: NO .jr-home-categories background or orange section bleed.
   Hero eyebrow also retains the theme's existing green accent.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. Responsive positioning of decorative artwork only.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1180px) {
	body.jr-dark-commerce.jr-home-halloween .jr-home-hero__campaign::before {
		top: -2.4rem;
		right: 0;
		width: 112px;
	}

	body.jr-dark-commerce.jr-home-halloween .jr-home-hero__inner::before {
		top: 1.6rem;
		right: 1.5%;
		width: 120px;
	}

	body.jr-dark-commerce.jr-home-halloween .jr-home-costume-stage::after {
		right: 14%;
		width: 92px;
	}
}

@media (max-width: 767px) {
	body.jr-dark-commerce.jr-home-halloween .jr-home-hero {
		background:
			radial-gradient(
				ellipse 90% 42% at 5% 24%,
				rgba(226, 164, 71, 0.11),
				transparent 84%
			),
			radial-gradient(
				ellipse 75% 38% at 96% 76%,
				rgba(194, 140, 71, 0.09),
				transparent 84%
			),
			radial-gradient(
				ellipse at 74% 50%,
				rgba(16, 58, 82, 0.21),
				transparent 32rem
			),
			linear-gradient(106deg, #010204 0%, #020508 43%, #030911 100%);
	}

	body.jr-dark-commerce.jr-home-halloween .jr-home-hero__content::after {
		top: -2.4rem;
		left: -0.8rem;
		width: 85px;
		opacity: 0.35;
	}

	body.jr-dark-commerce.jr-home-halloween .jr-home-hero__campaign::before {
		top: -1.25rem;
		right: 0;
		width: 75px;
	}

	body.jr-dark-commerce.jr-home-halloween .jr-home-hero__inner::before {
		top: 0.55rem;
		right: 0.2rem;
		width: 58px;
		opacity: 0.75;
	}

	body.jr-dark-commerce.jr-home-halloween .jr-home-costume-stage {
		background: radial-gradient(
			ellipse 40% 20% at 79% 71%,
			rgba(226, 164, 71, 0.07),
			transparent 85%
		);
	}

	body.jr-dark-commerce.jr-home-halloween .jr-home-costume-stage::after {
		right: 12%;
		bottom: calc(9% + 3.55rem);
		width: clamp(62px, 18vw, 82px);
	}
}

/* Keep the existing user-requested removal of the heading flourish. */
body.jr-dark-commerce .jr-home-hero__title-line--lead::after {
	display: none;
	content: none;
}

/**
 * Halloween hero eyebrow.
 *
 * Change "STAR WARS COSTUMES" text and its
 * decorative line to warm Halloween orange.
 */
body.jr-dark-commerce.jr-home-halloween .jr-home-hero__eyebrow {
    color: #f0a24a;
}

body.jr-dark-commerce.jr-home-halloween .jr-home-hero__eyebrow::before {
    background: linear-gradient(
        90deg,
        #f0a24a,
        transparent
    );
}