/* Animasi (motion). Kecepatan diatur di variables.css (--dur, --stagger, --ease-*).
   Semua animasi otomatis mati bila perangkat memakai "kurangi gerakan" (lihat base.css). */

/* Isi halaman masuk bertahap saat pindah menu/tab. Kelas ws-rise dipasang oleh js/motion.js. */
.ws-rise {
  animation: wsx-rise var(--dur) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

.ws-page {
  animation: wsx-fade 260ms ease-out both;
}

@keyframes wsx-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}

@keyframes wsx-fade {
  from {
    opacity: 0;
  }
}

/* Tombol: efek tekan. */
button {
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color 200ms,
    border-color 200ms,
    box-shadow 200ms,
    color 200ms;
}

button:active:not(:disabled) {
  transform: scale(0.96);
}

/* Kartu terangkat saat disentuh kursor. */
.metric,
.project-card {
  transition:
    transform 260ms var(--ease-out),
    box-shadow 260ms var(--ease-out),
    border-color 260ms;
}

.metric:hover,
.project-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.project-card:hover {
  border-color: color-mix(in srgb, var(--service-edge, var(--lime)) 60%, var(--line));
}

/* Lingkaran di kartu sambutan berdenyut pelan. */
.hero-orbit {
  animation: wsx-orbit 4.5s ease-in-out infinite;
}

@keyframes wsx-orbit {
  50% {
    transform: translateY(-4px) rotate(8deg);
  }
}

/* Grafik dan progress tumbuh dari nol. */
.bar {
  transform-origin: bottom;
  animation: wsx-grow-y 700ms var(--ease-out) both;
}

.bar-pair:nth-child(2) .bar {
  animation-delay: 50ms;
}

.bar-pair:nth-child(3) .bar {
  animation-delay: 100ms;
}

.bar-pair:nth-child(4) .bar {
  animation-delay: 150ms;
}

.bar-pair:nth-child(5) .bar {
  animation-delay: 200ms;
}

.bar-pair:nth-child(6) .bar {
  animation-delay: 250ms;
}

.progress i {
  transform-origin: left;
  animation: wsx-grow-x 800ms var(--ease-out) both;
}

@keyframes wsx-grow-y {
  from {
    transform: scaleY(0);
  }
}

@keyframes wsx-grow-x {
  from {
    transform: scaleX(0);
  }
}

/* Dialog muncul membesar, latar memudar. */
dialog[open] {
  animation: wsx-pop 340ms var(--ease-spring);
}

dialog[open]::backdrop {
  animation: wsx-fade 260ms ease-out;
}

@keyframes wsx-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
}

/* Notifikasi meluncur dari bawah. Kelas ws-toast dipasang ulang tiap pesan baru. */
#toast.ws-toast {
  animation: wsx-toast 480ms var(--ease-spring);
}

@keyframes wsx-toast {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.95);
  }
}

/* Menu samping di HP meluncur. */
.sidebar {
  transition: transform 320ms var(--ease-out);
}

/* Ganti mode terang/gelap dengan transisi warna lembut. */
:root.ws-theme-switching,
:root.ws-theme-switching * {
  transition:
    background-color 350ms ease,
    border-color 350ms ease,
    color 350ms ease,
    fill 350ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  :root.ws-theme-switching,
  :root.ws-theme-switching * {
    transition: none !important;
  }
}