/* Small custom layer on top of Tailwind (CDN). */
:root {
  --brand: #00203F;
  --brand-dark: #001528;
}
.brand-bg { background-color: var(--brand); }
.brand-text { color: var(--brand); }
.brand-border { border-color: var(--brand); }
.btn-brand {
  background-color: var(--brand);
  color: #fff;
}
.btn-brand:hover { background-color: var(--brand-dark); }

/* ---------------------------------------------------------------------------
   Landing-page animations
   --------------------------------------------------------------------------- */
:root { --brand-rgb: 0, 32, 63; }

/* Scroll-reveal: elements start hidden/translated, .in-view (added by an
   IntersectionObserver) animates them into place. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .anim, .bid-row, .float-blob { animation: none !important; }
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.anim-fade-up { animation: fadeInUp .7s ease both; }

@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.float-blob { animation: floatY 6s ease-in-out infinite; }

/* Hero gradient + soft moving glow */
.hero-grad {
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(var(--brand-rgb), .18), transparent 60%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

/* Bidding demo: bid rows fly in one by one; the winning row pulses. */
.bid-row { opacity: 0; transform: translateX(18px); }
.bid-demo.run .bid-row { animation: bidIn .5s ease forwards; }
.bid-demo.run .bid-row:nth-child(1) { animation-delay: .3s; }
.bid-demo.run .bid-row:nth-child(2) { animation-delay: 1.1s; }
.bid-demo.run .bid-row:nth-child(3) { animation-delay: 1.9s; }
@keyframes bidIn { to { opacity: 1; transform: none; } }

.bid-winner { box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
.bid-demo.run .bid-winner { animation: winnerPulse 1.6s ease-in-out 2.7s infinite; }
@keyframes winnerPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
  50%     { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
}

/* Blurred amount that "unblinds" after hiring */
.blind { filter: blur(6px); transition: filter .5s ease; }
.bid-demo.run .blind { animation: unblind .4s ease forwards 2.6s; }
@keyframes unblind { to { filter: blur(0); } }

/* Live "ping" dot */
.ping-dot { position: relative; }
.ping-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: currentColor; opacity: .7; animation: pingScale 1.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes pingScale { 75%,100% { transform: scale(2.2); opacity: 0; } }

/* Count-up stat numbers get a subtle entrance */
.stat-num { transition: transform .5s ease; }
.reveal.in-view .stat-num { transform: scale(1); }

/* Card hover lift */
.lift { transition: transform .25s ease, box-shadow .25s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.10); }

/* Inbox: single-pane on mobile. On phones show the conversation list OR the
   chat thread (toggled by the .showing-chat class on the grid container). On
   md+ both panes show side by side. */
.chat-pane { display: flex; }
@media (max-width: 767px) {
  .inbox-grid .chat-pane { display: none; }
  .inbox-grid.showing-chat .convos-pane { display: none; }
  .inbox-grid.showing-chat .chat-pane { display: flex; }
}

/* Status pills */
.pill { display: inline-block; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
.pill-pending_payment { background:#fef3c7; color:#92400e; }
.pill-open        { background:#dbeafe; color:#1e40af; }
.pill-hired       { background:#ede9fe; color:#5b21b6; }
.pill-active      { background:#dbeafe; color:#1e40af; }
.pill-rejected    { background:#fee2e2; color:#991b1b; }
.pill-withdrawn   { background:#e5e7eb; color:#374151; }
.pill-requested   { background:#e5e7eb; color:#374151; }
.pill-scheduled   { background:#dbeafe; color:#1e40af; }
.pill-en_route    { background:#fef3c7; color:#92400e; }
.pill-in_progress { background:#ede9fe; color:#5b21b6; }
.pill-completed   { background:#dcfce7; color:#166534; }
.pill-cancelled   { background:#fee2e2; color:#991b1b; }
.pill-paid        { background:#dcfce7; color:#166534; }
.pill-unpaid      { background:#fee2e2; color:#991b1b; }
.pill-partial     { background:#fef3c7; color:#92400e; }
.pill-draft       { background:#e5e7eb; color:#374151; }
.pill-sent        { background:#dbeafe; color:#1e40af; }
.pill-approved    { background:#dcfce7; color:#166534; }
.pill-declined    { background:#fee2e2; color:#991b1b; }