/* ===========================================================
   Terminal-style portfolio — Stefan Eschgfäller
   Dependency-free. Palette: deep ink + green/cyan accents.
   =========================================================== */

:root {
  --bg:        #05070d;
  --term-bg:   #0a0e14;
  --term-bar:  #11161f;
  --border:    #1d2733;
  --fg:        #c9d3df;
  --muted:     #5c6b7a;
  --green:     #38e07b;
  --cyan:      #4dd0e1;
  --magenta:   #c792ea;
  --yellow:    #ffcb6b;
  --shadow:    0 24px 60px rgba(0, 0, 0, 0.55);
  --radius:    12px;
  --mono: "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code",
          "Consolas", "Liberation Mono", monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  padding: clamp(1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: clamp(0.9rem, 0.6rem + 0.6vw, 1rem);
  line-height: 1.65;
  color: var(--fg);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(56, 224, 123, 0.10), transparent 60%),
    radial-gradient(1000px 500px at 110% 110%, rgba(77, 208, 225, 0.10), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* ---------- Matrix rain backdrop ---------- */
.matrix {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
}

/* ---------- Cursor-following spotlight ---------- */
.spotlight {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    340px 340px at var(--mx, 50%) var(--my, 35%),
    rgba(56, 224, 123, 0.10),
    transparent 70%
  );
  transition: background 0.1s linear;
}

/* ---------- Boot sequence overlay ---------- */
.boot {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 3rem);
  background: var(--bg);
  transition: opacity 0.5s ease;
}
.boot.boot--done { opacity: 0; pointer-events: none; }
.boot__log {
  margin: 0;
  width: min(680px, 100%);
  font-size: clamp(0.75rem, 0.6rem + 0.6vw, 0.95rem);
  line-height: 1.7;
  color: var(--green);
  white-space: pre-wrap;
  text-shadow: 0 0 8px rgba(56, 224, 123, 0.5);
}
.boot__log .ok { color: var(--cyan); }
.boot__cursor { animation: blink 1.05s step-end infinite; }

