/* ===========================================================================
 * FLYSTACK Tech — animații de intrare
 *
 * În Next, intrările erau făcute cu framer-motion (`motion/react`):
 * un container cu stagger 0.12s și copii care urcă 28px cu opacitate 0 → 1,
 * pe 0.8s, cu ease [0.2, 0.8, 0.2, 1].
 *
 * Le refacem în CSS pur. Nu merită o bibliotecă de animație de ~40KB pentru
 * un fade-up, iar CSS-ul rulează pe compositor, deci e mai fluid.
 *
 * Respectă prefers-reduced-motion: cine a cerut mai puțină mișcare vede
 * conținutul direct, fără translație.
 * ======================================================================== */

.fs-rise {
  opacity: 0;
  transform: translateY(28px);           /* y: 28 din Hero.tsx */
  animation: fs-rise-in .8s var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) forwards;
  animation-delay: var(--fs-rise-delay, 0s);
}

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

/* Elemente care apar la scroll — echivalentul IntersectionObserver-ului din
   SiteScripts.tsx, care adaugă .visible pe .reveal. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)),
    transform .7s var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fs-rise {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .reveal,
  .reveal.visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}