/* ============================================================
   HANDWERK DIGITAL — animations.css
   Intersection Observer triggered; staggered delays via data-delay
   ============================================================ */

/* ---------- Stagger delays --------------------------------- */
.stagger-1 { transition-delay: 0ms !important; }
.stagger-2 { transition-delay: 100ms !important; }
.stagger-3 { transition-delay: 200ms !important; }
.stagger-4 { transition-delay: 300ms !important; }
.stagger-5 { transition-delay: 400ms !important; }
.stagger-6 { transition-delay: 500ms !important; }
.stagger-7 { transition-delay: 600ms !important; }
.stagger-8 { transition-delay: 700ms !important; }

/* ---------- Hero entrance ---------------------------------- */
.hero-eyebrow  { transition-delay:   0ms; }
.hero-headline { transition-delay: 100ms; }
.hero-lead     { transition-delay: 200ms; }
.hero-actions  { transition-delay: 300ms; }
.hero-trust    { transition-delay: 380ms; }
.hero-image    { transition-delay: 420ms; }

/* ---------- Slide in from left / right --------------------- */
.slide-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .65s ease, transform .65s ease;
}
.slide-left.visible { opacity: 1; transform: translateX(0); }

.slide-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity .65s ease, transform .65s ease;
}
.slide-right.visible { opacity: 1; transform: translateX(0); }

/* ---------- Scale in --------------------------------------- */
.scale-in {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .55s ease, transform .55s cubic-bezier(.34,1.4,.64,1);
}
.scale-in.visible { opacity: 1; transform: scale(1); }

/* ---------- Navbar shrink ---------------------------------- */
.navbar {
  transition: height 250ms ease, border-color 250ms ease,
              box-shadow 250ms ease, backdrop-filter 250ms ease;
}

/* ---------- Pricing card hover ----------------------------- */
.pricing-card {
  will-change: transform, box-shadow;
}

/* ---------- Process step connector animation --------------- */
@keyframes line-grow {
  from { width: 0; }
  to   { width: 100%; }
}

/* ---------- Stat counter ----------------------------------- */
@keyframes count-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stat-value {
  animation: count-up .5s ease forwards;
  animation-play-state: paused;
}
.stat-value.animate { animation-play-state: running; }

/* ---------- Pulse ring (CTA badge) ------------------------- */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(26,111,212,.35); }
  70%  { box-shadow: 0 0 0 14px rgba(26,111,212,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,111,212,0); }
}

/* ---------- Skeleton shimmer ------------------------------- */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f2f5 25%, #e8eaed 50%, #f0f2f5 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 4px;
}

/* ---------- Reduced-motion override ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .slide-left, .slide-right, .scale-in, .fade-up, .fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .stagger-1, .stagger-2, .stagger-3, .stagger-4,
  .stagger-5, .stagger-6, .stagger-7, .stagger-8 {
    transition-delay: 0ms !important;
  }
}