/* ==========================================================================
   Слой ховеров и анимаций — «Автоколорит»

   Отключается целиком: закомментируйте в templates/rostsayt-4/vendor.php
   подключение этого файла и javascript/animations.js. Базовая вёрстка
   от этого не зависит и останется в том же виде.
   ========================================================================== */

/* ------------------------------------------------------------- переходы -- */

.ak-btn,
.ak-btn__arrow,
.ak-btn__ico,
.ak-textlink,
.ak-textlink__arrow,
.ak-card,
.ak-card__img,
.ak-steps__item,
.ak-steps__img,
.ak-cert,
.ak-news-card,
.ak-news-card__img,
.ak-news-card__more,
.ak-nav__link,
.ak-nav__item,
.ak-contact,
.ak-contact__ico,
.ak-contacts__value,
.ak-footer__links a,
.ak-footer__contact a,
.ak-footer__legal a,
.ak-trust__item,
.ak-badges__item,
.ak-stats__item,
.ak-slider.owl-carousel .owl-prev,
.ak-slider.owl-carousel .owl-next,
.ak-slider.owl-carousel .owl-dot {
	transition: color .25s ease, background-color .25s ease, border-color .25s ease,
		box-shadow .3s ease, transform .3s ease, opacity .25s ease, filter .3s ease;
}

/* --------------------------------------------------------------- кнопки -- */

/*
 * По кнопке при наведении пробегает блик — наклонная светлая полоса.
 * Лежит под содержимым (см. `.ak-btn > *` в autokolorit.css) и в покое стоит
 * за левым краем, поэтому без наведения кнопка выглядит как обычно.
 * Цвет текста и фон кнопки не меняются.
 */
.ak-btn::before {
	content: '';
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: -40%;
	z-index: 1;
	width: 28%;
	background: linear-gradient(90deg,
		rgba(255, 255, 255, 0) 0%,
		var(--ak-shine, rgba(255, 255, 255, .55)) 50%,
		rgba(255, 255, 255, 0) 100%);
	transform: skewX(-22deg);
	pointer-events: none;
}

.ak-btn:hover::before,
.ak-btn:focus-visible::before {
	animation: ak-shine .75s cubic-bezier(.4, 0, .3, 1);
}

@keyframes ak-shine {
	from { left: -40%; }
	to   { left: 120%; }
}

/* На светлых кнопках белый блик не виден — там он синеватый */
.ak-btn--white {
	--ak-shine: rgba(0, 71, 214, .18);
}

.ak-btn--red:hover {
	box-shadow: 0 14px 30px rgba(214, 6, 31, .32);
}

.ak-btn--red:active {
	box-shadow: 0 6px 14px rgba(214, 6, 31, .28);
}

.ak-btn--white:hover {
	box-shadow: 0 16px 36px rgba(10, 34, 68, .2);
}

.ak-btn--ghost:hover {
	border-color: rgba(255, 255, 255, .8);
}

.ak-btn:hover .ak-btn__arrow {
	transform: translateX(5px);
}

.ak-btn:focus-visible,
.ak-textlink:focus-visible,
.ak-nav__link:focus-visible,
.ak-card:focus-visible,
.ak-news-card__more:focus-visible {
	outline: 3px solid rgba(0, 71, 214, .55);
	outline-offset: 3px;
}

/* ----------------------------------------------------- текстовые ссылки -- */

.ak-textlink:hover {
	border-bottom-color: var(--ak-blue);
}

.ak-textlink:hover .ak-textlink__arrow {
	transform: translateX(5px);
}

/* ---------------------------------------------------------- навигация -- */

/*
 * Наведение на пункт верхнего уровня полностью описано в autokolorit.css:
 * там появляется синяя плашка той же формы, что и у текущего раздела.
 * Здесь остаются только плавность и поведение выпадающего списка.
 */
.ak-nav__list > .ak-nav__item::before,
.ak-nav__list > .ak-nav__item::after {
	transition: opacity .2s ease;
}

/* В выпадающем списке плашка не используется */
.ak-nav__sub .ak-nav__item::before,
.ak-nav__sub .ak-nav__item::after {
	content: none;
}

/* Выпадающее подменю: раскрытие по наведению */
@media (min-width: 1101px) {
	.ak-nav__item.has-children:hover > .ak-nav__sub,
	.ak-nav__item.has-children:focus-within > .ak-nav__sub {
		display: block;
		animation: ak-dropdown .22s ease both;
	}

	/* Список раскрыт — стрелка смотрит вверх. Цвет берётся от плашки пункта */
	.ak-nav__item.has-children:hover > .ak-nav__caret .ak-nav__caret-ico {
		transform: rotate(225deg) translate(3px, 3px);
	}
}

