/* subtle reveal animations for sections (respects prefers-reduced-motion) */
.section-animate {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.2s cubic-bezier(.2,.9,.2,1), transform 1.2s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}

.section-animate.anim-fade-up    { transform: translateY(18px); }
.section-animate.anim-fade-left  { transform: translateX(-14px); }
.section-animate.anim-fade-right { transform: translateX(14px); }

.section-animate.anim-fade-scale { 
  opacity: 0;
  transform: scale(.94) translateY(8px); 
}

.section-animate.anim-slide-up { 
  opacity: 0;
  transform: translateY(32px); 
}

.section-animate.anim-zoom-in { 
  opacity: 0;
  transform: scale(.88); 
}

.section-animate.anim-rotate-in { 
  opacity: 0;
  transform: rotate(-3deg) translateY(12px); 
}

.section-animate.anim-clip-reveal {
  transform: none;
  opacity: 1; /* clip handles visibility */
}

.section-animate.anim-clip-reveal > * {
  clip-path: inset(0 0 100% 0);
  transform: translateY(8px);
  transition: clip-path 1.2s cubic-bezier(.2,.9,.2,1), transform 1.2s cubic-bezier(.2,.9,.2,1);
}

.section-animate.anim-clip-reveal.in-view > * {
  clip-path: inset(0 0 0% 0);
  transform: none;
}

/* bounce effect */
.section-animate.anim-bounce {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.1s cubic-bezier(.68,-.55,.265,1.55), transform 1.1s cubic-bezier(.68,-.55,.265,1.55);
}

/* staggered fade */
.section-animate.anim-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s ease, transform 1s ease;
}

.section-animate.anim-stagger.in-view > * {
  opacity: 1;
  transform: none;
}

/* apply stagger delays */
.section-animate.anim-stagger.in-view > *:nth-child(1) { transition-delay: 0s; }
.section-animate.anim-stagger.in-view > *:nth-child(2) { transition-delay: 0.1s; }
.section-animate.anim-stagger.in-view > *:nth-child(3) { transition-delay: 0.2s; }
.section-animate.anim-stagger.in-view > *:nth-child(4) { transition-delay: 0.3s; }
.section-animate.anim-stagger.in-view > *:nth-child(5) { transition-delay: 0.4s; }

/* all effects use the same .in-view final state (except clip-reveal which handles it separately) */
.section-animate.anim-fade-scale.in-view,
.section-animate.anim-fade-left.in-view,
.section-animate.anim-fade-right.in-view,
.section-animate.anim-slide-up.in-view,
.section-animate.anim-zoom-in.in-view,
.section-animate.anim-rotate-in.in-view,
.section-animate.anim-bounce.in-view {
  opacity: 1;
  transform: none;
}

/* visible state */
.section-animate.in-view {
  opacity: 1;
  transform: none;
}

/* staggered children (if you need) */
.section-animate.in-view [data-animate-child] {
  opacity: 1;
  transform: none;
  transition-delay: var(--animate-delay, 0.4s);
}

/* respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .section-animate,
  .section-animate * {
    transition: none;
    transform: none;
    opacity: 1;
  }
}