/* ============================================================
   Justin Horn — entity home
   Flagship effects (just two, done properly):
   1. Aurora hero — an animated conic-gradient ring + drifting
      mesh-gradient aurora, driven by a registered @property.
   2. Scroll-driven reveal + pointer spotlight on cards —
      cards rise/blur-in on `animation-timeline: view()` and
      carry a cursor-tracked highlight with a gradient border.
   Both are progressively enhanced: content is fully visible
   without them, and both switch off for reduced motion.
   ============================================================ */

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --bg: #fbfbfd;
  --fg: #14161c;
  --muted: #5b6270;
  --accent: #4f46e5;
  --accent-2: #0891b2;
  --accent-3: #c026d3;
  --card: #ffffff;
  --border: #e3e6ee;
  --glow: rgb(79 70 229 / .16);
  --maxw: 1060px;
  --radius: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07080d;
    --fg: #edf0f7;
    --muted: #9aa4b8;
    --accent: #818cf8;
    --accent-2: #22d3ee;
    --accent-3: #e879f9;
    --card: #0e1119;
    --border: #232838;
    --glow: rgb(129 140 248 / .22);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #07080d;
  --fg: #edf0f7;
  --muted: #9aa4b8;
  --accent: #818cf8;
  --accent-2: #22d3ee;
  --accent-3: #e879f9;
  --card: #0e1119;
  --border: #232838;
  --glow: rgb(129 140 248 / .22);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  padding: 0 20px;
  overflow-x: hidden;
}

/* Ambient page background: faint blueprint grid, fading out radially */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 75%);
}

::selection { background: var(--accent); color: #fff; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, .links a:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 64px 0 80px; }

/* ---------- Effect 1: aurora hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  padding: 44px 36px;
  margin-bottom: 40px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 8px);
  background: color-mix(in srgb, var(--card) 68%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 24px 60px -24px var(--glow), 0 2px 8px rgb(0 0 0 / .04);
  overflow: hidden;
}
/* Drifting aurora blobs behind the glass */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
}
.hero::before {
  width: 420px; height: 420px;
  top: -180px; right: -60px;
  background: radial-gradient(circle at 35% 35%,
    color-mix(in oklch, var(--accent) 65%, transparent),
    color-mix(in oklch, var(--accent-2) 45%, transparent) 55%,
    transparent 72%);
  animation: aurora-drift 16s ease-in-out infinite alternate;
}
.hero::after {
  width: 340px; height: 340px;
  bottom: -190px; left: 12%;
  background: radial-gradient(circle at 60% 40%,
    color-mix(in oklch, var(--accent-3) 50%, transparent),
    color-mix(in oklch, var(--accent) 35%, transparent) 55%,
    transparent 72%);
  animation: aurora-drift 20s ease-in-out infinite alternate-reverse;
}
@keyframes aurora-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-46px, 30px, 0) scale(1.18); }
}

/* Rotating conic ring around the avatar */
.avatar-ring {
  flex: none;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from var(--angle),
    var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  animation: ring-spin 7s linear infinite;
  box-shadow: 0 10px 34px -8px var(--glow);
}
@keyframes ring-spin { to { --angle: 360deg; } }
.hero img.avatar {
  display: block;
  width: 112px; height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg);
  background: var(--card);
}

h1 {
  font-size: clamp(2.3rem, 6vw, 3.4rem);
  line-height: 1.05;
  margin: 0 0 8px;
  letter-spacing: -0.035em;
  background: linear-gradient(100deg,
    var(--fg) 30%,
    color-mix(in oklch, var(--accent) 85%, var(--fg)) 62%,
    color-mix(in oklch, var(--accent-2) 85%, var(--fg)) 88%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.tagline { color: var(--muted); font-size: 1.08rem; margin: 0; max-width: 34em; }
.tagline strong { color: var(--fg); font-weight: 600; }

/* Expertise chips — visual mirror of the JSON-LD knowsAbout list */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.chips li {
  font-size: .82rem;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 60%, transparent);
}

/* ---------- Layout: content + entity panel ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: start;
}
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .hero { padding: 32px 24px; }
}

/* "At a glance" — a knowledge-panel-style fact card, facts as in JSON-LD */
.entity-card {
  position: sticky;
  top: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 8px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 18px 44px -20px var(--glow);
}
@media (max-width: 820px) { .entity-card { position: static; } }
.entity-card h2 {
  margin: 0 0 14px;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.entity-card dl { margin: 0; }
.entity-card .fact {
  padding: 10px 0 12px;
  border-top: 1px solid var(--border);
}
.entity-card dt {
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.entity-card dd { margin: 0; font-size: .95rem; line-height: 1.45; }

h2 {
  font-size: 1.3rem;
  margin: 42px 0 12px;
  letter-spacing: -0.015em;
}
.content > h2:first-child { margin-top: 6px; }
p { margin: 0 0 16px; }
.content ul { margin: 0 0 16px; padding-left: 1.2em; }
.content ul li { margin-bottom: 8px; }

/* ---------- Effect 2: scroll reveal + spotlight cards ---------- */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 14px 0;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              border-color .35s, box-shadow .35s;
}
/* Cursor-tracked spotlight (position fed by a few lines of JS) */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in oklch, var(--accent) 14%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 18px 40px -18px var(--glow), 0 4px 14px rgb(0 0 0 / .05);
}
.card:hover::before { opacity: 1; }
.card h3 { margin: 0 0 4px; font-size: 1.06rem; letter-spacing: -0.01em; }
.card .meta { color: var(--muted); font-size: .9rem; margin: 0 0 8px; }
.card p:last-child { margin-bottom: 0; }

/* Rise + de-blur as cards scroll into view; no-JS / older engines
   simply show them, because the hidden state only exists in here. */
@supports (animation-timeline: view()) {
  .reveal {
    animation: card-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 65%;
  }
  @keyframes card-in {
    from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }
}

/* ---------- Elsewhere / footer ---------- */
.links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.links a {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .92rem;
  color: var(--fg);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1),
              border-color .25s, color .25s, box-shadow .25s;
}
.links a:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px var(--glow);
}

footer {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .88rem;
}
footer p { margin: 0 0 6px; }
.kg { font-size: .8rem; }

/* Reduced motion: both flagship effects off, everything readable */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { animation: none; }
  .card:hover, .links a:hover { transform: none; }
}