/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero-section {
	position: relative;
	background: radial-gradient(circle at 20% 20%, rgba(120, 40, 160, 0.35), transparent 60%),
	            radial-gradient(circle at 80% 70%, rgba(40, 160, 150, 0.25), transparent 55%),
	            radial-gradient(circle at 60% 30%, rgba(160, 60, 200, 0.3), transparent 50%),
	            #0b0b0f;
	overflow: hidden;
	padding: 8rem 50px 5rem;
}

.hero-section__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"text image"
		"button image";
	align-items: center;
	column-gap: 40px;
	row-gap: 28px;
	max-width: 1100px;
	margin: 0 auto;
}

.hero-section__text {
	grid-area: text;
	max-width: 480px;
	color: #ffffff;
}

.hero-section__title {
	margin: 0 0 20px;
	color: #ffffff;
}

.hero-section__desc {
	color: #e6e6e6;
	margin: 0 0 28px;
}

.hero-section__button {
	grid-area: button;
	justify-self: start;
	align-self: start;
	position: relative;
	display: inline-block;
	padding: 14px 40px;
	border-radius: 4px;
	background: linear-gradient(90deg, #FB591E 33%, #F4EA8C 88%);
	color: #1a1a1a;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	overflow: hidden;
	z-index: 0;
}

.hero-section__button span {
	position: relative;
	z-index: 2;
	transition: color 0.35s ease;
}

.hero-section__button::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #FB591E;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s ease;
	z-index: 1;
}

.hero-section__button:hover::before {
	transform: scaleX(1);
}

.hero-section__button:hover span {
	color: #ffffff;
}

.hero-section__image {
	grid-area: image;
	position: relative;
	width: 380px;
}

.hero-section__laptop {
	width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   Running parrot animation
   ========================================================================== */

.hero-parrot {
	position: absolute;
	/* Target: the keyboard, which sits on the RIGHT side of the laptop
	   illustration (the screen/back panel is on the left). Adjust these
	   two values to nudge the landing spot if it's not exactly on the
	   keyboard yet — left moves it sideways, bottom moves it up/down. */
	left: 64%;
	bottom: 32%;
	width: 150px;
	pointer-events: none;
	opacity: 0;
	transform: translateX(70vw);
	transition: transform 2s ease-out, opacity 0.5s ease;
}

.hero-parrot.is-running {
	opacity: 1;
	transform: translateX(0);
}

.hero-parrot.is-hidden {
	opacity: 0;
	transition: opacity 0.6s ease;
}

/* Inner layer handles the peck bounce (translateY/rotate) independently
   from the outer layer's horizontal run (translateX) — two separate
   elements, so their transforms never fight over timing or override
   each other mid-animation. */
.hero-parrot__bounce {
	position: relative;
	width: 100%;
	aspect-ratio: 793 / 407;
}

.hero-parrot__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: auto;
	opacity: 0;
}

.hero-parrot__frame.is-visible {
	opacity: 1;
}

/* Single peck — was "0.3s ease-in-out 3" (3 pecks), now just 1. */
.hero-parrot__bounce.is-pecking {
	animation: hero-parrot-peck 0.3s ease-in-out 1;
}

@keyframes hero-parrot-peck {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(6px) rotate(-4deg);
	}
}

.hero-section__inline-link {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   Mobile (≤ 768px) — за макетом: текст, потім картинка, потім кнопка
   ========================================================================== */
@media (max-width: 768px) {

	.hero-section {
		padding: 7rem 24px 3rem;
	}

	.hero-section__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"text"
			"image"
			"button";
		justify-items: start;
		text-align: left;
		row-gap: 24px;
	}

	.hero-section__text {
		max-width: 100%;
	}

	.hero-section__title {
		font-size: 30px;
	}

	.hero-section__image {
		width: 260px;
		justify-self: center;
	}

	.hero-parrot {
		width: 100px;
	}

	.hero-section__button {
		width: 100%;
	}
}