* { margin:0; padding:0; box-sizing:border-box; }
body { background:#000; overflow-x:hidden; }

/* ════════════════════════════════
   SCRUB
════════════════════════════════ */
#scrub { height:500vh; position:relative; }
#sticky { position:sticky; top:0; height:100vh; width:100%; overflow:hidden; }
#vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#overlay { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }

#portfolioLabel {
  position:absolute; bottom:168px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,0.82); font-family:'Syne',sans-serif;
  font-size:clamp(11px,1.4vw,14px); font-weight:600; letter-spacing:0.38em;
  text-transform:uppercase; white-space:nowrap; pointer-events:none;
  text-shadow:0 0 28px rgba(255,255,255,0.35), 0 0 60px rgba(255,255,255,0.12);
  transition:opacity 0.4s ease;
}
#hint {
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,0.55); font-family:system-ui,sans-serif;
  font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none;
}
#hint::after {
  content:''; width:1px; height:40px;
  background:linear-gradient(to bottom,rgba(255,255,255,0.5),transparent);
  animation:drop 2s ease-in-out infinite;
}
@keyframes drop {
  0%   { opacity:0; transform:scaleY(0); transform-origin:top; }
  40%  { opacity:1; transform:scaleY(1); transform-origin:top; }
  100% { opacity:0; transform:scaleY(1); transform-origin:bottom; }
}

/* ════════════════════════════════
   HERO WRAP (scroll driver)
════════════════════════════════ */
#heroWrap { height:280vh; position:relative; }

/* ════════════════════════════════
   HERO
════════════════════════════════ */
#hero {
  position:sticky; top:0; height:100vh; overflow:hidden;
  background-color:#ffffff;
  background-image:radial-gradient(circle,rgba(0,0,0,0.055) 1px,transparent 1px);
  background-size:48px 48px;
}
#hero::before {
  content:''; position:absolute; top:64px; left:0; right:0;
  height:1px; background:rgba(0,0,0,0.07); z-index:5; pointer-events:none;
}

/* All UI — JS controls opacity/transform via scroll */
.ui {
  position:absolute; font-family:'Inter',sans-serif; font-size:9px;
  letter-spacing:0.24em; text-transform:uppercase; font-weight:500;
  color:rgba(0,0,0,0.28); line-height:1.8; z-index:20;
  opacity:0; will-change:opacity,transform;
}
.tl { top:32px; left:40px; }
.tr { top:32px; right:40px; text-align:right; }
.bl { bottom:32px; left:40px; cursor:default; transition:color 0.4s ease; }
.bl:hover { color:rgba(176,136,64,0.90); }

#seq {
  position:absolute; top:96px; right:40px; z-index:20;
  font-family:'Inter',sans-serif; font-size:9px; font-weight:500;
  letter-spacing:0.22em; color:rgba(0,0,0,0.18); text-transform:uppercase;
  opacity:0; will-change:opacity;
}
#rail {
  position:absolute; left:24px; top:64px; bottom:0; z-index:5;
  width:1px; background:linear-gradient(to bottom,rgba(0,0,0,0.08),transparent);
  pointer-events:none; opacity:0; will-change:opacity;
}

/* NAME — JS-driven scroll animation */
#name {
  position:absolute; top:88px; left:40px; z-index:20;
  font-family:'Syne',sans-serif; font-weight:600;
  font-size:clamp(72px,9vw,134px);
  color:#0a0a0a; letter-spacing:-0.035em; line-height:0.95;
  text-transform:uppercase;
  opacity:0; transform:translateY(44px);
  will-change:opacity,transform;
}
/* Word-reveal */
.revWord { position:relative; display:inline-block; }
.rw-g    { opacity:0.18; }
.rw-r    {
  position:absolute; left:0; top:0;
  opacity:0; filter:blur(14px); pointer-events:none;
  will-change:opacity,filter;
}

#nameRule {
  position:absolute; z-index:20; pointer-events:none; left:40px;
  height:1px;
  background:linear-gradient(to right,rgba(201,169,110,0.5),rgba(201,169,110,0.05));
  width:clamp(160px,22vw,340px); opacity:0; will-change:opacity;
}