@keyframes ak-dropdown {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------- шапка сайта -- */

/*
 * Контакты в шапке: вместо перекраски текста — насыщается плитка иконки
 * и сам глиф слегка подрастает.
 */
.ak-contact:hover .ak-contact__ico {
	background: linear-gradient(145deg, #e3edfc 0%, #cfe0f8 100%);
	box-shadow: 0 8px 18px rgba(10, 34, 68, .12);
}

.ak-contact:hover .ak-contact__icon {
	transform: scale(1.08);
}

.ak-contact__icon {
	transition: transform .25s ease;
}

.ak-nav.is-stuck {
	box-shadow: 0 6px 24px rgba(10, 34, 68, .12);
}

/* ------------------------------------------------------------ карточки -- */

.ak-card:hover,
.ak-steps__item:hover,
.ak-cert:hover,
.ak-news-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 54px rgba(10, 34, 68, .14);
}

.ak-card:hover {
	border-color: rgba(0, 71, 214, .35);
}

.ak-card__media,
.ak-steps__media,
.ak-news-card__media {
	overflow: hidden;
}

.ak-card:hover .ak-card__img,
.ak-steps__item:hover .ak-steps__img,
.ak-news-card:hover .ak-news-card__img {
	transform: scale(1.06);
}

.ak-news-card:hover .ak-news-card__more {
	background: var(--ak-blue);
	border-color: var(--ak-blue);
	color: #fff;
}

.ak-news-card__title a:hover {
	color: var(--ak-blue);
}

.ak-badges__item:hover .ak-badges__title,
.ak-stats__item:hover .ak-stats__value {
	color: var(--ak-blue-light);
}

.ak-trust__item:hover .ak-trust__img {
	transform: scale(1.05);
}

.ak-trust__img {
	transition: transform .3s ease;
}

/* -------------------------------------------------------------- слайдер -- */

.ak-slider.owl-carousel .owl-prev:hover,
.ak-slider.owl-carousel .owl-next:hover {
	background: var(--ak-blue);
	box-shadow: 0 14px 30px rgba(0, 71, 214, .28);
}

.ak-slider.owl-carousel .owl-prev:hover .ak-slider-arrow,
.ak-slider.owl-carousel .owl-next:hover .ak-slider-arrow {
	color: #fff;
}

.ak-slider.owl-carousel .owl-dot:hover {
	background: var(--ak-blue) !important;
}

/* ------------------------------------------------------- контакты, подвал -- */

.ak-contacts__value:hover {
	color: #8fc0ff;
}

.ak-footer__links a:hover,
.ak-footer__contact a:hover,
.ak-footer__legal a:hover {
	color: #8fc0ff;
}

/* ------------------------------------------------- появление при скролле -- */

/*
 * Класс навешивает javascript/animations.js. Без него разметка остаётся
 * обычной и полностью видимой — скрытие существует только вместе со скриптом,
 * который его же и снимает.
 */
.ak-reveal {
	opacity: 0;
	transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}

.ak-reveal--up    { transform: translateY(32px); }
.ak-reveal--left  { transform: translateX(40px); }
.ak-reveal--right { transform: translateX(-40px); }
.ak-reveal--zoom  { transform: scale(.92); }

.ak-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Ховер появившейся карточки не должен конфликтовать с состоянием появления */
.ak-reveal.is-visible.ak-card:hover,
.ak-reveal.is-visible.ak-steps__item:hover,
.ak-reveal.is-visible.ak-cert:hover,
.ak-reveal.is-visible.ak-news-card:hover {
	transform: translateY(-6px);
}

/* Плавное появление первого экрана при загрузке */
.ak-hero__content > * {
	animation: ak-rise .7s ease both;
}

.ak-hero__content > *:nth-child(1) { animation-delay: .05s; }
.ak-hero__content > *:nth-child(2) { animation-delay: .15s; }
.ak-hero__content > *:nth-child(3) { animation-delay: .25s; }
.ak-hero__content > *:nth-child(4) { animation-delay: .35s; }

@keyframes ak-rise {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Уважение к системной настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
	.ak-btn,
	.ak-card,
	.ak-steps__item,
	.ak-cert,
	.ak-news-card,
	.ak-card__img,
	.ak-steps__img,
	.ak-news-card__img,
	.ak-hero__content > * {
		transition: none !important;
		animation: none !important;
		transform: none !important;
	}

	[data-aos] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	/* Медленный наезд фотографии баннера и «дыхание» свечения — тоже движение */
	.ak-pagehero__photo,
	.ak-page__band--dark::after {
		animation: none !important;
		transform: none !important;
	}
}

/* Пульсация плавающих кнопок — тоже движение */
@media (prefers-reduced-motion: reduce) {
	.ak-fab__pulse {
		animation: none !important;
		opacity: 0 !important;
	}
}