/* Use-case pages (use/*.html): the hero demo. One Prow card: a link goes in, ranked vertical clips come out.
   Reuses site.css tokens and the homepage hero's .rclip / .score. Rest state (no JS, reduced motion) = finished result. */
.uc { position: relative; padding: 14px; border-radius: 28px; background: linear-gradient(180deg, #171717 0%, #0f0f0f 100%); box-shadow: inset 0 0 0 1px var(--border), 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 90px -30px rgba(255, 143, 180, 0.25); }

/* the link field, same shape as the homepage waitlist input */
.uc-bar { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 7px 0 16px; overflow: hidden; border-radius: 999px; background: var(--fill-4); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow 250ms var(--ease-out-soft); }
.uc[data-phase="scan"] .uc-bar { box-shadow: inset 0 0 0 1px var(--border-accent); }
.uc-ic { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.uc-url { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; font-size: 15px; white-space: nowrap; color: var(--text-1); }
.uc-typed { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.uc-ph { position: absolute; inset: 0 0 0 0; display: none; align-items: center; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); }
.uc-url.empty .uc-ph { display: flex; }
.uc-caret { display: none; flex: none; width: 2px; height: 19px; margin-left: 1px; border-radius: 1px; background: var(--accent); }
.uc[data-phase="type"] .uc-caret { display: block; animation: uc-blink 1s steps(1) infinite; }
.uc[data-phase="type"] .uc-url.empty .uc-caret { position: relative; z-index: 1; }
@keyframes uc-blink { 50% { opacity: 0; } }
.uc-go { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--accent); color: #0a0a0a; box-shadow: 0 6px 18px -6px rgba(255, 143, 180, 0.6); transition: transform 200ms var(--ease-swift), background 200ms; }
.uc-go svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.uc[data-phase="type"] .uc-go { background: var(--fill-2); color: var(--text-3); box-shadow: none; }
.uc[data-phase="type"].ready .uc-go { background: var(--accent); color: #0a0a0a; }
.uc[data-phase="scan"] .uc-go { transform: scale(0.94); }
.uc[data-phase="scan"] .uc-go svg { display: none; }
.uc[data-phase="scan"] .uc-go::after { content: ""; width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(10, 10, 10, 0.25); border-top-color: #0a0a0a; animation: uc-spin 700ms linear infinite; }
@keyframes uc-spin { to { transform: rotate(360deg); } }
.uc-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); box-shadow: 0 0 10px rgba(255, 143, 180, 0.8); opacity: 0; }
.uc[data-phase="scan"] .uc-prog { opacity: 1; width: 100%; transition: width 1900ms cubic-bezier(0.4, 0, 0.2, 1); }

/* result header: clip count + sort */
.uc-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 4px 14px; font-size: 14.5px; color: var(--text-2); transition: opacity 250ms; }
.uc-meta b { color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.uc[data-phase="type"] .uc-meta { opacity: 0; }
.uc-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--fill-4); box-shadow: inset 0 0 0 1px var(--border); font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.uc-best { display: inline-flex; align-items: center; gap: 5px; }
.uc-best svg { width: 13px; height: 13px; fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.uc-scoring { display: none; }
.uc[data-phase="scan"] .uc-best, .uc[data-phase="type"] .uc-best { display: none; }
.uc[data-phase="scan"] .uc-scoring, .uc[data-phase="type"] .uc-scoring { display: inline; }

/* ranked clips: three in full, the fourth peeks to say there are more */
.uc-clips { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 3.35); gap: 12px; margin: 0; padding: 0; list-style: none; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 86%, transparent); mask-image: linear-gradient(to right, #000 86%, transparent); }
.uc-clips li { min-width: 0; }
.uc .rclip { width: 100%; border-radius: 14px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.uc .uc-clips li:first-child:not(.wait) .rclip { box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6), 0 0 0 1.5px rgba(255, 143, 180, 0.75), 0 0 28px -6px rgba(255, 143, 180, 0.45); }
.uc .rclip video { transition: opacity 500ms var(--ease-out-soft), filter 600ms var(--ease-out-soft), transform 600ms var(--ease-out-soft); }
.uc .rclip .badge { transition: opacity 300ms var(--ease-out-soft), transform 400ms var(--ease-swift); }
.uc .rclip .score { font-size: clamp(11px, 8cqw, 17px); }
/* waiting for its turn: a shimmering placeholder in the same 9:16 slot */
.uc-clips li.wait .rclip { background: linear-gradient(110deg, #141414 30%, #222 50%, #141414 70%) 0 0 / 250% 100%; animation: uc-shimmer 1.4s linear infinite; }
.uc-clips li.wait .rclip video { opacity: 0.12; filter: blur(10px) saturate(0.4); transform: scale(1.06); }
.uc-clips li.wait .rclip .badge { opacity: 0; transform: translateY(-4px) scale(0.9); }
@keyframes uc-shimmer { to { background-position: -150% 0; } }

@media (max-width: 640px) {
  .uc { padding: 10px; border-radius: 24px; }
  .uc-bar { height: 46px; gap: 8px; padding-left: 14px; padding-right: 5px; }
  .uc-url { font-size: 14px; }
  .uc-go { width: 36px; height: 36px; }
  .uc-meta { margin: 14px 4px 12px; font-size: 14px; }
  .uc-clips { gap: 8px; grid-auto-columns: calc((100% - 24px) / 3.3); }
  .uc .rclip { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .uc *, .uc *::before, .uc *::after { animation: none !important; transition: none !important; }
}