/* v2 site theme — new homepage + project template, based on the
   "2026 Mobile view" Figma file (node 19:2). Deliberately isolated from
   css/styles.css so the -classic.html backups can never regress: nothing
   in this file is shared with the classic pages. */

:root{
  --v2-bg:#000;
  --v2-fg:#f1f1f1;
  --v2-muted:#767676;
  --acc:#FF8400;
  --v2-yellow:#fddc01;
  --v2-panel:#11131a;
  --v2-gap:24px;
  --v2-pad:24px;
}
*{box-sizing:border-box;margin:0;padding:0;}
/* No opaque background here on purpose — #interactive-bg (a fixed,
   negative-z-index canvas, see js/interactive-bg.js) supplies the black
   fill every frame. An opaque html/body background would paint over it. */
html,body{color:var(--v2-fg);width:100%;overflow-x:hidden;}
body{
  font-family:'neue-haas-grotesk-display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.v2-link{text-decoration:underline;text-underline-offset:3px;}

#interactive-bg{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:-1;
  pointer-events:none;
  background:var(--v2-bg);
}

/* ---------- Nav ---------- */
.v2-nav{
  position:absolute;
  top:24px;
  left:var(--v2-pad);
  font-size:24px;
  z-index:20;
}

/* ---------- Homepage ---------- */
.v2-home{
  width:100%;
  position:relative;
}
.v2-content{
  padding:0 var(--v2-pad);
  display:flex;
  flex-direction:column;
  gap:64px;
}
/* Intro is vertically centered in the first ~80% of the viewport, leaving
   at least the bottom 20% of the initial screen showing a peek of the
   tile grid below (before any scrolling) as a scroll affordance. */
.v2-intro{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:32px;
  max-width:1137px;
  min-height:calc(80vh - 64px);
}
.v2-bio{
  font-size:clamp(24px, 3.3vw, 48px);
  line-height:1.17;
  font-weight:400;
  color:var(--v2-fg);
}

.v2-currently{
  min-height:32px;
  opacity:0;
  animation:v2-currently-in .6s cubic-bezier(.2,.7,.3,1) .5s forwards;
}
@keyframes v2-currently-in{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .v2-currently{animation:none;opacity:1;}
}

/* ---------- Tile grid (reuses class names from js/home-v2.js so the
   renderer logic is a straight copy of the classic home.js) ---------- */
.portfolio-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  grid-auto-flow:dense;
  gap:var(--v2-gap);
}
.tile{
  position:relative;
  grid-column:span 2;
  aspect-ratio:1 / 1;
  overflow:hidden;
  display:block;
  border-radius:4px;
  background:var(--v2-bg);
}
.tile.size-2x2{grid-column:span 4;grid-row:span 2;}
.tile .tile-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.tile:hover .tile-img{transform:scale(1.06);}
.tile .tile-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:16px;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 45%);
  opacity:0;
  transition:opacity .25s ease;
}
.tile:hover .tile-overlay{opacity:1;}
.tile .tile-link{
  font-size:13px;
  font-weight:600;
  color:#fff;
}
.tile-link .lock-glyph{margin-right:6px;}

@media (max-width:900px){
  .portfolio-grid{grid-template-columns:repeat(4, 1fr);}
}
@media (max-width:560px){
  .portfolio-grid{grid-template-columns:repeat(2, 1fr);}
  .tile.size-2x2{grid-column:span 2;grid-row:span 1;}
}

