/* ==========================================================================
   ChipNDaleTheme — анимации
   Подключается отдельно от style.css (см. functions.php).
   Для «пиксельного» ощущения большинство анимаций идёт ступенями (steps()).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ПОЛЁТ САМОЛЁТА
   Самолёт со следом пересекает небо слева направо по волнистой траектории.
   Носом он смотрит вправо, поэтому летит «вперёд носом».
   -------------------------------------------------------------------------- */
.sky__plane {
	animation: plane-fly 30s linear infinite;
	will-change: transform;
}

@keyframes plane-fly {
	0%   { transform: translate3d(-35vw, 0, 0)     rotate(-2deg); }
	20%  { transform: translate3d(10vw, -34px, 0)  rotate(3deg); }
	40%  { transform: translate3d(35vw, 26px, 0)   rotate(-3deg); }
	60%  { transform: translate3d(60vw, -22px, 0)  rotate(3deg); }
	80%  { transform: translate3d(85vw, 30px, 0)   rotate(-2deg); }
	100% { transform: translate3d(120vw, -12px, 0) rotate(2deg); }
}

/* Облака медленно плывут в ту же сторону; у каждого свой темп и сдвиг старта */
.sky__cloud {
	animation: cloud-drift 120s linear infinite;
}

.sky__cloud--1 { animation-duration: 140s; animation-delay: -30s; }
.sky__cloud--2 { animation-duration: 100s; animation-delay: -70s; }
.sky__cloud--3 { animation-duration: 170s; animation-delay: -120s; }

@keyframes cloud-drift {
	from { transform: translateX(-30vw); }
	to   { transform: translateX(120vw); }
}

/* --------------------------------------------------------------------------
   2. МЕНЮ-САМОЛЁТ: покачивание в воздухе и вращение винта
   -------------------------------------------------------------------------- */
.plane {
	animation: plane-bob 1.4s steps(4, end) infinite alternate;
}

@keyframes plane-bob {
	from { transform: translateY(0); }
	to   { transform: translateY(-8px); }
}

/* Винт «размывается»: сжимается и растягивается по вертикали */
.plane__prop {
	animation: prop-spin 0.18s steps(1, end) infinite alternate;
}

@keyframes prop-spin {
	from { transform: scaleY(1); }
	to   { transform: scaleY(0.25); }
}

/* --------------------------------------------------------------------------
   3. ГЛАВНАЯ: лупа детектива «опускается» на страницу
   Проигрывается один раз при загрузке — это единственное «приветственное» движение.
   -------------------------------------------------------------------------- */
.hero__icon {
	animation: lens-settle 0.6s steps(6, end) both;
}

@keyframes lens-settle {
	from { transform: rotate(-25deg) translateY(-24px); }
	to   { transform: rotate(0deg) translateY(0); }
}

/* --------------------------------------------------------------------------
   4. ШЕСТЕРЁНКИ В ФУТЕРЕ: медленно вращаются в разные стороны, «тик-так»
   -------------------------------------------------------------------------- */
.site-footer__gear--a {
	animation: gear-spin 24s steps(24, end) infinite;
}

.site-footer__gear--b {
	animation: gear-spin 24s steps(24, end) infinite reverse;
}

@keyframes gear-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   5. ЛОГОТИП: шляпа сыщика приподнимается при наведении
   -------------------------------------------------------------------------- */
.brand:hover .brand__logo,
.brand:focus-visible .brand__logo {
	animation: hat-tip 0.5s steps(3, end) both;
}

@keyframes hat-tip {
	from { transform: rotate(0deg) translateY(0); }
	to   { transform: rotate(-8deg) translateY(-4px); }
}

/* --------------------------------------------------------------------------
   6. МИГАЮЩИЙ КУРСОР В СООБЩЕНИИ ИЗ ШТАБА
   -------------------------------------------------------------------------- */
.radio__text::after {
	animation: blink 1s steps(1, end) infinite;
}

@keyframes blink {
	0%   { opacity: 1; }
	50%  { opacity: 0; }
	100% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   7. ДОСТУПНОСТЬ: отключаем движение тем, кто попросил об этом в системе
   Самолёт остаётся на небе, но неподвижным.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.sky__plane {
		left: 62%;
	}

	.sky__cloud--1 { left: 12%; }
	.sky__cloud--2 { left: 55%; }
	.sky__cloud--3 { left: 30%; }
}