/* ============================================================
   ILUMINA BELLY — animations.css
   Animações de scroll via IntersectionObserver
   ============================================================ */

/* Estado inicial — elementos invisíveis antes de entrar no viewport */
.fade-up,
.fade-left,
.fade-right,
.fade-in {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: .75s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.fade-up    { transform: translateY(36px); }
.fade-left  { transform: translateX(-36px); }
.fade-right { transform: translateX(36px); }
.fade-in    { transform: none; }

/* Estado visível — adicionado pelo JS via IntersectionObserver */
.fade-up.is-visible,
.fade-left.is-visible,
.fade-right.is-visible,
.fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* Delays em cascata para grids e listas */
.delay-1  { transition-delay: .1s; }
.delay-2  { transition-delay: .2s; }
.delay-3  { transition-delay: .3s; }
.delay-4  { transition-delay: .4s; }
.delay-5  { transition-delay: .5s; }
.delay-6  { transition-delay: .6s; }

/* Linha decorativa que cresce ao aparecer */
.line-grow {
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: .3s;
}

.line-grow.is-visible { width: 100%; }

/* Número de estatísticas que conta */
[data-count] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* Reduzir animações para usuários com preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-left,
  .fade-right,
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .line-grow { width: 100%; transition: none; }
}