/* css/animate.css — Scroll-triggered entrance animations (varied) */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-left {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-right {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes rotate-in {
  from { opacity: 0; transform: rotate(-6deg) translateY(20px); }
  to   { opacity: 1; transform: rotate(0) translateY(0); }
}

@keyframes blur-in {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}

@keyframes flip-in {
  from { opacity: 0; transform: perspective(600px) rotateX(-20deg); }
  to   { opacity: 1; transform: perspective(600px) rotateX(0); }
}

@keyframes bounce-up {
  0%   { opacity: 0; transform: translateY(40px); }
  60%  { opacity: 1; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Elements start invisible until observed */
.anim-fade,
.anim-up,
.anim-left,
.anim-right,
.anim-scale,
.anim-rotate,
.anim-blur,
.anim-flip,
.anim-bounce {
  opacity: 0;
}

/* Triggered states */
.anim-fade.is-visible  { animation: fade-in 0.7s ease-out forwards; }
.anim-up.is-visible    { animation: slide-up 0.7s ease-out forwards; }
.anim-left.is-visible  { animation: slide-left 0.7s ease-out forwards; }
.anim-right.is-visible { animation: slide-right 0.7s ease-out forwards; }
.anim-scale.is-visible { animation: scale-in 0.7s ease-out forwards; }
.anim-rotate.is-visible { animation: rotate-in 0.8s ease-out forwards; }
.anim-blur.is-visible  { animation: blur-in 0.8s ease-out forwards; }
.anim-flip.is-visible  { animation: flip-in 0.8s ease-out forwards; }
.anim-bounce.is-visible { animation: bounce-up 0.9s ease-out forwards; }

/* Stagger delays for children inside grids */
.anim-stagger > :nth-child(1) { animation-delay: 0s; }
.anim-stagger > :nth-child(2) { animation-delay: 0.1s; }
.anim-stagger > :nth-child(3) { animation-delay: 0.2s; }
.anim-stagger > :nth-child(4) { animation-delay: 0.3s; }
.anim-stagger > :nth-child(5) { animation-delay: 0.4s; }
.anim-stagger > :nth-child(6) { animation-delay: 0.5s; }

/* Staggered children also start invisible */
.anim-stagger > * { opacity: 0; }

.anim-stagger.is-visible > * {
  animation: slide-up 0.6s ease-out forwards;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .anim-fade, .anim-up, .anim-left, .anim-right,
  .anim-scale, .anim-rotate, .anim-blur, .anim-flip,
  .anim-bounce, .anim-stagger > * {
    opacity: 1;
    animation: none;
  }
}