/* ══════════════════════════════════════════
   INDEX — HERO
══════════════════════════════════════════ */
#scroll-driver{height:100vh;pointer-events:none;position:relative}
#scene{position:fixed;inset:0;z-index:10;pointer-events:none;will-change:opacity}
.layer{position:absolute;inset:0;will-change:transform}
.hero-img-wrap{
  position:absolute;overflow:visible;
  pointer-events:auto;cursor:default;
}
.hero-img-wrap img{
  width:100%;height:auto;display:block;
  pointer-events:none;user-select:none;
  will-change:transform;backface-visibility:hidden;transform-origin:center center;
  transform:translateZ(0);
}
#hero-title{
  position:fixed;left:50%;top:50%;
  transform:translate(-50%,-50%);
  text-align:center;z-index:20;
  pointer-events:none;will-change:transform,opacity;
}
.hero-name{
  font-family:'Grotzec',sans-serif;
  font-weight:var(--t-name-weight);font-size:var(--t-name-size);
  letter-spacing:var(--t-grotzec-ls);text-transform:uppercase;
  line-height:0.82;color:var(--hole);
}
.hero-tagline{
  font-family:'Grotzec',sans-serif;
  font-weight:var(--t-nav-weight);font-size:var(--t-nav-size);
  letter-spacing:var(--t-grotzec-ls);text-transform:uppercase;
  color:var(--hole);
}

