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

/* --------------------------------------------------------------------------
   1. ГИДРОПЛАН В НЕБЕ
   Пролетает через весь экран слева направо по волнистой траектории.
   -------------------------------------------------------------------------- */
.sky__plane {
	animation: plane-fly 34s linear infinite;
	will-change: transform;
}

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

/* --------------------------------------------------------------------------
   2. СБОР МОНЕТ: монетка выскакивает из кнопки и улетает вверх-вбок
   Запускается при наведении/фокусе на .button (см. style.css, класс .button::after)
   -------------------------------------------------------------------------- */
@keyframes coin-pop {
	0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
	15%  { opacity: 1; transform: translate(0, -6px) scale(1); }
	60%  { opacity: 1; transform: translate(18px, -34px) scale(1); }
	100% { opacity: 0; transform: translate(26px, -46px) scale(0.7); }
}

/* --------------------------------------------------------------------------
   3. ВРАЩЕНИЕ МОНЕТЫ: имитация 3D-переворота через сжатие по горизонтали
   Используется у монет в стопке футера (см. .site-footer__coin)
   -------------------------------------------------------------------------- */
.site-footer__coin {
	animation: coin-spin 1.2s steps(6, end) infinite;
}

.site-footer__coin:nth-child(2) { animation-delay: -0.2s; }
.site-footer__coin:nth-child(3) { animation-delay: -0.4s; }
.site-footer__coin:nth-child(4) { animation-delay: -0.6s; }
.site-footer__coin:nth-child(5) { animation-delay: -0.8s; }

@keyframes coin-spin {
	0%   { transform: scaleX(1); }
	50%  { transform: scaleX(0.15); }
	100% { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   4. БАНДИТЫ КРАДУТ МОНЕТЫ
   Каждый бандит подкрадывается к стопке, «хватает» монету и убегает с ней,
   затем цикл повторяется. У правого бандита фаза сдвинута, чтобы они
   не двигались синхронно.
   -------------------------------------------------------------------------- */
.site-footer__bandit--left {
	animation: heist-left 5s steps(8, end) infinite;
}

.site-footer__bandit--right {
	animation: heist-right 5s steps(8, end) infinite;
	animation-delay: -2.5s;
}

@keyframes heist-left {
	0%, 8%   { transform: translateX(0); }
	35%      { transform: translateX(22px); }
	45%, 55% { transform: translateX(22px) translateY(-4px); }
	80%      { transform: translateX(-6px); }
	100%     { transform: translateX(0); }
}

@keyframes heist-right {
	0%, 8%   { transform: scaleX(-1) translateX(0); }
	35%      { transform: scaleX(-1) translateX(22px); }
	45%, 55% { transform: scaleX(-1) translateX(22px) translateY(-4px); }
	80%      { transform: scaleX(-1) translateX(-6px); }
	100%     { transform: scaleX(-1) translateX(0); }
}

/* --------------------------------------------------------------------------
   5. ГЛАВНАЯ: башня-хранилище «покачивается», будто из неё выплёскиваются монеты
   Лёгкое, почти незаметное движение — не должно отвлекать от текста рядом.
   -------------------------------------------------------------------------- */
.hero__vault {
	animation: vault-settle 0.7s steps(6, end) both;
}

@keyframes vault-settle {
	from { transform: translateY(-18px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

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

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

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

	.sky__plane {
		left: 62%;
	}
}