.hero {
	position: relative;
	background: var(--color-navy);
	overflow: hidden;
	padding-block: 150px var(--space-9);
	min-height: clamp(620px, 58vw, 820px);
	display: flex;
	align-items: center;
}

.hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Four independent transform owners so nothing ever fights over the same
   element: .hero__media (GSAP scroll-scrub yPercent) > .hero__media-pointer
   (GSAP mouse-parallax x/y) > .hero__media-intro (load-in scale/opacity) >
   img (continuous idle "breathing" scale). The load-in and the idle loop are
   both plain CSS (not GSAP tweens) deliberately: this is the full-bleed hero
   background — it must never depend on a JS animation engine to become
   visible. If GSAP fails to load or its ticker stalls for any reason, a
   CSS-driven reveal still runs on its own. */
.hero__media {
	position: absolute;
	inset: -8%;
}

.hero__media-pointer,
.hero__media-intro,
.hero__media .aspegon-media,
.hero__media img {
	width: 100%;
	height: 100%;
}

.hero__media-intro {
	overflow: hidden;
}

.hero__media img {
	object-fit: cover;
}

.hero__media img {
	animation: heroKenBurns 22s ease-in-out infinite;
	transform-origin: 60% 40%;
}

html.js-anim-ready .hero__media-intro {
	animation: heroMediaIntro 1.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes heroMediaIntro {
	from {
		opacity: 0;
		transform: scale(1.22);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes heroKenBurns {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.07);
	}

	100% {
		transform: scale(1);
	}
}

/* Cursor-following highlight, driven by --mx/--my custom properties set in JS */
.hero__spotlight {
	position: absolute;
	inset: 0;
	--mx: 70%;
	--my: 40%;
	background: radial-gradient(620px circle at var(--mx) var(--my),
			rgba(79, 214, 196, 0.35),
			rgba(79, 214, 196, 0.08) 45%,
			transparent 65%);
	mix-blend-mode: screen;
}

.hero__particles {
	position: absolute;
	inset: 0;
}

.hero__particle {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-teal-light);
	box-shadow: 0 0 14px 4px rgba(79, 214, 196, 0.75);
	opacity: 0;
	animation: heroFloat 9s ease-in-out infinite;
}

.hero__particle:nth-child(1) {
	top: 18%;
	left: 62%;
	animation-delay: 0s;
}

.hero__particle:nth-child(2) {
	top: 32%;
	left: 78%;
	animation-delay: 1.4s;
}

.hero__particle:nth-child(3) {
	top: 55%;
	left: 68%;
	animation-delay: 2.8s;
}

.hero__particle:nth-child(4) {
	top: 68%;
	left: 85%;
	animation-delay: 4.2s;
}

.hero__particle:nth-child(5) {
	top: 22%;
	left: 90%;
	animation-delay: 5.6s;
}

.hero__particle:nth-child(6) {
	top: 46%;
	left: 58%;
	animation-delay: 7s;
}

.hero__particle:nth-child(7) {
	top: 12%;
	left: 20%;
	animation-delay: 2.1s;
}

.hero__particle:nth-child(8) {
	top: 40%;
	left: 8%;
	animation-delay: 4.9s;
}

.hero__particle:nth-child(9) {
	top: 78%;
	left: 30%;
	animation-delay: 6.3s;
}

@keyframes heroFloat {
	0% {
		opacity: 0;
		transform: translateY(0);
	}

	15% {
		opacity: 0.8;
	}

	50% {
		opacity: 0.4;
		transform: translateY(-22px);
	}

	85% {
		opacity: 0.8;
	}

	100% {
		opacity: 0;
		transform: translateY(-40px);
	}
}

/* Diagonal light shafts slowly drifting/fading across the hero — the extra
   "light beam" ask on top of the spotlight/particles. */
.hero__rays {
	position: absolute;
	inset: 0;
	overflow: hidden;
	mix-blend-mode: screen;
}

.hero__ray {
	position: absolute;
	top: -20%;
	width: 140px;
	height: 140%;
	background: linear-gradient(180deg,
			transparent 0%,
			rgba(79, 214, 196, 0.16) 42%,
			rgba(79, 214, 196, 0.32) 50%,
			rgba(79, 214, 196, 0.16) 58%,
			transparent 100%);
	filter: blur(18px);
	transform: rotate(14deg) translateX(0);
	animation: heroRayDrift 18s ease-in-out infinite;
}

.hero__ray:nth-child(1) {
	left: 4%;
	animation-delay: 0s;
}

.hero__ray:nth-child(2) {
	left: 42%;
	width: 100px;
	animation-delay: 6s;
}

.hero__ray:nth-child(3) {
	left: 76%;
	width: 120px;
	animation-delay: 12s;
}

@keyframes heroRayDrift {

	0%,
	100% {
		opacity: 0;
		transform: rotate(14deg) translateX(-30px);
	}

	50% {
		opacity: 1;
		transform: rotate(14deg) translateX(50px);
	}
}

/* Pulsing glow nodes over the molecule clusters in the photo. */
.hero__nodes {
	position: absolute;
	inset: 0;
}

.hero__node {
	position: absolute;
	width: 9px;
	height: 9px;
	margin: -4.5px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(148, 233, 220, 0.95), rgba(79, 214, 196, 0) 72%);
	box-shadow: 0 0 18px 5px rgba(79, 214, 196, 0.55);
	animation: heroNodePulse 4.2s ease-in-out infinite;
}

