/* ── BASE STATE (sebelum masuk viewport) ── */
.reveal {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.7s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* Arah animasi */
.reveal-up        { transform: translateY(48px); }
.reveal-down      { transform: translateY(-32px); }
.reveal-left      { transform: translateX(-52px); }
.reveal-right     { transform: translateX(52px); }
.reveal-scale     { transform: scale(0.92); }
.reveal-fade      { transform: none; }

/* ── ACTIVE STATE (sudah masuk viewport) ── */
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ── DELAY STAGGER untuk card/grid ── */
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.34s; }
.reveal-delay-4 { transition-delay: 0.46s; }
.reveal-delay-5 { transition-delay: 0.58s; }

/* ── Khusus: divider garis animasi grow ── */
.section-divider {
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
  opacity: 0;
}

.section-divider.visible {
  transform: scaleX(1);
  opacity: 1;
}

/* ── Stats bar: angka count-up feel ── */
.stat-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.stat-item.visible {
  opacity: 1;
  transform: none;
}

/* ── Service cards stagger ── */
.service-card {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s, box-shadow 0.3s;
}

.service-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Portfolio items stagger ── */
.portfolio-item {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-item.visible {
  opacity: 1;
  transform: none;
}

/* ── Client items stagger ── */
.client-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.25s;
}

.client-item.visible {
  opacity: 1;
  transform: none;
}

/* ── Partner box ── */
.partner-box {
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
}

/* ── Reduced motion: hormati preferensi user ── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stat-item,
  .service-card,
  .portfolio-item,
  .client-item,
  .section-divider {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}