/* ── Claw Site ── */
:root {
  color-scheme: dark;
  --c-sky: 56, 189, 248;
  --c-pink: 236, 72, 153;
  --c-emerald: 34, 197, 94;
}

/* ── Ambient background ── */
.gridfade {
  background-image:
    radial-gradient(1000px 500px at 20% -10%, rgba(var(--c-sky), .28), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(var(--c-pink), .24), transparent 55%),
    radial-gradient(800px 450px at 40% 110%, rgba(var(--c-emerald), .2), transparent 55%);
}

/* ── Hero gradient text ── */
.hero-gradient {
  background: linear-gradient(135deg, #e2e8f0 0%, #38bdf8 25%, #f472b6 50%, #34d399 75%, #e2e8f0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glass card ── */
.glow {
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.4);
}

/* ── Agent emoji badge ── */
.agent-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.agent-badge--sky { background: rgba(var(--c-sky), .1); border: 1px solid rgba(var(--c-sky), .15); }
.agent-badge--pink { background: rgba(var(--c-pink), .1); border: 1px solid rgba(var(--c-pink), .15); }
.agent-badge--emerald { background: rgba(var(--c-emerald), .1); border: 1px solid rgba(var(--c-emerald), .15); }

/* ── Agent cards ── */
.agent-card {
  transition: box-shadow 300ms ease, border-color 300ms ease, transform 300ms ease;
  animation: fadeUp 0.6s ease-out both;
}
.agent-card:nth-of-type(2) { animation-delay: 0.15s; }
.agent-card:nth-of-type(3) { animation-delay: 0.3s; }

.agent-card--sky:hover {
  box-shadow:
    0 0 0 1px rgba(var(--c-sky), .25),
    0 16px 48px rgba(var(--c-sky), .14),
    0 0 100px rgba(var(--c-sky), .06);
  border-color: rgba(var(--c-sky), .45);
  transform: translateY(-2px);
}
.agent-card--pink:hover {
  box-shadow:
    0 0 0 1px rgba(var(--c-pink), .25),
    0 16px 48px rgba(var(--c-pink), .14),
    0 0 100px rgba(var(--c-pink), .06);
  border-color: rgba(var(--c-pink), .45);
  transform: translateY(-2px);
}
.agent-card--emerald:hover {
  box-shadow:
    0 0 0 1px rgba(var(--c-emerald), .25),
    0 16px 48px rgba(var(--c-emerald), .14),
    0 0 100px rgba(var(--c-emerald), .06);
  border-color: rgba(var(--c-emerald), .45);
  transform: translateY(-2px);
}

/* ── Agent blockquotes ── */
.agent-card blockquote {
  transition: border-color 200ms ease, background-color 200ms ease;
}
.agent-quote--sky {
  background: rgba(var(--c-sky), .06);
  border-radius: 0 0.5rem 0.5rem 0;
}
.agent-quote--pink {
  background: rgba(var(--c-pink), .06);
  border-radius: 0 0.5rem 0.5rem 0;
}
.agent-quote--emerald {
  background: rgba(var(--c-emerald), .06);
  border-radius: 0 0.5rem 0.5rem 0;
}
.agent-card--sky:hover blockquote { border-color: rgba(var(--c-sky), .6); background: rgba(var(--c-sky), .1); }
.agent-card--pink:hover blockquote { border-color: rgba(var(--c-pink), .6); background: rgba(var(--c-pink), .1); }
.agent-card--emerald:hover blockquote { border-color: rgba(var(--c-emerald), .6); background: rgba(var(--c-emerald), .1); }

/* ── Section heading accent bar ── */
.section-bar {
  height: 2px;
  width: 2rem;
  border-radius: 1px;
  margin-top: 0.75rem;
}

/* ── Blinking cursor for unnamed ── */
.cursor-blink::after {
  content: '▎';
  animation: blink 1.1s step-end infinite;
  margin-left: 1px;
  color: rgba(var(--c-pink), .5);
}

/* ── Principle cards ── */
.principle-card {
  position: relative;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.principle-card:hover {
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.principle-num {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.05;
  user-select: none;
}

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── A11y: visible focus + skip link ── */
:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.9);
  outline-offset: 3px;
}
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 50;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background: rgba(2, 6, 23, 0.95);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(226, 232, 240, 1);
  transform: translateY(-200%);
  transition: transform 120ms ease;
}
.skip-link:focus { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}