@keyframes heroNodePulse {

	0%,
	100% {
		transform: scale(0.55);
		opacity: 0.3;
	}

	50% {
		transform: scale(1.5);
		opacity: 1;
	}
}

/* Small bright dots traveling along real bond lines between balls, top/left
   are percentages of the hero box so this stays aligned with the photo at
   any width — same trick as the nodes above. */
.hero__flows {
	position: absolute;
	inset: 0;
}

.hero__flow {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 10px 3px rgba(148, 233, 220, 0.9);
	animation-duration: 2.6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@keyframes heroFlowA {

	0%,
	6% {
		top: 30.8%;
		left: 39.25%;
		opacity: 0;
	}

	16% {
		opacity: 1;
	}

	46%,
	54% {
		top: 43%;
		left: 27.25%;
		opacity: 1;
	}

	64% {
		opacity: 0;
	}

	100% {
		top: 43%;
		left: 27.25%;
		opacity: 0;
	}
}

@keyframes heroFlowB {

	0%,
	6% {
		top: 43%;
		left: 27.25%;
		opacity: 0;
	}

	16% {
		opacity: 1;
	}

	46%,
	54% {
		top: 46.6%;
		left: 47%;
		opacity: 1;
	}

	64% {
		opacity: 0;
	}

	100% {
		top: 46.6%;
		left: 47%;
		opacity: 0;
	}
}

@keyframes heroFlowC {

	0%,
	6% {
		top: 66.7%;
		left: 61.5%;
		opacity: 0;
	}

	16% {
		opacity: 1;
	}

	46%,
	54% {
		top: 74.2%;
		left: 67.75%;
		opacity: 1;
	}

	64% {
		opacity: 0;
	}

	100% {
		top: 74.2%;
		left: 67.75%;
		opacity: 0;
	}
}

/* Flicker over the small formula/grid readout printed in the photo's
   lower-left corner — like a HUD screen powering on/off. */
.hero__readout {
	position: absolute;
	top: 50%;
	left: 3%;
	width: 20%;
	height: 22%;
	background: radial-gradient(ellipse at center, rgba(148, 233, 220, 0.22), transparent 70%);
	opacity: 0;
	animation: heroReadoutFlicker 6s ease-in-out infinite;
}

@keyframes heroReadoutFlicker {

	0%,
	100% {
		opacity: 0;
	}

	4% {
		opacity: 0.9;
	}

	7% {
		opacity: 0.2;
	}

	10% {
		opacity: 0.8;
	}

	16%,
	55% {
		opacity: 0.45;
	}

	62% {
		opacity: 0;
	}
}

.hero__scrim {
	position: absolute;
	inset: 0;
	background: none;
}

.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: var(--space-8);
	align-items: center;
}

.hero__title {
	color: var(--color-white);
	font-size: clamp(32px, 4.4vw, 64px);
	letter-spacing: -0.01em;
	font-weight: 400;
	line-height: 105%;
	letter-spacing: 0%;

}

.hero__text {
	color: var(--color-white);
	margin-top: var(--space-4);
	max-width: 420px;
	font-weight: 400;
	font-size: 14px;
	line-height: 125%;
	letter-spacing: 0%;

}

.hero__cards {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* "Thick glass" card: an SVG filter (#aspegon-glass, defined once in
   header.php) softly blurs the image behind the card with a touch of
   organic waviness baked in — reads as real frosted glass rather than a
   flat, uniform backdrop-filter: blur(). Safari doesn't support SVG refs in
   backdrop-filter, so it falls back to a plain blur+saturate instead. */
.hero-card {
	background: rgba(16, 20, 28, 0.19);
	-webkit-backdrop-filter: blur(5.5px) saturate(150%);
	backdrop-filter: url(#aspegon-glass) saturate(150%);
	border: 1px solid rgba(255, 255, 255, 0.28);
	padding: var(--space-6) var(--space-5);
	text-align: center;
	transition: backdrop-filter 0.3s var(--ease-out), -webkit-backdrop-filter 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

.hero-card:hover {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.hero-card__title {
	color: var(--color-white);
	font-size: 24px;
	font-weight: 400;
	margin-bottom: var(--space-2);
	line-height: 125%;
	letter-spacing: 0%;
}

.hero-card__text {
	color: #fff;
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: var(--space-5);
	font-size: 14px;
	line-height: 125%;
	letter-spacing: 0%;
}

.hero-card .btn {
	display: inline-flex;
	width: auto;
	min-width: 176px;
	justify-content: center;
	border-radius: 0;
	border-width: 1px;
	border-color: #fff;
	font-weight: 500;
	padding: var(--space-3) var(--space-6);
	font-size: 16px;
	line-height: 105%;
	letter-spacing: -3%;

}

@media (max-width: 1024px) {
	.hero__inner {
		grid-template-columns: 1fr;
	}

	.hero {
		padding-block: 120px var(--space-7);
	}
}

@media (max-width: 480px) {
	.hero {
		padding-block: 110px var(--space-7);
	}

	.hero-card {
		padding: var(--space-5) var(--space-4);
	}
}

/* prefers-reduced-motion intentionally not honored here — see animations.js note. */