/* Upload hub — the single "Upload" entry point that lets the user pick the
   upload type (single / batch / compare). Sits on the site's dark navy theme.
   Animations are deliberately subtle and respect prefers-reduced-motion. */

.uh {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) 20px 88px;
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.uh__hero {
  text-align: center;
  margin-bottom: clamp(34px, 5vh, 58px);
  animation: uh-fade-down 0.6s cubic-bezier(.16, 1, .3, 1) both;
}
.uh__eyebrow {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--pl-orange, #ec641d);
  background: var(--pl-orange-light, rgba(236, 100, 29, 0.12));
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.uh__title {
  font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800;
  line-height: 1.1; color: #f8fafc; margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.uh__title em { color: var(--pl-orange, #ec641d); font-style: normal; }
.uh__subtitle {
  font-size: clamp(0.98rem, 1.6vw, 1.15rem); color: #94a3b8;
  max-width: 580px; margin: 0 auto; line-height: 1.55;
}

/* ── Card grid ──────────────────────────────────────────────────────── */
.uh__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 860px) {
  .uh__grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
}

/* ── Card ───────────────────────────────────────────────────────────── */
.uh-card {
  --accent: var(--pl-orange, #ec641d);
  --accent-glow: var(--pl-orange-glow, rgba(236, 100, 29, 0.35));
  --accent-light: var(--pl-orange-light, rgba(236, 100, 29, 0.12));
  position: relative;
  display: flex; flex-direction: column;
  padding: 30px 26px 26px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1),
              border-color .35s ease, box-shadow .35s ease, background .35s ease;
  animation: uh-rise .6s cubic-bezier(.16, 1, .3, 1) both;
}
.uh-card--single  { --accent: var(--pl-orange, #ec641d); --accent-glow: var(--pl-orange-glow, rgba(236, 100, 29, 0.35)); --accent-light: var(--pl-orange-light, rgba(236, 100, 29, 0.12)); animation-delay: .06s; }
.uh-card--batch   { --accent: var(--pl-blue, #6faddb);   --accent-glow: rgba(111, 173, 219, 0.38); --accent-light: var(--pl-blue-light, rgba(111, 173, 219, 0.12)); animation-delay: .16s; }
.uh-card--compare { --accent: var(--pl-green, #73c485);  --accent-glow: rgba(115, 196, 133, 0.38); --accent-light: var(--pl-green-light, rgba(115, 196, 133, 0.12)); animation-delay: .26s; }

/* Soft accent wash that fades in on hover */
.uh-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 80% at 50% -10%, var(--accent-light), transparent 62%);
  opacity: 0; transition: opacity .35s ease;
}
.uh-card:hover,
.uh-card:focus-visible {
  transform: translateY(-8px);
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 22px 46px -20px var(--accent-glow);
}
.uh-card:hover::before,
.uh-card:focus-visible::before { opacity: 1; }
.uh-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Icon */
.uh-card__icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--accent-light);
  color: var(--accent);
  margin-bottom: 20px;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  /* Gentle always-on accent pulse so the page has visible life at rest.
     box-shadow (not transform) so it never fights the hover scale below. */
  animation: uh-pulse 3s ease-in-out infinite;
}
.uh-card--batch .uh-card__icon { animation-delay: .7s; }
.uh-card--compare .uh-card__icon { animation-delay: 1.4s; }
.uh-card:hover .uh-card__icon { transform: scale(1.1) rotate(-4deg); }
.uh-card__icon svg { width: 28px; height: 28px; }

/* Text */
.uh-card__title {
  font-size: 1.25rem; font-weight: 700; color: #f8fafc;
  margin: 0 0 8px; letter-spacing: -0.01em;
}
.uh-card__desc {
  font-size: 0.9rem; color: #94a3b8; line-height: 1.55; margin: 0 0 18px;
}
.uh-card__features { list-style: none; margin: 0 0 22px; padding: 0; flex: 1 1 auto; }
.uh-card__features li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.82rem; color: #cbd5e1; line-height: 1.4; margin-bottom: 8px;
}
.uh-card__features svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--accent); margin-top: 1px; }

/* CTA */
.uh-card__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9rem; font-weight: 700; color: var(--accent);
  margin-top: auto;
}
.uh-card__cta svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.uh-card:hover .uh-card__cta svg { transform: translateX(5px); }

/* "Sign in" pill on the auth-gated cards when logged out */
.uh-card__lock {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: #94a3b8; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 4px 9px;
}
.uh-card__lock svg { width: 11px; height: 11px; }

/* ── Keyframes ──────────────────────────────────────────────────────── */
@keyframes uh-rise {
  from { opacity: 0; transform: translateY(30px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes uh-fade-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes uh-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  50%      { box-shadow: 0 0 20px -2px var(--accent-glow); }
}
@media (prefers-reduced-motion: reduce) {
  .uh__hero, .uh-card, .uh-card__icon { animation: none; }
  .uh-card, .uh-card__icon, .uh-card__cta svg { transition: none; }
}