/*
  ABS Website Motion System
  Reusable, premium animations for enterprise UI interactions.
*/

/* 1. Core Keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translate3d(0, -16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translate3d(-24px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale3d(0.97, 0.97, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes scaleDown {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  to {
    opacity: 0.95;
    transform: scale3d(0.985, 0.985, 1);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -6px, 0);
  }
}

@keyframes pulseSoft {
  0%,
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0.96;
    transform: scale3d(1.01, 1.01, 1);
  }
}

@keyframes rotateSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 2. Reusable Animation Classes */
.animate-fade {
  animation: fadeIn 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.animate-fade-up {
  animation: fadeUp 450ms cubic-bezier(0.22, 0.9, 0.24, 1) both;
}

.animate-fade-down {
  animation: fadeDown 450ms cubic-bezier(0.22, 0.9, 0.24, 1) both;
}

.animate-slide-left {
  animation: slideLeft 520ms cubic-bezier(0.22, 0.9, 0.24, 1) both;
}

.animate-slide-right {
  animation: slideRight 520ms cubic-bezier(0.22, 0.9, 0.24, 1) both;
}

.animate-scale {
  animation: scaleIn 440ms cubic-bezier(0.22, 0.9, 0.24, 1) both;
}

.animate-float {
  animation: float 5.2s ease-in-out infinite;
}

.animate-pulse {
  animation: pulseSoft 3.2s ease-in-out infinite;
}

.animate-rotate {
  animation: rotateSlow 20s linear infinite;
}

/* 3. Hero Product Card Animation */
.hero-product-card {
  animation: float 6.2s ease-in-out infinite;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.hero-product-card--top {
  animation-duration: 6s;
  animation-direction: normal;
}

.hero-product-card--bottom {
  animation-duration: 7.2s;
  animation-direction: reverse;
}

/* 4. Hover Animations */
button,
a[role="button"],
.btn,
.header-cta,
.hero-cta,
.hero-link,
.solution-card,
.benefit-card,
.process-list li,
.client-logos img,
.hero-product-card,
.site-nav__link {
  transition: transform 240ms cubic-bezier(0.22, 0.9, 0.24, 1), box-shadow 240ms cubic-bezier(0.22, 0.9, 0.24, 1), border-color 240ms cubic-bezier(0.22, 0.9, 0.24, 1), color 240ms cubic-bezier(0.22, 0.9, 0.24, 1), filter 240ms cubic-bezier(0.22, 0.9, 0.24, 1);
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, box-shadow, filter;
}

button:hover,
a[role="button"]:hover,
.btn:hover,
.header-cta:hover,
.hero-cta:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 12px 24px rgba(15, 42, 74, 0.14);
}

.hero-stat:hover,
.solution-card:hover,
.industry-card:hover,
.benefit-card:hover,
.process-list li:hover,
.client-logos img:hover,
.site-footer > div:hover {
  transform: translate3d(0, -4px, 0);
}

.hero-link:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 8px 18px rgba(15, 42, 74, 0.08);
}

.solution-card:hover,
.industry-card:hover,
.benefit-card:hover,
.process-list li:hover {
  transform: translate3d(0, -5px, 0);
  box-shadow: 0 14px 30px rgba(15, 42, 74, 0.14);
  border-color: var(--color-secondary);
}

.client-logos img:hover {
  transform: scale3d(1.025, 1.025, 1);
  filter: grayscale(0%);
  box-shadow: 0 10px 22px rgba(15, 42, 74, 0.12);
}

.site-nav__link {
  position: relative;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-secondary);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 240ms cubic-bezier(0.22, 0.9, 0.24, 1);
  will-change: transform;
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
  transform: translateX(-50%) scaleX(1);
}

/* 5. Scroll Reveal Utilities */
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  will-change: opacity, transform;
}

.hero-stats .hero-stat,
.trust-list li,
.solution-card,
.benefit-card,
.process-list li,
.client-logos img,
.cta-section,
.site-footer > div {
  animation: fadeUp 520ms cubic-bezier(0.22, 0.9, 0.24, 1) both;
}

.reveal-up {
  transform: translate3d(0, 12px, 0);
}

.reveal-left {
  transform: translate3d(16px, 0, 0);
}

.reveal-right {
  transform: translate3d(-16px, 0, 0);
}

.reveal-scale {
  transform: scale3d(0.985, 0.985, 1);
}

.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  transition: opacity 520ms cubic-bezier(0.22, 0.9, 0.24, 1), transform 520ms cubic-bezier(0.22, 0.9, 0.24, 1);
}

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* 6. Stagger and Delay Utilities */
.stagger-1 {
  transition-delay: 80ms;
}

.stagger-2 {
  transition-delay: 160ms;
}

.stagger-3 {
  transition-delay: 240ms;
}

.stagger-4 {
  transition-delay: 320ms;
}

.stagger-5 {
  transition-delay: 400ms;
}

.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

.delay-400 {
  animation-delay: 400ms;
}

.delay-500 {
  animation-delay: 500ms;
}

/* 7. Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-fade,
  .animate-fade-up,
  .animate-fade-down,
  .animate-slide-left,
  .animate-slide-right,
  .animate-scale,
  .animate-float,
  .animate-pulse,
  .animate-rotate,
  .hero-product-card {
    animation: none !important;
  }

  .animate-float,
  .animate-pulse,
  .animate-rotate {
    animation-play-state: paused !important;
  }

  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}