/**
 * =============================================================================
 * GLOBAL: Scroll Reveal Animations + Transitions
 * =============================================================================
 * Lightweight, GPU-accelerated animations triggered by IntersectionObserver.
 * Add [data-animate] to any element. JS adds .is-visible when in viewport.
 *
 * Variants (via data-animate value):
 *   fade-up     — opacity 0→1, translateY 30px→0
 *   fade-in     — opacity 0→1
 *   fade-left   — opacity 0→1, translateX -30px→0
 *   fade-right  — opacity 0→1, translateX 30px→0
 *   scale-in    — opacity 0→1, scale 0.95→1
 *
 * Stagger: add [data-stagger] to a parent. Direct children animate
 * sequentially with 80ms delay per child.
 *
 * Reduced motion: all animations are disabled when prefers-reduced-motion.
 * =============================================================================
 */

/* =========================================================================
 * BASE — hidden state (before IntersectionObserver triggers)
 * ========================================================================= */
[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================================
 * VARIANTS — initial transform per type
 * ========================================================================= */
[data-animate="fade-up"] {
  transform: translateY(30px);
}

[data-animate="fade-in"] {
  transform: none;
}

[data-animate="fade-left"] {
  transform: translateX(-30px);
}

[data-animate="fade-right"] {
  transform: translateX(30px);
}

[data-animate="scale-in"] {
  transform: scale(0.95);
}

/* =========================================================================
 * VISIBLE STATE — applied by JS when element enters viewport
 * ========================================================================= */
[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================================
 * STAGGER — sequential delay on direct children
 * ========================================================================= */
[data-stagger] > [data-animate] {
  transition-delay: calc(var(--stagger-index, 0) * 80ms);
}

/* =========================================================================
 * HEADER SCROLL — shrink on scroll
 * ========================================================================= */
.site-header {
  transition:
    padding var(--transition-base),
    background var(--transition-base),
    box-shadow var(--transition-base);
}

.site-header.is-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* =========================================================================
 * SMOOTH SCROLL for anchor links
 * ========================================================================= */
html {
  scroll-behavior: smooth;
}

/* Offset for sticky header */
:target {
  scroll-margin-top: 100px;
}

/* =========================================================================
 * REDUCED MOTION — respect user preference
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  [data-stagger] > [data-animate] {
    transition-delay: 0s;
  }

  html {
    scroll-behavior: auto;
  }

  .site-header {
    transition: none;
  }
}