/* =========================================================
   PUISI NUSANTARA — Animasi
   Ringan: hanya transform/opacity, hormati reduced-motion.
   ========================================================= */

/* ------------------------- Keyframes ------------------------- */

@keyframes pn-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pn-fade-down {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pn-fade-left {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pn-fade-right {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pn-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pn-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pn-pop {
  0% { opacity: 0; transform: scale(0.85); }
  60% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pn-slide-in-left {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pn-grow-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes pn-grow-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes pn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 114, 182, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(244, 114, 182, 0); }
}

@keyframes pn-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pn-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(18px, -14px) scale(1.06); }
  66% { transform: translate(-14px, 12px) scale(0.96); }
}

@keyframes pn-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@keyframes pn-draw {
  from { stroke-dashoffset: var(--pn-dash, 600); }
  to { stroke-dashoffset: 0; }
}

@keyframes pn-count-flash {
  0% { opacity: 0.35; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ------------------------- Utilitas masuk ------------------------- */

html.anim-ready .anim {
  opacity: 0;
  will-change: opacity, transform;
  animation-duration: var(--pn-dur, 520ms);
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
  animation-delay: var(--pn-delay, 0ms);
}

.anim-up { animation-name: pn-fade-up; }
.anim-down { animation-name: pn-fade-down; }
.anim-left { animation-name: pn-fade-left; }
.anim-right { animation-name: pn-fade-right; }
.anim-in { animation-name: pn-fade-in; }
.anim-scale { animation-name: pn-scale-in; }
.anim-pop { animation-name: pn-pop; animation-duration: 460ms; }
.anim-slide { animation-name: pn-slide-in-left; animation-duration: 360ms; }

/* Stagger otomatis: anak diberi delay berjenjang */
html.anim-ready .anim-stagger > * {
  opacity: 0;
  will-change: opacity, transform;
  animation: pn-fade-up 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--pn-step, 60ms) * var(--pn-i, 0));
}

.anim-stagger > *:nth-child(1) { --pn-i: 1; }
.anim-stagger > *:nth-child(2) { --pn-i: 2; }
.anim-stagger > *:nth-child(3) { --pn-i: 3; }
.anim-stagger > *:nth-child(4) { --pn-i: 4; }
.anim-stagger > *:nth-child(5) { --pn-i: 5; }
.anim-stagger > *:nth-child(6) { --pn-i: 6; }
.anim-stagger > *:nth-child(7) { --pn-i: 7; }
.anim-stagger > *:nth-child(8) { --pn-i: 8; }
.anim-stagger > *:nth-child(9) { --pn-i: 9; }
.anim-stagger > *:nth-child(10) { --pn-i: 10; }
.anim-stagger > *:nth-child(n+11) { --pn-i: 10; }

/* Reveal saat discroll (diaktifkan JS menambah .is-revealed) */
html.anim-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--pn-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-left { transform: translateX(-22px); }
.reveal-right { transform: translateX(22px); }
.reveal-scale { transform: scale(0.97); }

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ------------------------- Dashboard ------------------------- */

/* Sidebar masuk dari kiri, item berjenjang */
.sidebar {
  animation: pn-fade-left 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 992px) {
  html.anim-ready .sidebar .sidebar-group {
    opacity: 0;
    animation: pn-fade-up 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .sidebar .sidebar-group:nth-of-type(1) { animation-delay: 90ms; }
  .sidebar .sidebar-group:nth-of-type(2) { animation-delay: 150ms; }
  .sidebar .sidebar-group:nth-of-type(3) { animation-delay: 210ms; }
  .sidebar .sidebar-group:nth-of-type(4) { animation-delay: 270ms; }
  .sidebar .sidebar-group:nth-of-type(5) { animation-delay: 330ms; }

  html.anim-ready .sidebar .sidebar-footer {
    opacity: 0;
    animation: pn-fade-in 600ms ease 400ms forwards;
  }
}

.sidebar .nav-item {
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms, color 160ms;
}

.sidebar .nav-item:hover {
  transform: translateX(4px);
}

.sidebar .nav-item.is-active::before {
  animation: pn-grow-y 320ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top;
}

/* Topbar turun dari atas */
.topbar {
  animation: pn-fade-down 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Konten & kartu */
html.anim-ready .content > * {
  opacity: 0;
  animation: pn-fade-up 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.content > *:nth-child(1) { animation-delay: 60ms; }
.content > *:nth-child(2) { animation-delay: 130ms; }
.content > *:nth-child(3) { animation-delay: 200ms; }
.content > *:nth-child(4) { animation-delay: 270ms; }
.content > *:nth-child(5) { animation-delay: 340ms; }
.content > *:nth-child(6) { animation-delay: 410ms; }
.content > *:nth-child(7) { animation-delay: 480ms; }
.content > *:nth-child(8) { animation-delay: 550ms; }
.content > *:nth-child(n+9) { animation-delay: 620ms; }

/* Stat card: pop + angka berkilau sekali */
.stat {
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms;
}

.stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.stat-value {
  animation: pn-count-flash 640ms cubic-bezier(0.22, 1, 0.36, 1) 260ms backwards;
}

/* Angka antrean berdenyut saat ada tugas */
.action-count.tone-danger,
.action-count.tone-warning {
  animation: pn-pulse 2.4s ease-in-out infinite;
}

/* Kartu aksi hover */
.action-list a,
.mini-item {
  transition: background 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.action-list a:hover,
.mini-item:hover {
  transform: translateX(3px);
}

/* Progress bar tumbuh */
.progress > span {
  transform-origin: left;
  animation: pn-grow-x 900ms cubic-bezier(0.22, 1, 0.36, 1) 320ms backwards;
}

.progress-hero-value {
  animation: pn-pop 560ms cubic-bezier(0.22, 1, 0.36, 1) 220ms backwards;
}

/* Timeline: titik berurutan */
html.anim-ready .timeline li {
  opacity: 0;
  animation: pn-fade-left 480ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(70ms * var(--pn-i, 0));
}

.timeline li:nth-child(1) { --pn-i: 1; }
.timeline li:nth-child(2) { --pn-i: 2; }
.timeline li:nth-child(3) { --pn-i: 3; }
.timeline li:nth-child(4) { --pn-i: 4; }
.timeline li:nth-child(5) { --pn-i: 5; }
.timeline li:nth-child(6) { --pn-i: 6; }
.timeline li:nth-child(n+7) { --pn-i: 6; }

.timeline li.is-active .dot {
  animation: pn-pulse 2.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(91, 75, 219, 0.5);
}

/* Tabel baris berjenjang */
html.anim-ready .table-wrap tbody tr {
  opacity: 0;
  animation: pn-fade-up 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(34ms * var(--pn-i, 0));
}

.table-wrap tbody tr:nth-child(1) { --pn-i: 1; }
.table-wrap tbody tr:nth-child(2) { --pn-i: 2; }
.table-wrap tbody tr:nth-child(3) { --pn-i: 3; }
.table-wrap tbody tr:nth-child(4) { --pn-i: 4; }
.table-wrap tbody tr:nth-child(5) { --pn-i: 5; }
.table-wrap tbody tr:nth-child(6) { --pn-i: 6; }
.table-wrap tbody tr:nth-child(7) { --pn-i: 7; }
.table-wrap tbody tr:nth-child(8) { --pn-i: 8; }
.table-wrap tbody tr:nth-child(9) { --pn-i: 9; }
.table-wrap tbody tr:nth-child(10) { --pn-i: 10; }
.table-wrap tbody tr:nth-child(n+11) { --pn-i: 10; }

/* Badge & pill masuk */
.badge,
.pill {
  animation: pn-scale-in 320ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Stepper karya */
html.anim-ready .stepper li {
  opacity: 0;
  animation: pn-fade-up 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(90ms * var(--pn-i, 0));
}

.stepper li:nth-child(1) { --pn-i: 1; }
.stepper li:nth-child(2) { --pn-i: 2; }
.stepper li:nth-child(3) { --pn-i: 3; }
.stepper li:nth-child(4) { --pn-i: 4; }

.stepper li.is-current .stepper-dot {
  animation: pn-pulse 2.2s ease-in-out infinite;
}

/* Notifikasi dropdown & toast */
.dropdown-panel {
  animation: pn-scale-in 200ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top right;
}

.toast {
  animation: pn-fade-down 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Deadline strip */
.deadline-strip {
  animation: pn-fade-up 540ms cubic-bezier(0.22, 1, 0.36, 1) 140ms backwards;
}

.deadline-strip.tone-danger,
.deadline-strip.tone-warning {
  position: relative;
}

.deadline-strip.tone-danger::after,
.deadline-strip.tone-warning::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 4px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.35;
  animation: pn-grow-y 600ms cubic-bezier(0.22, 1, 0.36, 1) 300ms backwards;
  transform-origin: top;
}

/* Aurora latar bergerak pelan */
.aurora-bg {
  animation: pn-fade-in 900ms ease;
}

.hero-orb {
  animation: pn-orb 18s ease-in-out infinite;
}

.hero-orb.two {
  animation-duration: 24s;
  animation-direction: reverse;
}

/* Chart: canvas fade + garis digambar JS */
.chart-box canvas,
html.anim-ready canvas[data-chart] {
  opacity: 0;
  animation: pn-fade-in 700ms ease 300ms forwards;
}

/* Kartu buku */
.book-cover {
  animation: pn-scale-in 520ms cubic-bezier(0.22, 1, 0.36, 1) 200ms backwards;
}

/* ------------------------- Landing ------------------------- */

.public-header {
  animation: pn-fade-down 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.anim-ready .hero .inner > * {
  opacity: 0;
  animation: pn-fade-up 640ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero .inner > *:nth-child(1) { animation-delay: 80ms; }
.hero .inner > *:nth-child(2) { animation-delay: 220ms; }

.hero-panel {
  animation-name: pn-scale-in;
  animation-duration: 700ms;
}

.hero-panel:hover {
  animation: pn-float 6s ease-in-out infinite;
}

html.anim-ready .fact-strip {
  opacity: 0;
  animation: pn-fade-up 620ms cubic-bezier(0.22, 1, 0.36, 1) 420ms forwards;
}

.fact {
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms;
}

.fact:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

html.anim-ready .section .container > * {
  opacity: 0;
  animation: pn-fade-up 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.section .container > *:nth-child(1) { animation-delay: 40ms; }
.section .container > *:nth-child(2) { animation-delay: 120ms; }
.section .container > *:nth-child(n+3) { animation-delay: 200ms; }

/* Timeline landing: garis tumbuh + titik berurutan */
html.anim-ready .timeline-landing .tl-item {
  opacity: 0;
  animation: pn-fade-up 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(90ms * var(--pn-i, 0));
}

.timeline-landing .tl-item:nth-child(1) { --pn-i: 1; }
.timeline-landing .tl-item:nth-child(2) { --pn-i: 2; }
.timeline-landing .tl-item:nth-child(3) { --pn-i: 3; }
.timeline-landing .tl-item:nth-child(4) { --pn-i: 4; }
.timeline-landing .tl-item:nth-child(5) { --pn-i: 5; }
.timeline-landing .tl-item:nth-child(6) { --pn-i: 6; }
.timeline-landing .tl-item:nth-child(n+7) { --pn-i: 6; }

.timeline-landing .tl-rail::before {
  transform-origin: top;
  animation: pn-grow-y 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.step .step-no {
  animation: pn-pop 480ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(120ms * var(--pn-i, 0));
}

.step:nth-child(1) .step-no { --pn-i: 1; }
.step:nth-child(2) .step-no { --pn-i: 2; }
.step:nth-child(3) .step-no { --pn-i: 3; }
.step:nth-child(4) .step-no { --pn-i: 4; }
.step:nth-child(5) .step-no { --pn-i: 5; }
.step:nth-child(6) .step-no { --pn-i: 6; }

/* ------------------------- Auth & umum ------------------------- */

main > div > .card {
  animation: pn-scale-in 480ms cubic-bezier(0.22, 1, 0.36, 1) 80ms backwards;
}

.card {
  transition: box-shadow 200ms ease;
}

.alert {
  animation: pn-fade-up 420ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.alert-error {
  animation-name: pn-fade-down;
}

.btn {
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease, background 160ms ease;
}

.btn:active {
  transform: scale(0.97);
}

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg, var(--neutral-100) 25%, #e8e6f4 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: pn-shimmer 1.4s linear infinite;
  border-radius: var(--radius-md);
  min-height: 14px;
}

/* ------------------------- Reduced motion ------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .anim,
  .anim-stagger > *,
  .content > *,
  .reveal,
  .table-wrap tbody tr,
  .timeline li,
  .stepper li,
  .timeline-landing .tl-item,
  .hero .inner > *,
  .section .container > *,
  .fact-strip,
  canvas[data-chart] {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-orb,
  .action-count.tone-danger,
  .action-count.tone-warning,
  .timeline li.is-active .dot,
  .stepper li.is-current .stepper-dot,
  .skeleton {
    animation: none !important;
  }
}


/* Page-head selalu terlihat setelah animasi (fallback) */
.page-head {
  animation-fill-mode: forwards;
}

/* Setelah animasi selesai, hapus will-change agar hemat memori */
.content > *,
.anim,
.anim-stagger > * {
  animation-fill-mode: forwards;
}

/* Klik kartu statistik tetap responsif saat animasi */
.stat {
  animation: pn-scale-in 480ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}