/* MBS FAI — Keyframes & kelas animasi. Lihat .claude/MBS-FAI-website-spec.md §5.3 */

@keyframes mbsBlob{
  0%, 100%{ border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%; transform: translate(0, 0) scale(1); }
  33%{ border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; transform: translate(20px, -16px) scale(1.04); }
  66%{ border-radius: 50% 50% 55% 45% / 40% 55% 45% 60%; transform: translate(-16px, 14px) scale(.98); }
}

@keyframes mbsPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  50%{ box-shadow: 0 0 0 14px rgba(255,255,255,0); }
}

@keyframes mbsDotPing{
  0%{ box-shadow: 0 0 0 0 rgba(57,226,123,.65); }
  70%{ box-shadow: 0 0 0 8px rgba(57,226,123,0); }
  100%{ box-shadow: 0 0 0 0 rgba(57,226,123,0); }
}

@keyframes mbsCountFade{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Fade-up saat scroll */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 650ms var(--ease), transform 650ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

.reveal-stagger > *{ opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal-stagger.is-visible > *{ opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: 450ms; }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay: 540ms; }
.reveal-stagger.is-visible > *:nth-child(8){ transition-delay: 630ms; }

.stat-item.is-counted .num{ animation: mbsCountFade 420ms var(--ease); }

/* Aksesibilitas: hormati preferensi kurangi gerak */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .mbs-hero::before, .mbs-hero::after,
  .welcome-play,
  .fab-service .fab-dot{
    animation: none !important;
  }
  .reveal, .reveal-stagger > *{
    transition: opacity 1ms linear !important;
    transform: none !important;
    opacity: 1 !important;
  }
  *{
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}