#bio {
  position:absolute; bottom:80px; right:40px; z-index:20;
  max-width:340px; text-align:left;
  font-family:'Inter',sans-serif; font-size:15px;
  line-height:1.85; color:rgba(0,0,0,0.60); font-weight:400;
  opacity:0; will-change:opacity;
}
.vline {
  position:absolute; bottom:0; left:50%; width:1px; height:52px;
  background:linear-gradient(to bottom,rgba(0,0,0,0.10),transparent);
  opacity:0; will-change:opacity;
}

/* Word reveal */
.w {
  display:inline-block; opacity:0; filter:blur(6px); transform:translateY(5px);
  transition:opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease;
}
.w.on { opacity:1; filter:blur(0); transform:translateY(0); }

/* Topo */
#topo {
  position:absolute; inset:0; width:100%; height:100%;
  transform:perspective(650px) rotateX(36deg);
  transform-origin:center 58%; pointer-events:all;
}

/* Spotlight */
#spot {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(
    circle 360px at var(--sx,50%) var(--sy,50%),
    rgba(201,169,110,0.12) 0%, transparent 70%
  );
  opacity:0; transition:opacity 0.35s;
}
#hero:hover #spot { opacity:1; }

/* 3D card */
#card {
  position:absolute; top:52%; left:50%; z-index:10;
  width:clamp(400px,48vw,680px); aspect-ratio:16/10;
  transform:translate(-50%,-50%) perspective(1000px) rotateX(20deg) rotateY(-12deg) rotateZ(2deg);
  transition:transform 0.08s linear; will-change:transform;
}
#card img { width:100%; height:100%; display:block; object-fit:cover; }
#card::before {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,0.22) 0%,transparent 45%,rgba(0,0,0,0.10) 100%);
}
#card::after {
  content:''; position:absolute; bottom:-40px; left:6%; right:6%; height:60px;
  background:radial-gradient(ellipse,rgba(0,0,0,0.20) 0%,transparent 70%);
  filter:blur(16px); z-index:-1;
}
#ph {
  width:100%; height:100%;
  background:linear-gradient(135deg,#d4c4a0,#e8d5b0 40%,#c9a96e);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px; color:rgba(255,255,255,0.55);
  font-family:'Inter',sans-serif; font-size:10px;
  letter-spacing:0.18em; text-transform:uppercase;
}

/* Black dive overlay */
#diveFlash {
  position:absolute; inset:0; z-index:40;
  background:#000; opacity:0; pointer-events:none;
}

/* ════════════════════════════════
   WORK SECTION
════════════════════════════════ */
#work {
  min-height:100vh;
  background: linear-gradient(180deg, #000 0%, #0c0c0c 20%, #111 60%, #0f0f0f 100%);
  position:relative; padding:60px 60px 80px;
}
#workHeader {
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:24px; position:relative; margin-bottom:64px;
}
#workHeader::after {
  content:''; position:absolute; bottom:0; left:0;
  height:1px; width:0; background:rgba(255,255,255,0.09);
  transition:width 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s;
}
#workHeader.vis::after { width:100%; }

#workHeader h2 {
  font-family:'Syne',sans-serif; font-weight:600;
  font-size:clamp(32px,4.5vw,64px); color:#fff;
  letter-spacing:-0.03em; text-transform:uppercase;
  opacity:0; transform:translateY(20px);
  transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
#workHeader.vis h2 { opacity:1; transform:translateY(0); }

#workHeader .wCount {
  font-family:'Inter',sans-serif; font-size:9px; font-weight:500;
  letter-spacing:0.26em; text-transform:uppercase; color:rgba(255,255,255,0.22);
  opacity:0;
  transition:opacity 0.5s ease 0.2s;
}
#workHeader.vis .wCount { opacity:1; }

