/* BountyOS polish layer (2026-10-03): loaded AFTER styles.css/bountyos.css.
   Visual fixes + restrained motion. Everything animated is disabled under
   prefers-reduced-motion. Remove the <link> to roll the whole layer back. */

html { scroll-behavior: smooth; }

/* ---------- Navigation: no wrapping, breathing room, no duplicate CTA ---------- */
.bo-nav-brand { max-width: 1360px; padding-left: 20px; padding-right: 20px; gap: 24px; }
.bo-nav-brand .brand { flex-shrink: 0; margin-right: 8px; }
.bo-nav-brand .menu { gap: 4px 6px; align-items: center; flex-wrap: nowrap; }
.bo-nav-brand .menu a { white-space: nowrap; font-size: .9rem; padding: 8px 10px; border-radius: 8px; position: relative; }
.bo-nav-brand .menu a:not(.btn)::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--neon-blue, #38bdf8), var(--neon-purple, #a855f7));
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.bo-nav-brand .menu a:not(.btn):hover::after { transform: scaleX(1); }
.bo-nav-brand .menu a.btn { padding: 10px 18px; margin-left: 8px; white-space: nowrap; }
nav.glass { transition: background .3s ease, box-shadow .3s ease; }
nav.glass.bo-scrolled { background: rgba(8, 12, 22, .88); box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }

/* ---------- Background glow: softer so text stays the hero ---------- */
.aurora-bg .blob { opacity: .32; filter: blur(110px); }
.aurora-bg .blob-3 { opacity: .18; }

/* ---------- Hero ---------- */
.bo-hero .h1 {
  background: linear-gradient(100deg, #e2e8f0 0%, #ffffff 35%, #7dd3fc 60%, #86efac 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: bo-shine 8s ease-in-out infinite alternate;
  letter-spacing: -.02em;
}
@keyframes bo-shine { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

.hero-badge { animation: bo-fade-up .6s ease both; }
.bo-hero > p.lead { animation: bo-fade-up .6s .08s ease both; }
.bo-platforms, .bo-integrations { animation: bo-fade-up .6s .16s ease both; }
.bo-hero > div[style*="display:flex"] { animation: bo-fade-up .6s .24s ease both; }
@keyframes bo-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* terminal-style scanner line: prompt + blinking cursor, compact */
#bo-scanner-anim {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .85rem; color: #86efac; text-align: left;
  max-width: 560px; margin: 28px auto 0; padding: 14px 18px; min-height: 0;
  border: 1px solid rgba(0, 255, 157, .25); border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 255, 157, .06), rgba(0, 0, 0, .35));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 10px 40px rgba(0, 255, 157, .06);
}
#bo-scanner-anim::before { content: '$ '; color: #38bdf8; }
#bo-scanner-anim::after { content: '▍'; margin-left: 2px; color: #86efac; animation: bo-blink 1s steps(1) infinite; }
@keyframes bo-blink { 50% { opacity: 0; } }

.bo-score-demo { min-height: 0; transition: border-color .3s ease, box-shadow .3s ease; }
.bo-score-demo:hover { border-color: rgba(0, 255, 157, .5); box-shadow: 0 10px 40px rgba(0, 255, 157, .1); }

/* ---------- Cards: consistent depth + hover lift ---------- */
.bo-metric, .bo-pricing-card, .bento-card, .bo-faq-item, .bo-platform-badge {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.bo-metric:hover, .bo-pricing-card:hover { transform: translateY(-4px); border-color: rgba(0, 255, 157, .45); box-shadow: 0 14px 40px rgba(0, 0, 0, .35), 0 0 30px rgba(0, 255, 157, .08); }
.bo-pricing-card { position: relative; }
.bo-pricing-card.annual { animation: bo-pulse-glow 4s ease-in-out infinite; }
@keyframes bo-pulse-glow { 0%, 100% { box-shadow: 0 0 22px rgba(0, 255, 157, .10); } 50% { box-shadow: 0 0 46px rgba(0, 255, 157, .28); } }
.bo-pricing-save { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #04110b; background: linear-gradient(90deg, #00ff9d, #7dd3fc); }

/* ---------- Buttons ---------- */
.btn { transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary.glow { position: relative; overflow: hidden; }
.btn.primary.glow::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); animation: bo-sheen 4.5s ease-in-out infinite;
}
@keyframes bo-sheen { 0%, 60% { left: -80%; } 100% { left: 140%; } }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }

/* ---------- Scroll reveal for sections (added by bountyos-polish.js) ---------- */
.bo-rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.bo-rv.bo-in { opacity: 1; transform: none; }
.bo-rv-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.bo-rv-stagger.bo-in > * { opacity: 1; transform: none; }
.bo-rv-stagger.bo-in > *:nth-child(2) { transition-delay: .08s; }
.bo-rv-stagger.bo-in > *:nth-child(3) { transition-delay: .16s; }
.bo-rv-stagger.bo-in > *:nth-child(4) { transition-delay: .24s; }
.bo-rv-stagger.bo-in > *:nth-child(5) { transition-delay: .32s; }

/* live dots, wallet and dashboard polish */
.bo-live-dot { box-shadow: 0 0 0 0 rgba(0, 255, 157, .6); animation: bo-pulse 1.5s ease infinite, bo-ring 2s ease-out infinite; }
@keyframes bo-ring { to { box-shadow: 0 0 0 10px rgba(0, 255, 157, 0); } }
.bo-table tbody tr { transition: background .2s ease; }
.bo-table tbody tr:hover { background: rgba(0, 255, 157, .05); }
.bo-tabs button { transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.bo-tabs button:hover { transform: translateY(-1px); }
.bo-tabs button.active { box-shadow: 0 0 18px rgba(0, 255, 157, .18); }
#wallet-box { transition: box-shadow .3s ease; }
#wallet-box:hover { box-shadow: 0 10px 40px rgba(0, 255, 157, .08); }
#wallet-balance { background: linear-gradient(135deg, #86efac, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .bo-nav-brand .menu { flex-wrap: wrap; }
  .bo-nav-brand .menu a { white-space: normal; }
  .bo-metrics { grid-template-columns: 1fr; }
  .bo-hero { padding-top: 96px; }
  #bo-scanner-anim { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bo-rv, .bo-rv-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- App header on small screens: brand and user chip must not collide ---------- */
.bo-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
@media (max-width: 640px) {
  nav.glass .nav-inner { gap: 8px; padding-left: 12px; padding-right: 12px; }
  nav.glass .brand-text { font-size: 1rem; }
  .bo-user { max-width: 58%; flex-shrink: 1; }
  .bo-user span, .bo-user a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
  .bo-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; }
  .bo-tabs::-webkit-scrollbar { display: none; }
  .bo-tabs button { flex: 0 0 auto; }
  #wallet-box { padding: 12px !important; }
}

/* ---------- Fade the dashboard cards in on load ---------- */
.bento-card, .bo-notice { animation: bo-fade-up .5s ease both; }