/* ==========================================================================
   HOME › Hero — template-parts/home/hero.php · motion: js/motion/hero.js
   ========================================================================== */

.hero {
	position: relative;
	min-height: min(100svh, 980px);
	padding: calc(var(--header-h) + clamp(40px, 6vw, 80px)) 0 clamp(72px, 8vw, 110px);
	background: var(--dli-night-950);
	color: var(--color-on-dark);
	overflow: hidden;
	isolation: isolate;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.hero__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.75;
}

.hero__orb--green {
	width: 46vw;
	height: 46vw;
	right: -8vw;
	top: -12vw;
	background: radial-gradient(circle, rgb(0 164 80 / 0.55), transparent 65%);
}

.hero__orb--red {
	width: 40vw;
	height: 40vw;
	left: -12vw;
	bottom: -16vw;
	background: radial-gradient(circle, rgb(236 28 36 / 0.38), transparent 65%);
}

.hero__grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
}

.hero__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8%;
	width: 100%;
	height: 120px;
	fill: none;
	stroke: rgb(92 196 140 / 0.25);
	stroke-width: 2;
}

.hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

@media (max-width: 960px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__visual { max-width: 460px; margin-inline: auto; width: 100%; }
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--s-5);
	padding: 8px 16px 8px 12px;
	border: 1px solid rgb(255 255 255 / 0.14);
	border-radius: var(--r-pill);
	background: rgb(255 255 255 / 0.06);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 700;
}

.hero__title {
	margin-bottom: var(--s-5);
	color: #fff;
	font-size: var(--fs-5xl);
	line-height: 1.04;
	letter-spacing: -0.035em;
}

.hero__title .hl {
	background: linear-gradient(90deg, var(--dli-green-300), #d9f99d);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero__lead {
	max-width: 560px;
	margin-bottom: var(--s-6);
	color: var(--color-on-dark-muted);
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
}

.hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-bottom: var(--s-6);
}

.hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--color-on-dark-muted);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.hero__proof li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hero__proof .icon {
	color: var(--dli-green-300);
}

/* ---- Visual ---- */
.hero__visual {
	position: relative;
	aspect-ratio: 4 / 5;
}

.hero__arch {
	position: absolute;
	inset: 6% 8% 0;
	border-radius: 999px 999px var(--r-xl) var(--r-xl);
	background: linear-gradient(180deg, var(--dli-green-500), var(--dli-green-900));
	overflow: hidden;
	box-shadow: 0 40px 80px rgb(0 0 0 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

.hero__arch::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgb(5 20 12 / 0.55));
}

.hero__arch img {
	position: absolute;
	inset: auto 0 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* Speech bubbles */
.bubble {
	position: absolute;
	z-index: 2;
	padding: 10px 16px;
	border-radius: 18px 18px 18px 4px;
	background: #fff;
	color: var(--dli-night-900);
	font-size: var(--fs-sm);
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 14px 30px rgb(0 0 0 / 0.25);
}

.bubble.bn {
	font-family: var(--font-bn);
}

.bubble--b1 { top: 4%; left: -6%; }
.bubble--b2 { top: 24%; right: -8%; border-radius: 18px 18px 4px 18px; background: var(--dli-green-500); color: #fff; }
.bubble--b3 { bottom: 34%; left: -10%; background: var(--dli-amber-500); color: var(--dli-night-950); }
.bubble--b4 { bottom: 6%; right: -4%; border-radius: 18px 18px 4px 18px; }

@media (max-width: 520px) {
	.bubble { font-size: var(--fs-xs); padding: 8px 12px; }
	.bubble--b1 { left: 0; }
	.bubble--b2 { right: 0; }
	.bubble--b3 { left: 0; }
	.bubble--b4 { right: 0; }
}

/* Floating cards */
.hero__card {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid rgb(255 255 255 / 0.16);
	border-radius: var(--r-lg);
	background: rgb(10 31 20 / 0.72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: #fff;
	box-shadow: 0 20px 40px rgb(0 0 0 / 0.3);
}

.hero__card small {
	display: block;
	color: var(--color-on-dark-muted);
	font-size: var(--fs-xs);
}

.hero__card--live {
	left: -4%;
	bottom: 14%;
}

.hero__card-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--dli-red-500);
}

.eq {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 20px;
}

.eq i {
	width: 3px;
	height: 100%;
	border-radius: 2px;
	background: var(--dli-green-300);
	transform-origin: bottom;
	animation: dli-eq 1s var(--ease-in-out) infinite alternate;
}

.eq i:nth-child(2) { animation-delay: -0.2s; }
.eq i:nth-child(3) { animation-delay: -0.5s; }
.eq i:nth-child(4) { animation-delay: -0.1s; }
.eq i:nth-child(5) { animation-delay: -0.7s; }

@keyframes dli-eq {
	from { transform: scaleY(0.25); }
	to { transform: scaleY(1); }
}

.hero__card--band {
	top: 8%;
	right: -2%;
	flex-direction: column;
	gap: 0;
	padding: 14px 18px;
	text-align: center;
}

.hero__card--band strong {
	font-size: 2rem;
	line-height: 1.1;
	color: var(--dli-amber-300);
}

/* Hidden until hero.js plays the intro (only when motion is on). */
.js-motion [data-hero-item],
.js-motion [data-hero-title],
.js-motion [data-hero-visual] {
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.js-motion [data-hero-item],
	.js-motion [data-hero-title],
	.js-motion [data-hero-visual] {
		visibility: visible;
	}
}

/* Scroll cue */
.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 24px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 44px;
	border: 2px solid rgb(255 255 255 / 0.35);
	border-radius: 999px;
	transform: translateX(-50%);
}

.hero__scroll span {
	width: 4px;
	height: 8px;
	border-radius: 2px;
	background: #fff;
	animation: dli-scrollcue 1.6s var(--ease-in-out) infinite;
}

@keyframes dli-scrollcue {
	0% { transform: translateY(-8px); opacity: 0; }
	40% { opacity: 1; }
	100% { transform: translateY(8px); opacity: 0; }
}

@media (max-width: 960px) {
	.hero__scroll { display: none; }
}