/* ============================================================
   animations.css — финальная рабочая версия
   Ключевое решение: hover-эффекты и scroll-анимации
   НЕ конфликтуют — используем отдельные CSS-переменные
   ============================================================ */


/* ============================================================
   1. SHIMMER — через transition, без animation-конфликтов
   ============================================================ */
.btn {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 30%,
    rgba(255,255,255,0.55) 50%,
    transparent 70%,
    transparent 100%
  );
  transform: translateX(-130%) skewX(-20deg);
  transition: transform 0.55s ease;
  pointer-events: none;
  z-index: 2;
}

.btn:hover::before {
  transform: translateX(130%) skewX(-20deg);
}

/* Пульс hero-кнопок */
.hero-section .btn-warning {
  animation: btnPulse 2.8s ease-in-out infinite;
}
@keyframes btnPulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(255,102,0,.5); }
  50%     { box-shadow: 0 0 0 14px rgba(255,102,0,0); }
}


/* ============================================================
   2. ПРОГРЕСС-БАР (JS создаёт элемент #scroll-progress-bar)
   ============================================================ */
#scroll-progress-bar {
  position: fixed;
  left: 0; top: 0;
  width: 4px; height: 0%;
  z-index: 9999;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg,
    #ff6600 0%, #ff9900 35%, #0066cc 70%, #004fa3 100%
  );
  box-shadow: 2px 0 10px rgba(255,102,0,.45);
  transition: height .08s linear;
}


/* ============================================================
   3. SCROLL-АНИМАЦИИ
   Используем только opacity + translate через отдельную
   CSS-переменную --tx/--ty. Это НЕ мешает hover transform.

   Решение: .anim-* задаёт opacity и translate.
   После .is-visible — opacity:1 и translate(0).
   Hover на карточках использует translateY через свой селектор
   БЕЗ !important — они не конфликтуют.
   ============================================================ */

.anim-up {
  opacity: 0;
  translate: 0 40px;            /* отдельное свойство, не transform! */
  transition: opacity .65s cubic-bezier(.22,1,.36,1),
              translate .65s cubic-bezier(.22,1,.36,1);
}

.anim-left {
  opacity: 0;
  translate: -50px 0;
  transition: opacity .65s cubic-bezier(.22,1,.36,1),
              translate .65s cubic-bezier(.22,1,.36,1);
}

.anim-right {
  opacity: 0;
  translate: 50px 0;
  transition: opacity .65s cubic-bezier(.22,1,.36,1),
              translate .65s cubic-bezier(.22,1,.36,1);
}

.anim-scale {
  opacity: 0;
  scale: 0.88;                  /* отдельное свойство! */
  transition: opacity .6s cubic-bezier(.34,1.56,.64,1),
              scale .6s cubic-bezier(.34,1.56,.64,1);
}

/* Видимое состояние — только opacity и индивидуальные свойства */
.is-visible {
  opacity: 1 !important;
  translate: 0 0 !important;
  scale: 1 !important;
}

/* Задержки */
.delay-1 { transition-delay: .10s !important; }
.delay-2 { transition-delay: .22s !important; }
.delay-3 { transition-delay: .34s !important; }
.delay-4 { transition-delay: .46s !important; }
.delay-5 { transition-delay: .58s !important; }


/* ============================================================
   4. PARALLAX ЛОГОТИПА
   ============================================================ */
.hero-parallax-img {
  will-change: transform, opacity;
  transform: scale(calc(1 - var(--hs,0) * .30))
             translateY(calc(var(--hs,0) * -60px));
  opacity: calc(1 - var(--hs,0) * .55);
  transition: none;
}


/* ============================================================
   5. HERO — анимация входа при загрузке страницы
   ============================================================ */
.hero-section h1.display-4 {
  animation: heroUp .9s cubic-bezier(.22,1,.36,1) both;
}
.hero-section .lead {
  animation: heroUp .9s .15s cubic-bezier(.22,1,.36,1) both;
}
.hero-section .d-flex.gap-3 {
  animation: heroUp .9s .30s cubic-bezier(.22,1,.36,1) both;
}
.hero-section .col-lg-6:last-child {
  animation: heroRight 1s .2s cubic-bezier(.22,1,.36,1) both;
}

