/*
 * Home Hero + red marquee band.
 *
 * Structure/typography/spacing/marquee mechanics reuse the exact values
 * measured live from Swiftheat Home v2.dc.html's `#top` section and its
 * sibling ticker band. Background/eyebrow/H1-size/paragraph/CTA/
 * trust-strip typography all reuse existing tokens.css values exactly —
 * no new tokens were added.
 *
 * The design's own 1640px effective width is intentionally NOT
 * reproduced — this file uses the site's locked .site-container (1200px)
 * per the established full-bleed-background + 1200px-content pattern
 * already used by every other section (Process, Why Swiftheat, Quality,
 * Product Archive intro, etc).
 *
 * This file only loads on is_front_page() (see inc/enqueue.php) —
 * scoped entirely under .home-hero / .home-hero-marquee, no bare
 * element selectors.
 */

.home-hero {
	position: relative;
	overflow: hidden;
	background: var(--color-indigo-hero);
	color: var(--text-on-dark);
	height: 90vh;
}

.home-hero__background {
	position: absolute;
	inset: 0;
	/* Source A's own measured grid-line texture for #top specifically
	   (rgba(150,156,230,0.07)) — distinct from the slightly different
	   rgba values already used by Why Swiftheat/Quality's own dark
	   sections in home.css; not force-shared, per this project's
	   established per-section-literal discipline. Layered above the
	   client-supplied Hero product photo (final layer below) — the
	   grid stays visible as a faint texture over the photo. The photo's
	   own dark background and the existing --color-indigo-hero fallback
	   (still declared on .home-hero) are close in tone, so no seam is
	   visible while the image loads.
	   Product composition sits mainly in the right two-thirds of the
	   photo, with a darker, mostly-empty left margin — background-position
	   biases right so that denser region stays visible against
	   .home-hero__content's fixed-width text column on the left.
	   A left-to-right scrim sits between the grid texture and the photo —
	   the photo's own bright cartridge-heater cylinder crosses under the
	   paragraph/secondary-button/trust-strip text (checked live at
	   1440px), and those are lower-contrast than the bold white H1 to
	   begin with. The scrim uses the existing --color-indigo-hero value
	   (already this section's own base/fallback color) rather than a new
	   color, and is fully transparent by 60% width — well clear of the
	   product composition on the right. */
	background-image: linear-gradient(rgba(150, 156, 230, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(150, 156, 230, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(10, 12, 82, 0.8) 0%, rgba(10, 12, 82, 0.5) 28%, rgba(10, 12, 82, 0.12) 48%, rgba(10, 12, 82, 0) 60%),
		url('/wp-content/uploads/2026/08/Swift-heat-products-hero-3.webp');
	background-size: 56px 56px, 56px 56px, 100% 100%, cover;
	background-position: 0 0, 0 0, 0 0, right center;
	background-repeat: repeat, repeat, no-repeat, no-repeat;
	pointer-events: none;
}

.home-hero__inner {
	/* The product watermark is a separate full-bleed layer
	   (.home-hero__watermark, see below) behind the entire section rather
	   than confined to a grid column. .home-hero__content below has a
	   fixed 525px max-width so the H1/paragraph/CTA keep a consistent,
	   deliberate 3-line H1 wrap regardless of the watermark's own layout.
	   110px top = --space-section-standard (exact match). 120px bottom is
	   Source A's own measured value with no matching token (its own
	   documented lg-bottom token is 140px, a different exact value — not
	   substituted here). */
	padding: var(--space-section-standard) var(--gutter-desktop) 120px;
	box-sizing: border-box;
	position: relative;
}

.home-hero__content {
	min-width: 0;
	max-width: 525px;
	position: relative;
	z-index: 2;
}

.home-hero__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-red);
	font-weight: var(--fw-semibold);
	margin-bottom: 30px;
	text-transform: uppercase;
}

.home-hero .home-hero__heading {
	font-family: var(--font-primary);
	/* --fs-h1-flagship (88px) is Source A's own measured size, but that
	   was tuned for its short 3-line "Industrial heat, engineered to
	   order." headline. The client's much longer replacement headline
	   wraps to 6 lines at 88px (measured live) — visually overwhelming
	   and out of proportion with the rest of the Hero. --fs-h2-major
	   (56px) is an exact existing token (already the site's "big
	   statement heading" size elsewhere) that produces a clean 3-line
	   wrap for this specific headline's length — reused rather than
	   inventing a new literal. */
	font-size: var(--fs-h2-major);
	line-height: var(--lh-tight);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-tight);
	margin: 0 0 30px;
	text-wrap: balance;
}

