/*--------------------------------------------------------------
DTM Technologies — Animation Keyframes
Prompt 1.3 deliverable: css/animations.css
Classes are toggled by js/main.js (scroll-reveal) and used inline
by components (pulseGlow on CTAs, skeletonShimmer on loaders).
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Scroll-reveal base state + triggered variants
# main.js adds the matching class, then adds .is-visible on
# IntersectionObserver entry to play the animation.
--------------------------------------------------------------*/
[data-animate] {
  opacity: 0;
  transition: opacity 0.7s var(--ease-standard), transform 0.7s var(--ease-standard);
}

[data-animate].is-visible {
  opacity: 1;
  transform: none !important;
}

[data-animate="fade-in-up"] { transform: translateY(32px); }
[data-animate="fade-in-left"] { transform: translateX(-32px); }
[data-animate="fade-in-right"] { transform: translateX(32px); }

/* Staggered children — main.js reads [data-stagger] on a parent and
   applies incremental transition-delay to each [data-animate] child */

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

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

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

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

.animate-fadeInUp { animation: fadeInUp 0.7s var(--ease-standard) both; }
.animate-fadeInLeft { animation: fadeInLeft 0.7s var(--ease-standard) both; }
.animate-fadeInRight { animation: fadeInRight 0.7s var(--ease-standard) both; }
.animate-slideDown { animation: slideDown 0.4s var(--ease-standard) both; }

/*--------------------------------------------------------------
# Pulse glow — used on sticky/floating CTA buttons
--------------------------------------------------------------*/
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.45); }
  50%      { box-shadow: 0 0 0 12px rgba(0, 212, 170, 0); }
}

.animate-pulseGlow {
  animation: pulseGlow 2.2s ease-out infinite;
}

/*--------------------------------------------------------------
# Skeleton shimmer — loading placeholders
--------------------------------------------------------------*/
@keyframes skeletonShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 0%,
    var(--color-surface-border) 50%,
    var(--color-surface) 100%
  );
  background-size: 800px 100%;
  animation: skeletonShimmer 1.6s linear infinite;
  border-radius: var(--radius-sm);
  color: transparent !important;
  pointer-events: none;
}

.skeleton * { visibility: hidden; }

/*--------------------------------------------------------------
# Reduced motion — respect user preference
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .animate-fadeInUp,
  .animate-fadeInLeft,
  .animate-fadeInRight,
  .animate-slideDown,
  .animate-pulseGlow,
  .skeleton,
  .hero__bg {
    animation: none !important;
  }
}