/* about-hero.css
 *
 * The About Us hero picture, brought to life: the team photo stays exactly as
 * it was, and three cards drift in over its open corners (the BusinessCloud
 * award, the story since 1997 stepping through the six timeline eras, and the
 * three offices taking turns). Loaded only where content carries
 * data-platform-demo="about-hero"; markup in about-hero.snippet.html.
 *
 * Unlike the product demos this is website design, so it uses the site's
 * tokens. Sizes are container units (cqw) so the cards scale with the photo,
 * the way the audience heroes (.gn-aud) do. Every selector is scoped under the
 * container. Without script, or with reduced motion, it is a still and
 * complete picture: every era filled, the last caption showing.
 */

[data-platform-demo="about-hero"].gah {
	--gah-hue: var(--wp--preset--color--accent);
	--gah-fill: 1;
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	aspect-ratio: 1148 / 1097;
	container-type: inline-size;
	text-align: left;
}
[data-platform-demo="about-hero"] * { box-sizing: border-box; }
.gn-product-hero-graphic [data-platform-demo="about-hero"] img.gah-base {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	border-radius: 0;
}
[data-platform-demo="about-hero"] .gah-layer { position: absolute; inset: 0; pointer-events: none; }

/* ---- Cards ---- */
[data-platform-demo="about-hero"] .gah-card {
	position: absolute;
	border-radius: 2.2cqw;
	background: var(--wp--preset--color--white);
	box-shadow: 0 2cqw 5cqw var(--shadow-strong);
	color: var(--wp--preset--color--ink);
	font-family: var(--font-body);
	font-size: clamp(9px, 2.25cqw, 13.5px);
	line-height: 1.3;
}
[data-platform-demo="about-hero"] .gah-card b { font-weight: 700; }
[data-platform-demo="about-hero"] .gah-card small { display: block; font-size: 0.82em; color: var(--neutral-600); }

[data-platform-demo="about-hero"] .gah-hd {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5cqw;
	padding: 1.8cqw 2.4cqw;
	border-radius: 2.2cqw 2.2cqw 0 0;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
[data-platform-demo="about-hero"] .gah-hd small { color: inherit; opacity: 0.75; font-weight: 600; white-space: nowrap; }
[data-platform-demo="about-hero"] .gah-hd--light {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--neutral-100);
}
[data-platform-demo="about-hero"] .gah-hd--light small { color: var(--neutral-600); opacity: 1; }

/* Award: top right, clear of the face and of the photo's own dots */
[data-platform-demo="about-hero"] .gah-card--award {
	top: 1%;
	right: 0;
	width: max-content;
	max-width: 39%;
	display: flex;
	align-items: center;
	gap: 1.6cqw;
	padding: 1.4cqw 2cqw 1.4cqw 1.4cqw;
	border-radius: 50cqw;
}
[data-platform-demo="about-hero"] .gah-award-mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 6.4cqw;
	height: 6.4cqw;
	border-radius: 50%;
	background: var(--wp--preset--color--cta-hover);
	color: var(--wp--preset--color--ink);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2.6cqw;
	line-height: 1;
}
[data-platform-demo="about-hero"] .gah-award-text { min-width: 0; }

/* Story since 1997: bottom left */
[data-platform-demo="about-hero"] .gah-card--story { left: 0; top: 71%; width: 50%; }
[data-platform-demo="about-hero"] .gah-story { padding: 2cqw 2.4cqw 1.8cqw; }
[data-platform-demo="about-hero"] .gah-track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	margin: 0 0 1.4cqw;
	padding: 0;
	list-style: none;
}
/* the line runs from the first dot's centre to the last's: 1/12 in from each side */
[data-platform-demo="about-hero"] .gah-track::before,
[data-platform-demo="about-hero"] .gah-track::after {
	content: "";
	position: absolute;
	top: calc(1.1cqw - 1px);
	left: 8.333%;
	width: 83.333%;
	height: 2px;
	background: var(--neutral-200);
}
[data-platform-demo="about-hero"] .gah-track::after {
	background: var(--wp--preset--color--accent);
	transform-origin: left;
	transform: scaleX(var(--gah-fill));
}
[data-platform-demo="about-hero"] .gah-track li {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8cqw;
	margin: 0;
	font-size: 0.72em;
	font-weight: 700;
	color: var(--neutral-600);
}
[data-platform-demo="about-hero"] .gah-track li::before {
	content: "";
	width: 2.2cqw;
	height: 2.2cqw;
	border: 2px solid var(--gah-hue);
	border-radius: 50%;
	background: var(--gah-hue);
}
/* the timeline's own era colours, in the same order as the timeline below */
[data-platform-demo="about-hero"] .gah-track li:nth-child(1) { --gah-hue: var(--wp--preset--color--purple); }
[data-platform-demo="about-hero"] .gah-track li:nth-child(2) { --gah-hue: var(--wp--preset--color--primary); }
[data-platform-demo="about-hero"] .gah-track li:nth-child(3) { --gah-hue: var(--wp--preset--color--cta-hover); }
[data-platform-demo="about-hero"] .gah-track li:nth-child(4) { --gah-hue: var(--wp--preset--color--ink); }
[data-platform-demo="about-hero"] .gah-track li:nth-child(5) { --gah-hue: var(--wp--preset--color--accent); }
[data-platform-demo="about-hero"] .gah-track li:nth-child(6) { --gah-hue: var(--wp--preset--color--cta); }

