/* animations.css - Оптимизированные анимации для GearRENTShop */

/* ===== БАЗОВЫЕ АНИМАЦИИ ===== */

/* Плавное появление элементов */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Анимация масштабирования */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Анимация вращения */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-200deg);
  }
  to {
    opacity: 1;
    transform: rotate(0);
  }
}

/* Анимация пульсации */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* ===== КЛАССЫ АНИМАЦИЙ ===== */

/* Базовые классы анимаций */
.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.6s ease-out;
}

.animate-fade-in-right {
  animation: fadeInRight 0.6s ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-fade-in-down {
  animation: fadeInDown 0.6s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.5s ease-out;
}

.animate-rotate-in {
  animation: rotateIn 0.8s ease-out;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

/* ===== АНИМАЦИИ ДЛЯ КОНКРЕТНЫХ ЭЛЕМЕНТОВ ===== */

/* Анимация для карточек товаров */
.product-tile {
  transition: all 0.3s ease;
  animation: fadeInUp 0.6s ease-out;
}

.product-tile:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.product-tile .tile-img {
  transition: transform 0.3s ease;
  overflow: hidden;
}

.product-tile:hover .tile-img img {
  transform: scale(1.1);
}

.product-tile .tile-img img {
  transition: transform 0.3s ease;
}

/* Анимация для кнопок */
.btn {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn:active {
  transform: translateY(0);
}

/* Эффект волны для кнопок */
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:active::before {
  width: 300px;
  height: 300px;
}

/* Эффект волны для JavaScript */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Анимация для навигации */
.navbar-nav .nav-link {
  transition: all 0.3s ease;
  position: relative;
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #007bff;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 100%;
}

/* Анимация для логотипа */
.navbar-brand img {
  transition: transform 0.3s ease;
}

.navbar-brand:hover img {
  transform: scale(1.1) rotate(5deg);
}

/* Анимация для карточек категорий */
.card {
  transition: all 0.3s ease;
  animation: fadeInUp 0.6s ease-out;
}

.card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.card-img-top {
  transition: transform 0.3s ease;
}

.card:hover .card-img-top {
  transform: scale(1.1);
}

/* Анимация для фильтров */
.category-tree .category-item,
.characteristics-tree .characteristic-item {
  transition: all 0.2s ease;
}

.category-tree .category-item:hover,
.characteristics-tree .characteristic-item:hover {
  transform: translateX(5px);
  background-color: #f8f9fa;
}

/* Анимация для уведомлений */
.toast-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 10000;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 200px;
}

.toast-notification.show {
  transform: translateX(0);
  opacity: 1;
}

/* Анимация для загрузки */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: loading 1s linear infinite;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Анимация для хлебных крошек */
.breadcrumb-item {
  transition: all 0.3s ease;
}

.breadcrumb-item:hover {
  transform: translateX(3px);
}

/* Анимация для футера */
.footer-social {
  transition: all 0.3s ease;
  display: inline-block;
}

.footer-social:hover {
  transform: translateY(-3px) scale(1.1);
  color: #007bff !important;
}

/* ===== АНИМАЦИИ ДЛЯ ЛЕНТЫ БРЕНДОВ ===== */

/* Анимация для ленты брендов */
.brand-strip {
  animation: slideInFromLeft 0.8s ease-out;
}

/* Анимация появления брендов */
.brand-chip {
  transition: all 0.4s ease;
  animation: fadeInScale 0.6s ease-out;
  animation-fill-mode: both;
}

.brand-chip:nth-child(1) { animation-delay: 0.1s; }
.brand-chip:nth-child(2) { animation-delay: 0.2s; }
.brand-chip:nth-child(3) { animation-delay: 0.3s; }
.brand-chip:nth-child(4) { animation-delay: 0.4s; }
.brand-chip:nth-child(5) { animation-delay: 0.5s; }
.brand-chip:nth-child(6) { animation-delay: 0.6s; }
.brand-chip:nth-child(7) { animation-delay: 0.7s; }
.brand-chip:nth-child(8) { animation-delay: 0.8s; }
.brand-chip:nth-child(9) { animation-delay: 0.9s; }
.brand-chip:nth-child(10) { animation-delay: 1.0s; }

/* Hover эффекты для брендов */
.brand-chip:hover {
  transform: translateY(-8px) scale(1.15);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  z-index: 10;
}

.brand-chip:hover img {
  transform: scale(1.1);
  filter: brightness(1.1);
}

.brand-chip img {
  transition: all 0.3s ease;
}

/* Анимации появления */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}



@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Пульсация для привлечения внимания */
@keyframes brandPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.brand-chip.pulse {
  animation: brandPulse 2s ease-in-out infinite;
}

/* Эффект волны при клике */
.brand-chip.ripple-effect {
  position: relative;
  overflow: hidden;
}

.brand-chip.ripple-effect::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0,123,255,0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.brand-chip.ripple-effect:active::after {
  width: 200px;
  height: 200px;
}

/* Анимация для модальных окон */
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: scale(0.8);
}