/* ── Proficiency ── */
#proficiency{position:relative;z-index:30;background:var(--hole);color:var(--clean)}
#proficiency .inner{
  width:75vw;margin:0 auto;padding:12vh 0;
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
}
.prof-heading{
  font-family:'Grotzec',sans-serif;
  font-weight:var(--t-head-weight);font-size:var(--t-head-size);
  letter-spacing:var(--t-grotzec-ls);text-transform:uppercase;
  color:var(--clean);line-height:0.9;margin-bottom:5vh;
}
.proficiency-content{display:flex;align-items:flex-start;justify-content:space-between}
.proficiency-grid{display:flex;flex-direction:column;gap:1.8vh}
.skill-row{
  display:flex;align-items:center;gap:1.2vw;
  opacity:0;transform:translateY(10px);
  transition:opacity 0.5s ease,transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
#proficiency.animated .skill-row             {opacity:1;transform:none}
#proficiency.animated .skill-row:nth-child(1){transition-delay:0.04s}
#proficiency.animated .skill-row:nth-child(2){transition-delay:0.11s}
#proficiency.animated .skill-row:nth-child(3){transition-delay:0.18s}
#proficiency.animated .skill-row:nth-child(4){transition-delay:0.25s}
#proficiency.animated .skill-row:nth-child(5){transition-delay:0.32s}
#proficiency.animated .skill-row:nth-child(6){transition-delay:0.39s}
.skill-label{
  font-family:'Plain',sans-serif;
  font-weight:var(--t-content-weight);font-size:var(--t-content-size);
  letter-spacing:var(--t-content-ls);width:11vw;text-align:right;color:var(--clean);
}
.dots{display:flex;gap:0.6vw}
.dot{width:2.4vw;height:2.4vw;border-radius:50%;flex-shrink:0}
.dot.empty{background:transparent!important}
.illustrator .skill-label{color:var(--pulse)}.illustrator .dot.filled{background:var(--pulse)}.illustrator .dot.empty{border:1px solid var(--pulse)}
.figma       .skill-label{color:var(--rays)} .figma .dot.filled{background:var(--rays)} .figma .dot.empty{border:1px solid var(--rays)}
.photoshop   .skill-label{color:var(--water)}.photoshop .dot.filled{background:var(--water)}.photoshop .dot.empty{border:1px solid var(--water)}
.framer      .skill-label{color:var(--grass)}.framer .dot.filled{background:var(--grass)}.framer .dot.empty{border:1px solid var(--grass)}
.glyphs      .skill-label{color:var(--plum)} .glyphs .dot.filled{background:var(--plum)} .glyphs .dot.empty{border:1px solid var(--plum)}
.claudecode      .skill-label{color:var(--amber)} .claudecode .dot.filled{background:var(--amber)} .claudecode .dot.empty{border:1px solid var(--amber)}
.comfy       .skill-label{color:var(--spectra)}.comfy .dot.filled{background:var(--spectra)}.comfy .dot.empty{border:1px solid var(--spectra)}
.prof-stats{display:flex;flex-direction:column;gap:3.5vh;padding-top:0.5vh}
.prof-stat-number{
  font-family:'Grotzec',sans-serif;
  font-weight:var(--t-head-weight);font-size:var(--t-head-size);
  letter-spacing:var(--t-grotzec-ls);line-height:0.88;color:var(--clean);
}
.prof-stat-label{
  font-family:'Plain',sans-serif;
  font-weight:var(--t-minor-weight);font-size:var(--t-minor-size);
  letter-spacing:var(--t-minor-ls);text-transform:uppercase;
  color:var(--clean);opacity:0.6;margin-top:5px;
}

/* ── Highlights ── */
#highlights{position:relative;z-index:30;background:var(--clean)}
#highlights .inner{width:75vw;margin:0 auto;padding:14vh 0 10vh}
.hl-supertitle{display:flex;justify-content:flex-end;margin-bottom:6px}
.all-work-link{
  font-family:'Plain',sans-serif;
  font-weight:var(--t-minor-weight);font-size:var(--t-minor-size);
  letter-spacing:var(--t-minor-ls);text-transform:uppercase;
  text-decoration:none;color:var(--hole);position:relative;cursor:pointer;
}
.all-work-link::after{
  content:'';position:absolute;left:0;bottom:-3px;
  width:0;height:1.5px;background:var(--hole);
  transition:width 0.3s cubic-bezier(0.4,0,0.2,1);
}
.all-work-link:hover::after{width:100%}
/* Pop state for all-work-link */
.all-work-link.pop::after{width:100%}

.hl-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(58px,7vh);gap:10px;
}
.hl-headline-block{grid-column:9/13;grid-row:1/2;display:flex;align-items:flex-end;padding-bottom:2px}
.hl-heading{
  font-family:'Grotzec',sans-serif;
  font-weight:var(--t-head-weight);font-size:var(--t-head-size);
  letter-spacing:var(--t-grotzec-ls);text-transform:uppercase;
  line-height:0.88;color:var(--hole);
}
.hl-card{
  position:relative;overflow:hidden;background:var(--blur);
  display:block;text-decoration:none;isolation:isolate;cursor:pointer;
}
.hl-card-1{grid-column:1/6;grid-row:1/6} .hl-card-2{grid-column:6/9;grid-row:1/6}
.hl-card-3{grid-column:9/13;grid-row:2/6}.hl-card-4{grid-column:1/7;grid-row:6/10}
.hl-card-5{grid-column:7/13;grid-row:6/10}
.hl-card-bg{position:absolute;inset:0;z-index:0;background:var(--blur);opacity:0.55}
.hl-card-img{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;display:block;
  filter:saturate(0.4) brightness(0.72);
  transform:scale(1);transform-origin:center;
  transition:transform 900ms cubic-bezier(0.19,1,0.22,1),filter 700ms ease;
}
.hl-card-5 .hl-card-img { object-position: bottom; }
.project-row[data-href="project-4"] .proj-thumb img { object-position: right; }