/* captions share one cell, so the card is always as tall as the longest */
[data-platform-demo="about-hero"] .gah-cap {
	display: grid;
	margin: 0;
	font-weight: 600;
	text-align: center;
}
[data-platform-demo="about-hero"] .gah-cap > * { grid-area: 1 / 1; opacity: 0; }
[data-platform-demo="about-hero"] .gah-cap > :last-child { opacity: 1; }

/* Offices: bottom right, below the faces */
[data-platform-demo="about-hero"] .gah-card--offices { left: 61%; top: 59%; width: 39%; }
[data-platform-demo="about-hero"] .gah-offices { margin: 0; padding: 0; list-style: none; }
[data-platform-demo="about-hero"] .gah-office {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5cqw;
	margin: 0;
	padding: 1.4cqw 2.4cqw;
	border-bottom: 1px solid var(--neutral-100);
}
[data-platform-demo="about-hero"] .gah-office:last-child { border-bottom: 0; border-radius: 0 0 2.2cqw 2.2cqw; }
[data-platform-demo="about-hero"] .gah-office i {
	flex: none;
	position: relative;
	width: 1.8cqw;
	height: 1.8cqw;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}
[data-platform-demo="about-hero"] .gah-office i::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--accent);
	opacity: 0;
}

/* ---- Motion ---- */
@media (prefers-reduced-motion: no-preference) {
	/* Before the script says the picture is in view, the cards wait unseen.
	   Only when scripting is on, so a page without script still shows them,
	   and a fallback reveal in case the script never arrives. */
	@media (scripting: enabled) {
		[data-platform-demo="about-hero"]:not(.gah-on) .gah-card {
			opacity: 0;
			translate: 0 3cqw;
			animation: gah-fallback 0.6s ease 4s forwards;
		}
	}
	[data-platform-demo="about-hero"] .gah-card {
		transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), translate 0.8s cubic-bezier(0.23, 1, 0.32, 1);
	}
	[data-platform-demo="about-hero"] .gah-card--award { transition-delay: 0.25s; }
	[data-platform-demo="about-hero"] .gah-card--offices { transition-delay: 0.5s; }
	[data-platform-demo="about-hero"] .gah-card--story { transition-delay: 0.75s; }

	/* a slow drift once settled, each card on its own phase */
	[data-platform-demo="about-hero"].gah-on .gah-card--award { animation: gah-float 7s ease-in-out infinite 1.2s; }
	[data-platform-demo="about-hero"].gah-on .gah-card--offices { animation: gah-float 8s ease-in-out infinite 1.5s; }
	[data-platform-demo="about-hero"].gah-on .gah-card--story { animation: gah-float 9s ease-in-out infinite 1.8s; }

	/* while running, the script steps the eras and the offices */
	[data-platform-demo="about-hero"].gah-run .gah-track::after { transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
	[data-platform-demo="about-hero"].gah-run .gah-track li::before { transition: background 0.4s ease, border-color 0.4s ease, scale 0.4s ease; }
	[data-platform-demo="about-hero"].gah-run .gah-track li:not(.is-done)::before { background: var(--wp--preset--color--white); border-color: var(--neutral-300); }
	[data-platform-demo="about-hero"].gah-run .gah-track li.is-now::before { scale: 1.3; }
	[data-platform-demo="about-hero"].gah-run .gah-track li { transition: color 0.4s ease; }
	[data-platform-demo="about-hero"].gah-run .gah-track li.is-now { color: var(--wp--preset--color--ink); }
	[data-platform-demo="about-hero"].gah-run .gah-cap > * { opacity: 0; translate: 0 0.6em; transition: opacity 0.4s ease, translate 0.4s ease; }
	[data-platform-demo="about-hero"].gah-run .gah-cap > .is-now { opacity: 1; translate: 0 0; transition-delay: 0.15s; }

	[data-platform-demo="about-hero"].gah-run .gah-office { transition: background 0.5s ease; }
	[data-platform-demo="about-hero"].gah-run .gah-office.is-now { background: rgb(from var(--genasys-sea-green) r g b / 0.12); }
	[data-platform-demo="about-hero"].gah-run .gah-office i { transition: background 0.4s ease; background: var(--neutral-300); }
	[data-platform-demo="about-hero"].gah-run .gah-office.is-now i { background: var(--wp--preset--color--accent); }
	[data-platform-demo="about-hero"].gah-run .gah-office.is-now i::after { animation: gah-ping 1.8s ease-out infinite; }
}
@keyframes gah-fallback { to { opacity: 1; translate: 0 0; } }
@keyframes gah-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2cqw; } }
@keyframes gah-ping { 0% { scale: 1; opacity: 0.85; } 100% { scale: 2.2; opacity: 0; } }

/* Phones: like the audience heroes, the picture takes most of the screen
   width; inside the hero's wide insets the cards' text would crowd. */
@media (max-width: 600px) {
	.gn-product-hero-graphic [data-platform-demo="about-hero"].gah {
		width: calc(100% + 2 * var(--gn-hero-inset, 0px) - 24px);
		max-width: none;
		margin-inline: calc(12px - var(--gn-hero-inset, 0px));
	}
}

/* A small picture (phones, narrow tablets) drops the second words of the two
   card titles, which would otherwise wrap onto the photo's own dots. */
@container (max-width: 400px) {
	[data-platform-demo="about-hero"] .gah-by,
	[data-platform-demo="about-hero"] .gah-card--offices .gah-hd small { display: none; }
}