/* ==========================================================================
   Curated animation set — same restraint as the rest of the WebSolutionsDZ
   demo sites: hero reveal, scroll reveals, sticky-nav shrink (style.css),
   a light tilt on the 4-phase cards, and a back-to-top fade. Nothing more.
   ========================================================================== */

.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
  transition-delay:var(--delay, 0ms);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

.hero .reveal{ animation:heroRise .7s ease forwards; opacity:0; }
.hero .reveal:nth-child(1){ animation-delay:.05s; }
.hero .reveal:nth-child(2){ animation-delay:.15s; }
.hero .reveal:nth-child(3){ animation-delay:.25s; }
.hero .reveal:nth-child(4){ animation-delay:.35s; }
@keyframes heroRise{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:translateY(0); }
}

.tilt{ transform:perspective(800px) rotateX(0deg) rotateY(0deg); }

.lightbox{ animation:fadeIn .2s ease; }
.lightbox img{ animation:zoomIn .25s ease; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes zoomIn{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:scale(1); } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .hero .reveal{ animation:none !important; opacity:1 !important; transform:none !important; transition:none !important; }
  .tilt{ transition:none !important; }
  .gallery-item img{ transition:none !important; }
}