/* ============================================================
   SIPADO — Motion Layer
   Dimuat SETELAH main.css. Berkas terpisah agar design system
   inti tetap stabil dan animasi bisa dimatikan tanpa risiko.

   Prinsip: gerak harus punya alasan fungsional.
   Setiap animasi di sini terikat pada data nyata — status lamaran,
   skor, progres unggahan — bukan hiasan.
   ============================================================ */

/* ---- Kartu Lamaran 3D — GERAK SAJA ----
   Bentuk kartunya didefinisikan di main.css. Berkas ini hanya
   menambahkan dimensi dan gerak, jadi kalau gagal dimuat, kartu
   tetap tampil rapi — hanya diam. */
.appcard-stage { perspective: 1400px; perspective-origin: 50% 40%; }

.appcard {
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease;
  will-change: transform;
  animation: appcard-float 7s ease-in-out infinite;
}

@keyframes appcard-float {
  0%, 100% { transform: rotateX(9deg) rotateY(-12deg) translateY(0); }
  50%      { transform: rotateX(7deg) rotateY(-9deg) translateY(-9px); }
}

/* Sudut dikendalikan motion.js lewat variabel --rx / --ry */
.appcard.is-tracking {
  animation: none;
  transform:
    rotateX(var(--rx, 8deg))
    rotateY(var(--ry, -10deg))
    translateY(-4px) scale(1.015);
  transition: transform .12s ease-out;
}

/* Kilau yang menyapu mengikuti sudut kemiringan */
.appcard::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--gx, 30%) var(--gy, 20%),
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.10) 26%,
    transparent 56%
  );
  transition: background .12s ease-out;
}

/* Pola halus agar permukaan tidak terlihat rata */
.appcard::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  opacity: .18;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.5) 0 1px, transparent 1px 13px);
  mask-image: linear-gradient(160deg, #000 10%, transparent 72%);
  -webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 72%);
}

/* Isi kartu diangkat pada sumbu Z agar kedalamannya terbaca */
.appcard-inner { transform: translateZ(38px); }
.appcard-number { transform: translateZ(18px); }

.appcard-chip .dot {
  box-shadow: 0 0 0 0 rgba(91,228,155,.75);
  animation: pulse 2s infinite;
}

/* Bayangan lantai, ikut bergerak bersama kartu */
.appcard-shadow {
  position: absolute;
  left: 50%; bottom: -26px;
  width: 66%; height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(24,20,90,.42), transparent 70%);
  filter: blur(9px);
  animation: appcard-shadow 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes appcard-shadow {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); }
  50%      { opacity: .35; transform: translateX(-50%) scale(.9); }
}

/* ---- Angka counter yang berputar seperti odometer ---- */
/* Struktur odometer ada di main.css; di sini hanya gerak putarnya. */
.odo-track { transition: transform .85s cubic-bezier(.22,.61,.36,1); }

/* ---- Skeleton saat statistik masih dimuat ---- */
/* Menggantikan tiga titik "..." yang sebelumnya terlihat mentah */
/* Struktur skeleton ada di main.css; di sini hanya kilaunya. */
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.12) 25%,
    rgba(255,255,255,.26) 37%,
    rgba(255,255,255,.12) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
.skeleton-dark {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 37%, var(--gray-200) 63%);
  background-size: 400% 100%;
}
@keyframes shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---- Muncul saat masuk layar ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.reveal.in { opacity: 1; transform: none; }

