/* =====================================================================
   HERO  -  the first screen: intro text on the left, animated code on the right.
   (Typing effect: js/features/type-code.js. Buttons live in base.css.)
   ===================================================================== */

.herosec{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:40px clamp(20px,5vw,72px) 24px}
.wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;max-width:1200px;margin:0 auto;width:100%}
.wrap>*{min-width:0}
@media (max-width:1100px){
  .wrap{grid-template-columns:minmax(0,1fr);gap:32px}
  .herosec{min-height:auto;padding-top:32px}
}

.hi{font:14px var(--mono);color:var(--dim);margin:0 0 16px}
h1{margin:0;font:700 clamp(44px,7.5vw,92px)/1 var(--mono);color:var(--strong);letter-spacing:-.04em}
.roleline{font:500 clamp(16px,2vw,22px) var(--mono);color:var(--amber);margin:20px 0 16px}
.lede{max-width:64ch;color:var(--lede)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 0}

/* the code block: each line fades in (or is typed by JS), numbered with a CSS counter */
.hero{margin:0;padding:18px 14px;min-width:0;max-width:100%;overflow-x:auto;counter-reset:ln;font:500 clamp(12px,1.25vw,15px)/1.9 var(--mono)}
.hero .l{display:block;white-space:pre-wrap;overflow-wrap:anywhere;counter-increment:ln;padding-left:3.6em;text-indent:-3.6em;opacity:0;animation:in .01s forwards;animation-delay:calc(var(--i)*140ms + 200ms)}
.hero .l::before{content:counter(ln);display:inline-block;width:2.4em;margin-right:1.2em;text-align:right;color:var(--ln);font-weight:400}
.hero .name{color:var(--strong);font-weight:700}
.caret{display:inline-block;width:.55em;height:1.1em;background:var(--amber);vertical-align:-.2em;animation:blink 1s steps(1) infinite}
/* when JS types the code, lines are visible at once and the moving caret replaces this one */
.typing .l,.typed .l{opacity:1;animation:none}
.typing .caret{display:none}
@keyframes in{to{opacity:1}}
@media (max-width:820px){
  .hero{padding:16px 12px}
  .hero .l{padding-left:3.4em;text-indent:-3.4em}
  .hero .l::before{width:2.2em;margin-right:1.2em}
}
@media (prefers-reduced-motion:reduce){
  .hero .l{animation:none;opacity:1}
  .caret{animation:none}
}