/* ==========================================================================
   Variant: Inference Cluster
   The hero is a full-bleed WebGL scene: a lit graph of inference nodes you fly
   through as you scroll. Below it, rendered objects and deep tilt cards.
   ========================================================================== */

/* ---------- hero ---------- */
.hero-cluster{position:relative;min-height:min(calc(100vh - var(--nav-h)),960px);display:flex;align-items:center;overflow:hidden;padding:clamp(2.5rem,5vw,4rem) 0}
.scene{position:absolute;inset:0;z-index:0;overflow:hidden;background:radial-gradient(55% 60% at 68% 45%,rgba(245,158,11,.10),transparent 70%)}
.scene canvas{position:absolute;inset:0;width:100% !important;height:100% !important;display:block}
.scene.poster{background-image:radial-gradient(50% 55% at 68% 45%,rgba(245,158,11,.26),transparent 62%),radial-gradient(rgba(255,226,190,.28) 1px,transparent 1.5px);background-size:100% 100%,26px 26px}
.scene.poster::before{content:'';position:absolute;left:52%;top:12%;width:min(38vw,520px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(245,158,11,.32);box-shadow:0 0 0 60px rgba(245,158,11,.04),0 0 120px rgba(245,158,11,.12)}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(11,10,9,.94) 0%,rgba(11,10,9,.78) 34%,rgba(11,10,9,.22) 58%,rgba(11,10,9,0) 78%),linear-gradient(180deg,rgba(11,10,9,.55),transparent 18%,transparent 78%,rgba(11,10,9,.95))}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,600px) 1fr;gap:2rem;align-items:center;width:100%}
.hero-text{display:grid;gap:1.25rem;align-content:center}
.hero-name{font:600 clamp(3.4rem,7.8vw,6.8rem)/.95 var(--display);letter-spacing:-.02em}
.hero-role{font:500 clamp(1.1rem,1.8vw,1.5rem)/1.3 var(--display);color:var(--text-2);margin-top:-.5rem}
.hero-lede{font-size:clamp(1.02rem,1.35vw,1.2rem);color:var(--text-2);max-width:34em}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.25rem}
.hero-stats{display:flex;gap:2.25rem;padding-top:1.5rem;margin-top:.75rem;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.hero-stats dd{font:600 1.9rem/1 var(--display);color:var(--text)}
.hero-stats dt{font:400 .64rem/1.4 var(--mono);color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;margin-top:.4rem}
.scene-cap{position:absolute;right:var(--pad);bottom:1.1rem;z-index:2;display:flex;gap:1.5rem;font:400 .64rem/1.5 var(--mono);color:var(--text-3);letter-spacing:.04em;pointer-events:none;text-align:right}
.scene-cap b{color:var(--text-2);font-weight:500}

/* ---------- projects ---------- */
.projects{background:linear-gradient(180deg,transparent,rgba(19,17,16,.55) 30%,transparent)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.cards .card{--thick:16px}
/* the artwork stays flat everywhere: a 3D-tilted child inside a clipped thumb inside a 3D card
   is the construct WebKit fails to paint. Depth comes from the card tilt and the thumb lift. */
.cards .thumb .art{transition:transform .6s var(--ease)}
.card:hover .thumb .art,.card.is-tilting .thumb .art{transform:scale(1.04)}
.card.is-tilting .thumb-glow{opacity:1.4}

/* ---------- skills ---------- */
.skills-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
.skill-card{grid-column:span 4}
.skill-card:nth-child(n+7){grid-column:span 3}
.skill-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.5rem 1.5rem;box-shadow:var(--shadow-card);display:grid;gap:1rem;align-content:start}
.skill-card header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.skill-card h3{font:600 1.3rem/1.15 var(--display)}
.skill-count{font:400 .66rem/1 var(--mono);color:var(--text-3);letter-spacing:.06em;border:1px solid var(--line);border-radius:999px;padding:.35rem .55rem;flex:none;font-variant-numeric:tabular-nums}
.skill-card:nth-child(3n+1) .chips li{border-color:rgba(245,158,11,.25);color:#e9c07a}
.skill-card:nth-child(3n+2) .chips li{border-color:rgba(138,127,176,.35);color:#c2b9df}
.skill-card:nth-child(3n) .chips li{border-color:rgba(111,143,122,.35);color:#b6ccbd}

/* ---------- achievements ---------- */
.achievements{background:linear-gradient(180deg,transparent,rgba(19,17,16,.55) 40%,transparent)}
.ach-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem}
.ach-card{grid-column:span 2;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem 1.6rem 1.6rem;box-shadow:var(--shadow-card);display:grid;gap:.7rem;align-content:start}
.ach-card:nth-child(4),.ach-card:nth-child(5){grid-column:span 3}
.ach-card h3{font:600 1.5rem/1.15 var(--display)}
.ach-desc{color:var(--text-2);font-size:.95rem}
.ach-list{display:grid;gap:.4rem;margin-top:.4rem;padding-top:.9rem;border-top:1px solid var(--line)}
.ach-list li{font:400 .72rem/1.5 var(--mono);color:var(--text-3);letter-spacing:.02em;padding-left:1rem;position:relative}
.ach-list li::before{content:'';position:absolute;left:0;top:.65em;width:6px;height:1px;background:var(--amber)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .cards{grid-template-columns:1fr 1fr}
  .skill-card,.skill-card:nth-child(n+7){grid-column:span 6}
  .ach-card,.ach-card:nth-child(4),.ach-card:nth-child(5){grid-column:span 3}
}
@media (max-width:820px){
  /* block layout: the caption flows under the text instead of sharing the row with it */
  .hero-cluster{display:block;min-height:0;padding:3rem 0 3.5rem}
  .hero-grid{grid-template-columns:1fr}
  .hero-scrim{background:linear-gradient(180deg,rgba(11,10,9,.86),rgba(11,10,9,.7) 60%,rgba(11,10,9,.96))}
  .scene-cap{position:relative;right:auto;bottom:auto;z-index:2;justify-content:flex-start;flex-wrap:wrap;gap:.5rem 1.5rem;padding:2rem var(--pad) 0;text-align:left}
  .scene-cap>span:first-child{display:none}
  .hero-name{font-size:clamp(3rem,13vw,4.6rem)}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .skill-card,.skill-card:nth-child(n+7){grid-column:span 12}
  .ach-card,.ach-card:nth-child(4),.ach-card:nth-child(5){grid-column:span 6}
  .hero-stats{gap:1.25rem;flex-wrap:wrap}
}