/* =========================================================
   home.css: hero (name, typing line, photo) and About Me
   ========================================================= */

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
#net{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.25fr .9fr;gap:40px;align-items:center;min-height:calc(100vh - 60px);padding-top:48px;padding-bottom:48px}
.prompt{font:500 15px var(--mono);color:var(--cyan-soft);margin-bottom:18px}
.prompt b{color:var(--violet-text);font-weight:500}
h1{font:700 clamp(44px,7vw,84px)/1.02 var(--sans);letter-spacing:-.02em}
.typed{display:block;margin-top:18px;font:500 clamp(17px,2.2vw,22px)/1.4 var(--mono);color:var(--cyan);min-height:2.9em}
.typed::after{content:"▌";margin-left:2px;animation:blink 1s steps(1) infinite;color:var(--violet)}
@keyframes blink{50%{opacity:0}}
.lede{margin-top:14px;max-width:52ch;color:var(--muted);font-size:18px}

/* photo in a glowing arch */
.portrait{position:relative;justify-self:center;width:min(380px,80vw);aspect-ratio:640/792}
.portrait::before{content:"";position:absolute;inset:8% 4% 0;border-radius:50% 50% 24px 24px;
  background:radial-gradient(circle at 50% 35%,rgba(122,0,255,.55),rgba(0,245,255,.15) 55%,transparent 72%);
  box-shadow:0 0 0 1px rgba(0,245,255,.35),0 0 60px rgba(122,0,255,.35)}
/* head and wreath break out of the top of the arch; sides and bottom stay inside it */
.portrait img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:bottom;
  clip-path:inset(-30% 4% 0 4% round 0 0 24px 24px)}

/* about */
.prose{max-width:68ch;color:var(--muted)}
.prose strong{color:var(--text);font-weight:600}
.interests{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:40px}
.interests div{background:var(--void);padding:24px}
.interests h3{font:600 18px var(--sans);margin-bottom:6px}
.interests p{color:var(--muted);font-size:15px}

/* buttons to the other sections */
.explore{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:48px}
.explore a{display:flex;flex-direction:column;gap:4px;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:var(--deep);color:var(--text)}
.explore a:hover{text-decoration:none;border-color:var(--cyan);box-shadow:0 0 24px rgba(0,245,255,.15)}
.explore b{font:600 16px var(--mono);color:var(--cyan)}
.explore span{color:var(--muted);font-size:14px}

@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;min-height:auto;padding-top:40px}
  .portrait{order:-1;width:min(260px,70vw)}
}
@media (prefers-reduced-motion:reduce){
  .typed::after{animation:none}
}