/* ---------------------------------------------------------------
   Eshan Khatri — grid video portfolio
   Values carried over verbatim from the Claude Design prototype.
   --------------------------------------------------------------- */

/* auto, not smooth: main.js drives its own eased scrolling, and the native
   smooth behaviour would animate every scrollTo() we issue — two easings
   fighting over the same scroll position. */
html { scroll-behavior: auto; }

/* Hide the native scrollbar — the grey bar clashes with the dark look, and Lenis
   drives the scrolling anyway. The page still scrolls exactly the same. */
html {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* old Edge/IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                /* Chrome / Safari */
}

body {
  margin: 0;
  background: #070707;
  /* This page scrolls vertically only. */
  overflow-x: hidden;
}

a { color: #e8e8e8; text-decoration: none; }
a:hover { color: #ffffff; }

::selection { background: #2a2a2a; color: #fff; }

/* flow-root contains the nav's 16px top margin. Without it that margin collapses
   straight through .page (which has no top padding or border to stop it) and
   pushes the whole box down 16px — making the document 100vh + 16px and leaving
   a black strip below the fixed About panel. */
.page {
  display: flow-root;
  min-height: 100vh;
  background: #070707;
  color: #e8e8e8;
  font-family: 'Space Grotesk', sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 0 40px 0;
}

/* ---------------------------------------------------------------
   Nav
   --------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 0;
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(20, 20, 20, 0.5);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 8px 32px -14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-name {
  white-space: nowrap;
  min-height: 32px;
  padding: 5px 15px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #bdbdbd;
}

.logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #141414;
  border: 1px solid #1f1f1f;
  border-radius: 9px;
  overflow: hidden;
}

.logo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-tab {
  padding: 6px 13px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.06em;
  background: transparent;
  color: #9a9a9a;
  transition: background .2s, color .2s;
}

.nav-tab.is-active {
  background: #2a2a2a;
  color: #ffffff;
}

/* ---------------------------------------------------------------
   Work — intro + filters
   --------------------------------------------------------------- */

/* The prototype pinned this to a fixed 1347x50, which forced horizontal page
   scroll on any window narrower than ~1430px and misreported its own height
   (declared 50px, actually renders ~178px). Fluid instead — the max-width on
   the h1 below is what actually controls the measure. */
.intro {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  /* Tightened to 26px top/bottom — noticeably less dead space around the intro,
     still enough to keep it from feeling cramped. */
  padding: 26px 0 26px;
  width: 100%;
  height: auto;
}

.intro h1 {
  margin: 0;
  flex: 1 1 470px;
  max-width: 1040px;
  min-width: 320px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16.2px; /* 10% down from 18px */
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: -0.014em;
  color: #f0f0f0;
  text-wrap: pretty;
}

.cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 40px;
  border-bottom: 1px solid #171717;
  flex-wrap: wrap;
}

.cat-list {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 15px;
  overflow-x: auto;
}

.cat-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  letter-spacing: 0.005em;
  color: #666;
  font-weight: 400;
  transition: color .2s;
}

.cat-btn.is-active {
  color: #f2f2f2;
  font-weight: 500;
}

.cat-meta {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  color: #6f6f6f;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------
   Work — grid
   --------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 72px;
  row-gap: 96px;
  align-items: stretch;
  padding-top: 28px; /* was 56px — tightens the gap under the filter row */
  padding-bottom: 120px;
}

/* Shown when a category has no clips assigned yet. */
.grid-empty {
  grid-column: 1 / -1;
  padding: 8px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #666;
}

/* No will-change here on purpose: it would hold GPU layers for all 26 tiles
   permanently (memory pressure, and a flicker source of its own). The browser
   composites automatically for the duration of a transform/opacity transition,
   which is exactly as long as it's needed. */
.tile {
  display: flex;
  flex-direction: column;
  transform: translate3d(0, 130px, 0);
  opacity: 0;
  backface-visibility: hidden;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The grey is this box's own background, sitting BEHIND the video, rather than
   a cover overlaid on top. An overlay can never align perfectly with a video:
   videos get their own compositing layer, tile heights here are fractional
   (138.38px etc), and the two layers round to device pixels independently —
   which leaked a hairline of video along the edges. Nothing overlaps now, so
   there is no seam to leak. The video fades in over the grey instead. */
.tile-media {
  position: relative;
  width: 100%;
  background: #232323;
  border-radius: 0px;
  overflow: hidden;
  cursor: pointer;
}

.tile-media video {
  /* Fills the media box, whose height is now reserved by an inline aspect-ratio
     (set per-tile in JS). The box ratio equals the video's, so object-fit:cover
     is an exact fit — no crop — and there's no size jump when metadata loads. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: transform .8s cubic-bezier(0.16, 0.84, 0.34, 1),
              filter .8s,
              opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  /* Hidden until the tile has finished lifting, then faded up over the grey.
     visibility (not display) because it still loads, decodes and plays, and
     still reports to IntersectionObserver. */
  visibility: hidden;
  opacity: 0;
}

.tile-media:hover video {
  transform: scale(1.03);
  filter: brightness(1.05);
}

.tile-num {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: rgba(7, 7, 7, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #f0f0f0;
  pointer-events: none;
}

.tile-caption {
  margin-top: auto;
  padding-top: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #8a8a8a;
}

/* ---------------------------------------------------------------
   About
   --------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #070707;
  overflow: hidden;
}

.about-media {
  position: relative;
  overflow: hidden;
}

/* Framed with cover + object-position rather than the prototype's fixed px
   offsets, so the crop holds at any viewport size. The portrait is much taller
   than the panel, so `cover` overflows vertically and object-position picks the
   window: 90% pushes past the empty headroom to sit on the face. */
.about-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 68% (was 84%) drops the head down from the top edge so it sits with headroom
     below the nav and a touch above the panel's centre. */
  object-position: 50% 68%;
  /* The photo renders exactly panel-width, so there's no horizontal overflow
     for object-position to work with — the slight scale creates the room that
     translateX then shifts into, keeping the head centred without a gap. */
  transform: scale(1.08) translateX(-20px);
  display: block;
  filter: grayscale(1) brightness(0.82) contrast(1.05);
}

.about-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(48px, 6vw, 96px);
}

.about-copy h1 {
  margin: 0 0 clamp(28px, 4vh, 44px);
  font-family: 'Newsreader', serif;
  font-size: clamp(42px, 4.4vw, 68px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: #f4f4f4;
}

.about-body {
  max-width: 560px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.5;
  color: #cfcfcf;
  font-weight: 400;
}

.about-body p { margin: 0 0 1.35em; }
.about-body p:last-child { margin: 0; }

.email-btn {
  align-self: flex-start;
  margin-top: clamp(28px, 4vh, 44px);
  padding: 15px 28px;
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #dcdcdc;
}

.email-btn:hover {
  background: #242424;
  color: #fff;
}

@keyframes aboutText {
  from { opacity: 0; filter: blur(16px); transform: translateY(26px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes aboutWipe {
  from { opacity: 0; filter: blur(20px); transform: scale(1.06); }
  to   { opacity: 1; filter: blur(0); transform: scale(1); }
}

.about-text { animation: aboutText 1.1s cubic-bezier(0.16, 0.84, 0.34, 1) both; }
.about-wipe { animation: aboutWipe 1.6s cubic-bezier(0.16, 0.84, 0.34, 1) both; }

/* ---------------------------------------------------------------
   Lightbox
   --------------------------------------------------------------- */

.lb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 5, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background .6s ease, backdrop-filter .6s ease;
}

.lb-video {
  position: fixed;
  object-fit: contain;
  background: #000;
  box-shadow: 0 50px 140px -30px rgba(0, 0, 0, 0.95);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  will-change: transform;
  transition: opacity .6s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Bottom-right navigation hint. Fades in with the lightbox; hidden on touch
   screens, which have no arrow keys (the click-halves still work there). */
.lb-hint {
  position: fixed;
  bottom: 24px;
  right: 28px;
  z-index: 103;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #8a8a8a;
  opacity: 0;
  transition: opacity .5s ease .2s;
  pointer-events: none;
  user-select: none;
}

@media (hover: none), (max-width: 700px) {
  .lb-hint { display: none; }
}

.lb-topbar {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 103;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transition: opacity .5s ease .12s;
}

.lb-btn {
  padding: 11px 20px;
  background: rgba(20, 20, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #cfcfcf;
  cursor: pointer;
}

.lb-btn:hover {
  background: rgba(40, 40, 40, 0.7);
  color: #fff;
}

/* ---------------------------------------------------------------
   Responsive
   Everything above is the desktop design, untouched. These are additive
   overrides only, following the reference: fewer columns and tighter gutters
   as the screen narrows, captions kept under every tile.
   --------------------------------------------------------------- */

/* --- Tablet / iPad ------------------------------------------------ */
@media (max-width: 1024px) {
  .page { padding: 0 24px; }

  .intro { padding: 44px 0; gap: 24px; }
  .intro h1 { font-size: 16px; flex-basis: auto; min-width: 0; }

  .cat-row { padding-bottom: 28px; }
  .cat-list { gap: 22px; font-size: 14px; }
  .cat-btn { font-size: 14px; }

  .grid {
    column-gap: 28px;
    row-gap: 64px;
    padding-top: 40px;
    padding-bottom: 80px;
  }
}

/* --- About stacks before the two columns get too narrow to read --- */
@media (max-width: 900px) {
  .about {
    grid-template-columns: 1fr;
    grid-template-rows: 42vh 1fr;
  }

  /* Panel is now short and wide, so the tall-crop framing tuned for the
     desktop column no longer applies — reframe on the face and drop the zoom. */
  .about-media img {
    object-position: 50% 28%;
    transform: none;
  }

  .about-copy {
    padding: 32px 24px 40px;
    justify-content: flex-start;
    overflow-y: auto;
  }
  .about-copy h1 { font-size: clamp(30px, 6.2vw, 44px); margin-bottom: 20px; }
  .about-body { font-size: 15px; max-width: none; }
  .email-btn { margin-top: 24px; padding: 13px 24px; }
}

/* --- Phone -------------------------------------------------------- */
@media (max-width: 600px) {
  .page { padding: 0 16px; }

  .nav { gap: 8px; }
  .nav-name { font-size: 11px; padding: 5px 11px; }
  .nav-tab { padding: 6px 10px; font-size: 11px; }

  .intro { padding: 32px 0 28px; }
  .intro h1 { font-size: 15px; line-height: 1.28; }

  .cat-row { padding-bottom: 20px; }
  /* The filter row scrolls sideways rather than wrapping into a tall stack.
     (.cat-list already has overflow-x:auto; just hide the scrollbar.) */
  .cat-list { gap: 16px; font-size: 13px; scrollbar-width: none; }
  .cat-list::-webkit-scrollbar { display: none; }
  .cat-btn { font-size: 13px; }

  /* 2 columns on phones — bigger, more watchable tiles. */
  .grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 40px;
    padding-top: 28px;
    padding-bottom: 64px;
  }

  .tile-caption { padding-top: 8px; font-size: 10px; }

  /* At ~110px wide the badge would cover most of the tile. */
  .tile-num {
    top: 6px;
    left: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 5px;
    font-size: 10px;
  }

  /* The lift travels the full tile height on a phone; 130px is a desktop value. */
  .tile { transform: translate3d(0, 48px, 0); }

  /* Taller image row + reframe so the whole face fits instead of being cut in
     half. Verified at 390px wide. */
  .about { grid-template-rows: 46vh 1fr; }
  /* Face centred in the frame — margin above the head and below the chin,
     so the chin isn't tucked against the text. Verified at 375px wide. */
  .about-media img { object-position: 50% 52%; }
  .about-copy { padding: 24px 16px 32px; }

  /* Lightbox: 62vw of a 390px screen is a 240px video. Go near-full-width. */
  .lb-topbar { top: 14px; right: 14px; gap: 8px; }
  .lb-btn { padding: 9px 14px; font-size: 11px; }
}