@import url('./tokens/fonts.css');
@import url('./tokens/colors.css');
@import url('./tokens/typography.css');
@import url('./tokens/spacing.css');
@import url('./tokens/media.css');
@import url('./tokens/status.css');

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:4px;
}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--space-nav-x);
  background:rgba(20,23,28,0.72);
  backdrop-filter:blur(var(--blur-nav));
  -webkit-backdrop-filter:blur(var(--blur-nav));
  border-bottom:var(--border-width) solid var(--border-default);
}
.nav-name{
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--text-nav);
}
.nav-links{display:flex;gap:1.8rem;font-family:var(--font-mono);font-size:var(--text-mono-sm)}
.nav-links a{color:var(--text-muted);transition:color var(--motion-fast)}
.nav-links a:hover{color:var(--text-primary)}

/* ---------- Signal strip ---------- */
.signal-strip{
  overflow:hidden;
  padding:0.6rem var(--space-nav-x);
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  border-bottom:var(--border-width) solid var(--border-default);
  background:var(--panel);
}
.signal-track{display:flex;width:max-content}
.signal-track.is-ready{animation:signal-scroll 32s linear infinite}
.signal-strip:hover .signal-track,.signal-strip:focus-within .signal-track{animation-play-state:paused}
.signal-group{display:flex;gap:2rem;padding-right:2rem}
.signal-item{display:inline-flex;align-items:center;gap:0.5rem;color:var(--text-muted)}
.signal-item a{color:inherit;transition:color var(--motion-fast)}
.signal-item a:hover{color:var(--text-primary)}
.signal-dot{width:6px;height:6px;border-radius:50%;flex:none}
.signal-icon{
  width:13px;height:13px;border-radius:3px;flex:none;
  animation:signal-flash 1.8s ease-in-out infinite;
}
.signal-trend{color:var(--teal);font-weight:600}
.signal-item[data-kind="new"] .signal-dot{background:var(--amber)}
.signal-item[data-kind="trending"] .signal-dot{
  background:var(--teal);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes signal-scroll{to{transform:translateX(-50%)}}
@keyframes signal-flash{0%,100%{opacity:1}50%{opacity:0.35}}
@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(79,209,197,0.5)}
  50%{opacity:0.6;box-shadow:0 0 0 4px rgba(79,209,197,0)}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;min-height:90vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--space-hero-top) var(--space-page-x) var(--space-hero-bottom);
}
.hero-video{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;object-fit:cover;opacity:var(--media-hero-opacity);z-index:var(--z-base);
}
.hero-scrim{position:absolute;inset:0;background:var(--media-hero-scrim);z-index:var(--z-scrim)}
.hero-eyebrow{
  position:relative;z-index:var(--z-content);
  font-family:var(--font-mono);font-size:var(--text-eyebrow);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-muted);margin-bottom:1.6rem;
}
.hero h1{
  position:relative;z-index:var(--z-content);
  font-family:var(--font-display);font-weight:500;
  font-size:var(--text-hero);line-height:var(--leading-hero);
  max-width:15ch;margin:0;
}
.hero h1 em{font-style:italic;color:var(--accent-ops)}
.hero p{
  position:relative;z-index:var(--z-content);margin-top:1.8rem;max-width:52ch;
  color:var(--text-muted);font-size:var(--text-body-lg);
}
.hero-meta{
  position:relative;z-index:var(--z-content);margin-top:2.6rem;
  display:flex;gap:2.5rem;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:0.78rem;color:var(--muted-dim);
}
.hero-meta strong{
  color:var(--text-muted);display:block;font-size:0.7rem;
  letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.3rem;font-weight:500;
}

/* ---------- Track legend ---------- */
.track-legend{
  display:flex;gap:2rem;align-items:center;
  padding:0.8rem var(--space-page-x);
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-muted);
  border-top:var(--border-width) solid var(--border-default);
  border-bottom:var(--border-width) solid var(--border-default);
}
.legend-item{display:inline-flex;align-items:center;gap:0.5rem}
.legend-dot{width:9px;height:9px;border-radius:50%;flex:none}
.legend-item[data-track="ops"] .legend-dot{background:var(--accent-ops)}
.legend-item[data-track="sys"] .legend-dot{background:var(--accent-sys)}