/* Subtle CRT scanline overlay */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.02) 0,
    rgba(255, 255, 255, 0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* ---------- Terminal window ---------- */
.terminal {
  position: relative;
  z-index: 2;
  width: min(820px, 100%);
  background: rgba(10, 14, 20, 0.92);
  backdrop-filter: blur(2px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 60px rgba(56, 224, 123, 0.08);
  overflow: hidden;
  animation: terminal-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes terminal-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--term-bar);
  border-bottom: 1px solid var(--border);
}

.dots { display: inline-flex; gap: 0.5rem; }

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.dot--red    { background: #ff5f56; }
.dot--yellow { background: #ffbd2e; }
.dot--green  { background: #27c93f; }

.titlebar__title {
  flex: 0 1 auto;
  color: var(--muted);
  font-size: 0.85em;
  letter-spacing: 0.02em;
}
.titlebar__spacer { flex: 1; }

.terminal__body {
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------- Hero ---------- */
.hero {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 2rem);
  flex-wrap: wrap;
  padding-bottom: 1.5rem;
  border-bottom: 1px dashed var(--border);
}

.hero__avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--green);
  padding: 4px;
  background: var(--term-bg);
  box-shadow: 0 0 0 1px var(--border), 0 0 28px rgba(56, 224, 123, 0.35);
  flex: 0 0 auto;
  animation: avatar-glow 3.4s ease-in-out infinite;
}

@keyframes avatar-glow {
  0%, 100% { box-shadow: 0 0 0 1px var(--border), 0 0 24px rgba(56, 224, 123, 0.30); }
  50%      { box-shadow: 0 0 0 1px var(--border), 0 0 40px rgba(56, 224, 123, 0.60); }
}

.hero__intro { flex: 1 1 280px; min-width: 0; }

.hero__greeting {
  margin: 0 0 0.25rem;
  color: var(--muted);
}

.hero__name {
  margin: 0 0 0.4rem;
  font-size: clamp(1.6rem, 1rem + 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

/* Glitch effect on the name (two coloured offset clones). */
.glitch {
  position: relative;
  text-shadow: 0 0 12px rgba(56, 224, 123, 0.25);
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
}
.glitch::before { color: var(--cyan); }
.glitch::after  { color: var(--magenta); }
.glitch:hover::before { animation: glitch-x 0.5s steps(2, end) infinite; }
.glitch:hover::after  { animation: glitch-y 0.5s steps(2, end) infinite; }

@keyframes glitch-x {
  0%   { transform: translate(0, 0); clip-path: inset(0 0 70% 0); }
  50%  { transform: translate(-2px, -1px); clip-path: inset(40% 0 20% 0); }
  100% { transform: translate(2px, 1px); clip-path: inset(70% 0 0 0); }
}
@keyframes glitch-y {
  0%   { transform: translate(0, 0); clip-path: inset(60% 0 10% 0); }
  50%  { transform: translate(2px, 1px); clip-path: inset(20% 0 50% 0); }
  100% { transform: translate(-2px, -1px); clip-path: inset(0 0 80% 0); }
}

.hero__role {
  margin: 0;
  font-size: clamp(1rem, 0.8rem + 1vw, 1.25rem);
  color: var(--cyan);
  min-height: 1.6em;
}

/* ---------- Blocks ---------- */
.block { padding: 1.5rem 0; border-bottom: 1px dashed var(--border); }
.block:last-of-type { border-bottom: none; }

.prompt { margin: 0 0 0.75rem; color: var(--green); font-weight: 500; }
.muted  { color: var(--muted); }
.file   { color: var(--yellow); }
.arrow  { color: var(--green); margin-right: 0.4rem; }

.output { margin: 0; color: var(--fg); }
.output strong { color: var(--cyan); font-weight: 700; }

.bullets {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}
.bullets li { margin: 0.35rem 0; }

/* ---------- Skills ---------- */
.skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.skill-group {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(199, 146, 234, 0.04);
}

.skill-group__title {
  margin: 0 0 0.6rem;
  font-size: 0.9em;
  font-weight: 500;
  color: var(--magenta);
}

.badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

.badge {
  padding: 0.3rem 0.7rem;
  font-size: 0.85em;
  color: var(--fg);
  background: rgba(77, 208, 225, 0.06);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.badge:hover {
  transform: translateY(-2px);
  border-color: var(--green);
  color: var(--green);
}

/* ---------- Now ---------- */
.now { display: flex; align-items: center; gap: 0.6rem; }
.now__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  flex: 0 0 auto;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.6; }
}

/* ---------- Tilt cards (skills + stats) ---------- */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  will-change: transform;
}
.tilt:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45),
              0 0 18px rgba(56, 224, 123, 0.12);
}

/* ---------- GitHub stats ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(77, 208, 225, 0.06), rgba(56, 224, 123, 0.04));
}
.stat__num {
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.1rem);
  font-weight: 700;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(77, 208, 225, 0.35);
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: 0.78em; color: var(--muted); }

.stats-subtitle { margin: 0 0 0.6rem; font-size: 0.85em; font-weight: 500; }

.lang-bars { list-style: none; padding: 0; margin: 0; }
.lang-bar {
  display: grid;
  grid-template-columns: 8rem 1fr 3.5rem;
  align-items: center;
  gap: 0.6rem;
  margin: 0.45rem 0;
}
.lang-bar__name { color: var(--fg); font-size: 0.88em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-bar__track {
  height: 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.lang-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: var(--green);
  box-shadow: 0 0 12px rgba(56, 224, 123, 0.4);
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.lang-bar__pct { font-size: 0.8em; text-align: right; font-variant-numeric: tabular-nums; }
.stats-meta { margin-top: 1.25rem; font-size: 0.8em; }

@media (max-width: 520px) {
  .lang-bar { grid-template-columns: 6rem 1fr 3rem; }
}

/* ---------- Links ---------- */
.links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.links li { margin: 0.4rem 0; }

.links a {
  color: var(--cyan);
  text-decoration: none;
  transition: color 0.15s ease, letter-spacing 0.15s ease;
}
.links a:hover,
.links a:focus-visible {
  color: var(--green);
  outline: none;
}
.links a:focus-visible { text-decoration: underline; }