.modal.show .modal-dialog {
  transform: scale(1);
}

/* Анимация для оффканваса */
.offcanvas {
  transition: transform 0.3s ease-in-out;
}

/* ===== АНИМАЦИИ ПРИ ПРОКРУТКЕ ===== */

/* Классы для анимации при скролле */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.scroll-animate.animate {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.6s ease;
}

.scroll-animate-left.animate {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.6s ease;
}

.scroll-animate-right.animate {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.6s ease;
}

.scroll-animate-scale.animate {
  opacity: 1;
  transform: scale(1);
}

/* ===== ОПТИМИЗИРОВАННЫЕ HOVER ЭФФЕКТЫ ===== */

/* Неоновый эффект */
.neon-hover {
  transition: all 0.3s ease;
}

.neon-hover:hover {
  box-shadow: 0 0 20px rgba(0,123,255,0.6);
  text-shadow: 0 0 10px rgba(0,123,255,0.8);
}

/* Магнитный эффект */
.magnetic-hover {
  transition: all 0.3s ease;
}

.magnetic-hover:hover {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* ===== УТИЛИТЫ ДЛЯ АНИМАЦИЙ ===== */

/* Задержка анимации */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* Длительность анимации */
.duration-fast { animation-duration: 0.3s; }
.duration-normal { animation-duration: 0.6s; }
.duration-slow { animation-duration: 1s; }

/* Тип анимации */
.ease-in { animation-timing-function: ease-in; }
.ease-out { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }
.linear { animation-timing-function: linear; }

/* ===== АДАПТИВНЫЕ АНИМАЦИИ ===== */

/* Отключаем анимации на мобильных устройствах для производительности */
@media (max-width: 768px) {
  .animate-fade-in,
  .animate-fade-in-left,
  .animate-fade-in-right,
  .animate-fade-in-up,
  .animate-fade-in-down,
  .animate-scale-in,
  .animate-rotate-in {
    animation: none;
  }
  
  .scroll-animate,
  .scroll-animate-left,
  .scroll-animate-right,
  .scroll-animate-scale {
    opacity: 1;
    transform: none;
  }
  
  .product-tile:hover,
  .card:hover {
    transform: none;
    box-shadow: none;
  }
  
  .btn:hover {
    transform: none;
    box-shadow: none;
  }
  
  /* Упрощенные анимации для брендов на мобильных */
  .brand-chip {
    animation: none;
    transition: transform 0.2s ease;
  }
  
  .brand-chip:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }
  
  .brand-strip.scroll-animation {
    animation: none;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  
  .brand-strip-container {
    background: none;
  }
  
  .brand-chip.pulse {
    animation: none;
  }
}

/* ===== АНИМАЦИИ ЗАГРУЗКИ СТРАНИЦЫ ===== */

/* Базовые настройки анимаций */
* {
  animation-duration: 0.6s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Анимация появления страницы */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Анимация пульсации */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Анимация вращения */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Анимация волны */
@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Анимация мерцания */
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* Классы анимаций */
.animate-fade-in-up {
  animation-name: fadeInUp;
}

.animate-fade-in-down {
  animation-name: fadeInDown;
}

.animate-fade-in-left {
  animation-name: fadeInLeft;
}

.animate-fade-in-right {
  animation-name: fadeInRight;
}

.animate-fade-in-scale {
  animation-name: fadeInScale;
}

.animate-slide-in-up {
  animation-name: slideInUp;
}

.animate-slide-in-down {
  animation-name: slideInDown;
}

.animate-slide-in-left {
  animation-name: slideInLeft;
}

.animate-slide-in-right {
  animation-name: slideInRight;
}

.animate-pulse {
  animation-name: pulse;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

.animate-rotate {
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: linear;
}

.animate-wave {
  animation-name: wave;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
}

/* Задержки анимаций */
.animate-delay-100 {
  animation-delay: 0.1s;
}

.animate-delay-200 {
  animation-delay: 0.2s;
}

.animate-delay-300 {
  animation-delay: 0.3s;
}

.animate-delay-400 {
  animation-delay: 0.4s;
}

.animate-delay-500 {
  animation-delay: 0.5s;
}

.animate-delay-600 {
  animation-delay: 0.6s;
}

.animate-delay-700 {
  animation-delay: 0.7s;
}

.animate-delay-800 {
  animation-delay: 0.8s;
}

.animate-delay-900 {
  animation-delay: 0.9s;
}

.animate-delay-1000 {
  animation-delay: 1s;
}

.animate-delay-1200 {
  animation-delay: 1.2s;
}

.animate-delay-1300 {
  animation-delay: 1.3s;
}

.animate-delay-1400 {
  animation-delay: 1.4s;
}

.animate-delay-1500 {
  animation-delay: 1.5s;
}

.animate-delay-1600 {
  animation-delay: 1.6s;
}

.animate-delay-1100 {
  animation-delay: 1.1s;
}

/* Длительности анимаций */
.animate-duration-fast {
  animation-duration: 0.3s;
}

.animate-duration-slow {
  animation-duration: 1s;
}

.animate-duration-slower {
  animation-duration: 1.5s;
}



/* Основные анимации для элементов */
.fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.fade-in-down {
  animation: fadeInDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.fade-in-left {
  animation: fadeInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.fade-in-right {
  animation: fadeInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.scale-in {
  animation: scaleIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Задержки для последовательных анимаций */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }

/* Анимация навигации */
.navbar {
  animation: slideInDown 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.navbar-brand {
  animation: fadeInScale 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.navbar-nav .nav-item {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.navbar-nav .nav-item:nth-child(1) { animation-delay: 0.1s; }
.navbar-nav .nav-item:nth-child(2) { animation-delay: 0.2s; }
.navbar-nav .nav-item:nth-child(3) { animation-delay: 0.3s; }
.navbar-nav .nav-item:nth-child(4) { animation-delay: 0.4s; }
.navbar-nav .nav-item:nth-child(5) { animation-delay: 0.5s; }
.navbar-nav .nav-item:nth-child(6) { animation-delay: 0.6s; }
.navbar-nav .nav-item:nth-child(7) { animation-delay: 0.7s; }

/* Анимация карусели */
.hero-carousel {
  animation: fadeInScale 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero-arrow {
  animation: fadeInScale 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Анимация карточек */
.card {
  animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.8s; }
.card:nth-child(5) { animation-delay: 0.9s; }
.card:nth-child(6) { animation-delay: 1.0s; }
.card:nth-child(4) { animation-delay: 0.9s; }

/* Анимация кнопок */
.btn {
  animation: fadeInScale 0.6s ease both;
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Анимация изображений */
img {
  animation: fadeInScale 0.8s ease both;
  transition: transform 0.3s ease;
}

img:hover {
  transform: scale(1.05);
}

/* Анимация футера */
.site-footer {
  animation: slideInUp 0.8s ease 1s both;
}

/* Анимация при скролле */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.scroll-animate.animated {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.8s ease;
}

.scroll-animate-left.animated {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-right {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.8s ease;
}

.scroll-animate-right.animated {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.8s ease;
}

.scroll-animate-scale.animated {
  opacity: 1;
  transform: scale(1);
}

/* Анимация для мобильных устройств */
@media (max-width: 768px) {
  .navbar-nav .nav-item {
    animation-delay: 0.1s !important;
  }
  
  .card {
    animation-delay: 0.2s !important;
  }
  
  .animate-duration-slow {
    animation-duration: 0.6s;
  }
}

/* Анимация для темной темы */
@media (prefers-color-scheme: dark) {
  .page-loader {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  }
}

/* Анимация для пользователей с ограниченными возможностями */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .page-loader {
    display: none !important;
  }
}