@import url("harbor.css");

/**
 * Warble 5-Domain Ecosystem Theme Tokens & Milvus.io-Inspired Button Cards
 * Domains:
 *  - [data-domain="warbleoss.org"]   : Open-Source Capability Showcase
 *  - [data-domain="warblecloud.xyz"] : Ecosystem & Marketplace Index
 *  - [data-domain="warblecloud.com"] : Enterprise Advisory, Stripe Financing & Self-Healing Regime
 *  - [data-domain="warblecloud.ai"]  : Reflexion AI + Warble Brain Core
 *  - [data-domain="warblelabs.io"]   : High-Velocity Research & Continuous Learning Lab
 */

:root {
  --wc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --wc-font-display: var(--harbor-font-display);
  --wc-font-mono: 'JetBrains Mono', monospace;
  --wc-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Every domain uses Harbor. Domain attributes stay so existing markup keeps working. */
:root,
[data-domain="warblelabs.io"],
[data-domain="warbleoss.org"],
[data-domain="warblecloud.xyz"],
[data-domain="warblecloud.com"],
[data-domain="warblecloud.ai"] {
  --wc-bg: var(--harbor-ink);
  --wc-surface: var(--harbor-raised);
  --wc-surface-hover: #24302b;
  --wc-text: var(--harbor-text-ink);
  --wc-text-muted: var(--harbor-muted-ink);
  --wc-accent: var(--harbor-copper-bright);
  --wc-accent-secondary: var(--harbor-ready-on-ink);
  --wc-border: var(--harbor-line-ink);
  --wc-font-display: var(--harbor-font-display);
}

/* Milvus.io-Inspired Interactive Button Cards */
.wc-bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 1.25rem;
}

.wc-btn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.6rem;
  border-radius: 14px;
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  color: var(--wc-text);
  text-decoration: none;
  transition: transform 220ms var(--wc-ease), box-shadow 220ms var(--wc-ease), border-color 220ms var(--wc-ease), background 220ms var(--wc-ease);
  overflow: hidden;
  cursor: pointer;
}

.wc-btn-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px circle at top right, rgba(154, 78, 36, 0.16), transparent 55%);
  opacity: 0;
  transition: opacity 220ms var(--wc-ease);
  pointer-events: none;
}

.wc-btn-card:hover {
  transform: translateY(-4px);
  background: var(--wc-surface-hover);
  border-color: var(--wc-accent);
  box-shadow: 0 16px 36px -12px rgba(154, 78, 36, 0.28);
}

.wc-btn-card:hover::before {
  opacity: 1;
}

.wc-btn-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  font-family: var(--wc-font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(154, 78, 36, 0.16);
  color: var(--wc-accent);
  border: 1px solid var(--wc-border);
  margin-bottom: 0.9rem;
}

.wc-btn-card__title {
  font-family: var(--wc-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

.wc-btn-card__desc {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--wc-text-muted);
  margin: 0 0 1.25rem 0;
}

.wc-btn-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--wc-font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--wc-accent);
}

.wc-btn-card__arrow {
  display: inline-block;
  transition: transform 200ms var(--wc-ease);
}

.wc-btn-card:hover .wc-btn-card__arrow {
  transform: translate(4px, -2px);
}