/* ════════════════════════════════
   PORTFOLIO FILTERS
════════════════════════════════ */
#filters {
  display:flex; gap:8px; flex-wrap:wrap;
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(17,17,17,0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.065);
  /* Break out of #work's 60px horizontal padding to span full viewport width */
  margin: 0 -60px 52px;
  padding: 15px 60px;
}
.fBtn {
  padding:8px 22px;
  border:1px solid rgba(255,255,255,0.10);
  background:transparent;
  color:rgba(255,255,255,0.35);
  font-family:'Inter',sans-serif; font-size:9px; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase;
  cursor:pointer; border-radius:40px;
  transition:color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.fBtn:hover { color:rgba(255,255,255,0.70); border-color:rgba(255,255,255,0.22); }
.fBtn.active {
  color:#fff; border-color:rgba(201,169,110,0.55);
  background:rgba(201,169,110,0.07);
}
/* Pass-through wrappers: on desktop/tablet these don't create their own box,
   so the filter buttons stay direct flex children of #filters (unchanged look) */
#filterRow, #filterScroll { display:contents; }
#navLinks { display:flex; align-items:center; gap:28px; margin-left:auto; }
.navLink {
  font-family:'Inter',sans-serif; font-size:9px; font-weight:500;
  letter-spacing:0.24em; text-transform:uppercase;
  color:rgba(255,255,255,0.40); text-decoration:none;
  white-space:nowrap; transition:color 0.2s ease;
}
.navLink:hover { color:#fff; }

/* ════════════════════════════════
   BENTO GRID  (6-col system)
   narrow = 2/6 = 33%   ← anchor card, sets row height via natural image AR
   sq     = 2/6 = 33%   ← small thumbnail, natural proportions
   half   = 3/6 = 50%
   wide   = 4/6 = 66%   ← stretches to match row height
   full   = 6/6 = 100%
════════════════════════════════ */
#pgrid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:20px;
  align-items:stretch; /* all cards in a row same height */
}

.pCard {
  cursor:pointer; grid-column:span 2; /* default = sq */
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(20px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.pCard.vis    { opacity:1; transform:translateY(0); }
.pCard.narrow { grid-column:span 2; }  /* anchor — natural proportions set row height */
.pCard.half   { grid-column:span 3; }
.pCard.wide   { grid-column:span 4; }
.pCard.full   { grid-column:span 6; }

.pCardImg {
  position:relative; border-radius:10px; overflow:hidden;
  background:#0d0d0d;
  flex:1; /* grow to fill card height (for wide/full paired with narrow) */
}

/* All images default: natural proportions, zero cropping */
.pCardImg img {
  width:100%; height:auto; display:block;
  transition:transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.pCard:hover .pCardImg img { transform:scale(1.03); }

/* half: consistent 16:9, both halves same width → same height, minimal cropping */
.pCard.half .pCardImg { aspect-ratio:16/9; flex:none; }
.pCard.half .pCardImg img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.pCard.half:hover .pCardImg img { transform:scale(1.03); }

/* Jungles with a Twist: image has embedded letterbox bars — zoom past them */
.pCard[data-slug="jungles-with-a-twist"] .pCardImg img { transform:scale(1.32); object-position:center; }
.pCard[data-slug="jungles-with-a-twist"]:hover .pCardImg img { transform:scale(1.35); }

/* Forest with a Twist: top/bottom letterbox bars in original image — zoom past them */
.pCard[data-slug="b-video-twist"] .pCardImg img { transform:scale(1.32); object-position:center; }
.pCard[data-slug="b-video-twist"]:hover .pCardImg img { transform:scale(1.35); }

/* full: panoramic banner */
.pCard.full .pCardImg { aspect-ratio:21/5; flex:none; }
.pCard.full .pCardImg img { height:100%; object-fit:cover; object-position:center; }

/* ── Flex row: narrow+wide pair (3:5 ratio) ─────────────────────────── */
.pRowFlex {
  display:flex; gap:20px;
  grid-column:1/-1;
  align-items:stretch;
}
.pRowFlex .pCard { min-width:0; display:flex; flex-direction:column; }

/* ── narrow+wide pair (2 cards) ── */
.pRowFlex--pair .pCard:first-child .pCardImg { flex:none; }
.pRowFlex--pair .pCard:first-child .pCardImg img { height:auto; }
.pRowFlex--pair .pCard:last-child .pCardImg { flex:1; min-height:0; }
.pRowFlex--pair .pCard:last-child .pCardImg img { height:100%; object-fit:cover; object-position:center; }

/* ── trio: each card gets its own aspect-ratio so all heights match ── */
/* math: left=flex4(28.6%), center=flex7(50%), right=flex3(21.4%)
   heights: left= 28.6%×1 = 28.6%,  center= 50%×9/16 = 28.1%,  right= 21.4%×4/3 = 28.6%
   → all ≈ same height ✓                                                              */
.pRowFlex--trio { align-items:flex-start; }
.pRowFlex--trio .pCard:nth-child(1) .pCardImg { aspect-ratio:1/1; flex:none; }
.pRowFlex--trio .pCard:nth-child(2) .pCardImg { aspect-ratio:1/1; flex:none; }
.pRowFlex--trio .pCard:nth-child(3) .pCardImg { aspect-ratio:3/4; flex:none; }
.pRowFlex--trio .pCard .pCardImg img { height:100%; object-fit:cover; object-position:center top; }

/* Glassmorphism hover button */
.pGlassBtn {
  position:absolute; bottom:12px; right:12px;
  padding:8px 16px;
  background:rgba(8,8,8,0.55);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:40px;
  color:rgba(255,255,255,0.90);
  font-family:'Inter',sans-serif; font-size:9.5px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase;
  cursor:pointer; pointer-events:none;
  opacity:0; transform:translateY(8px);
  transition:opacity 0.28s ease, transform 0.30s cubic-bezier(0.34,1.56,0.64,1);
  white-space:nowrap;
}
.pCard:hover .pGlassBtn { opacity:1; transform:translateY(0); }

/* Body aligns flush to image left edge — no horizontal padding */
.pCardBody { padding:31px 0 24px; }

.pCardTag {
  font-family:'Inter',sans-serif; font-size:10px; font-weight:500;
  letter-spacing:0.24em; text-transform:uppercase;
  color:rgba(201,169,110,0.60); display:block; margin-bottom:8px;
}
.pCardTitle {
  font-family:'Syne',sans-serif; font-weight:600;
  font-size:clamp(17px,1.6vw,20px);
  color:#fff; letter-spacing:-0.02em; line-height:1.2;
  margin:0 0 7px;
}
.pCardDesc {
  font-family:'Inter',sans-serif; font-size:13px;
  color:rgba(255,255,255,0.28); line-height:1.6;
}

/* Responsive */
@media (max-width:900px) {
  #card { width:78vw;
    transform:translate(-50%,-50%) perspective(900px) rotateX(16deg) rotateY(-10deg) rotateZ(1.5deg);
  }
  .tr { display:none; } #seq { display:none; }
  #work { padding:60px 32px 40px; }
  #filters { margin-left:-32px; margin-right:-32px; padding-left:32px; padding-right:32px; }
  #navLinks { gap:20px; }
  #pgrid { grid-template-columns:repeat(4,1fr); gap:8px; }
  .pCard          { grid-column:span 2; }
  .pCard.half     { grid-column:span 2; }
  .pCard.wide     { grid-column:span 4; }
  .pCard.full     { grid-column:span 4; }
}
@media (max-width:600px) {
  #name { font-size:clamp(52px,14vw,88px); top:80px; left:24px; }
  .tl,.bl { left:24px; }
  #card { top:44%; width:88vw; }
  #bio { right:24px; left:24px; max-width:none; font-size:13px; bottom:100px; }
  #nameRule { left:24px; }
  #work { padding:60px 24px 40px; }
  #filters {
    margin-left:-24px; margin-right:-24px; padding-left:24px; padding-right:24px;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0;
    padding-top:14px; padding-bottom:12px;
  }
  /* Row 1: category pills become a single horizontally-scrollable line
     instead of wrapping into a multi-row pill stack */
  #filterRow, #filterScroll { display:block; }
  #filterRow { position:relative; }
  #filterScroll {
    display:flex; flex-wrap:nowrap; gap:8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  #filterScroll::-webkit-scrollbar { display:none; }
  .fBtn { flex-shrink:0; }
  #filterRow::after {
    content:''; position:absolute; top:0; right:0; bottom:0; width:30px;
    background:linear-gradient(to right, rgba(17,17,17,0), rgba(17,17,17,0.92));
    pointer-events:none;
  }
  /* Row 2: Contacts / Resume / LinkedIn on their own compact line, separated
     by a thin divider so the sticky bar stays short and tidy on mobile */
  #navLinks {
    width:100%; margin-left:0; justify-content:center;
    gap:16px; margin-top:12px; padding-top:12px;
    border-top:1px solid rgba(255,255,255,0.07);
  }
  #pgrid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .pCard, .pCard.narrow, .pCard.half, .pCard.wide, .pCard.full { grid-column:span 2; }
}

::-webkit-scrollbar { width:2px; }
::-webkit-scrollbar-thumb { background:rgba(201,169,110,0.3); }