/* ==============================
   Hero + Chips + Typewriter
============================== */
.hero{
  padding:6rem 0 3rem;
  display:grid; gap:2rem; align-items:center;
}
.hero__content{ max-width:720px; }
.hero h1{
  margin:0 0 .6rem;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  color:var(--neon);
  text-shadow:0 0 10px var(--neon-weak);
}
.tagline{ color:var(--muted); }

.chips{ display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0 1.5rem; }
.chip{
  background:#0b1511; color:var(--muted);
  padding:.35rem .6rem; border-radius:999px;
  border:1px solid var(--border);
}

.hero__img{
  width:220px; height:220px; object-fit:cover;
  border-radius:1rem; border:1px solid var(--border);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  display:block;
}
@media (min-width:900px){ .hero{ grid-template-columns:1fr auto; } }

/* Typewriter helpers */
.pre-ty .typewriter,
.pre-ty .tagline,
.pre-ty .about__inner p,
.pre-ty .about__img img,
.pre-ty .hero__img,
.pre-ty .chips .chip{ visibility:hidden; }

.cursor{ color:var(--neon); }
@keyframes cursorBlink { 0%,50%{opacity:1} 51%,100%{opacity:0} }
.cursor.blink{ animation: cursorBlink .9s steps(1) infinite; }

/* Reveal helpers */
.reveal{
  visibility:visible;
  opacity:0;
  transform:translateX(var(--shift, 16px));
  filter:blur(2px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  will-change: opacity, transform, filter;
}
.reveal.in{ opacity:1; transform:none; filter:blur(0); }

/* Light chips */
:root[data-theme="light"] .chip{
  background:#ffffffd9;
  color:var(--accent);
  border:1px solid var(--border);
  box-shadow:0 0 6px var(--neon-weak2);
}