/* ============================================
   NP-Law - Animations
   Scroll reveals, hover effects, particles
   ============================================ */

/* --- Smooth Scrolling --- */
html {
  scroll-behavior: smooth;
}

/* --- AOS-like Scroll Reveal Animations --- */

/* Base: hidden state before animation */
[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animated state (added by JS IntersectionObserver) */
[data-aos].aos-animate {
  opacity: 1;
  transform: none;
}

/* Fade Up */
[data-aos="fade-up"] {
  transform: translateY(30px);
}

/* Fade Down */
[data-aos="fade-down"] {
  transform: translateY(-30px);
}

/* Fade Left */
[data-aos="fade-left"] {
  transform: translateX(30px);
}

/* Fade Right */
[data-aos="fade-right"] {
  transform: translateX(-30px);
}

/* Zoom In */
[data-aos="zoom-in"] {
  transform: scale(0.9);
}

/* Zoom Out */
[data-aos="zoom-out"] {
  transform: scale(1.1);
}

/* Flip Up */
[data-aos="flip-up"] {
  transform: perspective(600px) rotateX(15deg);
}

/* --- Delay Support via data-aos-delay --- */
[data-aos][data-aos-delay="100"] { transition-delay: 100ms; }
[data-aos][data-aos-delay="200"] { transition-delay: 200ms; }
[data-aos][data-aos-delay="300"] { transition-delay: 300ms; }
[data-aos][data-aos-delay="400"] { transition-delay: 400ms; }
[data-aos][data-aos-delay="500"] { transition-delay: 500ms; }
[data-aos][data-aos-delay="600"] { transition-delay: 600ms; }
[data-aos][data-aos-delay="700"] { transition-delay: 700ms; }
[data-aos][data-aos-delay="800"] { transition-delay: 800ms; }

/* Custom delay applied by JS */
[data-aos].aos-animate[data-aos-delay="100"] { transition-delay: 100ms; }
[data-aos].aos-animate[data-aos-delay="200"] { transition-delay: 200ms; }
[data-aos].aos-animate[data-aos-delay="300"] { transition-delay: 300ms; }
[data-aos].aos-animate[data-aos-delay="400"] { transition-delay: 400ms; }
[data-aos].aos-animate[data-aos-delay="500"] { transition-delay: 500ms; }

/* --- Card Hover Effects --- */

/* Lift shadow on hover (practice cards) */
.card-practice {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.card-practice:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

/* Team card 3D flip — handled in components.css
   Additional smoothing here */
.card-team__inner {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Blog card hover lift */
.card-blog {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.card-blog:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* --- Button Hover Transitions --- */
.btn {
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-fast);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* --- Hero Particle Canvas --- */
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Counter Animation Styles --- */
.stat-item__number[data-count] {
  display: inline-block;
}

/* --- Header scroll transition --- */
.sticky-header-wrap {
  transition: box-shadow var(--transition-base);
}

.sticky-header-wrap.is-scrolled {
  box-shadow: var(--shadow-lg);
}

/* --- Nav link underline animation --- */
.primary-nav__link::after {
  transition: width var(--transition-base);
}

/* --- Footer link hover --- */
.site-footer a {
  transition: color var(--transition-fast);
}

/* --- Focus ring animation --- */
a:focus-visible,
button:focus-visible {
  transition: outline-offset var(--transition-fast);
}

/* --- Loading / Page transition --- */
.site-main {
  animation: fadeInContent 0.4s ease-out;
}

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

/* --- Prefers Reduced Motion ---
   Disables ALL animations and transitions for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Ensure AOS elements are visible without animation */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Disable card hover transforms */
  .card-practice:hover,
  .card-blog:hover,
  .btn:hover {
    transform: none !important;
  }

  /* Disable team card flip */
  .card-team:hover .card-team__inner {
    transform: none !important;
  }

  /* Show back content on focus instead */
  .card-team:focus-within .card-team__back {
    visibility: visible;
    position: static;
    transform: none;
    backface-visibility: visible;
  }

  /* Disable particle canvas */
  .hero__canvas,
  .hero__particles {
    display: none !important;
  }

  /* Disable page transition */
  .site-main {
    animation: none !important;
  }
}