@keyframes heroUp {
  from { opacity: 0; translate: 0 30px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes heroRight {
  from { opacity: 0; translate: 30px 0; scale: .93; }
  to   { opacity: 1; translate: 0 0;    scale: 1; }
}


/* ============================================================
   6. NAVBAR — тень при скролле (JS добавляет .scrolled)
   ============================================================ */
header.fixed-top {
  transition: box-shadow .3s ease;
}
header.fixed-top.scrolled {
  box-shadow: 0 4px 28px rgba(0,102,204,.18) !important;
}


/* ============================================================
   7. HOVER КАРТОЧЕК — transform НЕ конфликтует с .is-visible
   потому что .is-visible теперь меняет translate/scale,
   а hover меняет transform. Это разные CSS-свойства!
   ============================================================ */
.service-card {
  transition: transform .28s cubic-bezier(.34,1.56,.64,1),
              box-shadow .28s ease;
}
.service-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(255,102,0,.14), 0 4px 12px rgba(0,0,0,.07);
}

.step-card {
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
}
.step-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 32px rgba(0,102,204,.14);
}

.review-card {
  transition: transform .28s ease, box-shadow .28s ease;
}
.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,102,204,.12);
}

.advantage-card {
  transition: transform .25s ease, box-shadow .25s ease, border-left-color .25s ease;
}
.advantage-card:hover {
  transform: translateX(6px);
  box-shadow: 0 8px 24px rgba(0,102,204,.12);
  border-left-color: #ff6600 !important;
}

.contact-card {
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
}
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,102,204,.12);
}

/* Иконки bounce */
.service-card:hover .service-icon i,
.step-card:hover .step-icon i,
.contact-card:hover .contact-icon i {
  animation: iconBounce .5s cubic-bezier(.34,1.56,.64,1);
  display: inline-block;
}
@keyframes iconBounce {
  0%   { transform: scale(1)   rotate(0); }
  40%  { transform: scale(1.4) rotate(-10deg); }
  70%  { transform: scale(.9)  rotate(5deg); }
  100% { transform: scale(1)   rotate(0); }
}


/* ============================================================
   8. АККОРДЕОН
   ============================================================ */
.accordion-collapse.show {
  animation: accordionOpen .35s ease both;
}
@keyframes accordionOpen {
  from { opacity: 0; translate: 0 -8px; }
  to   { opacity: 1; translate: 0 0; }
}
.accordion-button:not(.collapsed) {
  padding-left: 1.6rem;
  transition: padding-left .25s ease;
  box-shadow: inset 0 -2px 0 rgba(0,102,204,.2) !important;
}


/* ============================================================
   9. МОДАЛКА
   ============================================================ */
.modal-overlay {
  opacity: 0;
  transition: opacity .25s ease;
}
.modal-overlay.show { opacity: 1; }
.modal-overlay .modal-box {
  scale: .9;
  translate: 0 20px;
  opacity: 0;
  transition: scale .3s cubic-bezier(.34,1.56,.64,1),
              translate .3s cubic-bezier(.34,1.56,.64,1),
              opacity .25s ease;
}
.modal-overlay.show .modal-box {
  scale: 1;
  translate: 0 0;
  opacity: 1;
}


/* ============================================================
   10. КАБИНЕТЫ — анимации при загрузке
   ============================================================ */