/* ---------- Footer ---------- */
.footer { padding-top: 1.5rem; }
.footer__meta { margin: 0.5rem 0 0; font-size: 0.82em; }

/* ---------- Cursor / blink ---------- */
.cursor,
.blink {
  color: var(--green);
  animation: blink 1.05s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cursor, .blink { animation: none; }
  .badge { transition: none; }
  .scanlines { display: none; }
  .matrix { display: none; }
  .spotlight { display: none; }
  .terminal { animation: none; }
  .hero__avatar { animation: none; }
  .now__dot { animation: none; }
  .glitch:hover::before,
  .glitch:hover::after { animation: none; }
  .tilt { transition: none; }
  .lang-bar__fill { transition: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 520px) {
  .hero { justify-content: center; text-align: center; }
  .hero__intro { flex-basis: 100%; }
  .titlebar__title { display: none; }
}

/* ===========================================================
   Hidden easter egg — terminal Snake (built/destroyed by JS)
   =========================================================== */
.egg {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgba(3, 5, 10, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: egg-in 0.18s ease-out;
}

@keyframes egg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.egg__panel {
  width: min(92vw, 460px);
  background: var(--term-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 40px rgba(56, 224, 123, 0.12);
  overflow: hidden;
}

.egg__close {
  margin-left: auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.9em;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.egg__close:hover,
.egg__close:focus-visible { color: var(--fg); background: rgba(255, 255, 255, 0.06); }

.egg__body { padding: clamp(0.9rem, 3vw, 1.25rem); }

.egg__hud {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  font-size: 0.85em;
  color: var(--muted);
}
.egg__hud b { color: var(--green); font-weight: 700; }

.egg__stage {
  position: relative;
  display: grid;
  place-items: center;
  touch-action: none; /* capture swipes; stop the page scrolling under it */
}

.egg__canvas {
  width: 100%;
  max-width: 400px;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  image-rendering: pixelated;
}

/* ---------- Touch D-pad (shown only on coarse pointers) ---------- */
.egg__controls { display: none; }

@media (pointer: coarse) {
  .egg__controls {
    display: grid;
    grid-template-columns: repeat(3, 56px);
    grid-template-rows: repeat(3, 56px);
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
  }
  .egg__pad--up    { grid-area: 1 / 2; }
  .egg__pad--left  { grid-area: 2 / 1; }
  .egg__pad--mid   { grid-area: 2 / 2; }
  .egg__pad--right { grid-area: 2 / 3; }
  .egg__pad--down  { grid-area: 3 / 2; }
}

.egg__pad-btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--term-bar);
  color: var(--green);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.egg__pad-btn:active { background: rgba(56, 224, 123, 0.18); }
.egg__pad--mid { color: var(--cyan); }

.egg__msg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  background: rgba(5, 7, 13, 0.78);
  border-radius: 8px;
}
/* A class selector would otherwise beat the UA `[hidden]` rule. */
.egg__msg[hidden] { display: none; }
.egg__over {
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--green);
}
/* Keep the glitch alive without a hover (the base class only runs on :hover). */
.egg__over.glitch::before { animation: glitch-x 0.6s steps(2, end) infinite; }
.egg__over.glitch::after  { animation: glitch-y 0.6s steps(2, end) infinite; }
.egg__final { color: var(--fg); }
.egg__record { color: var(--yellow); font-style: normal; }
.egg__again,
.egg__paused { font-size: 0.85em; }
.egg__paused {
  font-size: clamp(1.1rem, 5vw, 1.6rem);
  letter-spacing: 0.1em;
  color: var(--cyan);
}

.egg__hint {
  margin: 0.7rem 0 0;
  text-align: center;
  font-size: 0.78em;
}

/* Snappy triple-tap unlock on touch (no double-tap-zoom delay). */
.hero__avatar { touch-action: manipulation; }

/* Keep the whole game within a phone viewport (board + D-pad + chrome). */
@media (pointer: coarse) and (max-height: 760px) {
  .egg__canvas { max-width: min(400px, 56vh); }
}