/* ---------- Footer contact block (shared homepage + project pages) ---------- */
.v2-contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 24px;
  font-size:clamp(24px, 3.3vw, 48px);
  padding:256px var(--v2-pad) 256px;
}
.v2-contact .contact-label{color:var(--v2-muted);}
.v2-contact .contact-links{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.v2-contact .contact-links a:hover{color:var(--v2-muted);}
@media (max-width:700px){
  .v2-contact{grid-template-columns:1fr;}
}

/* ---------- Project detail page ---------- */
.v2-project-hero{
  width:100%;
  overflow:hidden;
}
.v2-project-hero img,
.v2-project-hero video{
  display:block;
  width:100%;
  height:auto;
  max-height:90vh;
  object-fit:cover;
}
.v2-hero-placeholder{
  aspect-ratio:16 / 9;
  background:linear-gradient(135deg, var(--v2-panel) 0%, var(--v2-bg) 140%);
}
.v2-project-body{
  width:100%;
  max-width:684px;
  padding:48px var(--v2-pad) 0;
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:24px;
}
.v2-ascii-title{
  grid-column:1 / -1;
  height:48px;
  font-size:28px;
  line-height:48px;
  white-space:nowrap;
  overflow:hidden;
  font-family:'neue-haas-grotesk-display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.v2-desc{
  grid-column:1 / -1;
  width:50vw;
  font-size:20px;
  line-height:1.4;
  color:var(--v2-fg);
}
.v2-meta{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:16px;
  line-height:1.5;
  color:var(--v2-muted);
}
.v2-meta .meta-row{display:flex;gap:0;}
.v2-meta .meta-key{width:100px;flex-shrink:0;}
.v2-meta .meta-val{flex:1;}
.v2-meta .tag-list{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px;}
.tag-pill{
  display:inline-block;
  text-align:center;
  padding:0 4px;
  border:1px solid var(--v2-muted);
  border-radius:4px;
  line-height:24px;
  color:var(--v2-muted);
  white-space:nowrap;
}
.tag-pill.tag-featured{
  border-color:var(--acc);
  color:var(--acc);
}

.project-images{
  width:100%;
  margin:56px 0 0;
  padding:0 var(--v2-pad) 0;
  display:flex;
  flex-wrap:wrap;
  gap:var(--v2-gap);
  background:var(--v2-bg);
}
.detail-media{
  display:block;
  width:100%;
  height:auto;
  border-radius:4px;
}
.detail-media.sq{
  width:calc(50% - var(--v2-gap) / 2);
}

.v2-next{
  position:relative;
  width:100%;
  height:450px;
  overflow:hidden;
  background:var(--v2-panel);
  display:block;
}
.v2-next .next-bg{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  transform:translate(-50%, -50%) scale(1);
  object-fit:cover;
  opacity:.5;
  transition:transform .5s ease, opacity .3s ease, filter .3s ease;
}
.v2-next:hover .next-bg{
  transform:translate(-50%, -50%) scale(1.1);
  filter:brightness(.75);
}
.v2-next .next-row{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  gap:24px;
  height:100%;
  padding:24px var(--v2-pad) 0;
  font-size:clamp(24px, 3.3vw, 48px);
  color:#fff;
}
.v2-next .next-label{opacity:.5;}

@media (max-width:820px){
  .v2-project-body{max-width:100%;}
  .v2-desc{width:100%;}
}

/* ---------- Locked project teaser (password-gated gallery) ----------
   #project-images sits inside .lock-teaser and renders exactly like an
   unlocked page's gallery (same .detail-media markup, same square-pairs-
   2-per-line rule) — just truncated at build time to a leading 1 or 2
   images. Those images fade out via a mask (not a color overlay) — 80%
   visible at the top down to fully transparent at the bottom — so
   #interactive-bg's grid canvas (fixed behind everything at z-index:-1,
   see the html/body comment above) shows through the faded part; the
   container's own background is cleared to transparent so nothing opaque
   sits between the mask and that canvas. .lock-panel is absolutely
   positioned with its top edge a fixed 256px below the top of the
   revealed image(s), per spec, regardless of how tall they are — so
   js/lock-v2.js measures the panel's actual rendered bottom edge and pads
   .lock-teaser to match, keeping whatever comes after (.v2-contact) from
   colliding with it.
   The panel itself is 3 stacked sections (Figma node 71:4058, "access" —
   full-page reference 68:5234, "project 3 - locked"):
     .lock-panel-hero  navy-to-black gradient, rounded top corners. A
                       combination-dial graphic breaches its top edge,
                       faded into the gradient via a separate overlay, with
                       a soft glow behind it — glow uses Figma's own two-box
                       structure (an outer true-visual-size box plus an
                       inner box expanded via negative inset to hold the
                       blur without clipping it), painted ABOVE the dial
                       and its fade to match Figma's paint order
                       (assets/icons/lock-dial.png, lock-glow.svg)
     .lock-panel-body  plain black, title + copy, square corners
     .lock-panel-input orange, rounded bottom corners, halftone-dot texture
                       (assets/icons/lock-form-noise.png tiled via ::before)
                       behind the black-bordered input row + fine print
   The rest of the gallery isn't in the page until the code checks out —
   js/lock-v2.js fetches it in on success. Nothing here persists across
   reloads: every fresh load starts locked again (unless already unlocked
   this session — see lock-v2.js). */
.lock-teaser{
  position:relative;
  width:100%;
}
.lock-teaser #project-images{
  position:relative;
  background:transparent;
}
.lock-teaser #project-images .detail-media{
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%);
}
.lock-panel{
  position:absolute;
  left:50%;
  top:256px;
  transform:translateX(-50%);
  width:min(623px, 100%);
  border-radius:4px;
  overflow:visible;
  z-index:2;
}
.lock-panel-hero{
  position:relative;
  height:190px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(to bottom, #0f1f3d 0%, #000 50%);
  box-shadow:inset 0 1px 1px 0 rgba(255,255,255,.1);
}
.lock-panel-dial{
  position:absolute;
  left:50%;
  top:-100px;
  transform:translateX(-50%);
  width:min(290px, 60%);
  aspect-ratio:1 / 1;
  z-index:1;
  pointer-events:none;
}
.lock-panel-dial img{display:block; width:100%; height:100%; object-fit:contain;}
.lock-panel-fade{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 100%);
  border-radius:inherit;
  z-index:2;
  pointer-events:none;
}
.lock-panel-glow{
  position:absolute;
  left:50%;
  top:-100px;
  transform:translateX(-50%);
  width:min(267px, 52%);
  aspect-ratio:267 / 86;
  z-index:3;
  pointer-events:none;
}
.lock-panel-glow-inner{
  position:absolute;
  inset:-18.6% -5.99%;
}
.lock-panel-glow-inner img{display:block; width:100%; height:100%;}
.lock-panel-body{
  background:#010101;
  padding:24px 48px 48px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.lock-panel-title{font-size:32px; line-height:40px; font-weight:400; color:#fff;}
.lock-title-accent{color:#ee7c01;}
.lock-panel-copy{font-size:14px; line-height:24px; color:#fff;}
.lock-copy-link{color:#ee7c01; text-decoration:underline; text-underline-offset:3px;}
.lock-panel-input{
  position:relative;
  background:#ee7c01;
  border-radius:0 0 4px 4px;
  padding:48px;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
}
.lock-panel-input::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url('../assets/icons/lock-form-noise.png');
  background-size:4px 4px;
  background-position:top left;
  background-repeat:repeat;
  opacity:.3;
  pointer-events:none;
}
.lock-form-row{
  position:relative;
  z-index:1;
  border:0.25px solid rgba(255,255,255,.3);
  border-radius:4px;
  height:52px;
  background:#000;
}
.lock-form-row.shake{
  animation:lock-shake .4s ease;
}
@keyframes lock-shake{
  10%, 90%{transform:translateX(-1px);}
  20%, 80%{transform:translateX(2px);}
  30%, 50%, 70%{transform:translateX(-4px);}
  40%, 60%{transform:translateX(4px);}
}
.lock-input{
  position:absolute;
  inset:0;
  width:100%;
  background:transparent;
  border:0;
  outline:0;
  color:#ee7c01;
  font:inherit;
  font-size:16px;
  letter-spacing:6px;
  padding:0 40px 0 16px;
}
.lock-input::placeholder{color:#ee7c01; opacity:1; letter-spacing:normal;}
.lock-submit-btn{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:16px;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
}
.lock-submit-btn img{width:100%; height:100%; opacity:.2; transition:opacity .15s ease;}
.lock-submit-btn.is-active img{opacity:1;}
.lock-panel-note{
  position:relative;
  z-index:1;
  align-self:flex-start;
  font-size:11.5px;
  color:#000;
  background:#ee7c01;
}

@media (max-width:700px){
  .lock-panel-body{padding:20px 24px 32px; gap:12px;}
  .lock-panel-input{padding:24px;}
  .lock-panel-dial{top:-64px;}
  .lock-panel-glow{top:-64px;}
  .lock-panel-title{font-size:26px; line-height:32px;}
}