/* ── Hugo Mata · dmtdigital.solutions ─────────────────────────
   A tmux session at dusk. Warm plum sky, ember sun, mono panes. */

:root {
  --sky-0: #171126;
  --sky-1: #241534;
  --sky-rim: #3a1e3b;
  --ember: #ff7847;
  --ember-deep: #c4502e;
  --gold: #f2b265;
  --ink: #efe6da;
  --dim: #a394b0;
  --prompt: #7ed9a7;
  --pane-bg: rgba(23, 16, 34, 0.72);
  --pane-edge: rgba(239, 230, 218, 0.08);
  --bar-h: 46px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--sky-0);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.mono { font-family: var(--mono); }

::selection { background: var(--ember); color: var(--sky-0); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 60;
  background: var(--ember);
  color: var(--sky-0);
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--mono);
  transition: top 0.2s ease;
}
.skip-link:focus-visible { top: 12px; }

/* ── sky ──────────────────────────────────────────────────── */

.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

.sky-layer { position: absolute; inset: 0; }

.sky-dusk {
  background: linear-gradient(180deg, #120d1f 0%, var(--sky-0) 34%, var(--sky-1) 72%, var(--sky-rim) 100%);
}

.sky-ember {
  background: linear-gradient(180deg, #150b1e 0%, #2b1230 40%, #58223a 76%, #93402e 100%);
  opacity: 0;
  will-change: opacity;
}

.sun {
  position: absolute;
  left: 50%;
  bottom: -18vh;
  width: 72vmin;
  height: 72vmin;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 120, 71, 0.5) 0%, rgba(242, 178, 101, 0.16) 42%, transparent 70%);
  opacity: 0.5;
  will-change: opacity, transform;
}

.grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── hero / 0:hello ───────────────────────────────────────── */

#hero-track { height: 340vh; }

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 20px calc(var(--bar-h) + 16px);
}

