/*
 * Decorative CSS birds gliding across the whole hero section (Customizer:
 * Homepage Hero → Show Flying Birds). Each bird is two stacked SVG "wing"
 * states whose opacity toggles on a fast steps(1) loop for a 2-frame flap,
 * inside a span that animates the real "left" CSS property (not
 * transform:translateX — percentages there resolve against the element's
 * OWN box, not its container, so they can't cross the full section width)
 * on a diagonal glide-and-bob path. Per-bird timing/position variation is
 * computed in PHP (solaris_render_hero_birds(), inc/template-functions.php).
 */
.hero-birds {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}
.hero-bird {
	position: absolute;
	left: -10%;
	width: 40px;
	height: 16px;
	opacity: 0;
	animation-name: hero-bird-fly;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.hero-birds--rtl .hero-bird,
.hero-bird--rtl {
	animation-name: hero-bird-fly-rtl;
}
.hero-bird--ltr {
	animation-name: hero-bird-fly;
}
.hero-bird__wings {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation-name: hero-bird-flap;
	animation-timing-function: steps(1);
	animation-iteration-count: infinite;
}
.hero-bird__wings--down {
	animation-direction: reverse;
}

@keyframes hero-bird-flap {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}
@keyframes hero-bird-fly {
	0%   { left: -10%; transform: translateY(0); opacity: 0; }
	8%   { opacity: 0.9; }
	25%  { transform: translateY(-10px); }
	50%  { transform: translateY(6px); }
	75%  { transform: translateY(-8px); }
	92%  { opacity: 0.9; }
	100% { left: 110%; transform: translateY(0); opacity: 0; }
}
@keyframes hero-bird-fly-rtl {
	0%   { left: 110%; transform: translateY(0); opacity: 0; }
	8%   { opacity: 0.9; }
	25%  { transform: translateY(-10px); }
	50%  { transform: translateY(6px); }
	75%  { transform: translateY(-8px); }
	92%  { opacity: 0.9; }
	100% { left: -10%; transform: translateY(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-birds { display: none; }
}
@media (max-width: 640px) {
	.hero-birds { display: none; }
}