/* ===== style.css =====
   Layout, components, and animation. Relies on tokens.css being
   loaded first for the CSS variables used throughout. */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:32px 20px;
  font-family:var(--font-body);
  color:var(--color-ink);
  -webkit-font-smoothing:antialiased;
  background-color:var(--color-page);
  background-image:
    linear-gradient(var(--color-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);
  background-size:34px 34px;
  animation:pan-grid 50s linear infinite;
}
@keyframes pan-grid{
  to{ background-position:340px 340px; }
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(60% 45% at 50% 42%,var(--color-accent-glow),transparent 70%);
  animation:drift-glow 16s ease-in-out infinite alternate;
}
@keyframes drift-glow{
  0%{   background-position:42% 38%; }
  50%{  background-position:58% 48%; }
  100%{ background-position:46% 60%; }
}
h1,p,figure{ margin:0; }
a{ color:inherit; }

/* ---------- Boot-style loading screen ---------- */
.loader{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-panel);
  transition:opacity .5s var(--ease);
}
.loader__mark{
  font-family:var(--font-mono); font-weight:500; font-size:13px;
  letter-spacing:.1em; color:var(--color-accent);
  animation:loader-pulse 1.1s ease-in-out infinite;
}
@keyframes loader-pulse{
  0%,100%{ opacity:.3; transform:scale(1); }
  50%{     opacity:1;  transform:scale(1.1); }
}
.loader.is-hidden{ opacity:0; pointer-events:none; }

.card{
  position:relative; width:100%; max-width:var(--card-width);
  background:var(--color-panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:
    0 1px 1px rgba(16,19,24,.10),
    0 18px 40px -12px rgba(16,19,24,.30),
    0 50px 90px -40px rgba(16,19,24,.45);
  transform:perspective(900px) rotateX(0deg) rotateY(0deg);
  transition:transform .18s ease-out, box-shadow .5s var(--ease);
  will-change:transform;
}
.card:hover{
  box-shadow:
    0 1px 1px rgba(16,19,24,.10),
    0 22px 48px -12px rgba(16,19,24,.34),
    0 60px 100px -40px rgba(16,19,24,.5);
}
@media (prefers-color-scheme:dark){
  .card{ box-shadow:0 30px 70px -30px rgba(0,0,0,.8); }
}
/* Default: fully visible with no motion — safe if JS never runs. */
.identity,.bio,.links,.foot{ opacity:1; transform:none; filter:none; }

/* With JS present, hide until the loader clears, then rise in with a
   soft blur-to-focus for a smoother, more deliberate entrance. */
html.js .identity,html.js .bio,html.js .links,html.js .foot{
  opacity:0; transform:translateY(10px); filter:blur(6px);
}
html.js body.is-ready .identity,
html.js body.is-ready .bio,
html.js body.is-ready .links,
html.js body.is-ready .foot{
  animation:rise .7s var(--ease) forwards;
}
html.js body.is-ready .identity{ animation-delay:.05s; }
html.js body.is-ready .bio{     animation-delay:.15s; }
html.js body.is-ready .links{   animation-delay:.26s; }
html.js body.is-ready .foot{    animation-delay:.36s; }
@keyframes rise{ to{ opacity:1; transform:none; filter:blur(0); } }

.plate{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:46px; padding:0 var(--pad-x);
  border-bottom:1px solid var(--color-panel-line);
  font-family:var(--font-mono); font-size:var(--size-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--color-ink-faint);
}
.plate__status{ display:flex; align-items:center; gap:9px; min-width:0; }
.plate__status-text{
  display:inline-block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:opacity .25s ease, transform .25s ease;
}
.plate__status-text.is-fading{
  opacity:0;
  transform:translateY(-2px);
}
.plate__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--color-accent);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(127,140,255,.45); }
  70%{ box-shadow:0 0 0 8px rgba(127,140,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(127,140,255,0); }
}
.plate__clock{ font-variant-numeric:tabular-nums; flex:none; }
.plate__clock.is-ticking{ animation:tick .4s ease; }
@keyframes tick{
  0%{ opacity:.45; }
  100%{ opacity:1; }
}

.identity{ display:flex; align-items:center; gap:20px; padding:30px var(--pad-x) 24px; }
.avatar{
  position:relative; flex:none; width:84px; height:84px; border-radius:50%;
  background:#1A1F27;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 0 5px var(--color-accent-ring);
}
/* minimal "ping" — a thin ring that quietly expands and fades,
   echoing the status dot's pulse. Sits behind the photo. */
