/* Animasi UI global - halus & profesional. Menghormati prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference){

  @keyframes fadeUp   { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
  @keyframes fadeIn   { from{opacity:0} to{opacity:1} }
  @keyframes popIn    { from{opacity:0; transform:scale(.9)} to{opacity:1; transform:scale(1)} }
  @keyframes floaty   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
  @keyframes sheen    { 0%{background-position:-160% 0} 100%{background-position:260% 0} }

  body { animation: fadeIn .4s ease both; }
  header { animation: fadeUp .45s ease both; }

  /* Kartu & seksi muncul bertahap */
  .card { animation: fadeUp .5s cubic-bezier(.22,.61,.36,1) both; }
  .card:nth-of-type(2){ animation-delay:.06s }
  .card:nth-of-type(3){ animation-delay:.12s }
  .card:nth-of-type(4){ animation-delay:.18s }
  section > .card { animation: fadeUp .45s cubic-bezier(.22,.61,.36,1) both; }

  /* Langkah/stepper */
  .steps .s{ animation: fadeUp .4s ease both; }
  .steps .s:nth-child(1){animation-delay:.02s}.steps .s:nth-child(2){animation-delay:.08s}
  .steps .s:nth-child(3){animation-delay:.14s}.steps .s:nth-child(4){animation-delay:.2s}

  /* Baris tabel muncul bertahap (berlaku juga saat filter/paging) */
  tbody tr{ animation: fadeUp .32s ease both; }
  tbody tr:nth-child(1){animation-delay:.02s}  tbody tr:nth-child(2){animation-delay:.05s}
  tbody tr:nth-child(3){animation-delay:.08s}  tbody tr:nth-child(4){animation-delay:.11s}
  tbody tr:nth-child(5){animation-delay:.14s}  tbody tr:nth-child(6){animation-delay:.17s}
  tbody tr:nth-child(7){animation-delay:.20s}  tbody tr:nth-child(8){animation-delay:.23s}
  tbody tr:nth-child(9){animation-delay:.26s}  tbody tr:nth-child(10){animation-delay:.29s}

  /* Kotak Q/A & ringkasan */
  .qbox{ animation: fadeUp .38s ease both; }

  /* Tombol interaktif */
  button{ transition: transform .12s ease, filter .15s ease, box-shadow .18s ease; }
  button:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px #6c7bff33; }
  button:active{ transform: translateY(0) scale(.97); }

  .hlink{ transition: transform .12s ease, border-color .15s ease, background .15s ease; }
  .hlink:hover{ transform: translateY(-1px); }

  /* Input fokus menyala */
  input, textarea, select{ transition: border-color .15s ease, box-shadow .18s ease, background .15s ease; }
  input:focus, textarea:focus, select:focus{ outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px #6c7bff33; }

  /* Chip / badge */
  .chip{ transition: transform .12s ease, filter .15s ease; }
  .chip:hover{ transform: translateY(-1px) scale(1.02); }
  .badge{ animation: popIn .35s ease both; }

  /* Avatar & logo sedikit hidup */
  .logo{ transition: transform .2s ease; }
  .logo:hover{ transform: rotate(-6deg) scale(1.05); }

  /* Transisi antar langkah (index) */
  section#page1, section#page2, section#page3, section#page4{ animation: fadeIn .4s ease both; }

  /* Gauge & pai muncul */
  .gauge, .pie{ animation: popIn .5s ease both; }

  /* Efek "sheen" tipis pada tombol utama besar (Mulai Wawancara, dll) */
  button.primary{ background-size: 200% 100%; }
  button.primary:hover{ animation: sheen 1.1s linear; }
}

/* Pengguna yang memilih reduce motion: nonaktifkan animasi berat, sisakan transisi ringan */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; }
  button, .hlink, input, textarea, select { transition: border-color .15s ease, box-shadow .15s ease; }
}