/* HR AI REVIEW — design system dari Resume.io style reference */
:root {
  --color-ink: #1e2532;
  --color-carbon: #0f141e;
  --color-pencil: #656e83;
  --color-fog: #828ba2;
  --color-haze: #9fa6bb;
  --color-paper: #ffffff;
  --color-mist: #f7f9fc;
  --color-lavender-wash: #f1f2ff;
  --color-chalk: #d9deeb;
  --color-ash: #e7eaf4;
  --color-signal-blue: #1a91f0;
  --color-deep-signal: #016fd0;
  --color-iris: #5660e8;
  --color-mint-whisper: #e7f4ed;
  --color-blush-whisper: #ffebe4;
  --color-rose-whisper: #edd7df;

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius-buttons: 36px;
  --radius-cards: 16px;
  --radius-icons: 4px;
  --radius-inputs: 4px;
  --radius-tags: 100px;
  --page-max-width: 1200px;
  --section-gap: 80px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-paper);
  font-size: 16px;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--color-paper); border-bottom: 1px solid var(--color-chalk); height: 64px; }
.nav-inner { max-width: var(--page-max-width); margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 32px; }
.brand { font-size: 19px; font-weight: 600; color: var(--color-carbon); letter-spacing: 0.021em; }
.brand span { color: var(--color-signal-blue); }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { font-size: 16px; color: var(--color-ink); }
.nav-links a:hover { color: var(--color-signal-blue); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 500;
  padding: 18px 24px; border-radius: var(--radius-buttons); transition: background 0.15s;
}
.btn-primary { background: var(--color-signal-blue); color: var(--color-paper); }
.btn-primary:hover:not(:disabled) { background: var(--color-deep-signal); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 10px 18px; font-size: 15px; }
.btn-block { width: 100%; margin-top: 20px; }
.btn-ghost { display: inline-flex; align-items: center; padding: 8px 4px; color: var(--color-signal-blue); font-size: 16px; font-weight: 500; }
.btn-ghost:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
.hero { background: var(--color-mist); padding: 80px 24px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; max-width: var(--page-max-width); margin: 0 auto; }
.hero-title { font-size: 52px; font-weight: 400; line-height: 1.0; color: var(--color-ink); letter-spacing: 0.021em; max-width: 14ch; }
.hero-title .accent { color: var(--color-signal-blue); }
.hero-sub { margin-top: 20px; font-size: 18px; line-height: 1.4; color: var(--color-pencil); max-width: 52ch; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.trustline { margin-top: 20px; font-size: 15px; color: var(--color-pencil); }
.trustline .star { color: #1db954; }
.hero-visual { display: flex; justify-content: center; }
.resume-card { background: var(--color-paper); border: 1px solid var(--color-chalk); border-radius: var(--radius-cards); padding: 24px; width: 280px; transform: rotate(2deg); }
.resume-card-head { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-fog); }
.doc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-signal-blue); }
.resume-score { margin-top: 20px; font-size: 14px; color: var(--color-pencil); }
.resume-score-big { font-size: 52px; font-weight: 500; color: var(--color-signal-blue); line-height: 1; }
.resume-score-big span { font-size: 20px; color: var(--color-ink); font-weight: 400; }
.resume-bars { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.bar { height: 6px; background: var(--color-ash); border-radius: 100px; }
.bar i { display: block; height: 100%; background: var(--color-signal-blue); border-radius: 100px; }
.chip { display: inline-block; margin-top: 16px; margin-right: 8px; padding: 6px 14px; border-radius: var(--radius-tags); font-size: 13px; font-weight: 500; }
.chip-blue { background: var(--color-lavender-wash); color: var(--color-iris); }
.chip-mint { background: var(--color-mint-whisper); color: #1e7e4a; }

/* ---------- Sections ---------- */
.section { padding: var(--section-gap) 24px; max-width: var(--page-max-width); margin: 0 auto; }
.section-mist { background: var(--color-mist); max-width: 100%; }
.section-head { text-align: center; margin-bottom: 40px; }
.eyebrow { font-size: 14px; text-transform: uppercase; letter-spacing: 0.129em; color: var(--color-fog); font-weight: 500; }
.section-title { font-size: 40px; font-weight: 400; line-height: 1.07; color: var(--color-carbon); margin-top: 8px; }
.section-sub { font-size: 16px; color: var(--color-pencil); margin-top: 8px; }

/* ---------- Upload ---------- */
.upload-card { background: var(--color-paper); border: 1px solid var(--color-chalk); border-radius: var(--radius-cards); padding: 24px; max-width: 720px; margin: 0 auto; }
.dropzone { display: block; border: 1px dashed var(--color-haze); border-radius: var(--radius-cards); padding: 40px 24px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.dropzone:hover, .dropzone.dragover { border-color: var(--color-signal-blue); background: var(--color-lavender-wash); }
.dz-icon { font-size: 32px; }
.dz-title { font-size: 19px; font-weight: 500; color: var(--color-ink); margin-top: 12px; }
.dz-sub { font-size: 15px; color: var(--color-fog); margin-top: 4px; }
.dz-file { margin-top: 12px; font-size: 15px; font-weight: 500; color: var(--color-signal-blue); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.field label { display: block; font-size: 14px; font-weight: 500; color: var(--color-ink); margin-bottom: 6px; }
.field input, .field textarea { width: 100%; font-family: inherit; font-size: 16px; color: var(--color-ink); border: 1px solid var(--color-chalk); border-radius: var(--radius-inputs); padding: 12px 14px; outline: none; transition: border-color 0.15s; }
.field input:focus, .field textarea:focus { border-color: var(--color-signal-blue); }
.field textarea { resize: vertical; }
.form-error { color: #c0392b; font-size: 15px; margin-top: 12px; text-align: center; }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Result ---------- */
.result-grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.card { background: var(--color-paper); border: 1px solid var(--color-chalk); border-radius: var(--radius-cards); padding: 24px; }
.card h3 { font-size: 19px; font-weight: 600; color: var(--color-carbon); margin-bottom: 12px; }
.result-side { display: flex; flex-direction: column; gap: 16px; }
.score-card { text-align: center; }
.score-ring { position: relative; width: 140px; margin: 0 auto; }
.score-ring svg { width: 140px; height: 140px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--color-ash); stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--color-signal-blue); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.726; stroke-dashoffset: 326.726; transition: stroke-dashoffset 0.8s ease; }
.score-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 500; color: var(--color-signal-blue); }
.role-match { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--color-chalk); padding-top: 12px; }
.role-match .label { font-size: 14px; color: var(--color-fog); }
.role-match .value { font-size: 19px; font-weight: 500; color: var(--color-signal-blue); }
.format-list { list-style: none; }
.format-list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-ash); font-size: 15px; }
.format-list li:last-child { border-bottom: none; }
.format-list .ok { color: #1e7e4a; font-weight: 500; }
.format-list .bad { color: #c0392b; font-weight: 500; }
.result-main { display: flex; flex-direction: column; gap: 16px; }
.summary-card p { font-size: 16px; color: var(--color-pencil); line-height: 1.4; }
.list-card ul { list-style: none; }
.list-card li { padding: 6px 0; font-size: 16px; color: var(--color-ink); line-height: 1.3; }
.c-green { color: #1e7e4a; }
.c-rose { color: #c0392b; }
.c-iris { color: var(--color-iris); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: var(--color-lavender-wash); color: var(--color-iris); border-radius: var(--radius-tags); padding: 6px 14px; font-size: 13px; font-weight: 500; }

/* ---------- History ---------- */
.history-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; max-width: var(--page-max-width); margin: 0 auto; padding: 0 24px; }
.history-item { background: var(--color-paper); border: 1px solid var(--color-chalk); border-radius: var(--radius-cards); padding: 20px; cursor: pointer; transition: border-color 0.15s; }
.history-item:hover { border-color: var(--color-signal-blue); }
.history-item .h-score { font-size: 31px; font-weight: 500; color: var(--color-signal-blue); }
.history-item .h-file { font-size: 16px; font-weight: 500; color: var(--color-ink); margin-top: 4px; }
.history-item .h-date { font-size: 14px; color: var(--color-fog); margin-top: 4px; }
.history-item .h-del { float: right; background: none; border: 1px solid var(--color-chalk); color: var(--color-fog); border-radius: var(--radius-icons); padding: 4px 8px; font-size: 13px; cursor: pointer; }
.history-item .h-del:hover { color: #c0392b; border-color: #c0392b; }
.empty { text-align: center; color: var(--color-fog); font-size: 16px; margin-top: 24px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { background: var(--color-paper); border: 1px solid var(--color-chalk); border-radius: var(--radius-cards); padding: 24px; }
.step-num { font-size: 18px; font-weight: 500; color: var(--color-fog); }
.step h3 { font-size: 19px; font-weight: 500; color: var(--color-ink); margin-top: 8px; }
.step p { font-size: 15px; color: var(--color-pencil); margin-top: 4px; line-height: 1.4; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--color-chalk); padding: 48px 24px; }
.footer-inner { max-width: var(--page-max-width); margin: 0 auto; text-align: center; }
.footer-brand { font-size: 22px; font-weight: 600; color: var(--color-carbon); }
.footer-tag { font-size: 14px; color: var(--color-pencil); margin-top: 4px; }
.footer-note { font-size: 14px; color: var(--color-fog); margin-top: 16px; }

/* ---------- Improve ---------- */
.manual-input-card { background: var(--color-paper); border: 1px solid var(--color-chalk); border-radius: var(--radius-cards); padding: 24px; max-width: 720px; margin: 0 auto 16px; }
.manual-input-head { margin-bottom: 12px; }
.manual-input-head h3 { font-size: 19px; font-weight: 600; color: var(--color-carbon); margin-bottom: 4px; }
.manual-input-hint { font-size: 14px; color: var(--color-fog); }
.manual-input-card textarea { width: 100%; font-family: inherit; font-size: 15px; color: var(--color-ink); border: 1px solid var(--color-chalk); border-radius: var(--radius-inputs); padding: 12px 14px; outline: none; transition: border-color 0.15s; resize: vertical; min-height: 80px; }
.manual-input-card textarea:focus { border-color: var(--color-signal-blue); }
.improve-zone { margin-top: 24px; text-align: center; }
.improve-zone .btn { margin-bottom: 16px; }
.improve-result { text-align: left; max-width: 800px; margin: 0 auto; }
.improve-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.improve-actions { display: flex; gap: 8px; align-items: center; }
.improve-actions .btn-sm { padding: 8px 16px; font-size: 14px; }
.improve-text {
  width: 100%;
  min-height: 300px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-mist);
  border: 1px solid var(--color-chalk);
  border-radius: var(--radius-cards);
  padding: 16px;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.improve-text:focus {
  border-color: var(--color-signal-blue);
}
.improve-edit-hint {
  font-size: 13px;
  color: var(--color-fog);
  margin-top: 8px;
  text-align: right;
}
.rescore-zone { margin-top: 16px; text-align: center; }
.rescore-zone .btn { margin-bottom: 8px; }
.rescore-hint { font-size: 14px; color: var(--color-fog); }
.score-delta { font-size: 18px; font-weight: 600; margin-bottom: 12px; padding: 12px 20px; border-radius: var(--radius-cards); background: var(--color-mist); border: 1px solid var(--color-chalk); text-align: center; }
.improve-note { margin-top: 20px; font-size: 14px; color: var(--color-pencil); font-style: italic; line-height: 1.6; border-top: 1px solid var(--color-ash); padding-top: 14px; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--color-carbon); color: var(--color-paper); padding: 14px 24px; border-radius: 100px; font-size: 15px; z-index: 100; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 48px 24px; }
  .hero-title { font-size: 40px; }
  .result-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}
/* ==========================================================
   ANIMATION SYSTEM — playful & lively
   (pure CSS transforms/opacity — flat design system)
   ========================================================== */

/* ---------- 1. Scroll-reveal (A) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition:
    opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity, transform;
}
.reveal.revealed {
  opacity: 1;
  transform: none;
}
/* Stagger helpers — elemen berurutan naik satu-satu */
.reveal-s1 { transition-delay: 0.05s; }
.reveal-s2 { transition-delay: 0.12s; }
.reveal-s3 { transition-delay: 0.19s; }
.reveal-s4 { transition-delay: 0.26s; }
.reveal-s5 { transition-delay: 0.33s; }
.reveal-s6 { transition-delay: 0.40s; }
.reveal-s7 { transition-delay: 0.47s; }
.reveal-s8 { transition-delay: 0.54s; }
/* Variasi arah masuk */
.reveal-left { transform: translateX(-32px) scale(0.985); }
.reveal-left.revealed { transform: none; }
.reveal-right { transform: translateX(32px) scale(0.985); }
.reveal-right.revealed { transform: none; }
.reveal-zoom { transform: scale(0.8); }
.reveal-zoom.revealed { transform: none; }

/* ---------- 2. Micro-interaction & hover (B) ---------- */
.btn {
  transition: background 0.15s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}
.btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.02); }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.96); }
/* Ripple effect saat klik */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: ripple 0.55s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(3); opacity: 0; }
}

