/* ==========================================================================
 * pages/home.css — sections + visuals only present on the home page
 *   hero • terminal card • avatar pixel art • about • skills • experience
 *   • contact • #theme-toggle (lives in nav but is home-loaded)
 *   plus all responsive overrides for the home page
 *
 * Dark-mode rebalances live next to their owning component below.
 * ========================================================================== */

.cursor-default {
  cursor: default !important;
}

/* ------------------------------------------------------------- HERO ----- */
.hero{padding:64px 32px 48px;border-bottom:var(--b-thick);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:32px;max-width:1180px;margin:0 auto;align-items:end;position:relative}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono);font-size:12px;
  background:var(--paper);border:var(--b);padding:6px 12px;
  box-shadow:3px 3px 0 0 var(--ink);margin-bottom:24px;
}
.hero-tag .pulse{width:8px;height:8px;background:#22c55e;border-radius:50%;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero h1{
  font-size:clamp(56px,9vw,128px);line-height:.92;letter-spacing:-.04em;
  font-weight:700;margin:0 0 18px;
}
.hero h1 .stroke{
  -webkit-text-stroke:2.5px var(--ink);color:transparent;
}
.hero h1 .hl{
  background:var(--accent-2);padding:0 .08em;display:inline-block;
  transform:rotate(-1.2deg);box-shadow:6px 6px 0 0 var(--ink);
  border:var(--b);
}
.hero p.lead{font-size:20px;max-width:620px;color:var(--muted);margin:8px 0 28px}
.hero .meta{display:flex;flex-wrap:wrap;gap:10px}
[data-theme="dark"] .hero h1 .hl{color:#0e0d0a}

/* --------------------------------------- BRUTALIST TERMINAL CARD ----- */
.term-card{
  background:var(--ink);border:var(--b-thick);box-shadow:var(--shadow-lg);
  position:relative;color:var(--paper);
  font-family:var(--ff-mono);
}
.term-card .hat{
  position:absolute;top:-14px;right:-14px;background:var(--accent-3);color:#fff;
  border:var(--b);padding:6px 10px;font-family:var(--ff-mono);font-size:11px;
  transform:rotate(4deg);box-shadow:3px 3px 0 0 var(--ink);z-index:3;
}
.term-card .sticker{
  position:absolute;left:-14px;bottom:60px;background:var(--accent-2);color:var(--ink);
  border:var(--b);padding:4px 9px;font-family:var(--ff-mono);font-size:10px;
  transform:rotate(-4deg);box-shadow:3px 3px 0 0 var(--ink);z-index:3;font-weight:700;
}
.term-bar{
  background:var(--paper);color:var(--ink);border-bottom:var(--b);
  padding:8px 14px;display:flex;align-items:center;gap:10px;
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;
}
.term-bar .dots{display:flex;gap:6px}
.term-bar .dots i{width:14px;height:14px;border:1.5px solid var(--ink);display:block}
.term-bar .dots i.r{background:var(--accent-3)}
.term-bar .dots i.y{background:var(--accent-2)}
.term-bar .dots i.b{background:var(--accent)}
.term-bar .name{margin-left:auto;font-weight:600}
.term-body{
  padding:18px 18px 16px;font-size:13px;line-height:1.7;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 3px 4px),
    var(--ink);
  position:relative;
}
.term-body .pr{color:var(--accent-2)}
.term-body .cm{color:#7a7466}
.term-body .ok{color:#9bd684}
.term-body .key{color:var(--accent-2)}
.term-body .str{color:#cde0c9}
.term-body .blu{color:#8aa7ff}
.term-body .red{color:var(--accent-3)}
.term-body b{color:#fff;font-weight:600}
.term-body .cur{display:inline-block;width:8px;height:14px;background:var(--accent-2);vertical-align:-2px;animation:tblink 1s steps(2,end) infinite}
@keyframes tblink{0%,49%{opacity:1}50%,100%{opacity:0}}
/* tiny pixel sprite peeking out from the terminal */
.term-body .pix-mascot{
  position:absolute;right:14px;bottom:14px;
  width:48px;height:48px;
  background:
    /* simple invader-like sprite using box-shadow stack */
    linear-gradient(var(--accent-2),var(--accent-2)) 0 0/6px 6px no-repeat,
    linear-gradient(var(--accent-2),var(--accent-2)) 42px 0/6px 6px no-repeat,
    linear-gradient(var(--accent-2),var(--accent-2)) 6px 6px/36px 6px no-repeat,
    linear-gradient(var(--accent-2),var(--accent-2)) 0 12px/48px 6px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 12px 12px/6px 6px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 30px 12px/6px 6px no-repeat,
    linear-gradient(var(--accent-2),var(--accent-2)) 0 18px/12px 6px no-repeat,
    linear-gradient(var(--accent-2),var(--accent-2)) 18px 18px/12px 6px no-repeat,
    linear-gradient(var(--accent-2),var(--accent-2)) 36px 18px/12px 6px no-repeat,
    linear-gradient(var(--accent-2),var(--accent-2)) 6px 24px/36px 6px no-repeat,
    linear-gradient(var(--accent-2),var(--accent-2)) 0 30px/6px 6px no-repeat,
    linear-gradient(var(--accent-2),var(--accent-2)) 12px 30px/6px 6px no-repeat,
    linear-gradient(var(--accent-2),var(--accent-2)) 30px 30px/6px 6px no-repeat,
    linear-gradient(var(--accent-2),var(--accent-2)) 42px 30px/6px 6px no-repeat,
    linear-gradient(var(--accent-2),var(--accent-2)) 0 36px/6px 6px no-repeat,
    linear-gradient(var(--accent-2),var(--accent-2)) 42px 36px/6px 6px no-repeat;
  image-rendering:pixelated;animation:bob 2.4s ease-in-out infinite;opacity:.85;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
[data-theme="dark"] .term-card{background:#0e0d0a;color:#f4ecd8}
[data-theme="dark"] .term-bar{background:#26221b;color:#f4ecd8;border-bottom-color:#3a352d}
[data-theme="dark"] .term-bar .dots i{border-color:#f4ecd8}
[data-theme="dark"] .term-body{background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.03) 3px 4px), #0e0d0a}
[data-theme="dark"] .term-body .pix-mascot{opacity:.95}

/* ----------------------------------- LEGACY AVATAR / PIXEL ART CARD ----- */
.avatar-card{position:relative}
.pixel-canvas{
  width:100%;aspect-ratio:1/1;
  background:linear-gradient(180deg, #b9d8ff 0%, #b9d8ff 60%, #d9c69a 60%, #d9c69a 100%);
  border:var(--b);position:relative;overflow:hidden;
  image-rendering:pixelated;
}
/* sprite using box-shadows — a tiny "engineer at desk" */
.sprite{
  position:absolute;left:50%;bottom:18%;transform:translateX(-50%);
  --p:8px;width:var(--p);height:var(--p);
}
.sprite::before{
  content:"";position:absolute;left:0;top:0;width:var(--p);height:var(--p);
  /* head + body + arms — coordinates × p */
  box-shadow:
    /* hair row */
    0px -56px 0 0 #2a1a10, 8px -56px 0 0 #2a1a10, 16px -56px 0 0 #2a1a10, 24px -56px 0 0 #2a1a10, 32px -56px 0 0 #2a1a10,
    -8px -48px 0 0 #2a1a10, 0 -48px 0 0 #2a1a10, 8px -48px 0 0 #f1c8a3, 16px -48px 0 0 #f1c8a3, 24px -48px 0 0 #f1c8a3, 32px -48px 0 0 #f1c8a3, 40px -48px 0 0 #2a1a10,
    /* face */
    -8px -40px 0 0 #2a1a10, 0 -40px 0 0 #f1c8a3, 8px -40px 0 0 #f1c8a3, 16px -40px 0 0 #0e0d0a, 24px -40px 0 0 #f1c8a3, 32px -40px 0 0 #0e0d0a, 40px -40px 0 0 #2a1a10,
    -8px -32px 0 0 #f1c8a3, 0 -32px 0 0 #f1c8a3, 8px -32px 0 0 #f1c8a3, 16px -32px 0 0 #f1c8a3, 24px -32px 0 0 #f1c8a3, 32px -32px 0 0 #f1c8a3, 40px -32px 0 0 #f1c8a3,
    8px -24px 0 0 #c1856b, 16px -24px 0 0 #f1c8a3, 24px -24px 0 0 #f1c8a3, 32px -24px 0 0 #c1856b,
    /* torso (shirt) */
    -8px -16px 0 0 #1a3aff, 0 -16px 0 0 #1a3aff, 8px -16px 0 0 #1a3aff, 16px -16px 0 0 #1a3aff, 24px -16px 0 0 #1a3aff, 32px -16px 0 0 #1a3aff, 40px -16px 0 0 #1a3aff,
    -8px -8px 0 0 #1a3aff, 0 -8px 0 0 #1a3aff, 8px -8px 0 0 #1a3aff, 16px -8px 0 0 #ffd83b, 24px -8px 0 0 #1a3aff, 32px -8px 0 0 #1a3aff, 40px -8px 0 0 #1a3aff,
    /* desk/laptop */
    -16px 0 0 0 #2a1a10, -8px 0 0 0 #d4d2cc, 0 0 0 0 #d4d2cc, 8px 0 0 0 #d4d2cc, 16px 0 0 0 #d4d2cc, 24px 0 0 0 #d4d2cc, 32px 0 0 0 #d4d2cc, 40px 0 0 0 #d4d2cc, 48px 0 0 0 #2a1a10,
    -16px 8px 0 0 #2a1a10, 48px 8px 0 0 #2a1a10
  ;
}
.cloud{position:absolute;background:#fff;border:1px solid #0e0d0a;animation:float 6s ease-in-out infinite}
.cloud.a{top:14%;left:14%;width:48px;height:14px}
.cloud.b{top:24%;right:12%;width:36px;height:10px;animation-delay:1.5s}
@keyframes float{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}

.avatar-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;
  font-family:var(--ff-mono);font-size:11px;
}
.avatar-stats div{border:var(--b);padding:6px 8px;background:var(--bg)}
.avatar-stats b{display:block;font-size:18px;font-family:var(--ff-sans);line-height:1}

/* ------------------------------------------------------------ ABOUT ----- */
.about-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:32px;align-items:start}
.about-card{background:var(--paper);border:var(--b-thick);box-shadow:var(--shadow);padding:28px}
.about-card p{font-size:18px;line-height:1.65;margin:0 0 14px;text-wrap:pretty}
.about-card p:last-child{margin:0}
.about-card .lede{font-size:22px;font-weight:500}
.about-side{display:flex;flex-direction:column;gap:14px}
.fact{
  background:var(--paper);border:var(--b);padding:14px 18px;
  display:flex;align-items:center;gap:14px;
}
.fact .k{font-family:var(--ff-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;width:90px;flex-shrink:0}
.fact .v{font-weight:600}
.fact.accent{background:var(--accent);color:#fff}
.fact.accent .k{color:rgba(255,255,255,.8)}
.fact.yellow{background:var(--accent-2)}
[data-theme="dark"] .fact.yellow{color:#0e0d0a}
[data-theme="dark"] .fact.yellow .k{color:rgba(14,13,10,.7)}

/* ----------------------------------------------------------- SKILLS ----- */
.skill-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.skill-card{
  background:var(--paper);border:var(--b);box-shadow:var(--shadow);padding:20px;
  position:relative;transition:transform .15s,box-shadow .15s;
}
.skill-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 0 var(--ink)}
.skill-card h3{margin:0 0 4px;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.skill-card .skill-icon{
  width:28px;height:28px;display:grid;place-items:center;
  background:var(--ink);color:var(--accent-2);font-family:var(--ff-pixel);font-size:18px;
  border:1.5px solid var(--ink);
}
.skill-card .lvl{
  font-family:var(--ff-mono);font-size:11px;color:var(--muted);
  margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.skill-card .lvl .bar{
  flex:1;height:8px;background:var(--bg);border:1.5px solid var(--ink);position:relative;
}
.skill-card .lvl .bar::after{
  content:"";position:absolute;left:0;top:0;bottom:0;background:var(--accent);
  width:var(--w,80%);
}
.skill-card ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.skill-card li{
  font-family:var(--ff-mono);font-size:11px;
  background:var(--bg);border:1.5px solid var(--ink);padding:3px 8px;
}
[data-theme="dark"] .skill-card .skill-icon{background:#0e0d0a;color:#ffd83b;border-color:#0e0d0a}

/* ------------------------------------------------------- EXPERIENCE ----- */
.exp-list{display:flex;flex-direction:column;gap:0;border:var(--b-thick);background:var(--paper);box-shadow:var(--shadow-lg)}
.exp-row{
  display:grid;grid-template-columns:180px 1fr 220px;gap:24px;
  padding:24px 28px;border-bottom:var(--b);align-items:start;
  transition:background .12s;
}
.exp-row:last-child{border-bottom:0}
.exp-row:hover{background:var(--bg)}
.exp-row.current{background:linear-gradient(90deg,var(--accent-2) 0,var(--accent-2) 6px,var(--paper) 6px)}
.exp-row.current:hover{background:linear-gradient(90deg,var(--accent-2) 0,var(--accent-2) 6px,var(--bg) 6px)}
.exp-when{font-family:var(--ff-mono);font-size:12px;color:var(--muted)}
.exp-when .now{display:block;width:fit-content;background:var(--ink);color:var(--accent-2);padding:2px 6px;margin-top:6px;font-size:11px}
.exp-co{font-size:20px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
.exp-role{font-family:var(--ff-mono);font-size:12px;color:var(--muted);margin-bottom:10px}
.exp-blurb{font-size:14px;line-height:1.55;color:var(--ink)}
.exp-tags{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.tag-mini{font-family:var(--ff-mono);font-size:10px;border:1.5px solid var(--ink);padding:2px 6px;background:var(--bg)}
[data-theme="dark"] .exp-when .now{background:#0e0d0a;color:#ffd83b}
[data-theme="dark"] .exp-row.current{background:linear-gradient(90deg,var(--accent-2) 0,var(--accent-2) 6px,var(--paper) 6px)}
[data-theme="dark"] .exp-row.current:hover{background:linear-gradient(90deg,var(--accent-2) 0,var(--accent-2) 6px,var(--bg) 6px)}

/* ---------------------------------------------------------- CONTACT ----- */
.contact-card{
  background:var(--ink);color:var(--paper);
  padding:48px;border:var(--b-thick);box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;
}
.contact-card h2{font-size:64px;line-height:.95;letter-spacing:-.03em;margin:0 0 16px;font-weight:700}
.contact-card h2 .y{color:var(--accent-2)}
.contact-card p{color:rgba(250,247,237,.75);max-width:420px;margin:0 0 24px}
.links-list{display:flex;flex-direction:column;gap:8px}
.links-list a{
  background:var(--paper);color:var(--ink);text-decoration:none;
  padding:14px 18px;border:2px solid var(--paper);
  font-family:var(--ff-mono);font-size:13px;
  display:flex;align-items:center;justify-content:space-between;
  transition:transform .12s;
}
.links-list a:hover{background:var(--accent-2);transform:translateX(-4px)}
.links-list a .arr{font-family:var(--ff-sans);font-weight:700}
[data-theme="dark"] .contact-card{background:#0e0d0a;color:#f4ecd8;border-color:#f4ecd8;box-shadow:10px 10px 0 0 #f4ecd8}
[data-theme="dark"] .contact-card p{color:rgba(244,236,216,.72)}
[data-theme="dark"] .links-list a{background:#f4ecd8;color:#0e0d0a;border-color:#f4ecd8}
[data-theme="dark"] .links-list a:hover{background:#ffd83b;color:#0e0d0a}
/* Contact is an always-dark island — chips + link icons hardcode
   #0e0d0a / #f4ecd8 / #3a352d so they stay legible in both themes. */
.contact-card .chip.y{color:#0e0d0a;border-color:#0e0d0a}
.contact-card .chip.outline{background:transparent;color:#f4ecd8;border-color:#f4ecd8}
.contact-card .links-list .ico{color:#3a352d;margin-right:8px}

/* (theme-toggle dark hook moved to components.css — shared with legal pages) */

/* ============================ RESPONSIVE — TABLET ======================== */
@media (max-width: 980px){
  .topbar{padding:8px calc(18px + var(--shadow-extent));font-size:12px;flex-wrap:wrap;gap:8px}
  .topbar .marquee{order:3;flex-basis:100%}
  nav.main{padding:12px calc(18px + var(--shadow-extent));flex-wrap:wrap;gap:10px}
  nav.main ul{order:3;flex-basis:100%;justify-content:flex-start;flex-wrap:wrap;border-top:var(--b);padding-top:10px;margin-top:4px}
  .hero{padding:48px calc(18px + var(--shadow-extent)) 36px}
  .hero-grid{grid-template-columns:1fr;gap:32px;align-items:start}
  .hero h1{font-size:clamp(48px,11vw,84px)}
  .avatar-card{max-width:520px}
  section{padding:48px calc(18px + var(--shadow-extent));scroll-margin-top:120px}
  .about-grid{grid-template-columns:1fr;gap:24px}
  .skill-blocks{grid-template-columns:repeat(2,1fr)}
  .exp-row{grid-template-columns:140px 1fr;gap:18px;padding:20px}
  .exp-tags{grid-column:1 / -1;margin-top:10px}
  .contact-card{grid-template-columns:1fr;padding:32px;gap:24px}
  .contact-card h2{font-size:clamp(40px,8vw,56px)}
  .section-title{font-size:clamp(32px,6vw,42px)}
  .section-head{margin-bottom:24px}
  .badge-float{display:none}
  footer{flex-direction:column;gap:6px;align-items:flex-start;padding:20px calc(18px + var(--shadow-extent))}
}

/* ============================= RESPONSIVE — PHONE ======================= */
@media (max-width: 620px){
  .topbar{padding:8px calc(8px + var(--shadow-extent));font-size:11px}
  nav.main{padding:8px calc(8px + var(--shadow-extent))}
  /* Phone nav diet: hide brand wordmark and the section link list entirely.
     Sticky nav already overlaps section content on jump, and ul row eats
     persistent vertical space — recruiters on mobile scroll, not tap nav.
     The remaining brand + toggles + Hire-me CTA acts as a persistent CTA bar. */
  nav.main .brand > div{display:none}
  nav.main ul{display:none}
  nav.main .brand .mark{width:28px;height:28px}
  nav.main a{padding:5px 8px;font-size:12px}
  .cta{padding:8px 12px;font-size:13px}
  #theme-toggle{padding:6px 8px}
  .hero{padding:36px calc(8px + var(--shadow-extent)) 28px}
  .hero h1{font-size:clamp(40px,12vw,64px);line-height:.95}
  .hero p.lead{font-size:16px}
  .meta{gap:6px}
  .chip{font-size:11px;padding:5px 9px}
  section{padding:40px calc(8px + var(--shadow-extent));scroll-margin-top:60px}
  .section-num{font-size:36px}
  .section-title{font-size:30px}
  .about-card{padding:20px}
  .about-card .lede{font-size:18px}
  .about-card p{font-size:15px}
  .skill-blocks{grid-template-columns:1fr;gap:12px}
  .skill-card{padding:16px}
  .exp-row{grid-template-columns:1fr;padding:18px;gap:8px}
  .exp-when{display:flex;justify-content:space-between;align-items:center}
  .exp-when .now{margin-top:0}
  .contact-card{padding:24px}
  .contact-card h2{font-size:40px}
  .links-list a{padding:12px 14px;font-size:12px}
  .term-body{font-size:11px;padding:14px}
  .term-body .pix-mascot{right:8px;bottom:8px}
  .avatar-stats{grid-template-columns:1fr 1fr;font-size:10px}
  .avatar-stats b{font-size:16px}
  footer{font-size:10px}
}