/*
	Hero — byhook layout: bold two-line headline top-left, small
	bold subline, then a light-gray media block with playful
	floating letters standing in for their 3D "HOOK" render.
*/
.hero {
	padding-top: clamp(1.5rem, 5vh, 3rem);
}

.hero__title {
	font-size: var(--textHero);
	font-weight: 700;
	line-height: var(--leadingHero);
	letter-spacing: var(--trackingDisplay);
}

.hero__sub {
	margin-top: 1rem;
	font-size: var(--textSmall);
	font-weight: 600;
}

.hero__media {
	position: relative;
	margin-top: clamp(1.75rem, 5vh, 3rem);
	border-radius: var(--radiusCard);
	background: linear-gradient(180deg, #ececec 0%, #e3e3e3 100%);
	min-height: clamp(18rem, 48vh, 30rem);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.hero__letters {
	display: flex;
	gap: clamp(0.5rem, 2vw, 1.5rem);
	transform: rotate(-4deg);
}

.hero__letter {
	font-size: clamp(3.5rem, calc((2.625rem) + (4.5vw)), 7rem);
	font-weight: 700;
	line-height: 1;
	padding: 0 clamp(0.7rem, 1.6vw, 1.3rem);
	border-radius: 16px;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.35);
	animation: floatLetter 5s var(--easeOut) infinite alternate;
}

.hero__letter--beige {
	background: var(--colorBeige);
	transform: rotate(6deg) translateY(-0.4rem);
}

.hero__letter--pink {
	background: var(--colorPink);
	transform: rotate(-5deg) translateY(0.6rem);
	animation-delay: -1.6s;
}

.hero__letter--lilac {
	background: var(--colorLilac);
	transform: rotate(4deg) translateY(-0.2rem);
	animation-delay: -3.2s;
}

@keyframes floatLetter {
	from { translate: 0 -6px; }
	to { translate: 0 8px; }
}

.hero__reelButton {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
	.hero__letter {
		animation: none;
	}
}