.hl-card-img[src=""]{display:none}
/* Hover: slow, luxurious */
.hl-card:hover .hl-card-img{transform:scale(1.048);filter:saturate(1) brightness(1)}
/* Pop: fast in, slow return (removing .pop class reverts to the 900ms transition above) */
.hl-card.pop .hl-card-img{
  transform:scale(1.048);filter:saturate(1) brightness(1);
  transition:transform 280ms ease-out,filter 260ms ease-out;
}
.hl-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(1,1,1,0.6) 0%,rgba(1,1,1,0.06) 45%,transparent 100%);
  z-index:1;
}
.hl-card-text{position:absolute;left:0;bottom:0;padding:2vh 1.5vw;z-index:2;color:var(--clean)}
.hl-card-title{
  font-family:'Grotzec',sans-serif;
  font-weight:var(--t-subsubhead-weight);font-size:var(--t-subsubhead-size);
  letter-spacing:var(--t-grotzec-ls);text-transform:uppercase;line-height:0.93;
  transition:color 0.3s ease;
}
.hl-card-cat{
  font-family:'Plain',sans-serif;
  font-weight:var(--t-cat-weight);font-size:var(--t-cat-size);
  letter-spacing:var(--t-cat-ls);text-transform:uppercase;
  margin-top:5px;opacity:0.8;transition:color 0.3s ease,opacity 0.3s ease;
}
.hl-card:hover .hl-card-title,.hl-card:hover .hl-card-cat{color:var(--card-accent)}
.hl-card:hover .hl-card-cat{opacity:1}
.hl-card.pop .hl-card-title,.hl-card.pop .hl-card-cat{color:var(--card-accent)}
.hl-card.pop .hl-card-cat{opacity:1}
.hl-footer-row{
  padding-top:3.5vh;
  font-family:'Plain',sans-serif;
  font-weight:var(--t-content-weight);font-size:var(--t-content-size);
  letter-spacing:var(--t-content-ls);text-transform:uppercase;color:var(--blur);
}

/* ══════════════════════════════════════════
   WORK PAGE
══════════════════════════════════════════ */
#work-page{width:75vw;margin:0 auto;padding:15vh 0 8vh}
#filters{display:flex;gap:3.5vw;align-items:center;margin-bottom:5vh;flex-wrap:wrap}
.filter-btn{
  font-family:'Plain',sans-serif;
  font-weight:var(--t-minor-weight);font-size:var(--t-minor-size);
  letter-spacing:var(--t-minor-ls);text-transform:uppercase;
  color:var(--blur);background:none;border:none;cursor:pointer;
  padding:0;position:relative;transition:color 0.25s ease;
}
.filter-btn::after{
  content:'';position:absolute;left:0;bottom:-3px;
  width:0;height:1.5px;background:var(--hole);
  transition:width 0.3s cubic-bezier(0.4,0,0.2,1);
}
.filter-btn:hover{color:var(--hole)}
.filter-btn.active{color:var(--hole)}
.filter-btn.active::after{width:100%}
#project-list{width:100%}
.project-row{
  display:grid;grid-template-columns:100px 1fr auto;
  align-items:center;gap:2.5vw;
  padding:3vh 0;border-bottom:1px solid rgba(1,1,1,0.1);
  text-decoration:none;color:inherit;cursor:pointer;
}
.project-row.hidden{display:none}
.project-row[data-accent="water"]  {--accent:var(--water)}
.project-row[data-accent="amber"]  {--accent:var(--amber)}
.project-row[data-accent="plum"]   {--accent:var(--plum)}
.project-row[data-accent="grass"]  {--accent:var(--grass)}
.project-row[data-accent="spectra"]{--accent:var(--spectra)}
.project-row[data-accent="zred"]{--accent:var(--zred)}
/* Thumbnail */
.proj-thumb{width:100px;height:100px;overflow:hidden;flex-shrink:0}
.proj-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.project-left{display:flex;flex-direction:column;gap:4px}
.project-cat{
  font-family:'Plain',sans-serif;
  font-weight:var(--t-cat-weight);font-size:var(--t-cat-size);
  letter-spacing:var(--t-cat-ls);text-transform:uppercase;color:var(--accent);
}
.project-name{
  font-family:'Grotzec',sans-serif;
  font-weight:var(--t-subproject-weight);font-size:var(--t-subproject-size);
  letter-spacing:var(--t-grotzec-ls);text-transform:uppercase;
  line-height:0.92;color:var(--hole);transition:color 0.25s ease;
}
.project-row:hover .project-name{color:var(--accent)}
.project-right{display:flex;gap:4vw;align-items:flex-end;flex-shrink:0}
.stat-block{display:flex;flex-direction:column;align-items:flex-end;gap:0px;max-width:92px}
.stat-val{
  font-family:'Grotzec',sans-serif;
  font-weight:var(--t-stats-weight);font-size:var(--t-stats-size);
  letter-spacing:var(--t-grotzec-ls);line-height:0.92;
  color:var(--accent);opacity:0.55;transition:opacity 0.25s ease;
}
.project-row:hover .stat-val{opacity:1}
.stat-lbl{
  font-family:'Plain',sans-serif;
  font-weight:var(--t-minor-weight);font-size:var(--t-minor-size);
  letter-spacing:var(--t-minor-ls);text-transform:uppercase;color:var(--blur);
  text-align:right;line-height:1.3;
}
/* Work page footer */
.work-footer{
  margin-top:6vh;padding:2vh 0;
  font-family:'Plain',sans-serif;
  font-weight:var(--t-content-weight);font-size:var(--t-content-size);
  letter-spacing:var(--t-content-ls);text-transform:uppercase;color:var(--blur);
}

