/* Coded FE hero. Scoped so HERO_BACKGROUND_MODE = 'image' restores the
   original artwork. Two scales of honeycomb, lit from the lower edge. */
.hero__art { display: none; }

.hero--coded {
	position: relative;
	isolation: isolate;
	background: #10091c;
}

.hero--coded .hero__art {
	display: block;
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(ellipse 45% 19% at 50% 0%, rgba(99, 60, 150, .15), transparent 85%),
		radial-gradient(ellipse 70% 32% at 50% 78%, rgba(160, 106, 226, 0.3), transparent 80%),
		linear-gradient(180deg,
			#10091c 0%,
			#110a1e 16%,
			#160b24 32%,
			#1c0b30 47%,
			#36134f 60%,
			#623481 73%,
			#976caf 88%,
			#c5a5d7 100%);
}

.hero--coded .hero__inner { position: relative; }

/* A shared silhouette mask clears the small grid around the large cells.
   Both layers are strongest at the top and disappear before the lower fade. */
.hero--coded .hero__lattice {
	--hero-cell-scale: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1320px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .86) 25%, rgba(0, 0, 0, .36) 57%, transparent 95%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .86) 25%, rgba(0, 0, 0, .36) 57%, transparent 95%);
}
.hero--coded .hero__hive-large {
	transform-box: view-box;
	transform-origin: 0 0;
	transform: scale(var(--hero-cell-scale));
}
.hero--coded .hero__hive-large--right {
	transform: translateX(100%) scale(calc(-1 * var(--hero-cell-scale)), var(--hero-cell-scale));
}

/* Replace the small raster behind HUMAN too. No new background images,
   canvas, animation loops, or JavaScript are required. */
.hero--coded .hl-pill {
	background-image:
		radial-gradient(ellipse at 50% 120%, rgba(139, 92, 246, 0.08), transparent 76%),
		linear-gradient(180deg, rgba(221, 214, 254, 0.025), rgba(167, 139, 250, 0.045));
	box-shadow: inset 0 1px 0 rgba(237, 233, 254, 0.04);
}

/* Decorative sound curves drift behind the player using transform only.
   The halo stays unchanged and the edges dissolve into the background. */
.hero__video-stage {
	position: relative;
	display: flow-root;
	margin-top: clamp(20px, 2.5vw, 40px);
}
.hero__video-stage > .hero__video { margin-top: 0; }
.hero__soundwaves {
	--wave-drift-x: clamp(8px, 1vw, 18px);
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 62%;
	width: 100vw;
	min-width: 1100px;
	height: clamp(220px, 21vw, 360px);
	transform: translate(-50%, -50%);
	animation: hero-wave-drift 18s ease-in-out infinite;
	overflow: visible;
	opacity: .6;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
@keyframes hero-wave-drift {
	0%, 100% { transform: translate(calc(-50% - var(--wave-drift-x)), calc(-50% + 4px)); }
	50% { transform: translate(calc(-50% + var(--wave-drift-x)), calc(-50% - 4px)); }
}
@media (prefers-reduced-motion: reduce) {
	.hero__soundwaves { animation: none; transform: translate(-50%, -50%); }
}

/* Anchor a gentle violet lift to the cards so it follows every grid layout.
   Its upper edge blends in behind the video; the offer fades it to white. */
.hero--coded .hero__points { position: relative; }
.hero--coded .hero__points::before {
	--hero-card-rise: clamp(220px, 22vw, 340px);
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(-1 * var(--hero-card-rise));
	bottom: -160px;
	left: calc(50% - 50vw);
	width: 100vw;
	pointer-events: none;
	opacity: .22;
	background:
		radial-gradient(ellipse 85% 70% at 50% 60%, rgba(170, 110, 247, .28), transparent 76%),
		linear-gradient(180deg, rgba(94, 24, 177, 0) 0%, #6220b8 var(--hero-card-rise), #8650d5 68%, #b381e9 100%);
}
.hero--coded .point-card { position: relative; z-index: 1; }

/* The PRO-style eased fade is anchored to the offer, so its white ground
   always meets the dark text regardless of viewport height or card rows. */
.hero--coded .hero__cta::before {
	--hero-fade: clamp(240px, 25vw, 420px);
	top: calc(-1 * var(--hero-fade));
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0) 0,
			rgba(187, 144, 233, 0.08) calc(var(--hero-fade) * 0.2),
			rgba(201, 166, 237, 0.2) calc(var(--hero-fade) * 0.36),
			rgba(221, 196, 243, 0.4) calc(var(--hero-fade) * 0.52),
			rgba(235, 218, 249, 0.63) calc(var(--hero-fade) * 0.66),
			rgba(246, 237, 252, 0.82) calc(var(--hero-fade) * 0.79),
			rgba(252, 248, 254, 0.95) calc(var(--hero-fade) * 0.9),
			#fff var(--hero-fade), #fff 100%);
}

@media (min-width: 640px) and (max-width: 1100px) {
	.hero--coded .hero__lattice { --hero-cell-scale: .7; }
}
@media (max-width: 639px) {
	.hero__soundwaves { min-width: 720px; opacity: .4; }
	.hero--coded .hero__lattice { --hero-cell-scale: .4; height: 800px; }
	.hero--coded .hero__hive-grid { fill: url(#hero-honeycomb-compact); }
	.hero--coded .hero__logo-clearance { rx: 170px; ry: 105px; cy: 40px; }
}