.home-hero__text {
	font-family: var(--font-primary);
	font-size: var(--fs-body-large);
	line-height: var(--lh-body);
	color: var(--text-on-dark-body-alt);
	max-width: 560px;
	margin: 0 0 44px;
	text-wrap: pretty;
}

.home-hero__actions {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 52px;
}

.home-hero .home-hero__button {
	display: inline-block;
	padding: var(--pad-button-primary);
	font-family: var(--font-primary);
	font-size: 15.5px;
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-cta);
	text-decoration: none;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.home-hero .home-hero__button--primary {
	background: var(--color-red);
	color: var(--text-on-dark);
	border: 1px solid var(--color-red);
}

.home-hero .home-hero__button--primary:hover,
.home-hero .home-hero__button--primary:focus-visible {
	background: var(--text-on-dark);
	color: var(--color-indigo-hero);
	border-color: var(--text-on-dark);
}

.home-hero .home-hero__button--secondary {
	background: transparent;
	color: var(--text-on-dark);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.home-hero .home-hero__button--secondary:hover,
.home-hero .home-hero__button--secondary:focus-visible {
	border-color: var(--text-on-dark);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-on-dark);
}

.home-hero__trust {
	display: flex;
	gap: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-meta);
	/* Source A's own measured value (#9299DE) — no existing token is an
	   exact match (closest, --text-on-dark-muted #8FA6C9, is a distinct
	   color, not substituted here per established discipline). */
	color: #9299DE;
	border-top: 1px solid rgba(150, 156, 230, 0.22);
	padding-top: 20px;
	max-width: 640px;
}

.home-hero__trust span {
	flex: 1 1 0%;
}

.home-hero__trust span + span {
	border-left: 1px solid rgba(150, 156, 230, 0.22);
	padding-left: 20px;
}

/* ---- Product watermark (decorative, aria-hidden, full-bleed) ----
 * A muted collage of the site's real Product photography, distributed
 * across the full Hero canvas with the white H1 kept clearly readable
 * above it.
 *
 * Technique: individual real Product <img> elements (hero.php, sourced
 * live via get_the_post_thumbnail() — never a flattened raster collage)
 * absolutely positioned across this full-bleed layer, which sits BEHIND
 * .home-hero__inner's content (z-index below .home-hero__content's own
 * z-index:2) as a sibling of .home-hero__background.
 *
 * Color treatment — measured, not guessed: these Product photos have an
 * OPAQUE WHITE background baked into the file (same finding as the
 * Product cards/Mega Menu elsewhere on this site). On the site's LIGHT
 * card trays, mix-blend-mode:multiply hides that white square (multiply
 * with white = identity = the tray color shows through). On this DARK
 * navy Hero the same multiply trick was tested live via canvas pixel
 * sampling and found to fail: multiply pushes even the product's own
 * (already darker) material toward near-black, making it read as an
 * almost invisible smudge against the dark backdrop (measured max
 * color-distance from the navy background: ~40-60 out of ~440 possible —
 * imperceptible). The fix, verified the same way: invert(1) the image
 * FIRST (so its white background becomes black and its darker material
 * becomes light), then composite with mix-blend-mode:screen instead of
 * multiply — screen's own identity color is BLACK, so the
 * now-inverted-to-black background still disappears into the navy
 * exactly as cleanly as multiply did on a light background, while the
 * now-inverted-to-light product material brightens clearly above the
 * navy backdrop (measured max color-distance ~90-120 at the opacities
 * used below — clearly recognizable, still far below the white H1
 * text's own contrast against navy, so the headline stays dominant). */

/* Watermark aligns to the site's own 1200px content canvas (matching
 * .site-container: width:100%, max-width:1200px, centered) rather than
 * the full-bleed viewport-width Hero, so the scatter stays organized
 * within the site's own content foundation rather than spreading across
 * the whole browser viewport. .home-hero (the ancestor) still keeps its
 * own overflow:hidden, so any item that intentionally bleeds past this
 * 1200px box (see individual placements below) is still clipped at the
 * Hero's own true edge, not the page edge. */
.home-hero__watermark {
	/* Disabled: the Hero background is now the client-supplied product
	   photo (.home-hero__background, above) — this per-product collage
	   layer is no longer needed and would otherwise sit on top of it.
	   Hidden here rather than removed from hero.php's markup, since a
	   single display:none fully disables the whole layer (every child
	   item rule below is a no-op once its ancestor is display:none). */
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: min(1200px, 100%);
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 1;
}

