/* ============================================================================
   Musonime Lens — scene search
   Lapisan di atas cinematic.css: memakai token, radius, spasi, dan tipografi
   yang sama. Tanpa gradien dekoratif. Satu aksen brand dipakai hemat.
   ========================================================================== */

/* ── Hero & panel unggah ───────────────────────────────────────────────── */
.lens-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--s-8); align-items:start; }
.lens-hero-copy { display:flex; flex-direction:column; gap:var(--s-6); }
.lens-heading { margin-bottom:0; }
.lens-facts { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s-3); border-top:1px solid var(--line-1); padding-top:var(--s-5); }
.lens-facts li { display:flex; align-items:center; gap:var(--s-3); color:var(--text-2); font-size:var(--small); }
.lens-facts svg { color:var(--brand); width:18px; height:18px; }

.lens-panel { background:var(--ink-1); border:1px solid var(--line-1); border-radius:var(--r-lg); padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-4); }
.lens-dropzone { position:relative; border:1px dashed var(--line-2); border-radius:var(--r); background:var(--ink-0); min-height:280px; display:grid; place-items:center; padding:var(--s-6); text-align:center; transition:border-color .2s var(--ease),background-color .2s var(--ease); overflow:hidden; }
.lens-dropzone:hover { border-color:var(--line-3); }
.lens-dropzone:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.lens-dropzone.is-dragging { border-color:var(--brand); border-style:solid; background:var(--brand-soft); }
.lens-dropzone.is-loading { cursor:progress; }
.lens-dropzone-idle { display:flex; flex-direction:column; align-items:center; gap:var(--s-3); max-width:44ch; }
.lens-dropzone-idle h2 { font-size:var(--heading); }
.lens-dropzone-idle .eyebrow { margin-bottom:0; }
.lens-dropzone-idle p { font-size:var(--small); }
.lens-drop-icon { width:56px; height:56px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:var(--r); color:var(--brand); margin-bottom:var(--s-2); }
.lens-drop-icon svg { width:26px; height:26px; }

.lens-preview { position:relative; margin:0; width:100%; display:flex; flex-direction:column; gap:var(--s-3); }
.lens-preview img { width:100%; max-height:340px; border-radius:var(--r-sm); background:var(--ink-2); object-fit:contain; }
.lens-preview-bar { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
.lens-filename { font-family:'Geist Mono',ui-monospace,monospace; font-size:var(--label); letter-spacing:.06em; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Scanning line saat pencarian berlangsung. */
.lens-scan { position:absolute; inset:0; pointer-events:none; border-radius:var(--r); }
.lens-scan span { position:absolute; left:0; right:0; height:2px; top:0; background:var(--brand); opacity:.85; box-shadow:0 0 18px 2px var(--brand-line); animation:lens-scan 1.6s var(--ease) infinite; }
@keyframes lens-scan { 0% { top:2%; } 50% { top:97%; } 100% { top:2%; } }

.lens-actions { display:flex; flex-wrap:wrap; gap:var(--s-3); }
.lens-actions .button { flex:1 1 auto; justify-content:center; }
.lens-status { font-size:var(--small); color:var(--text-3); min-height:1.2em; margin:0; }
.lens-status.is-error { color:var(--brand); }
.lens-privacy { font-size:var(--small); color:var(--text-3); margin:0; }
.lens-privacy a { color:var(--text-2); text-decoration:underline; text-underline-offset:2px; }
.lens-privacy a:hover { color:var(--brand); }

/* ── Progress & skeleton ───────────────────────────────────────────────── */
.lens-progress { display:flex; flex-direction:column; gap:var(--s-4); }
.lens-progress-bar { height:2px; background:var(--line-1); border-radius:2px; overflow:hidden; }
.lens-progress-bar span { display:block; height:100%; width:38%; background:var(--brand); animation:lens-slide 1.3s var(--ease) infinite; }
@keyframes lens-slide { 0% { transform:translateX(-100%); } 100% { transform:translateX(320%); } }
.lens-skeletons { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); }
.lens-skeletons span { height:150px; border-radius:var(--r); background:var(--ink-1); border:1px solid var(--line-1); animation:lens-pulse 1.4s ease-in-out infinite; }
.lens-skeletons span:nth-child(2) { animation-delay:.15s; }
.lens-skeletons span:nth-child(3) { animation-delay:.3s; }
@keyframes lens-pulse { 0%,100% { opacity:.45; } 50% { opacity:.85; } }
.lens-progress-label { font-family:'Geist Mono',ui-monospace,monospace; font-size:var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }

/* ── Hasil ─────────────────────────────────────────────────────────────── */
.lens-results { list-style:none; margin:var(--s-6) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--s-4); }
.lens-result { display:grid; grid-template-columns:200px minmax(0,1fr); gap:var(--s-5); background:var(--ink-1); border:1px solid var(--line-1); border-radius:var(--r-lg); padding:var(--s-4); transition:border-color .2s var(--ease),background-color .2s var(--ease); }
.lens-result:hover { border-color:var(--line-3); }
.lens-result.is-entering { animation:lens-in .42s var(--ease) both; }
@keyframes lens-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.lens-result-media { position:relative; border-radius:var(--r-sm); overflow:hidden; background:var(--ink-0); aspect-ratio:16/9; }
.lens-result-media img { width:100%; height:100%; object-fit:cover; }
.lens-result-rank { position:absolute; top:0; left:0; background:var(--ink-0); color:var(--text-1); font-family:'Geist Mono',ui-monospace,monospace; font-size:var(--label); padding:2px 8px; border-bottom-right-radius:var(--r-sm); }
.lens-result-body { display:flex; flex-direction:column; gap:var(--s-2); min-width:0; }
.lens-result-eyebrow { font-family:'Geist Mono',ui-monospace,monospace; font-size:var(--label); letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
.lens-result-title { font-size:var(--heading); font-weight:600; color:var(--text-1); }
.lens-result-alt { font-size:var(--small); color:var(--text-3); }
.lens-result-meta { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-1); }
.lens-chip { font-family:'Geist Mono',ui-monospace,monospace; font-size:var(--label); letter-spacing:.04em; color:var(--text-2); border:1px solid var(--line-2); border-radius:var(--r-xs); padding:3px 8px; }
.lens-chip.is-time { color:var(--text-1); }
.lens-chip.is-adult { color:var(--warn); border-color:var(--warn); }
.lens-similarity { display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-2); }
.lens-similarity-track { flex:1 1 auto; height:4px; border-radius:2px; background:var(--line-1); overflow:hidden; }
.lens-similarity-track span { display:block; height:100%; background:var(--brand); }
.lens-similarity-value { font-family:'Geist Mono',ui-monospace,monospace; font-size:var(--label); color:var(--text-2); }
.lens-result-actions { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-3); }
.lens-result-actions .button,.lens-result-actions .secondary-button { font-size:var(--small); padding:8px 14px; }
.lens-local-note { font-size:var(--small); color:var(--text-3); margin-top:var(--s-2); }
.lens-results-actions { display:flex; justify-content:center; margin-top:var(--s-6); }

