/* Hero */
.boll-hero {
	min-height: 100svh;
	display: flex; align-items: center; justify-content: center; text-align: center;
	padding-top: calc(var(--boll-header-h) + 2rem);
	padding-bottom: clamp(4rem, 8vw, 6rem);
	overflow: hidden; isolation: isolate;
}
.boll-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.boll-hero__glow { position: absolute; border-radius: 50%; filter: blur(30px); will-change: transform; }
.boll-hero__glow--a {
	width: 90vmax; height: 90vmax; left: 50%; top: 38%; margin: -45vmax 0 0 -45vmax;
	background: radial-gradient(circle, color-mix(in srgb, var(--boll-color-primary) 38%, transparent) 0%, color-mix(in srgb, var(--boll-color-primary) 10%, transparent) 38%, transparent 66%);
	animation: boll-hero-drift-a 18s ease-in-out infinite alternate;
}
.boll-hero__glow--b {
	width: 60vmax; height: 60vmax; right: -20vmax; bottom: -28vmax;
	background: radial-gradient(circle, color-mix(in srgb, var(--boll-color-primary-dark) 34%, transparent) 0%, transparent 64%);
	animation: boll-hero-drift-b 24s ease-in-out infinite alternate;
}
.boll-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.boll-hero__overlay { position: absolute; inset: 0; opacity: 0; background: linear-gradient(to bottom, var(--boll-color-bg), color-mix(in srgb, var(--boll-color-bg) 70%, transparent) 50%, var(--boll-color-bg)); }
.boll-hero--media .boll-hero__overlay { opacity: .65; }

.boll-hero__inner { display: flex; flex-direction: column; align-items: center; }
.boll-hero__title {
	font-family: var(--boll-font-display); font-weight: var(--boll-fw-display); text-transform: uppercase;
	font-size: var(--boll-fs-hero); line-height: var(--boll-lh-display); letter-spacing: .01em;
	max-width: 24ch; text-wrap: balance;
}
.boll-hero__title em { font-style: normal; color: var(--boll-color-primary); }
.boll-hero__lead { margin-top: 1.6rem; max-width: 44rem; font-size: var(--boll-fs-lead); color: var(--boll-color-muted); }
.boll-hero__lead strong { color: var(--boll-color-text); font-weight: 700; }
.boll-hero__lead p + p { margin-top: .9rem; font-size: .92em; }
.boll-hero__lead p:first-child strong { display: inline-block; font-size: 1.12em; line-height: 1.4; }
.boll-hero__actions { margin-top: 2.2rem; display: flex; flex-direction: column; gap: .85rem; width: 100%; max-width: 22rem; }
.boll-hero__micro { margin-top: 1.4rem; max-width: 34rem; font-size: var(--boll-fs-small); color: var(--boll-color-faint); }

.boll-hero__scroll {
	position: absolute; z-index: 2; left: 50%; bottom: 1.5rem; margin-left: -22px;
	width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
	border: 1px solid var(--boll-color-border-strong); color: var(--boll-color-muted);
	transition: color .2s, border-color .2s;
}
.boll-hero__scroll svg { width: 1.15rem; height: 1.15rem; transform: rotate(90deg); animation: boll-hero-bob 2s ease-in-out infinite; }
.boll-hero__scroll:hover { color: var(--boll-color-text); border-color: var(--boll-color-primary); }

@keyframes boll-hero-drift-a { from { transform: translate3d(-6%, -4%, 0) scale(1); } to { transform: translate3d(6%, 5%, 0) scale(1.12); } }
@keyframes boll-hero-drift-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-12%, -8%, 0) scale(1.18); } }
@keyframes boll-hero-bob { 0%, 100% { transform: rotate(90deg) translateX(-2px); } 50% { transform: rotate(90deg) translateX(4px); } }

@media (min-width: 768px) {
	.boll-hero__actions { flex-direction: row; justify-content: center; max-width: none; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.boll-hero__glow, .boll-hero__scroll svg { animation: none; }
}