.hero-inner {
  width: min(680px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.boot {
  color: var(--prompt);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

.hero-name {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 750;
  font-size: clamp(3.2rem, 12.5vw, 7.2rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-wrap: balance;
  background: linear-gradient(115deg, var(--ink) 55%, var(--gold) 85%, var(--ember) 105%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.08em; /* keep descenders inside the clipped box */
}

.hero-tag {
  color: var(--dim);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

/* ── panes ────────────────────────────────────────────────── */

.pane {
  background: var(--pane-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px var(--pane-edge),
    0 6px 16px rgba(6, 3, 12, 0.25),
    0 28px 64px rgba(6, 3, 12, 0.4);
}

.pane-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 0.72rem;
  color: var(--dim);
  letter-spacing: 0.05em;
  box-shadow: 0 1px 0 var(--pane-edge);
}

.pane-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 8px rgba(255, 120, 71, 0.7);
  flex: none;
}

/* ── terminal ─────────────────────────────────────────────── */

.term-pane { margin-top: 10px; }

.term-viewport {
  height: min(46vh, 380px);
  overflow: hidden;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.term-lines { font-size: 0.86rem; line-height: 1.7; }

.tl { white-space: pre-wrap; overflow-wrap: break-word; }
.tl + .tl { margin-top: 0.45em; }

.tl-cmd { color: var(--prompt); }
.tl-meta { color: var(--dim); font-size: 0.78rem; }
.tl-user { color: var(--gold); font-weight: 500; }
.tl-claude { color: var(--ink); }
.tl-claude::first-letter { color: var(--ember); }

.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--ember);
  animation: blink 1.1s steps(2, start) infinite;
}

@keyframes blink { to { visibility: hidden; } }

.scroll-hint {
  color: var(--dim);
  font-size: 0.75rem;
  text-align: center;
  letter-spacing: 0.06em;
  transition: opacity 0.4s ease;
  animation: bob 2.4s ease-in-out infinite;
}
.scroll-hint.hidden { opacity: 0; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ── windows (sections) ───────────────────────────────────── */

.window {
  width: min(680px, 100%);
  margin: 0 auto;
  padding: clamp(64px, 12vh, 120px) 20px 0;
  scroll-margin-top: 24px;
}

.window:last-of-type { padding-bottom: calc(var(--bar-h) + 48px); }

.win-head { margin-bottom: 28px; }

.eyebrow {
  color: var(--ember);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}
.eyebrow::before { content: "── "; color: var(--dim); }
.eyebrow::after { content: " ──"; color: var(--dim); }

.window h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

.win-sub {
  color: var(--dim);
  margin-top: 12px;
  max-width: 54ch;
  text-wrap: pretty;
}

/* work */

.work-list { display: flex; flex-direction: column; gap: 14px; }

.work-item { padding: 20px 22px; }

.work-item h3 {
  color: var(--prompt);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.work-item h3::before { content: "▸ "; color: var(--ember); }

.work-item p { color: var(--ink); font-size: 0.92rem; text-wrap: pretty; }

/* sites */

.site-list { list-style: none; display: flex; flex-direction: column; }

.site-row {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr auto;
  gap: 6px 16px;
  align-items: baseline;
  padding: 15px 10px;
  min-height: 44px;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 1px 0 var(--pane-edge);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.site-row:hover { background: rgba(239, 230, 218, 0.05); }
.site-row:active { transform: scale(0.99); }

.site-domain { color: var(--gold); font-size: 0.88rem; font-weight: 500; }
.site-desc { color: var(--dim); font-size: 0.85rem; }
.site-arrow { color: var(--ember); transition: transform 0.2s ease; }
.site-row:hover .site-arrow { transform: translate(2px, -2px); }

.gh-line { margin-top: 22px; color: var(--dim); font-size: 0.82rem; }
.gh-line a { color: var(--prompt); text-underline-offset: 3px; }

.gh-graph { margin-top: 16px; }

.graph-wrap { padding: 16px 16px 10px; overflow-x: auto; scrollbar-width: none; }
.graph-wrap::-webkit-scrollbar { display: none; }

#contrib-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 11px);
  grid-auto-columns: 11px;
  gap: 3px;
  width: max-content;
}

.cd { width: 11px; height: 11px; border-radius: 3px; background: rgba(239, 230, 218, 0.07); }
.cd-pad { background: transparent; }
.cd.l1 { background: #2b5a43; }
.cd.l2 { background: #3c8a5f; }
.cd.l3 { background: #58b57f; }
.cd.l4 { background: var(--prompt); box-shadow: 0 0 6px rgba(126, 217, 167, 0.45); }

.contrib-meta { padding: 0 16px 14px; color: var(--dim); font-size: 0.76rem; letter-spacing: 0.02em; }

/* colophon */

.colo-list { padding: 16px 18px 6px; }

.colo-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.85rem;
}
.colo-row dt { color: var(--prompt); font-weight: 500; }
.colo-row dd { color: var(--ink); }

.colo-note {
  padding: 10px 18px 16px;
  color: var(--dim);
  font-size: 0.76rem;
  font-style: italic;
}

/* music */

.playlists { display: flex; flex-direction: column; gap: 16px; }

.playlist { overflow: hidden; }

.playlist iframe {
  display: block;
  width: 100%;
  height: 152px;
  border: 0;
  background: rgba(6, 3, 12, 0.3);
}

/* contact */

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--pane-edge), 0 8px 20px rgba(6, 3, 12, 0.3);
  background: var(--pane-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn:hover { background: rgba(239, 230, 218, 0.08); }
.btn:active { transform: scale(0.96); }

.btn-primary {
  background: linear-gradient(150deg, var(--ember) 0%, var(--ember-deep) 100%);
  color: #1c0d10;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(255, 160, 110, 0.35), 0 10px 28px rgba(255, 120, 71, 0.28);
}
.btn-primary:hover { background: linear-gradient(150deg, #ff8a5e 0%, #d65c37 100%); }

.footer { margin-top: 64px; color: var(--dim); font-size: 0.75rem; letter-spacing: 0.03em; }

/* ── tmux status bar ──────────────────────────────────────── */

.tmux-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 10px env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  background: rgba(13, 9, 22, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 -1px 0 var(--pane-edge);
}

.tmux-session { color: var(--prompt); flex: none; letter-spacing: 0.04em; }

.tmux-windows {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.tmux-windows::-webkit-scrollbar { display: none; }

.tw {
  flex: none;
  padding: 8px 10px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  color: var(--dim);
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.tw:hover { color: var(--ink); }
.tw.active { color: #1c0d10; background: var(--ember); font-weight: 600; }

.tmux-right { display: flex; align-items: center; gap: 10px; flex: none; }

.lang-toggle {
  display: flex;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--pane-edge);
  overflow: hidden;
}

.lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0 12px;
  min-height: 40px;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.lang-btn:hover { color: var(--ink); }
.lang-btn[aria-pressed="true"] { background: var(--gold); color: #1c0d10; }

.tmux-clock { color: var(--dim); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }

/* ── small screens ────────────────────────────────────────── */

@media (max-width: 560px) {
  .tmux-session { display: none; }
  .tmux-clock { display: none; }
  .site-row { grid-template-columns: 1fr auto; }
  .site-domain { grid-row: 1; grid-column: 1; }
  .site-arrow { grid-row: 1; grid-column: 2; }
  .site-desc { grid-row: 2; grid-column: 1 / -1; }
  .colo-row { grid-template-columns: 1fr; gap: 2px; }
  .colo-row dt::after { content: ":"; }
  .term-viewport { height: min(44vh, 340px); }
}

/* ── reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint { animation: none; }
  .cursor { animation: none; }
  #hero-track { height: auto; }
  .hero-sticky { position: static; height: auto; min-height: 100dvh; padding-top: 48px; }
  .term-viewport { height: auto; justify-content: flex-start; }
}