/* ── Error & langkah ───────────────────────────────────────────────────── */
.lens-error-card { display:flex; gap:var(--s-4); align-items:flex-start; background:var(--ink-1); border:1px solid var(--brand-line); border-radius:var(--r-lg); padding:var(--s-5); }
.lens-error-icon { color:var(--brand); }
.lens-error-icon svg { width:24px; height:24px; }
.lens-error-card h2 { font-size:var(--heading); margin-bottom:var(--s-2); }
.lens-error-card p { margin-bottom:var(--s-4); }
.lens-empty { border-top:1px solid var(--line-1); }
.lens-steps { list-style:none; margin:var(--s-6) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
.lens-steps li { background:var(--ink-1); border:1px solid var(--line-1); border-radius:var(--r-lg); padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-2); }
.lens-step-no { font-family:'Geist Mono',ui-monospace,monospace; font-size:var(--label); color:var(--text-3); }
.lens-step-icon { color:var(--brand); }
.lens-step-icon svg { width:22px; height:22px; }
.lens-steps h3 { font-size:var(--body-lg); }
.lens-steps p { font-size:var(--small); }
.lens-noscript { background:var(--ink-1); border:1px solid var(--line-2); border-radius:var(--r); padding:var(--s-5); }

/* ── Dialog pratinjau ──────────────────────────────────────────────────── */
.lens-dialog { width:min(720px,calc(100vw - 32px)); border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--ink-1); color:var(--text-1); padding:0; }
.lens-dialog::backdrop { background:#000000cc; }
.lens-dialog-body { display:grid; place-items:center; background:var(--ink-0); min-height:200px; }
.lens-dialog-body img,.lens-dialog-body video { width:100%; max-height:60vh; object-fit:contain; background:var(--ink-0); }
.lens-dialog-note { font-size:var(--small); color:var(--text-3); padding:var(--s-3) var(--s-5); margin:0; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:960px) {
  .lens-hero { grid-template-columns:1fr; }
  .lens-steps { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .lens-result { grid-template-columns:1fr; }
  .lens-result-media { max-height:220px; }
  .lens-skeletons { grid-template-columns:1fr; }
  .lens-actions .button,.lens-actions .secondary-button { flex:1 1 100%; justify-content:center; }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  .lens-scan span,
  .lens-progress-bar span,
  .lens-skeletons span,
  .lens-result.is-entering { animation:none !important; }
  .lens-scan span { top:50%; }
  .lens-progress-bar span { width:100%; }
}