/* ==========================================================================
   site.css — shared design system (tokens, reset, background, shared parts)
   Loaded on every page before the page-specific stylesheet.
   ========================================================================== */

/* -------------------------------- Tokens -------------------------------- */
:root {
  /* Surfaces */
  --bg-0: #07070b;
  --bg-1: #0b0b12;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --text: #f3f3f7;
  --muted: #9a9aa8;
  --faint: #62626e;

  /* Brand */
  --accent: #a855f7;
  --accent-soft: #7c3aed;
  --cyan: #22d3ee;

  /* Signal */
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;

  /* Rhythm */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 160ms;
  --slow: 380ms;

  /* Type */
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;

  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--bg-0);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin: 0;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* ------------------------------ Background ------------------------------
   Two fixed layers: slowly drifting colour fields, and a grain overlay that
   keeps the large flat areas from banding. Both are inert to pointer events.
   ------------------------------------------------------------------------ */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: -1;
}

body::before {
  background:
    radial-gradient(42rem 42rem at 12% 6%, rgba(124, 58, 237, 0.26), transparent 60%),
    radial-gradient(38rem 38rem at 88% 14%, rgba(34, 211, 238, 0.12), transparent 62%),
    radial-gradient(46rem 46rem at 50% 104%, rgba(168, 85, 247, 0.16), transparent 65%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 70%);
  animation: drift 26s var(--ease) infinite alternate;
}

body::after {
  /* Fine film grain (inline SVG noise — no network request) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-2.5%, 2%, 0) scale(1.08);
  }
}

/* ------------------------------- Entrance -------------------------------
   Content settles in on load, staggered via --i on each element.
   ------------------------------------------------------------------------ */
.rise {
  animation: rise 700ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------- Avatar --------------------------------- */
.avatar {
  position: relative;
  width: var(--avatar-size, 6rem);
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(140deg, var(--cyan), var(--accent) 55%, var(--accent-soft));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 18px 40px -18px rgba(124, 58, 237, 0.75);
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-1);
}

/* -------------------------------- Footer --------------------------------- */
.footer {
  font-size: 0.8125rem;
  color: var(--faint);
}

.footer a {
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.footer a:hover {
  color: var(--text);
  border-bottom-color: var(--border-strong);
}

/* ------------------------------ Screen reader ---------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}