/* ==========================================================================
   Dach Flex - Animations
   Scroll reveal, staggered children, and keyframe animations
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scroll Reveal Base
   -------------------------------------------------------------------------- */

.df-animate {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

.df-animate.df-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --------------------------------------------------------------------------
   2. Direction Variants
   -------------------------------------------------------------------------- */

.df-animate--left {
  opacity: 0;
  transform: translateX(-30px);
}

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

.df-animate--right {
  opacity: 0;
  transform: translateX(30px);
}

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

.df-animate--scale {
  opacity: 0;
  transform: scale(0.95);
}

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

/* --------------------------------------------------------------------------
   3. Staggered Children Animation
   -------------------------------------------------------------------------- */

.df-animate-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.df-animate-children.df-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for up to 14 children */
.df-animate-children.df-visible > *:nth-child(1)  { transition-delay: 0.05s; }
.df-animate-children.df-visible > *:nth-child(2)  { transition-delay: 0.10s; }
.df-animate-children.df-visible > *:nth-child(3)  { transition-delay: 0.15s; }
.df-animate-children.df-visible > *:nth-child(4)  { transition-delay: 0.20s; }
.df-animate-children.df-visible > *:nth-child(5)  { transition-delay: 0.25s; }
.df-animate-children.df-visible > *:nth-child(6)  { transition-delay: 0.30s; }
.df-animate-children.df-visible > *:nth-child(7)  { transition-delay: 0.35s; }
.df-animate-children.df-visible > *:nth-child(8)  { transition-delay: 0.40s; }
.df-animate-children.df-visible > *:nth-child(9)  { transition-delay: 0.45s; }
.df-animate-children.df-visible > *:nth-child(10) { transition-delay: 0.50s; }
.df-animate-children.df-visible > *:nth-child(11) { transition-delay: 0.55s; }
.df-animate-children.df-visible > *:nth-child(12) { transition-delay: 0.60s; }
.df-animate-children.df-visible > *:nth-child(13) { transition-delay: 0.65s; }
.df-animate-children.df-visible > *:nth-child(14) { transition-delay: 0.70s; }

/* --------------------------------------------------------------------------
   4. Keyframe Animations
   -------------------------------------------------------------------------- */

/* Ping animation for live indicator dots */
@keyframes df-ping {
  0% {
    transform: scale(1);
    opacity: 0.75;
  }
  75%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Subtle float animation for decorative elements */
@keyframes df-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Pulse glow for CTA buttons */
@keyframes df-pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(217, 175, 32, 0.3);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(217, 175, 32, 0);
  }
}

/* Counter number tick animation */
@keyframes df-count-tick {
  0% {
    transform: translateY(4px);
    opacity: 0.6;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Shimmer effect for loading states */
@keyframes df-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Spin for loading indicators */
@keyframes df-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   5. Utility Animation Classes
   -------------------------------------------------------------------------- */

.df-float {
  animation: df-float 4s ease-in-out infinite;
}

.df-pulse-glow {
  animation: df-pulse-glow 2s ease-in-out infinite;
}

.df-shimmer {
  background: linear-gradient(
    90deg,
    var(--df-muted) 25%,
    var(--df-border) 50%,
    var(--df-muted) 75%
  );
  background-size: 200% 100%;
  animation: df-shimmer 1.5s ease-in-out infinite;
}

.df-spin {
  animation: df-spin 1s linear infinite;
}

/* --------------------------------------------------------------------------
   6. Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .df-animate,
  .df-animate--left,
  .df-animate--right,
  .df-animate--scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .df-animate-children > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .df-float,
  .df-pulse-glow,
  .df-shimmer,
  .df-spin {
    animation: none;
  }

  .df-live-dot::before {
    animation: none;
  }
}