/* ==========================================================================
   SINFMEDIA — Animation system
   One consistent scroll-reveal pattern (fade + 16px rise) driven by
   IntersectionObserver in js/main.js, plus the hover micro-interactions
   already defined alongside their components in global.css.
   Kept deliberately restrained: no parallax, no looping motion.
   ========================================================================== */

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.6s cubic-bezier(.2,.7,.3,1), transform 0.6s cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* Stagger children of a revealed grid slightly for a single orchestrated feel */
.reveal-group.in-view > *{
  transition-delay:calc(var(--i, 0) * 70ms);
}

/* Hero entrance: runs once on load, not on scroll */
.hero-in{
  opacity:0;
  transform:translateY(14px);
  animation:hero-rise 0.7s cubic-bezier(.2,.7,.3,1) forwards;
}
.hero-in:nth-child(2){animation-delay:0.08s;}
.hero-in:nth-child(3){animation-delay:0.16s;}
.hero-in:nth-child(4){animation-delay:0.24s;}

@keyframes hero-rise{
  to{opacity:1; transform:translateY(0);}
}

/* Mobile menu open/close */
.nav-links{
  transition:max-height 0.3s ease;
}

/* Respect reduced motion: disable non-essential movement entirely */
@media (prefers-reduced-motion: reduce){
  .reveal, .hero-in{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
  }
  .service-card, .blog-card{
    transition:none !important;
  }
  html{scroll-behavior:auto;}
}