.home-hero__watermark-glow {
	position: absolute;
	left: 62%;
	top: 50%;
	width: 85%;
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(190, 205, 255, 0.12) 0%, rgba(190, 205, 255, 0.043) 40%, transparent 65%);
	pointer-events: none;
}

/* Root cause of an earlier "dark rectangular patch" artifact:
 * investigated the actual source files (PHP GD, dense pixel grid, not
 * just corners) and found these product photos have a soft, wide
 * drop-shadow/vignette baked into their "white" background — not flat
 * #FFFFFF across the whole frame. invert(1) turns
 * true white (255,255,255) into true black, which mix-blend-mode:screen
 * treats as its identity color (vanishes into the navy) — verified
 * correct for the actual corners. But the soft shadow/vignette areas
 * (confirmed via canvas simulation sampling the real files) are
 * mid-tone, not pure white; inverted, they land as mid-gray rather than
 * black, and screen-compositing mid-gray is visibly LIGHTER than navy —
 * that lighter halo, roughly following the image's own rectangular
 * footprint, is what read as a "dark rectangular patch" against navy.
 *
 * Fix: a soft elliptical mask (CSS mask-image, matches this project's
 * "CSS treatment only, no new raster asset" constraint) fades every
 * watermark image to fully transparent well before its own rectangular
 * edge, so the shadow/vignette band — which sits mostly in the outer
 * portion of each frame — is faded out along with it, leaving only the
 * product's own more-central silhouette visible. This removes the hard
 * rectangular boundary regardless of exactly how far the vignette
 * extends in any given photo, rather than chasing a per-image filter
 * tweak that can't distinguish "vignette gray" from "product gray" once
 * both are grayscaled. `ellipse` sizes itself to each item's own
 * width/height automatically, so elongated items (Tubular, Ceramic IR)
 * fade correctly without a separate per-image mask value. */
.home-hero__watermark-item {
	position: absolute;
	display: block;
	max-width: none;
	height: auto;
	filter: invert(1) grayscale(1) brightness(0.9) contrast(1.2);
	mix-blend-mode: screen;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 28%, transparent 62%);
	mask-image: radial-gradient(ellipse at center, #000 28%, transparent 62%);
	/* Prominence tiers (reusable modifiers, not per-item hacks): most of
	   the collage sits clear of the text column and can read at full
	   prominence; the items closest to/behind the text column use the
	   --subtle tier instead, protecting H1/paragraph legibility. */
	opacity: 0.3;
}

.home-hero__watermark-item--subtle {
	opacity: 0.16;
}

/* Visual-weight tiers: widths as a % of the Hero's own full width, not
   per-product hardcoded pixel values — one shared set of size classes,
   reused by whichever product slot needs that scale. */
.home-hero__watermark-item--lg {
	width: 36%;
}

.home-hero__watermark-item--md {
	width: 24%;
}

.home-hero__watermark-item--sm {
	width: 15%;
}

/* Placement: 3 items sit in the LEFT margin (top/middle/bottom) and 4
 * sit in the RIGHT region (spread top-to-bottom, at varying depth from
 * the content edge), so the composition frames .home-hero__content from
 * multiple heights on both sides rather than clustering to one side.
 * Percentages are relative to the 1200px-aligned .home-hero__watermark
 * box (see above), not the full Hero width. Every item's bounding box
 * was verified live via getBoundingClientRect() overlap checks against
 * the H1/paragraph/CTA boxes at 1440/1366/1280px — not eyeballed. */

.home-hero__watermark-item--cartridge {
	top: -3%;
	left: -3%;
	transform: rotate(-8deg);
	z-index: 2;
}

.home-hero__watermark-item--coil {
	top: 34%;
	left: -13%;
	transform: rotate(7deg);
	z-index: 2;
}

.home-hero__watermark-item--strip {
	bottom: -3%;
	left: -2%;
	transform: rotate(-6deg);
	z-index: 2;
}

.home-hero__watermark-item--band {
	top: 2%;
	left: 57%;
	transform: rotate(-4deg);
	z-index: 3;
}

.home-hero__watermark-item--sensor {
	top: 46%;
	left: 53%;
	transform: rotate(5deg);
	z-index: 5;
}

.home-hero__watermark-item--tubular {
	bottom: 13%;
	left: 55%;
	transform: rotate(3deg);
	z-index: 4;
}

.home-hero__watermark-item--ceramic {
	bottom: -6%;
	right: -4%;
	transform: rotate(2deg);
	z-index: 3;
}

/* ---- Red marquee band ---- */

.home-hero-marquee {
	background: var(--color-red);
	color: var(--text-on-dark);
	overflow: hidden;
	padding: 16px 0;
	white-space: nowrap;
}