/* ══════════════════════════════════════════
   ABOUT PAGE — 100vh horizontal stack
══════════════════════════════════════════ */
.about-page{
  background:var(--clean);overflow:hidden;
  display:flex;flex-direction:column;height:100vh;
  padding-top:15vh;
}
.bio{
  flex-shrink:0;
  width:47vw;margin:0 auto;padding-bottom:2vh;
  font-family:'Plain',sans-serif;
  font-weight:var(--t-content-weight);font-size:var(--t-content-size);
  letter-spacing:var(--t-content-ls);line-height:1.7;color:var(--blur);
}
/* Horizontal main zone: image+who-me left, wip note right */
.about-main{
  flex:1;min-height:0;
  display:flex;flex-direction:row;
  width:87.5vw;margin:0 auto;
  gap:2.5vw;overflow:hidden;
}
.about-left{
  flex:1;min-width:0;overflow:hidden;
}
/* Grid overlap: who-me over image top-right — fully responsive, no absolute px */
.about-visual{
  display:grid;width:100%;height:100%;
}
.about-img{
  grid-area:1/1;
  width: auto;
  height: 65vh;   /* not 100% */
  display: block;
  object-position: top center;
  justify-self: right;
  display:block;
}
.who-me{
  grid-area:1/1;align-self:start;justify-self:left;
  margin-left: 3.5em;
  z-index:2;pointer-events:none;
  font-family:'Grotzec',sans-serif;
  font-weight:var(--t-project-weight);font-size:var(--t-project-size);
  letter-spacing:var(--t-grotzec-ls);text-transform:uppercase;
  line-height:0.88;color:var(--hole);
}
/* Right column: wip note pinned to bottom of image */
.about-right{
  flex-shrink:0;width:18vw;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:1vh;
}
.wip-note{
  font-family:'Plain',sans-serif;
  font-weight:var(--t-content-weight);font-size:var(--t-content-size);
  letter-spacing:var(--t-content-ls);color:var(--hole);line-height:1.7;font-style:italic;
}
.about-footer{
  flex-shrink:0;
  width:75vw;margin:0 auto;padding:1.5vh 0 2vh;
  display:flex;justify-content:space-between;align-items:center;
}