.topbar, .admin-topbar, .profile-topbar {
  animation: slideDown .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes slideDown {
  from { opacity:0; translate: 0 -20px; }
  to   { opacity:1; translate: 0 0; }
}

.sidebar, .admin-sidebar, .profile-sidebar {
  animation: slideInLeft .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes slideInLeft {
  from { opacity:0; translate: -24px 0; }
  to   { opacity:1; translate: 0 0; }
}

.admin-nav-item:nth-child(1),  .profile-nav-item:nth-child(1)   { animation: navIn .4s .12s ease both; }
.admin-nav-item:nth-child(2),  .profile-nav-item:nth-child(2)   { animation: navIn .4s .20s ease both; }
.admin-nav-item:nth-child(3),  .profile-nav-item:nth-child(3)   { animation: navIn .4s .28s ease both; }
.admin-nav-item:nth-child(4),  .profile-nav-item:nth-child(4)   { animation: navIn .4s .36s ease both; }
.admin-nav-item:nth-child(n+5),.profile-nav-item:nth-child(n+5) { animation: navIn .4s .44s ease both; }
@keyframes navIn {
  from { opacity:0; translate: -14px 0; }
  to   { opacity:1; translate: 0 0; }
}

.profile-stat-card:nth-child(1),.admin-stat-card:nth-child(1),.stat-card:nth-child(1) { animation: statIn .55s .10s cubic-bezier(.34,1.56,.64,1) both; }
.profile-stat-card:nth-child(2),.admin-stat-card:nth-child(2),.stat-card:nth-child(2) { animation: statIn .55s .18s cubic-bezier(.34,1.56,.64,1) both; }
.profile-stat-card:nth-child(3),.admin-stat-card:nth-child(3),.stat-card:nth-child(3) { animation: statIn .55s .26s cubic-bezier(.34,1.56,.64,1) both; }
.profile-stat-card:nth-child(4),.admin-stat-card:nth-child(4),.stat-card:nth-child(4) { animation: statIn .55s .34s cubic-bezier(.34,1.56,.64,1) both; }
.admin-stat-card:nth-child(5),  .stat-card:nth-child(5)                               { animation: statIn .55s .42s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes statIn {
  from { opacity:0; translate: 0 20px; scale: .92; }
  to   { opacity:1; translate: 0 0;    scale: 1; }
}

tbody tr:nth-child(1)   { animation: rowIn .35s .04s ease both; }
tbody tr:nth-child(2)   { animation: rowIn .35s .09s ease both; }
tbody tr:nth-child(3)   { animation: rowIn .35s .14s ease both; }
tbody tr:nth-child(4)   { animation: rowIn .35s .19s ease both; }
tbody tr:nth-child(5)   { animation: rowIn .35s .24s ease both; }
tbody tr:nth-child(n+6) { animation: rowIn .35s .28s ease both; }
@keyframes rowIn {
  from { opacity:0; translate: -10px 0; }
  to   { opacity:1; translate: 0 0; }
}

.profile-app-card:nth-child(1),  .admin-user-card:nth-child(1)   { animation: cardIn .5s .06s cubic-bezier(.22,1,.36,1) both; }
.profile-app-card:nth-child(2),  .admin-user-card:nth-child(2)   { animation: cardIn .5s .14s cubic-bezier(.22,1,.36,1) both; }
.profile-app-card:nth-child(3),  .admin-user-card:nth-child(3)   { animation: cardIn .5s .22s cubic-bezier(.22,1,.36,1) both; }
.profile-app-card:nth-child(4),  .admin-user-card:nth-child(4)   { animation: cardIn .5s .30s cubic-bezier(.22,1,.36,1) both; }
.profile-app-card:nth-child(n+5),.admin-user-card:nth-child(n+5) { animation: cardIn .5s .36s cubic-bezier(.22,1,.36,1) both; }
@keyframes cardIn {
  from { opacity:0; translate: 0 18px; scale: .96; }
  to   { opacity:1; translate: 0 0;    scale: 1; }
}

/* Badge пульс */
.nav-badge, .admin-nav-badge {
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { scale: 1; }
  50%     { scale: 1.22; }
}

/* Logout shake */
.btn-logout:hover, .admin-btn-logout:hover {
  animation: logoutShake .4s ease;
}
@keyframes logoutShake {
  0%,100% { translate: 0; }
  20%     { translate: -5px 0; }
  40%     { translate: 5px 0; }
  60%     { translate: -3px 0; }
  80%     { translate: 2px 0; }
}

/* Sidebar icon wiggle */
.admin-nav-item:hover i, .profile-nav-item:hover i {
  animation: iconWiggle .4s ease;
  display: inline-block;
}
@keyframes iconWiggle {
  0%   { rotate: 0deg; }
  25%  { rotate: -12deg; }
  75%  { rotate: 10deg; }
  100% { rotate: 0deg; }
}


/* ============================================================
   11. NAVBAR — увеличенные ссылки
   ============================================================ */
.navbar-nav .nav-link {
  font-size: 1rem !important;
  font-weight: 600 !important;
}
.navbar-nav .nav-link i {
  font-size: 1.1rem !important;
}


/* ============================================================
   12. PREFERS REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .anim-up, .anim-left, .anim-right, .anim-scale {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
  }
}


/* ============================================================
   13. КНОПКА "НАВЕРХ"
   ============================================================ */
#scrollTopBtn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ff6600, #ff9900);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 990;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(255,102,0,.45);
  /* скрыта по умолчанию */
  opacity: 0;
  translate: 0 20px;
  scale: 0.8;
  pointer-events: none;
  transition: opacity .3s ease,
              translate .35s cubic-bezier(.34,1.56,.64,1),
              scale .35s cubic-bezier(.34,1.56,.64,1),
              background .2s ease,
              box-shadow .2s ease;
}

#scrollTopBtn.visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  pointer-events: auto;
}

#scrollTopBtn:hover {
  background: linear-gradient(135deg, #e05500, #ff6600);
  box-shadow: 0 8px 24px rgba(255,102,0,.6);
  translate: 0 -4px;
  scale: 1.1;
}