/* Hero artwork — group the OCs in one cluster, front and center,
   with the intro copy sitting below them.
   The characters are transparent PNGs, so they sit right on the pink canvas. */

/* center the copy block in the section, but left-align the text within it.
   constrain .inner itself and auto-margin it so the column sits centered,
   then read left instead of centered. */
#intro .inner {
	text-align: left;
	max-width: 54em;
	margin-right: auto;
}

/* drop the template's negative-margin centering hack so the buttons
   center cleanly and wrap instead of overflowing */
#intro .actions {
	margin-left: 0;
	flex-wrap: wrap;
	justify-content: flex-start;
}
#intro .actions li {
	padding: 0;
	margin: 0.5em;
}

.hero-art {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	gap: clamp(0.5rem, 2vw, 1.75rem);
	margin-bottom: 2rem;
}

.hero-char {
	width: auto;
	height: clamp(200px, 32vh, 400px);
	filter: drop-shadow(0 10px 18px rgba(74, 51, 48, 0.22));
	will-change: transform;
	animation: hero-bob 6s ease-in-out infinite;
}

/* stagger the bob so they don't move in lockstep */
.hero-char:nth-child(1) { animation-delay: 0s; }
.hero-char:nth-child(3) { animation-delay: 0.6s; }

/* the little dragon flies up near the heads of the others, a touch smaller and floatier */
.hero-char--mini {
	height: clamp(150px, 24vh, 290px);
	align-self: flex-start;
	margin-top: clamp(-3rem, -5vh, -1.5rem);
	animation: hero-float 7.5s ease-in-out infinite;
}

@keyframes hero-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

@keyframes hero-float {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50% { transform: translateY(-14px) rotate(3deg); }
}

@media screen and (max-width: 736px) {
	.hero-char { height: 175px; }
	.hero-char--mini { height: 135px; }
}

@media screen and (max-width: 480px) {
	.hero-char { height: 140px; }
	.hero-char--mini { height: 108px; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-char { animation: none !important; }
}