/**
 * Glansco Hero component styles.
 */

.glansco-hero {
	position: relative;
	overflow: hidden;
	padding: 96px 0;
	background-color: var( --glansco-color-primary, #0a5f4a );
	color: #fff;
}

/* Extra top padding clears the fixed, transparent-over-hero header (see
   critical.css .glansco-header--transparent, flush with the viewport top),
   but only the page's primary (H1) hero sits at the very top of the
   document and needs it. A secondary (H2, CTA-banner) hero further down the
   page doesn't, so it gets the same rhythm as every other section instead
   of ~100px of dead air above its heading. Desktop value only: the
   @media (max-width:782px) block below pins its own mobile value
   independently, since mobile's header is a different height. */
.glansco-hero:not( :has( h2.glansco-heading ) ) {
	padding-top: 168px;
}

/* A soft animated gradient, kept entirely within the green family (no
   accent orange). History of this rule, for whoever touches it next:
   attempt 1 used a separate filter:blur() + mix-blend-mode:screen
   pseudo-element for light "blobs", animated via transform at the same
   time as a background-position animation on the section; that combo
   rendered as flickering, hard-edged rectangles ("flying white squares")
   on many GPUs. Attempt 2 dropped the blur/blend and animated
   background-position alone; that fixed the squares, but
   background-position is a paint-triggering property, not a
   compositor-only one, so the browser had to repaint this large,
   3-layer gradient on every animation frame. That repaint work competes
   for the same frame budget as the hero's side-image float animation
   (see .glansco-hero__media below), which is what made the image's
   motion look heavy/janky even though the image itself only animates
   `transform`.
   This attempt (3) puts the gradient on an oversized ::before positioned
   with plain, unanimated background-position, and animates `transform`
   on that pseudo instead. transform is compositor-only: the browser can
   slide the already-painted layer around on the GPU with no repaint at
   all, so it no longer steals frame budget from anything else on the
   page, and it carries none of attempt 1's blur/blend artifacts either. */
.glansco-hero--bg-gradient {
	background-color: var( --glansco-color-primary, #0a5f4a );
}

.glansco-hero--bg-gradient::before {
	content: "";
	position: absolute;
	/* Bleed must exceed the animation's maximum travel (translate 8% of the
	   150%-sized layer = 12% of the section, plus scale 1.06's ~4.5% per
	   side), or edges would slide into view mid-cycle. */
	inset: -25%;
	z-index: -1;
	background-image:
		radial-gradient( circle, color-mix( in srgb, var( --glansco-color-primary, #0a5f4a ) 35%, #6fe3ae ) 0%, transparent 45% ),
		radial-gradient( circle, color-mix( in srgb, #fff 16%, transparent ) 0%, transparent 40% ),
		linear-gradient(
			135deg,
			color-mix( in srgb, var( --glansco-color-primary, #0a5f4a ) 55%, #06231d ) 0%,
			var( --glansco-color-primary, #0a5f4a ) 45%,
			color-mix( in srgb, var( --glansco-color-primary, #0a5f4a ) 70%, #6fe3ae ) 100%
		);
	background-size: 200% 200%, 200% 200%, 160% 160%;
	background-repeat: no-repeat;
	background-position: 0% 0%, 100% 0%, 0% 30%;
	animation: glansco-hero-mesh-drift 14s ease-in-out infinite alternate;
	will-change: transform;
}

/* Perceptible but calm: enough travel + a gentle breathing scale that the
   gradient visibly lives, on a cycle slow enough to stay elegant. Still
   transform-only, so it composites on the GPU with zero repaints. */
@keyframes glansco-hero-mesh-drift {
	0% {
		transform: translate3d( 0, 0, 0 ) scale( 1 );
	}
	50% {
		transform: translate3d( -8%, 6%, 0 ) scale( 1.06 );
	}
	100% {
		transform: translate3d( 7%, -8%, 0 ) scale( 1.03 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.glansco-hero--bg-gradient::before {
		animation: none;
	}
}

/* `.glansco-hero__overlay` is always present in the markup (it is the dark
   tint used by the image/video variants); the gradient variant does not
   need that tint on top of its own background, so it is turned off here. */
.glansco-hero--bg-gradient .glansco-hero__overlay {
	background: none;
}

/* SVG wave divider at the page's primary (H1) hero dropping into the light
   section below it. A secondary (H2, CTA-banner) hero only gets a wave on
   its bottom edge (into the dark footer), no top wave, so it sits flush
   against the section above it. `:has()` distinguishes the two without
   needing a separate PHP-rendered class. */
.glansco-hero {
	--glansco-wave: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C240,15 480,15 720,50 C960,85 1200,85 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E" );
}

.glansco-hero:not( :has( h2.glansco-heading ) )::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 70px;
	z-index: 2;
	background-color: #fff;
	mask-image: var( --glansco-wave );
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-image: var( --glansco-wave );
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	pointer-events: none;
}

.glansco-hero:has( h2.glansco-heading )::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 70px;
	z-index: 2;
	background-color: var( --glansco-color-secondary, #111 );
	mask-image: var( --glansco-wave );
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-image: var( --glansco-wave );
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	pointer-events: none;
}

/* The wave's fill must match whatever section sits directly under it, or
   its shape shows as a wrong-colored seam. The default above assumes white;
   when the very next sibling is a (tinted) badge section, e.g. the Contact
   page's hero, repaint the wave in that same tint. */
.glansco-hero:not( :has( h2.glansco-heading ) ):has( + .glansco-badge-section:not( .glansco-badge-section--dark ) )::after {
	background-color: color-mix( in srgb, var( --glansco-color-primary, #0a5f4a ) 4%, #fff );
}

.glansco-hero--bg-image {
	background-size: cover;
	background-position: center;
}

.glansco-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.glansco-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 0, 0, 0, 0.35 ), rgba( 0, 0, 0, 0.55 ) );
	z-index: 1;
}

/* The hero heading sits on a dark background (gradient/overlaid image), so
   its highlighted word uses the bright accent, which has ample contrast
   here, rather than the darker "strong" accent used on white sections. */
.glansco-hero .glansco-heading__highlight {
	color: var( --glansco-color-accent, #f5a623 );
}

.glansco-hero__container {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}

.glansco-hero--has-media .glansco-hero__container {
	grid-template-columns: 1.1fr 0.9fr;
}

.glansco-hero__media {
	position: relative;
	animation: glansco-hero-media-float 6s ease-in-out infinite;
}

.glansco-hero__media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 14px;
	display: block;
	box-shadow: 0 30px 60px rgba( 0, 0, 0, 0.25 );
	transition: transform 0.5s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.glansco-hero__media:hover img {
	transform: scale( 1.03 );
}

@keyframes glansco-hero-media-float {
	0%, 100% {
		transform: translateY( 0 );
	}
	50% {
		transform: translateY( -10px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.glansco-hero__media {
		animation: none;
	}

	.glansco-hero__media:hover img {
		transform: none;
	}
}

.glansco-hero__badge {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba( 255, 255, 255, 0.55 );
	backdrop-filter: blur( 12px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 12px ) saturate( 180% );
	border: 1px solid rgba( 255, 255, 255, 0.5 );
	color: #111;
	padding: 10px 16px;
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba( 0, 0, 0, 0.18 ), inset 0 1px 0 rgba( 255, 255, 255, 0.6 );
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	animation: glansco-badge-float 4s ease-in-out infinite;
}

.glansco-hero__badge:nth-of-type( 1 ) {
	top: 10%;
	left: -8%;
}

.glansco-hero__badge:nth-of-type( 2 ) {
	bottom: 8%;
	right: -8%;
	animation-delay: -2s;
}

@keyframes glansco-badge-float {
	0%, 100% {
		transform: translateY( 0 );
	}
	50% {
		transform: translateY( -8px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.glansco-hero__badge {
		animation: none;
	}
}

.glansco-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 24px 0 0;
}

.glansco-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid rgba( 255, 255, 255, 0.2 );
}

.glansco-hero__stat {
	display: flex;
	flex-direction: column;
}

.glansco-hero__stat-number {
	font-size: 1.75rem;
	font-weight: 700;
	font-family: var( --glansco-font-heading, "Segoe UI", sans-serif );
}

.glansco-hero__stat-label {
	font-size: 0.8125rem;
	opacity: 0.85;
}

@media ( max-width: 782px ) {
	.glansco-hero {
		padding: 64px 0;
	}

	/* 104px clears the mobile header (~81px) plus a small gap — the
	   homepage's hero already used exactly this value (its hero never had a
	   breadcrumb above it to begin with, Breadcrumbs::render() always
	   skipped the front page); now that the breadcrumb trail is gone
	   sitewide, every hero uses that same value instead of the old 172px
	   (which was ~90px of dead air once there was nothing left to clear). */
	.glansco-hero:not( :has( h2.glansco-heading ) ) {
		padding-top: 104px;
	}

	.glansco-hero--has-media .glansco-hero__container {
		grid-template-columns: 1fr;
	}

	/* Once the floating badges drop into normal flow under the image on
	   mobile, stack them against the right edge (each on its own line)
	   instead of the left. */
	.glansco-hero__media {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.glansco-hero__badge {
		position: static;
		margin-top: 12px;
		display: inline-flex;
	}

	.glansco-hero:not( :has( h2.glansco-heading ) )::after,
	.glansco-hero:has( h2.glansco-heading )::after {
		height: 36px;
	}
}