/* ==========================================================================
   Animation Utilities
   Prepared helpers only. Apply these classes when motion is needed.
   ========================================================================== */

:root {
  --animation-distance-sm: 12px;
  --animation-distance-md: 24px;
  --animation-duration-fast: 360ms;
  --animation-duration-base: 600ms;
  --animation-duration-slow: 900ms;
  --animation-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-ready {
  animation-fill-mode: both;
  animation-duration: var(--animation-duration-base);
  animation-timing-function: var(--animation-ease-out);
}

.animate-fast {
  animation-duration: var(--animation-duration-fast);
}

.animate-slow {
  animation-duration: var(--animation-duration-slow);
}

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

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

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

.fade-in {
  animation-name: fade-in;
}

.fade-up {
  animation-name: fade-up;
}

.fade-down {
  animation-name: fade-down;
}

.scale-in {
  animation-name: scale-in;
}

.hero-badge,
.hero-title,
.hero-description,
.hero-trust-list {
  animation: hero-fade-up var(--animation-duration-base) var(--animation-ease-out) both;
}

.hero-title {
  animation-delay: 80ms;
}

.hero-description {
  animation-delay: 150ms;
}

.hero-actions {
  animation: hero-fade-up var(--animation-duration-base) var(--animation-ease-out) 240ms both;
}

.hero-trust-list {
  animation-delay: 320ms;
}

.infinity-logo-placeholder {
  animation: hero-logo-in 900ms var(--animation-ease-out) 220ms both;
}

.infinity-mark {
  animation-name: hero-logo-float, hero-logo-glow;
  animation-duration: 6.5s, 5.8s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-delay: 1.1s, 1.2s;
  animation-iteration-count: infinite, infinite;
}

.infinity-label {
  animation: hero-logo-label-float 6.5s ease-in-out 1.1s infinite;
}

.why-caj-header,
.why-caj-card,
.process-header,
.process-step,
.technologies-header,
.technology-category {
  opacity: 1;
  transform: translateY(0);
}

@supports (animation-timeline: view()) {
  .why-caj-header,
  .why-caj-card,
  .process-header,
  .process-step,
  .technologies-header,
  .technology-category {
    animation: section-fade-up 700ms var(--animation-ease-out) both;
    animation-timeline: view();
    animation-range: entry 12% cover 34%;
  }

  .why-caj-card:nth-child(2) {
    animation-range: entry 16% cover 38%;
  }

  .why-caj-card:nth-child(3) {
    animation-range: entry 20% cover 42%;
  }

  .why-caj-card:nth-child(4) {
    animation-range: entry 24% cover 46%;
  }

  .process-step:nth-child(2) {
    animation-range: entry 16% cover 38%;
  }

  .process-step:nth-child(3) {
    animation-range: entry 20% cover 42%;
  }

  .process-step:nth-child(4) {
    animation-range: entry 24% cover 46%;
  }

  .process-step:nth-child(5) {
    animation-range: entry 28% cover 50%;
  }

  .technology-category:nth-child(2) {
    animation-range: entry 16% cover 38%;
  }

  .technology-category:nth-child(3) {
    animation-range: entry 20% cover 42%;
  }

  .technology-category:nth-child(4) {
    animation-range: entry 24% cover 46%;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--animation-distance-md));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(calc(var(--animation-distance-sm) * -1));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes section-fade-up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-logo-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes hero-logo-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes hero-logo-label-float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

@keyframes hero-logo-glow {
  0%,
  100% {
    filter: drop-shadow(0 18px 44px rgba(0, 123, 255, 0.1));
  }

  50% {
    filter: drop-shadow(0 26px 64px rgba(0, 194, 255, 0.18));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}