/* ==========================================================================
   Главная, Hero: маскот ROBIN для телефонов и планшетов (< 1024px).
   На десктопе птица — видео в коллаже справа, здесь блок скрыт и картинка
   (loading="lazy") не скачивается.

   Вся анимация — CSS, одна картинка 170×184 webp (~12 КБ):
   - .rhb-body — «дыхание» и периодический прыжок;
   - .rhb-gear — та же картинка, вырезанная clip-path по шестерёнке на груди
     и вращаемая вокруг её центра (координаты — в пикселях отображения
     85×92: центр 25.6/43.8, радиус 10.7 → в исходнике 334×360 это 100/172, r 42);
   - тап → .is-tap (inline-скрипт в functions.php): прыжок с разворотом и
     быстрый оборот шестерёнки через обёртку .rhb-gearwrap.
   Префикс .rhb- — robin home bird.
   ========================================================================== */

.rhb-bird {
	position: relative;
	display: block;
	flex: none;
	align-self: flex-end;
	width: 85px;
	height: 92px;
	margin-left: auto;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}

@media (min-width: 1024px) {
	.rhb-bird { display: none; }
}

.rhb-shadow {
	position: absolute;
	left: 20%;
	right: 20%;
	bottom: -3px;
	height: 8px;
	border-radius: 50%;
	background: rgba(90, 12, 16, .2);
	filter: blur(2px);
	animation: rhb-shadow 6s cubic-bezier(.3, 0, .3, 1) infinite;
}

.rhb-body {
	position: absolute;
	inset: 0;
	transform-origin: 50% 100%;
	animation: rhb-hop 6s cubic-bezier(.3, 0, .3, 1) infinite;
}

.rhb-img,
.rhb-gear {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	-webkit-user-drag: none;
}

.rhb-gearwrap {
	position: absolute;
	inset: 0;
	transform-origin: 25.6px 43.8px;
}

.rhb-gear {
	clip-path: circle(10.7px at 25.6px 43.8px);
	transform-origin: 25.6px 43.8px;
	animation: rhb-spin 9s linear infinite;
}

/* Тап: прыжок с разворотом + быстрый оборот шестерёнки */
.rhb-bird.is-tap .rhb-body   { animation: rhb-tap .8s cubic-bezier(.3, 0, .3, 1); }
.rhb-bird.is-tap .rhb-shadow { animation: rhb-tap-shadow .8s cubic-bezier(.3, 0, .3, 1); }
.rhb-bird.is-tap .rhb-gearwrap { animation: rhb-whirl .9s cubic-bezier(.2, .7, .3, 1); }

@keyframes rhb-hop {
	0%, 35%, 70%, 92%, 100% { transform: translateY(0) scale(1, 1); }
	17%, 52% { transform: translateY(0) scale(1.012, .985); }
	75% { transform: translateY(0) scale(1.06, .92); }
	81% { transform: translateY(-14px) scale(.96, 1.05) rotate(-4deg); }
	87% { transform: translateY(0) scale(1.05, .94); }
}

@keyframes rhb-shadow {
	0%, 75%, 87%, 100% { transform: scale(1); opacity: 1; }
	81% { transform: scale(.6); opacity: .5; }
}

@keyframes rhb-spin {
	to { transform: rotate(360deg); }
}

@keyframes rhb-tap {
	0%, 100% { transform: translateY(0) scale(1, 1); }
	12% { transform: translateY(0) scale(1.08, .9); }
	40% { transform: translateY(-22px) scale(.95, 1.06) rotate(8deg); }
	62% { transform: translateY(-6px) rotate(-5deg); }
	80% { transform: translateY(0) scale(1.06, .93); }
}

@keyframes rhb-tap-shadow {
	0%, 80%, 100% { transform: scale(1); opacity: 1; }
	40% { transform: scale(.5); opacity: .4; }
}

@keyframes rhb-whirl {
	to { transform: rotate(720deg); }
}

@media (prefers-reduced-motion: reduce) {
	.rhb-body,
	.rhb-shadow,
	.rhb-gear,
	.rhb-bird.is-tap .rhb-body,
	.rhb-bird.is-tap .rhb-shadow,
	.rhb-bird.is-tap .rhb-gearwrap { animation: none; }
}