.avatar::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--color-accent);
  opacity:0;
  animation:avatar-ping 3.6s ease-out infinite;
}
@keyframes avatar-ping{
  0%{   transform:scale(1);    opacity:.5; }
  65%{  transform:scale(1.28); opacity:0;  }
  100%{ transform:scale(1.28); opacity:0;  }
}
.avatar__img{ position:relative; z-index:1; display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.avatar__monogram{
  position:absolute; inset:0; z-index:1; display:none;
  align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:30px; font-weight:700;
  letter-spacing:-.02em; color:var(--color-accent);
}
.avatar.is-fallback .avatar__img{ display:none; }
.avatar.is-fallback .avatar__monogram{ display:flex; }

.identity__name{
  font-family:var(--font-display); font-weight:800; font-size:var(--size-name);
  line-height:.98; letter-spacing:-.035em; color:var(--color-ink);
}
.identity__role{
  margin-top:9px; font-family:var(--font-mono); font-size:var(--size-micro);
  letter-spacing:.15em; text-transform:uppercase; color:var(--color-accent);
  min-height:1em;
}
.identity__role .role-cursor{
  display:inline-block; margin-left:1px;
  animation:cursor-blink .9s steps(1) infinite;
}
@keyframes cursor-blink{ 50%{ opacity:0; } }

.bio{
  padding:0 var(--pad-x) 26px; max-width:44ch;
  font-size:var(--size-body); line-height:1.62; color:var(--color-ink-soft);
}

.links{ border-top:1px solid var(--color-panel-line); }
.link{
  display:grid; grid-template-columns:22px 1fr auto 14px;
  align-items:center; gap:14px;
  padding:15px var(--pad-x);
  border-bottom:1px solid var(--color-panel-line);
  text-decoration:none; color:var(--color-ink);
  transition:background-color var(--speed) ease,padding-left var(--speed) ease;
}
.link:last-child{ border-bottom:0; }
.link:hover,.link:focus-visible{
  background:var(--color-accent-wash);
  padding-left:calc(var(--pad-x) + 4px);
}
.link:focus-visible{ outline:2px solid var(--color-accent); outline-offset:-2px; }
.link__icon{
  width:17px; height:17px; fill:var(--color-ink-soft);
  transition:fill var(--speed) ease, transform var(--speed) var(--ease);
}
.link:hover .link__icon,.link:focus-visible .link__icon{
  fill:var(--color-accent);
  transform:scale(1.15) rotate(-4deg);
}
.link__label{ display:inline-block; transition:transform var(--speed) var(--ease); }
.link:hover .link__label,.link:focus-visible .link__label{ transform:translateX(1px); }
.link__label{ font-size:var(--size-label); font-weight:500; letter-spacing:-.005em; }
.link__handle{
  font-family:var(--font-mono); font-size:.72rem; color:var(--color-ink-faint);
  max-width:38vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.link__arrow{
  font-family:var(--font-mono); font-size:.81rem; color:var(--color-ink-faint);
  opacity:0; transform:translateX(-3px);
  transition:opacity var(--speed) ease,transform var(--speed) ease,color var(--speed) ease;
}
.link:hover .link__arrow,.link:focus-visible .link__arrow{
  opacity:1; transform:none; color:var(--color-accent);
}

.foot{
  display:flex; justify-content:space-between; gap:12px;
  padding:14px var(--pad-x) 16px;
  border-top:1px solid var(--color-panel-line);
  font-family:var(--font-mono); font-size:var(--size-micro);
  letter-spacing:.1em; text-transform:uppercase; color:var(--color-ink-dim);
}

@media (max-width:440px){
  :root{ --pad-x:20px; }
  .identity{ flex-direction:column; align-items:flex-start; gap:16px; padding-top:26px; padding-bottom:20px; }
  .link{ gap:12px; }
  .link__handle{ display:none; }
}
/* Note: reduced-motion override intentionally removed per request —
   animations always play on this site regardless of OS/browser
   "reduce motion" settings. Re-add the block below if you ever want
   to respect that accessibility preference again:

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .identity,.bio,.links,.foot{ opacity:1; transform:none; }
  .card{ transform:none !important; }
}
*/