/* Kartu tahap seleksi muncul berurutan, bukan serentak */
.stages-grid > *, .reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.stages-grid.in > *, .reveal-stagger.in > * { opacity: 1; transform: none; }
.stages-grid.in > *:nth-child(1), .reveal-stagger.in > *:nth-child(1) { transition-delay: .04s; }
.stages-grid.in > *:nth-child(2), .reveal-stagger.in > *:nth-child(2) { transition-delay: .10s; }
.stages-grid.in > *:nth-child(3), .reveal-stagger.in > *:nth-child(3) { transition-delay: .16s; }
.stages-grid.in > *:nth-child(4), .reveal-stagger.in > *:nth-child(4) { transition-delay: .22s; }
.stages-grid.in > *:nth-child(5), .reveal-stagger.in > *:nth-child(5) { transition-delay: .28s; }
.stages-grid.in > *:nth-child(6), .reveal-stagger.in > *:nth-child(6) { transition-delay: .34s; }
.stages-grid.in > *:nth-child(7), .reveal-stagger.in > *:nth-child(7) { transition-delay: .40s; }
.stages-grid.in > *:nth-child(8), .reveal-stagger.in > *:nth-child(8) { transition-delay: .46s; }

/* Kartu terangkat sedikit saat disentuh — memberi umpan balik */
.card { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .2s ease; }
.stages-grid .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--primary-200); }

/* ---- Cincin skor (tes kecocokan) ---- */
.score-ring {
  --val: 0;
  --size: 132px;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  display: grid; place-items: center;
  position: relative;
  margin: 0 auto;
  background: conic-gradient(
    var(--primary) calc(var(--val) * 1%),
    var(--gray-200) 0
  );
  transition: --val 1.2s cubic-bezier(.22,.61,.36,1);
}
.score-ring::before {
  content: '';
  position: absolute; inset: 11px;
  background: var(--white);
  border-radius: 50%;
}
.score-ring-value {
  position: relative;
  font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.score-ring-value small { font-size: .8125rem; color: var(--muted); font-weight: 600; }

/* Properti kustom perlu didaftarkan agar bisa dianimasikan.
   Browser lama mengabaikannya dan cincin langsung tampil di nilai akhir. */
@property --val {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* ---- Bar skor mengisi saat terlihat ---- */
.score-fill { transition: width 1.1s cubic-bezier(.22,.61,.36,1); }

/* ---- Timeline dashboard: garis progres ikut terisi ---- */
.timeline-step.done::after { transition: background .5s ease; }
.timeline-step.active .timeline-dot { animation: dot-breathe 2.4s ease-in-out infinite; }
@keyframes dot-breathe {
  0%, 100% { box-shadow: 0 0 0 5px rgba(201,199,255,.25); }
  50%      { box-shadow: 0 0 0 9px rgba(201,199,255,.12); }
}

/* ---- Area unggah: umpan balik saat berkas diseret ---- */
.upload-area { transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.upload-area.dragover { transform: scale(1.01); }
.upload-icon { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.upload-area:hover .upload-icon { transform: translateY(-3px); }

/* ---- Ticker pendaftar terbaru: baris baru menyelinap masuk ---- */
.ticker-item { animation: slide-in .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes slide-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Tombol: kilau tipis saat disentuh ---- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.btn-primary:hover::after { transform: translateX(120%); }

/* ---- Badge status: titik berdenyut hanya untuk status yang sedang berjalan ---- */
.badge-review::before, .badge-assessment::before, .badge-interview::before {
  animation: pulse-soft 2s ease-in-out infinite;
}
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ============================================================
   Hormati preferensi sistem.
   Sebagian orang mengalami pusing atau mual karena gerak layar,
   jadi seluruh animasi dimatikan — bukan sekadar dipercepat.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .appcard,
  .appcard-shadow,
  .appcard-chip .dot,
  .ticker-item,
  .timeline-step.active .timeline-dot,
  .badge-review::before,
  .badge-assessment::before,
  .badge-interview::before,
  .skeleton {
    animation: none !important;
  }
  .appcard { transform: rotateX(6deg) rotateY(-8deg); }
  .appcard.is-tracking { transform: rotateX(6deg) rotateY(-8deg); }
  .reveal, .stages-grid > *, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .odo-track { transition: none; }
  .btn-primary::after { display: none; }
}