.home-hero-marquee__track {
	display: inline-flex;
	animation: home-hero-marquee-scroll 36s linear infinite;
}

.home-hero-marquee .home-hero-marquee__item {
	font-family: var(--font-mono);
	font-size: 13.5px;
	letter-spacing: 0.18em;
	font-weight: var(--fw-semibold);
	padding: 0 34px;
	border-right: 1px solid rgba(255, 255, 255, 0.35);
}

@keyframes home-hero-marquee-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-hero-marquee__track {
		animation: none;
	}
}

/* ---- Responsive ----
 * The approved design has zero @media queries (confirmed by grep, same
 * check repeated every section this project has built) and, measured
 * live, genuinely breaks at 768px/390px (H1 overflows its own box; the
 * whole section overflows the viewport). The breakpoints below are a
 * deliberate, hand-built adaptation, not a reproduction of the source's
 * own (nonexistent) responsive behavior. */

@media (max-width: 1024px) {
	.home-hero__inner {
		padding: 88px var(--gutter-desktop) 56px;
	}

	/* Content is no longer a grid column — the 525px desktop text-safe-
	   zone width (sized to clear the full-bleed watermark, see above) is
	   relaxed back to full width here, matching this project's own
	   established "single stacked column below 1024px" Hero pattern. */
	.home-hero__content {
		max-width: none;
	}

	/* The background scrim (see .home-hero__background above) was sized
	   for the 525px desktop text column; once .home-hero__content goes
	   full-width here, the paragraph/CTA/trust-strip text extends well
	   past the scrim's 60% fade-out point and loses contrast against the
	   photo's own bright cartridge-heater cylinder (checked live at
	   1024px). Only the scrim's own fade extent is widened — same colors,
	   same photo, same position, no structural change. */
	.home-hero__background {
		background-image: linear-gradient(rgba(150, 156, 230, 0.07) 1px, transparent 1px),
			linear-gradient(90deg, rgba(150, 156, 230, 0.07) 1px, transparent 1px),
			linear-gradient(90deg, rgba(10, 12, 82, 0.85) 0%, rgba(10, 12, 82, 0.6) 45%, rgba(10, 12, 82, 0.25) 72%, rgba(10, 12, 82, 0) 92%),
			url('/wp-content/uploads/2026/08/Swift-heat-products-hero.webp');
	}

	/* Tablet composition. Measured live (getBoundingClientRect() overlap
	   checks, not eyeballed): once .home-hero__content goes full-width at
	   this breakpoint, it occupies roughly the middle 77% of the Hero's
	   own height (content starts ~14% down, ends ~91% down at 1024px) —
	   there is no longer a horizontal "safe side" the way there was on
	   desktop, only a thin top and bottom margin. Items anchored to the
	   MIDDLE of that height (band, sensor, tubular, coil — coil sits at
	   top:34% in this composition) collide with the H1/paragraph/CTA once
	   content goes full-width. Only cartridge (top margin) and strip
	   (bottom margin) — the two items fully outside that middle band —
	   remain visible; every other item is hidden, prioritizing H1/
	   paragraph/CTA readability over the watermark. */
	.home-hero__watermark-item--band,
	.home-hero__watermark-item--tubular,
	.home-hero__watermark-item--coil,
	.home-hero__watermark-item--ceramic,
	.home-hero__watermark-item--sensor {
		display: none;
	}

	.home-hero__watermark-item {
		opacity: 0.22;
	}

	.home-hero__watermark-item--subtle {
		opacity: 0.14;
	}
}

@media (max-width: 768px) {
	.home-hero__inner {
		padding: 64px var(--gutter-mobile) 40px;
	}

	.home-hero .home-hero__heading {
		font-size: 40px;
	}

	.home-hero__text {
		font-size: var(--fs-body);
		margin-bottom: 32px;
	}

	.home-hero__actions {
		margin-bottom: 36px;
	}

	.home-hero__trust {
		flex-direction: column;
		gap: 12px;
		max-width: none;
	}

	.home-hero__trust span + span {
		border-left: 0;
		padding-left: 0;
	}

	/* Mobile composition: only cartridge (top) + strip (bottom) are still
	   visible here (every other item was already hidden by the ≤1024px
	   tier above, which the cascade carries forward). The two remaining
	   corner pieces get one more opacity reduction so they read as a
	   faint corner accent rather than a competing visual, keeping
	   H1/paragraph/CTA the priority on small screens. */
	.home-hero__watermark-item {
		opacity: 0.16;
	}

	.home-hero__watermark-item--subtle {
		opacity: 0.09;
	}
}

@media (max-width: 480px) {
	.home-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}
}