/* ---------- Work / timeline ---------- */
.work{
  display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-track-gap);
  padding:2rem var(--space-page-x) 3rem;
}
.col-label{
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  margin-bottom:2rem;
}
.col-label[data-track="ops"]{color:var(--accent-ops)}
.col-label[data-track="sys"]{color:var(--accent-sys)}
.track{position:relative;padding-left:2.4rem}
.track[data-track="ops"]{--track-accent:var(--accent-ops);--track-accent-dim:var(--accent-ops-dim)}
.track[data-track="sys"]{--track-accent:var(--accent-sys);--track-accent-dim:var(--accent-sys-dim)}
.track::before{
  content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(to bottom, var(--track-accent-dim), var(--track-accent));
}
.stop{position:relative;padding-bottom:var(--space-stop-gap);opacity:0;transform:translateY(14px);transition:opacity var(--motion-slow),transform var(--motion-slow)}
.stop.is-visible{opacity:1;transform:none}
.stop:not(.is-last){border-bottom:var(--border-width) solid var(--border-default)}
.stop::before{
  content:"";position:absolute;left:-2.4rem;top:0.35rem;width:9px;height:9px;
  border-radius:50%;background:var(--track-accent);
}
.track[data-track="ops"] .stop.is-trending::before{animation:dot-pulse-ops 1.8s ease-in-out infinite}
.track[data-track="sys"] .stop.is-trending::before{animation:dot-pulse-sys 1.8s ease-in-out infinite}
@keyframes dot-pulse-ops{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(232,163,61,0.5)}
  50%{opacity:0.6;box-shadow:0 0 0 4px rgba(232,163,61,0)}
}
@keyframes dot-pulse-sys{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(79,209,197,0.5)}
  50%{opacity:0.6;box-shadow:0 0 0 4px rgba(79,209,197,0)}
}
.stop-header{display:flex;align-items:baseline;gap:0.7rem;flex-wrap:wrap}
.trending-badge{
  font-family:var(--font-mono);font-size:var(--text-tag);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--track-accent);
}
.stop h3{
  font-family:var(--font-display);font-weight:500;font-size:var(--text-h3);
  margin:0 0 0.5rem;
}
.stop-header h3{margin:0}
.stop p{color:var(--text-muted);margin:0 0 0.9rem;font-size:var(--text-body-sm)}
.stop-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.9rem}
.tag{
  font-family:var(--font-mono);font-size:var(--text-tag);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-muted);border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-sm);padding:0.25rem 0.5rem;
}
.stop-link{
  display:inline-flex;align-items:center;gap:0.4rem;
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  text-decoration:none;border-bottom:1px solid;padding-bottom:2px;
  transition:color var(--motion-fast);
}
.stop-link img{width:14px;height:14px;border-radius:3px}
.track[data-track="ops"] .stop-link{color:var(--accent-ops);border-color:var(--accent-ops-dim)}
.track[data-track="sys"] .stop-link{color:var(--accent-sys);border-color:var(--accent-sys-dim)}
.stop-link:hover{opacity:0.8}

/* ---------- About ---------- */
.about{padding:2rem var(--space-page-x) 7rem;max-width:68ch}
.eyebrow{
  font-family:var(--font-mono);font-size:var(--text-eyebrow);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-muted);margin-bottom:0.9rem;
}
.about h2{
  font-family:var(--font-display);font-weight:500;font-size:var(--text-h2);
  line-height:var(--leading-h2);margin:0;
}
.about p{color:var(--text-muted);margin:1.4rem 0 0}
.about p + p{margin-top:1.1rem}
.about strong{color:var(--text-primary);font-weight:500}

/* ---------- Footer ---------- */
.footer{
  padding:3.5rem var(--space-page-x) 2rem;
  border-top:var(--border-width) solid var(--border-default);
}
.footer h2{
  font-family:var(--font-display);font-weight:500;font-size:var(--text-h2-footer);
  margin:0 0 1.8rem;max-width:20ch;
}
.footer-links{
  display:flex;flex-wrap:wrap;gap:0.5rem 2rem;
  font-family:var(--font-mono);font-size:var(--text-mono-md);
  padding:0;margin:0 0 1.2rem;list-style:none;
}
.footer-links a{color:var(--text-muted);transition:color var(--motion-fast)}
.footer-links a:hover{color:var(--accent-ops)}
.footer-note{font-family:var(--font-mono);font-size:var(--text-foot);color:var(--muted-dim)}
.social-row{
  padding:0 var(--space-page-x) 3rem;
  display:flex;gap:0.7rem;align-items:center;flex-wrap:wrap;
}
.social-row a{display:block;line-height:0;transition:opacity var(--motion-fast)}
.social-row a:hover{opacity:0.8}
.social-row img{width:30px;height:30px;border-radius:6px}

@media (max-width:760px){
  .work{grid-template-columns:1fr;gap:3rem 0}
  .nav-links{gap:1.1rem}
}

@media (prefers-reduced-motion:reduce){
  .stop{opacity:1;transform:none;transition:none}
  .signal-strip{overflow-x:auto}
  .signal-track.is-ready,.signal-icon{animation:none}
  .signal-group[aria-hidden="true"]{display:none}
  .signal-item[data-kind="trending"] .signal-dot{animation:none}
  .stop.is-trending::before{animation:none}
  html{scroll-behavior:auto}
}