/* three-d.css — styles for avatar3d.js and field3d.js */

/* ambient background sits behind the page content */
.field3d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.wrapper { position: relative; z-index: 1; }
header { z-index: 2; }

/* 3D avatar */
.avatar3d { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 auto 14px; }
.avatar3d canvas {
  display: block; width: 190px; max-width: 100%; aspect-ratio: 1; border-radius: 50%;
  cursor: grab; touch-action: none; background: #1a2027;
  box-shadow: var(--surface-shadow), 0 0 0 3px var(--accent-muted);
}
.avatar3d canvas:active { cursor: grabbing; }
.avatar3d-hint { font-size: 11px; opacity: .6; letter-spacing: .02em; }
@media (max-width: 960px) { .avatar3d canvas { width: 160px; } }

/* livelier social icons */
.social-icons a { display: inline-block; }
.social-icons a:hover { transform: translateY(-3px) rotate(-6deg); color: var(--accent) !important; }

@media (prefers-reduced-motion: reduce) {
  .social-icons a { transition: none !important; transform: none !important; }
}

/* ---------- section components (sections3d.js + index.md markup) ---------- */
:root { --panel: rgba(0, 0, 0, .025); --line: rgba(0, 0, 0, .09); --muted-text: #6b7280; }
@media (prefers-color-scheme: dark) { :root { --panel: rgba(255, 255, 255, .035); --line: rgba(255, 255, 255, .09); --muted-text: #9aa3b2; } }

.lede { font-size: 1.25rem; line-height: 1.45; font-weight: 500; letter-spacing: -.01em; margin: 0 0 .9rem; max-width: 34ch; }
.lede span { color: var(--accent); }

/* Research interests with live glyphs */
.interests { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 0 0 1rem; }
.interest { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 0; transition: border-color .2s, transform .25s; }
.interest:hover { border-color: var(--accent); transform: translateY(-2px); }
.interest canvas { width: 44px; height: 44px; flex: none; }
.interest span { font-weight: 600; font-size: .93rem; line-height: 1.35; }

/* News */
.news-list .news-old { display: none; }
.news-list.open .news-old { display: list-item; }
.news-more { font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; cursor: pointer; margin: .25rem 0 1rem; }
.news-more:hover { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .interest { transition: none !important; animation: none !important; transform: none !important; }
}

/* ---------- publication cards (_includes/publications.md) ---------- */
.pubcards { display: flex; flex-direction: column; gap: 16px; margin: 1rem 0 1.5rem; perspective: 1100px; }
.pubcard { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: center; padding: 14px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel); transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .35s; will-change: transform; }
.pubcard:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 22px 44px -24px color-mix(in srgb, var(--accent) 45%, transparent); }
@media (max-width: 640px) { .pubcard { grid-template-columns: minmax(0, 1fr); gap: 12px; transform-style: flat; } .pubcard-thumb, .pubcard-text { transform: none; } }
.pubcard-thumb { position: relative; display: block; border-radius: 10px; overflow: hidden; background: #fff; aspect-ratio: 16 / 10; max-width: 100%; transform: translateZ(30px); }
.pubcard-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .5s; }
.pubcard:hover .pubcard-thumb img { transform: scale(1.05); }
.pubcard-thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%); transform: translateX(-120%); transition: transform .8s; }
.pubcard:hover .pubcard-thumb::after { transform: translateX(120%); }
.pubcard-text { min-width: 0; display: flex; flex-direction: column; gap: 6px; transform: translateZ(16px); }
.pubcard-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pubcard-venue { display: inline-flex; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; color: #fff; background: var(--accent); }
@media (prefers-color-scheme: dark) { .pubcard-venue { color: #06261f; } }
.pubcard-venue.alt { background: transparent; color: var(--accent); border: 1px solid var(--accent); letter-spacing: .02em; }
.pubcard h3 { margin: 0 !important; font-size: 1.04rem; line-height: 1.35; font-weight: 600; text-wrap: balance; }
.pubcard h3 a { color: #111827 !important; }
@media (prefers-color-scheme: dark) { .pubcard h3 a { color: #e6ebf2 !important; } }
.pubcard h3 a:hover { color: var(--accent) !important; }
.pubcard-authors { font-size: .88rem; color: var(--muted-text); }
.pubcard-authors b { color: inherit; font-weight: 700; }
@media (prefers-color-scheme: dark) { .pubcard-authors b { color: #e6ebf2; } }
@media (prefers-color-scheme: light) { .pubcard-authors b { color: #111827; } }
.pubcard-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; font-weight: 600; }
.pubcard-links a { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .pubcard, .pubcard-thumb img { transition: none !important; transform: none !important; } .pubcard-thumb::after { display: none; } }

/* name easter egg (sections3d.js) */
header h1 { cursor: default; }
.nf { display: inline-block; perspective: 300px; }
.nf-l { display: inline-block; transform-origin: 50% 90%; color: inherit; }
.nf-l.hop { animation: nf-hop .66s cubic-bezier(.3,.7,.4,1); }
.nf-l.land { animation: nf-land .44s cubic-bezier(.2,1.6,.4,1); }
@keyframes nf-hop {
  0%   { transform: translateY(0) scale(1, 1); }
  15%  { transform: translateY(.05em) scale(1.25, .7); }                 /* crouch */
  50%  { transform: translateY(-.75em) rotateY(180deg) rotate(-12deg) scale(.9, 1.15); }
  100% { transform: translateY(0) rotateY(360deg) scale(1, 1); }
}
@keyframes nf-land {
  0%   { transform: scale(1.35, .65); }                                  /* splat */
  45%  { transform: scale(.85, 1.2) rotate(6deg); }
  75%  { transform: scale(1.05, .95) rotate(-3deg); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .nf-l.hop, .nf-l.land { animation: none; } }