/*
 * animations.css — Net Con shared animation utilities
 *
 * Import on every page:
 *   <link rel="stylesheet" href="css/animations.css">
 *
 * Zero per-page configuration needed.
 * Add classes to any element and animations.js handles the rest.
 *
 * Available classes:
 *   .animate-fade-up    — fade in + slide up on scroll
 *   .animate-fade-in    — fade in on scroll
 *   .stagger-children   — staggers direct children 0.1s apart
 *   .hover-lift         — card hover: translateY(-4px) + shadow
 *   .hover-btn          — button hover: scale(1.02) + darken
 *   .hover-arrow        — arrow link: arrow slides right 4px
 */

/* ============================================================
   REDUCED MOTION — disable everything for accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-fade-up,
  .animate-fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS — initial hidden states
   ============================================================ */
.animate-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-fade-in {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

/* ============================================================
   VISIBLE STATE — added by IntersectionObserver in animations.js
   ============================================================ */
.animate-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-fade-in.is-visible {
  opacity: 1;
}

/* ============================================================
   STAGGER CHILDREN
   Wrap a row of cards with .stagger-children and each direct
   child gets a 0.1s longer delay than the previous.
   Works with both .animate-fade-up and .animate-fade-in.
   ============================================================ */
.stagger-children > *:nth-child(1)  { transition-delay: 0.00s; }
.stagger-children > *:nth-child(2)  { transition-delay: 0.10s; }
.stagger-children > *:nth-child(3)  { transition-delay: 0.20s; }
.stagger-children > *:nth-child(4)  { transition-delay: 0.30s; }
.stagger-children > *:nth-child(5)  { transition-delay: 0.40s; }
.stagger-children > *:nth-child(6)  { transition-delay: 0.50s; }
.stagger-children > *:nth-child(7)  { transition-delay: 0.60s; }
.stagger-children > *:nth-child(8)  { transition-delay: 0.70s; }
.stagger-children > *:nth-child(9)  { transition-delay: 0.80s; }
.stagger-children > *:nth-child(10) { transition-delay: 0.90s; }
.stagger-children > *:nth-child(11) { transition-delay: 1.00s; }
.stagger-children > *:nth-child(12) { transition-delay: 1.10s; }

/* ============================================================
   HOVER UTILITIES
   ============================================================ */

/* Card lift — add to any card element */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

/* Combined: elements that are both animated AND hoverable */
.hover-lift.animate-fade-up,
.hover-lift.animate-fade-in {
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out,
    box-shadow 0.2s ease;
}
.hover-lift.animate-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hover-lift.animate-fade-up.is-visible:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

/* Button hover — add to any button or CTA */
.hover-btn {
  transition: background 0.2s ease, transform 0.2s ease, filter 0.2s ease !important;
}
.hover-btn:hover {
  transform: scale(1.02) !important;
  filter: brightness(0.92);
}

/* Arrow link hover — add to any link that has an arrow */
.hover-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}
.hover-arrow .arrow-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}
.hover-arrow:hover .arrow-icon {
  transform: translateX(4px);
}

/* ============================================================
   NAV LINK UNDERLINE ANIMATION
   Apply .nav-link-anim to nav <a> or <span> elements.
   The active state is handled via .active class.
   ============================================================ */
.nav-link-anim {
  position: relative;
}
.nav-link-anim::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.2s ease;
}
.nav-link-anim:hover::after,
.nav-link-anim.active::after {
  width: 100%;
}