/* =========================================================
   DAMIEN NGUYEN — Portfolio
   B&W minimal · 3D hero · staggered work · contact-sheet archive
   ========================================================= */

:root {
  --bg: #ffffff;
  --ink: #000000;
  --muted: #777777;
  --rule: rgba(0, 0, 0, 0.12);
  --tile: #ececec;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--ink); color: var(--bg); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px var(--gutter);
}
.brand {
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 400;
}
.nav { display: flex; gap: 24px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
.nav a { font-weight: 400; }
.nav a:hover { color: var(--muted); }

/* ---------- Full-viewport page background (swaps on card hover) ---------- */
.page-bg {
  position: fixed; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease, background-image 0.4s ease;
  pointer-events: none;
  filter: blur(10px) brightness(0.5);
  transform: scale(1.06);
}
.page-bg.active { opacity: 1; }

/* Keep page content above the overlay */
.site-header { z-index: 100; }
.hero-3d, main, .site-footer { position: relative; z-index: 1; }

/* ---------- 3D Hero Deck ---------- */
.hero-3d {
  position: relative;
  height: clamp(360px, 55vh, 560px);
  display: flex; align-items: center; justify-content: center;
  perspective: 1600px;
  perspective-origin: 50% 45%;
  overflow: hidden;
  user-select: none;
}

.deck {
  position: relative;
  width: clamp(150px, 22vw, 240px);
  height: clamp(200px, 30vw, 320px);
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.card {
  position: absolute; inset: 0;
  background: var(--tile);
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  box-shadow:
    0 10px 25px rgba(0,0,0,0.10),
    0 30px 60px rgba(0,0,0,0.18);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), opacity .8s ease;
  backface-visibility: hidden;
  cursor: pointer;
  overflow: hidden;
}

/* Project name overlay — appears centered on hover, stays hidden otherwise */
.card-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 16px;
  font-size: clamp(16px, 2vw, 28px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: #fff;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.card:hover .card-label { opacity: 1; }

/* Filmstrip — four cards: c1 · c2 · c3 · c4 */
.card.c1 { transform: translateX(-156%); }
.card.c2 { transform: translateX(-52%); }
.card.c3 { transform: translateX(52%); }
.card.c4 { transform: translateX(156%); }

/* Cycle */
.deck.s2 .card.c2 { transform: translateX(-156%); }
.deck.s2 .card.c3 { transform: translateX(-52%); }
.deck.s2 .card.c4 { transform: translateX(52%); }
.deck.s2 .card.c1 { transform: translateX(156%); }

.deck.s3 .card.c3 { transform: translateX(-156%); }
.deck.s3 .card.c4 { transform: translateX(-52%); }
.deck.s3 .card.c1 { transform: translateX(52%); }
.deck.s3 .card.c2 { transform: translateX(156%); }

.deck.s4 .card.c4 { transform: translateX(-156%); }
.deck.s4 .card.c1 { transform: translateX(-52%); }
.deck.s4 .card.c2 { transform: translateX(52%); }
.deck.s4 .card.c3 { transform: translateX(156%); }

/* Hero card background images — work page (4 cards) */
.card.c1 { background-image: url('../images/fashion/hero.jpg'); }
.card.c2 { background-image: url('../images/confracted/hero.jpg'); }
.card.c3 { background-image: url('../images/dylanwayne/hero.jpg'); }
.card.c4 { background-image: url('../images/chameleonvtg/hero.jpg'); }

/* Personal page cards (p1, p2) */
.card.p1 { background-image: url('../images/my-little-saigon/hero.jpg'); transform: translateX(-52%); }
.card.p2 { background-image: url('../images/past-present/hero.jpg');     transform: translateX(52%); }

.deck.s2 .card.p2 { transform: translateX(-52%); }
.deck.s2 .card.p1 { transform: translateX(52%); }

.hero-caption {
  position: absolute;
  bottom: 24px; left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}

@media (max-width: 720px) {
  /* Tighter filmstrip on mobile */
  .card.c1 { transform: translateX(-120%); }
  .card.c2 { transform: translateX(-40%); }
  .card.c3 { transform: translateX(40%); }
  .card.c4 { transform: translateX(120%); }

  .deck.s2 .card.c2 { transform: translateX(-120%); }
  .deck.s2 .card.c3 { transform: translateX(-40%); }
  .deck.s2 .card.c4 { transform: translateX(40%); }
  .deck.s2 .card.c1 { transform: translateX(120%); }

  .deck.s3 .card.c3 { transform: translateX(-120%); }
  .deck.s3 .card.c4 { transform: translateX(-40%); }
  .deck.s3 .card.c1 { transform: translateX(40%); }
  .deck.s3 .card.c2 { transform: translateX(120%); }

  .deck.s4 .card.c4 { transform: translateX(-120%); }
  .deck.s4 .card.c1 { transform: translateX(-40%); }
  .deck.s4 .card.c2 { transform: translateX(40%); }
  .deck.s4 .card.c3 { transform: translateX(120%); }
}

/* ---------- Page intro ---------- */
.intro {
  padding: 60px var(--gutter) 24px;
  text-align: center;
}
.intro h1 {
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 400;
}

/* ---------- Work grid (straight two column — stays 2-col at all widths) ---------- */
.work {
  padding: 40px var(--gutter) 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
}
.tile {
  display: block; position: relative;
  background: var(--tile);
  overflow: hidden;
  aspect-ratio: 4/5;
}
.tile.tall { aspect-ratio: 3/4; }
.tile.short { aspect-ratio: 1/1; }
.tile img,
.tile .ph {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: var(--tile);
  background-size: cover; background-position: center;
}
.tile img { transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.tile:hover img { transform: scale(1.04); }
.tile .label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 300; color: #fff;
  padding: 24px; letter-spacing: -0.01em;
  pointer-events: none;
  text-shadow: 0 2px 24px rgba(0,0,0,0.3);
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.tile:hover .label { opacity: 1; }

/* ---------- Project page (vertical gallery) ---------- */
.project-head {
  padding: 100px var(--gutter) 40px;
  text-align: center;
}
.project-head .eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.project-head h1 {
  font-size: clamp(40px, 7vw, 110px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
}
.project-gallery {
  padding: 0 var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.project-gallery img {
  width: 100%;
  height: auto;
  background: var(--tile);
  display: block;
}

/* Project page — capped hero + 3D hover-lift grid */
.project-hero {
  padding: 0 var(--gutter) 40px;
}
.project-hero img {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  height: auto;
  display: block;
  background: var(--tile);
}

.project-grid-3d {
  padding: 0 var(--gutter) 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  perspective: 1500px;
}
.project-grid-3d .tile-3d {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--tile);
  cursor: pointer;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
  transform-style: preserve-3d;
}
.project-grid-3d .tile-3d img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-grid-3d .tile-3d:hover {
  transform: translateZ(50px) scale(1.03);
  box-shadow:
    0 25px 50px rgba(0,0,0,0.25),
    0 10px 20px rgba(0,0,0,0.15);
  z-index: 2;
}
.project-grid-3d .tile-3d:hover img {
  transform: scale(1.04);
}
.project-back {
  padding: 40px var(--gutter) 80px;
  text-align: center;
}
.project-back a {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-block; padding: 12px 0;
}
.project-back a:hover { color: var(--muted); }

/* Tile label override for work-page projects (taller, bigger names) */
.work .tile.project { aspect-ratio: 3/4; }
.work .tile.project .label { font-size: clamp(32px, 4.5vw, 64px); }

/* ---------- Archive contact-sheet grid (stays 5-col at all widths) ---------- */
.archive {
  padding: 40px var(--gutter) 80px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.thumb {
  display: block;
  background: var(--tile);
  aspect-ratio: 1/1;
  overflow: hidden;
  position: relative;
}
.thumb img,
.thumb .img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background-size: cover; background-position: center;
  transition: transform .8s cubic-bezier(0.22, 1, 0.36, 1);
}
.thumb:hover img,
.thumb:hover .img { transform: scale(1.06); }

/* ---------- About ---------- */
.about {
  padding: 80px var(--gutter);
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.about-text p { font-size: 16px; line-height: 1.6; margin-bottom: 1em; }
.about-text p:last-child { margin-bottom: 0; }
.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--tile);
  border: 5px solid #000;
  box-sizing: border-box;
}

/* ---------- Contact ---------- */
.contact { padding: 120px var(--gutter); max-width: 760px; margin: 0 auto; display: grid; gap: 24px; }
.contact-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
  font-size: 16px;
}
.contact-row .label {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.contact-row a:hover { color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer {
  padding: 60px var(--gutter) 24px;
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 12px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Project page — clean 3×3 photo grid ---------- */
.project-grid-3x3 {
  padding: 0 var(--gutter) 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.project-grid-3x3 img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  background: var(--tile);
  cursor: zoom-in;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-grid-3x3 img:hover { transform: scale(1.02); }

/* ---------- Project page — 2×2 photo grid ---------- */
.project-grid-2x2 {
  padding: 0 var(--gutter) 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.project-grid-2x2 img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  background: var(--tile);
  cursor: zoom-in;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-grid-2x2 img:hover { transform: scale(1.02); }

/* ---------- Project page — centered intro (title only at top) ---------- */
.project-intro {
  padding: 80px var(--gutter) 50px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.project-intro h1 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

/* Mid-page block — 2×2 grid: hero+paragraph above, two photos below */
.project-mid-block {
  padding: 80px var(--gutter);
  max-width: 1100px;
  margin: 32px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 56px;
  align-items: center;
}
.mid-photo { margin: 0; }
.mid-photo img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--tile);
  cursor: zoom-in;
  transition: opacity 0.4s ease;
}
.mid-photo img:hover { opacity: 0.88; }
.mid-photo figcaption {
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.02em;
  padding: 8px 4px 0;
}
/* Stacked variant — two photos vertically aligned in left column */
.mid-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mid-stack figure { margin: 0; }
.mid-text .lead {
  font-size: 14px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink);
}

/* ---------- Project page — uniform grid (adobe-portfolio style) ---------- */
.project-grid-masonry {
  padding: 0 var(--gutter) 40px;
  display: grid;
  gap: 3px;
}
/* B&W section — 3×3 grid */
.project-grid-masonry.grid-bw {
  grid-template-columns: repeat(3, 1fr);
}
/* Color section — 4-column grid */
.project-grid-masonry.grid-color {
  grid-template-columns: repeat(4, 1fr);
}
.project-grid-masonry img,
.project-grid-masonry figure {
  width: 100%;
  display: block;
  margin: 0;
}
.project-grid-masonry img {
  aspect-ratio: 3/2;
  object-fit: cover;
  background: var(--tile);
  cursor: zoom-in;
  transition: opacity 0.4s ease;
}
.project-grid-masonry img:hover { opacity: 0.88; }
.project-grid-masonry figcaption {
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.02em;
  padding: 6px 4px 0;
}

/* Mid-block 2-photo row — same gutter as gallery, sits below the hero+paragraph */
.project-mid-pair {
  padding: 0 var(--gutter) 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-width: 1400px;
  margin: 0 auto;
}
.project-mid-pair img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
  background: var(--tile);
  cursor: zoom-in;
  transition: opacity 0.4s ease;
}
.project-mid-pair img:hover { opacity: 0.88; }

/* ---------- Lightbox (click-to-enlarge) ---------- */
.lightbox {
  position: fixed; inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  cursor: zoom-out;
}
.lightbox.active { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 95vw;
  max-height: 95vh;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.lightbox.active img { transform: scale(1); }
.lightbox-close {
  position: absolute;
  top: 20px; right: 24px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  padding: 8px 14px;
  font-family: inherit;
  font-weight: 200;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.lightbox-close:hover { opacity: 1; }

/* Make project images visibly clickable */
.project-gallery img,
.project-grid-3d .tile-3d img,
.project-grid-3x3 img,
.project-grid-2x2 img,
.project-grid-masonry img,
.project-mid-pair img,
.project-hero img,
.archive .thumb img {
  cursor: zoom-in;
}

/* ---------- B&W Slideshow (My Little Saigon) ---------- */
.bnw-slideshow {
  padding: 0 var(--gutter);
  margin-bottom: 40px;
}

/* Track: same total height as the original 3×3 grid (3 rows of 3/2 images = 2/3 of width) */
.slide-track {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #111;
}

.slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity 0.45s ease;
  cursor: default;
}
.slide-img.active { opacity: 1; }

.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 20px 24px;
  z-index: 10;
  opacity: 0.4;
  transition: opacity 0.2s ease;
  font-family: inherit;
}
.slide-btn:hover { opacity: 1; }
.slide-prev { left: 0; }
.slide-next { right: 0; }

.slide-counter {
  display: block;
  text-align: center;
  padding: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .deck { transition: none !important; }
}

/* =========================================================
   MOBILE — 600px and below
   All layouts mirror desktop exactly. Only nav spacing
   and hero height are adjusted for small screens.
   ========================================================= */
@media (max-width: 600px) {

  /* Nav: tighten spacing so all 4 links fit on one line */
  .site-header { padding: 16px var(--gutter); }
  .nav { gap: 14px; letter-spacing: 0.08em; font-size: 11px; }
  .brand { font-size: 11px; letter-spacing: 0.12em; }

  /* Hero deck: slightly taller on portrait screens */
  .hero-3d {
    height: clamp(300px, 60vh, 480px);
  }
}