/* Shared by the portfolio (/) and the saadb.me recreation (/recreation/). */
:root {
  --bg: hsl(13 53% 3%);
  --fg: 40 28% 75%; /* hsl(var(--fg) / alpha) */
  --accent: 11 99% 50%;
  --row-hover: #100a08;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: hsl(var(--fg));
  font: 16px/1.625 var(--sans);
}

h1, h2, h3, p, ul { margin: 0; }
a { color: inherit; text-decoration: none; }
button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
svg { display: block; flex-shrink: 0; }
:focus-visible { outline: 1px solid hsl(var(--fg) / .5); outline-offset: 2px; border-radius: 4px; }

/* Blur-in on first paint: opacity 0, 6px down, 6px blur → ease-out. */
@keyframes reveal {
  from { opacity: 0; transform: translateY(6px); filter: blur(6px); }
}
.reveal { animation: reveal var(--duration, 1.2s) ease-out var(--delay, 0s) backwards; }

/* Rotating title badge; JS springs its width (see motion.js). */
.role {
  display: inline-flex;
  overflow: hidden;
  padding: 2px 8px;
  border-radius: 4px;
  background: hsl(var(--fg) / .04);
  color: hsl(var(--fg) / .4);
  font-size: 11px;
  white-space: nowrap;
}
.role > span { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
}