.btn-ghost { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.btn-ghost:hover { transform: translateX(3px); }

.brand span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand:hover span { transform: scale(1.12) rotate(-4deg); }

.nav-links a {
  position: relative;
  transition: color 0.2s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--color-signal-blue);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-links a:hover::after { transform: scaleX(1); }

/* Dropzone playful */
.dropzone .dz-icon {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dropzone:hover .dz-icon,
.dropzone.dragover .dz-icon {
  transform: translateY(-6px) scale(1.2);
  animation: wiggle 0.4s ease-in-out;
}
@keyframes wiggle {
  0% { transform: translateY(-6px) rotate(0deg); }
  25% { transform: translateY(-6px) rotate(-8deg); }
  50% { transform: translateY(-6px) rotate(8deg); }
  75% { transform: translateY(-6px) rotate(-5deg); }
  100% { transform: translateY(-6px) rotate(0deg); }
}
.dropzone { transition: border-color 0.15s, background 0.15s, transform 0.2s cubic-bezier(0.3, 1.5, 0.6, 1); }
.dropzone:hover, .dropzone.dragover { transform: translateY(-3px); }

/* Cards playful hover */
.card, .history-item, .step, .upload-card {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s;
}
.history-item:hover { transform: translateY(-4px) scale(1.015); }
.step:hover { transform: translateY(-4px) scale(1.015); }
.resume-card { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.resume-card:hover { transform: rotate(0deg) scale(1.04); }

/* ---------- Floating: kartu CV di hero mengambang terus ---------- */
.hero-visual {
  animation: floatSlow 5s ease-in-out infinite;
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
/* Saat kartu di-hover, pause floating biar interaksi stabil */
.hero-visual:hover { animation-play-state: paused; }

/* ---------- Shine: kilau melintas di judul & tombol ---------- */
.hero-title span.accent,
.hero .btn-primary {
  position: relative;
  overflow: hidden;
}
.hero-title span.accent::after,
.hero .btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  animation: shine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0% { left: -120%; }
  55% { left: 130%; }
  100% { left: 130%; }
}

/* Chips & tags pop on hover */
.chip, .tag {
  transition: transform 0.2s cubic-bezier(0.3, 1.5, 0.6, 1);
  display: inline-block;
}
.chip:hover, .tag:hover { transform: scale(1.08) rotate(-2deg); }

/* ---------- 3. Result review animations (C) ---------- */
/* Score number count-up handled in JS; give it a pop at end */
.score-num.score-pop { animation: scorePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes scorePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Staggered list reveal */
.check-list li, .x-list li, .arrow-list li, .tag, #format-list li {
  opacity: 0;
  transform: translateX(-12px);
  animation: listIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes listIn {
  to { opacity: 1; transform: none; }
}
#format-list li:nth-child(1), .check-list li:nth-child(1), .x-list li:nth-child(1), .arrow-list li:nth-child(1) { animation-delay: 0.05s; }
#format-list li:nth-child(2), .check-list li:nth-child(2), .x-list li:nth-child(2), .arrow-list li:nth-child(2) { animation-delay: 0.12s; }
#format-list li:nth-child(3), .check-list li:nth-child(3), .x-list li:nth-child(3), .arrow-list li:nth-child(3) { animation-delay: 0.19s; }
#format-list li:nth-child(4), .check-list li:nth-child(4), .x-list li:nth-child(4), .arrow-list li:nth-child(4) { animation-delay: 0.26s; }
#format-list li:nth-child(5), .check-list li:nth-child(5), .x-list li:nth-child(5), .arrow-list li:nth-child(5) { animation-delay: 0.33s; }
#format-list li:nth-child(6), .check-list li:nth-child(6), .x-list li:nth-child(6), .arrow-list li:nth-child(6) { animation-delay: 0.40s; }
.tag:nth-child(1n) { animation-delay: calc(0.05s + (var(--tag-i, 0) * 0.06s)); }

/* Score delta highlight */
.score-delta { animation: deltaPulse 0.8s ease; }
@keyframes deltaPulse {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* Result section fades in */
#result-section:not([hidden]) { animation: resultFade 0.5s ease; }
@keyframes resultFade {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 4. Loading state (D) ---------- */
.btn:has(.spinner:not([hidden])) { animation: btnPulse 1s ease-in-out infinite; }
@keyframes btnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* ---------- 5. Accessibility & safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Navbar scroll progress bar ---------- */
.nav-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-signal-blue), var(--color-iris));
  border-radius: 0 100px 100px 0;
  transition: width 0.1s linear;
  z-index: 2;
}

/* ---------- Dropzone: animated dashed border + bounce ---------- */
.dropzone { position: relative; overflow: hidden; }
/* Garis putus-putus "marching ants" mengalir biar keliatan siap terima file */
.dropzone::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 2px dashed transparent;
  border-radius: inherit;
  background-image: linear-gradient(90deg, var(--color-signal-blue) 50%, transparent 50%);
  background-size: 16px 2px;
  background-repeat: repeat-x;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  animation: antsMove 0.8s linear infinite;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.dropzone:hover::before, .dropzone.dragover::before {
  opacity: 1;
}
@keyframes antsMove {
  to { background-position: 16px 0, 0 100%, 0 0, 100% 0; }
}
/* Bounce seluruh dropzone saat dragover */
.dropzone.dragover { animation: dropBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes dropBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
/* Nama file muncul slide-in + pop */
.dz-file { display: inline-block; opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dz-file:not(:empty) { opacity: 1; transform: none; }

/* ---------- History: tilt on hover + score pulse ---------- */
.history-item .h-score {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.history-item:hover .h-score {
  transform: scale(1.25) rotate(-8deg);
}
.history-item { transform-origin: center; }

/* ---------- Steps: nomor step pulse santai ---------- */
.step-num {
  display: inline-block;
  animation: stepPulse 3s ease-in-out infinite;
}
.step:nth-child(2) .step-num { animation-delay: 0.4s; }
.step:nth-child(3) .step-num { animation-delay: 0.8s; }
@keyframes stepPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); color: var(--color-signal-blue); }
}