/* ══════════════════════════════════════════
   PROJECT PAGES
══════════════════════════════════════════ */
.proj-hero{
  position:relative;width:100%;height:100vh;background:var(--clean);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 5vw calc(15vh + 3vw);
}
.proj-hero-accent{
  position:absolute;top:0;left:0;right:0;height:85%;
  background:var(--accent);z-index:1;pointer-events:none;will-change:opacity;
}
.project-category{
  font-family:'Plain',sans-serif;
  font-weight:var(--t-cat-weight);font-size:var(--t-cat-size);
  letter-spacing:var(--t-cat-ls);text-transform:uppercase;
  color:var(--accent);position:relative;z-index:2;margin-bottom:1.2vh;
}
.project-title{
  font-family:'Grotzec',sans-serif;
  font-weight:var(--t-project-weight);font-size:var(--t-project-size);
  letter-spacing:var(--t-grotzec-ls);text-transform:uppercase;
  line-height:0.88;color:var(--hole);position:relative;z-index:2;
}
.proj-content{ width:75vw;margin:0 auto;padding:6vh 0}
.stats-row{
  display:flex;gap:4vw;align-items:flex-start;flex-wrap:wrap;
  padding-bottom:5vh;margin-bottom:5vh;
  /* border-bottom removed */
}
.proj-stat-block{display:flex;flex-direction:column;min-width:80px}
.proj-stat-val{
  font-family:'Grotzec',sans-serif;
  font-weight:var(--t-stats-weight);font-size:var(--t-stats-size);
  letter-spacing:var(--t-grotzec-ls);line-height:0.88;color:var(--accent);
}
.proj-stat-lbl{
  font-family:'Plain',sans-serif;
  font-weight:var(--t-minor-weight);font-size:var(--t-minor-size);
  letter-spacing:var(--t-minor-ls);text-transform:uppercase;color:var(--blur);margin-top:4px;
}
.details{display:grid;grid-template-columns:1fr 2fr;gap:6vw;align-items:start}
.skills-col h3,.prose-block h3{
  font-family:'Plain',sans-serif;font-weight:700;font-size:var(--t-minor-size);
  letter-spacing:var(--t-minor-ls);text-transform:uppercase;color:var(--hole);margin-bottom:1.4vh;
}
.skill-item{
  font-family:'Plain',sans-serif;
  font-weight:var(--t-content-weight);font-size:var(--t-content-size);
  letter-spacing:var(--t-content-ls);color:var(--blur);line-height:1.5;margin-bottom:0.6vh;
}
.prose-block{margin-bottom:3.5vh}
.prose-block p{
  font-family:'Plain',sans-serif;
  font-weight:var(--t-content-weight);font-size:var(--t-content-size);
  letter-spacing:var(--t-content-ls);color:var(--blur);line-height:1.7;max-width:680px;
}
/* Gallery — full-width images below content */
.project-gallery{width:100%;display:flex;flex-direction:column;margin:4vh 0}
.gallery-img{display:none;width:100%;height:auto;vertical-align:top}
.gallery-img[src]:not([src=""]){display:block}

#view-project-3 .project-gallery { width: 75vw; margin: 0 auto;}
#view-project-4 .project-gallery { width: 75vw; margin: 0 auto;}

/* ── Project nav ── */
.project-nav{
  width:75vw;margin:0 auto;padding:6vh 0 2vh;
  display:flex;justify-content:space-between;align-items:flex-start;
  /* border-top removed */
}
.proj-nav-item{
  display:flex;flex-direction:column;gap:6px;
  text-decoration:none;color:var(--hole);cursor:pointer;
  --nav-accent:var(--accent);
}
.proj-nav-next{text-align:right;align-items:flex-end}
.proj-nav-label{
  font-family:'Plain',sans-serif;
  font-weight:var(--t-minor-weight);font-size:var(--t-minor-size);
  letter-spacing:var(--t-minor-ls);text-transform:uppercase;color:var(--blur);
}
.proj-nav-title{
  font-family:'Grotzec',sans-serif;
  font-weight:var(--t-subproject-weight);font-size:var(--t-subproject-size);
  letter-spacing:var(--t-grotzec-ls);text-transform:uppercase;
  line-height:0.9;display:inline-block;padding-bottom:4px;
  position:relative;
  transition:color 0.25s ease;
  /* No static border-bottom — replaced by animated ::after */
}
/* Underline: scaleX animation, grows from appropriate side */
.proj-nav-title::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:2px;background:var(--nav-accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.32s cubic-bezier(0.4,0,0.2,1);
}
.proj-nav-next .proj-nav-title::after{transform-origin:right}
.proj-nav-item:hover .proj-nav-title{color:var(--nav-accent)}
.proj-nav-item:hover .proj-nav-title::after{transform:scaleX(1)}

/* ══════════════════════════════════════════
   FOOTER — borderless, thin
══════════════════════════════════════════ */
.page-footer{
  position:relative;z-index:30;background:var(--clean);
  padding:2vh 0;
}
.page-footer .inner{width:75vw;margin:0 auto}
.page-footer-simple{width:75vw;margin:0 auto;padding:2vh 0}
.footer-text{
  font-family:'Plain',sans-serif;
  font-weight:var(--t-content-weight);font-size:var(--t-content-size);
  letter-spacing:var(--t-content-ls);text-transform:uppercase;color:var(--blur);
}

/* ══════════════════════════════════════════
   PAGE TRANSITION
══════════════════════════════════════════ */
@keyframes pageFadeIn{from{opacity:0}to{opacity:1}}
.page-view.active{animation:pageFadeIn 0.4s ease forwards}