/* site.css — keyframes and overrides that Tailwind CDN can't express inline. */

:root {
  --color-paper: #F7F7F5;
  --color-forest: #1A3C2B;
  --color-grid: #3A3A38;
  --color-coral: #FF8C69;
  --color-mint: #9EFFBF;
  --color-gold: #F4D35E;
}

body {
  background-color: var(--color-paper);
  color: var(--color-forest);
  font-family: 'Inter', system-ui, sans-serif;
}

.font-header { font-family: 'Space Grotesk', sans-serif; }
.font-mono   { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* pre-hydration: hide text-only elements to avoid flash of placeholders */
body:not(.is-hydrated) [data-key],
body:not(.is-hydrated) [data-key-list] {
  visibility: hidden;
}

@keyframes fw-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes fw-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.animate-spin-slow          { animation: fw-spin 60s linear infinite; }
.animate-spin-slow-reverse  { animation: fw-spin 40s linear infinite reverse; }
.animate-pulse-soft         { animation: fw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* language button active state */
[data-lang-button].is-active {
  color: var(--color-forest);
  background: var(--color-mint);
}
[data-lang-button] {
  color: rgba(26, 60, 43, 0.55);
  transition: color 120ms, background 120ms;
}
[data-lang-button]:hover {
  color: var(--color-forest);
}

::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: var(--color-paper); }
::-webkit-scrollbar-thumb  { background: var(--color-grid); opacity: 0.2; }

/* Honeypot: hidden from humans, visible to dumb bots. */
.fw-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Expertise bullet dots */
.expertise-bullets-light li,
.expertise-bullets-dark li {
  position: relative;
  padding-left: 1.25rem;
}
.expertise-bullets-light li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--color-mint);
}
.expertise-bullets-dark li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--color-coral);
}

/* Contact status messages */
#contact-status.is-ok    { color: var(--color-forest); }
#contact-status.is-error { color: var(--color-coral); }