/* ─── Showcase page shared styles ───────────────────────── */
/* Inspired by: poster-1/2 (giant display type), dimension.png
   (glass orb overlay), button-with-3d-icon (pill CTA),
   the_wind.png (text + 3D object hero) */

/* ─── Project backdrop ───────────────────────────────────── */
/* Fixed behind #page (a body child, so the page-roll transforms never
   capture it): the project's own imagery blurred into an ambient color
   wash — spring greenery, the rainbow ceiling glow, the swirl pattern —
   held dark by the scrim so type and hairline rules read exactly as
   they do on plain black. Overscanned so the blur never exposes a
   bright edge fringe at the viewport bounds. */
.project-bg,
.project-bg-scrim {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.project-bg {
  inset: -8%;
  background-size: cover;
  background-position: center;
  filter: blur(64px) saturate(1.35);
}
.project-bg-scrim {
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.84) 0%,
      rgba(0, 0, 0, 0.72) 30%,
      rgba(0, 0, 0, 0.72) 65%,
      rgba(0, 0, 0, 0.88) 100%);
}

/* ─── Back button ────────────────────────────────────────── */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fg);
  color: var(--bg);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}
.back-btn:hover { opacity: 0.8; }

/* ─── Eyebrow bar ────────────────────────────────────────── */
.project-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

/* ─── Hero title block ───────────────────────────────────── */
/* Directly references the LOVE/GANG poster aesthetic:
   giant display type that nearly fills the viewport width */
.project-title-block {
  padding: 40px 24px 32px;
  position: relative;
  overflow: hidden;
}
.project-title {
  font-size: clamp(72px, 17vw, 260px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.88;
  user-select: none;
  position: relative;
  z-index: 1;
}
/* compact variant (videography): one short line so the clip
   carousel below sits above the fold */
.project-title-block--compact { padding: 28px 24px 20px; }
.project-title--compact { font-size: clamp(48px, 9vw, 140px); }
/* Giant ghost number behind title — poster editorial device */
.project-ghost-num {
  font-size: 52vw;
  font-weight: 900;
  color: rgba(255,255,255,0.028);
  position: absolute;
  right: -3vw;
  top: -4vw;
  line-height: 1;
  letter-spacing: -0.06em;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
/* Glass orb — from dimension.png and the_wind.png 3D glass element */
.deco-orb {
  width: clamp(160px, 20vw, 300px);
  height: clamp(160px, 20vw, 300px);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  background: radial-gradient(
    ellipse at 35% 30%,
    rgba(255,255,255,0.07) 0%,
    rgba(255,255,255,0.02) 45%,
    transparent 70%
  );
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

/* ─── Hero image ─────────────────────────────────────────── */
.project-hero-img {
  padding: 0 24px 40px;
}
.project-hero-img-inner {
  width: 100%;
  /* 16/9 matches the hero footage's native frame — a wider ratio
     cover-crops the low-res phone video and zooms into fewer source
     pixels, which is what made the heroes look soft */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}
/* portrait variant — for heroes shot vertically (hoodie MKM-01):
   shown at its own 9/16 frame, centered, instead of crop-zooming a
   narrow strip of it across the full page width */
.project-hero-img--portrait .project-hero-img-inner {
  aspect-ratio: 9 / 16;
  max-width: min(440px, 86vw);
  margin: 0 auto;
}
.project-hero-img-inner img,
.project-hero-img-inner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-hero-img-inner img {
  /* Ken Burns — slow cinematic zoom on showcase hero stills (skipped on
     video heroes; real footage already supplies the motion) */
  animation: kenburns 14s ease-in-out infinite alternate;
  transform-origin: center center;
}
@keyframes kenburns {
  from { transform: scale(1);    }
  to   { transform: scale(1.07); }
}

/* ─── Details strip ──────────────────────────────────────── */
.project-details {
  display: grid;
  grid-template-columns: 10fr 14fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.project-details-meta {
  padding: 40px 24px;
  border-right: 1px solid var(--line);
}
.project-details-meta .label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.project-details-meta .value {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.project-details-meta .value:last-child { margin-bottom: 0; }
.project-details-desc {
  padding: 40px 32px;
}
.project-details-desc p {
  font-size: clamp(20px, 2.5vw, 34px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--fg);
}

/* ─── Full-bleed media band ─────────────────────────────── */
/* Edge-to-edge cinematic breaker between sections — one hero-grade
   image or looping video with caption pills pinned to the corners. */
.showcase-band {
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.showcase-band img,
.showcase-band video {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.showcase-band img {
  animation: kenburns 16s ease-in-out infinite alternate;
  transform-origin: center center;
}
.band-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
.band-caption span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  padding: 7px 13px;
  backdrop-filter: blur(4px);
}

/* ─── Before/after compare slider ───────────────────────── */
/* Drag anywhere to wipe between two takes of the same view —
   used on St. Patrick's to overlay the 3D previz on the real build.
   --split (set by main.js from pointer position) drives the clip. */
.compare-section {
  padding: 60px 24px 80px;
  border-bottom: 1px solid var(--line);
}
.compare {
  position: relative;
  aspect-ratio: 16 / 8;
  border-radius: 10px;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  background: #0d0d0d;
}
.compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* top layer wipes away to reveal the bottom one */
.compare .compare-top {
  clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
}
.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--fg);
  pointer-events: none;
}
.compare-handle::after {
  content: '⇄';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--bg);
  background: var(--fg);
  border-radius: 50%;
}
.compare-tag {
  position: absolute;
  top: 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  padding: 7px 13px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.compare-tag-a { left: 14px; }
.compare-tag-b { right: 14px; }

/* ─── Gallery (bento grid + lightbox) ───────────────────────
   Asymmetric tile sizes via .bento-* span classes (assigned per
   project in HTML, ordered for visual rhythm rather than upload
   order). Every tile opens the lightbox on click. */
.project-gallery {
  padding: 60px 24px 80px;
  border-bottom: 1px solid var(--line);
}
.gallery-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* fixed viewport-relative rows: tile media is absolutely positioned,
     so a tall source image (tech pack, portrait phone shots) can never
     inflate its row — everything cover-crops to the bento rhythm */
  grid-auto-rows: clamp(170px, 23vw, 340px);
  gap: 10px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #0d0d0d;
  cursor: pointer;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-item.in-view { opacity: 1; transform: translateY(0); }
.gallery-item img,
.gallery-item video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(25%);
  transform: scale(1.05);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease;
}
.gallery-item:hover img,
.gallery-item:hover video {
  transform: scale(1.12);
  filter: grayscale(0%);
}
/* videos are low-res phone footage — every bit of zoom crops away
   source pixels and softens them further, so they sit flat at scale(1)
   and skip the hover zoom (they keep the grayscale→color hover) */
.gallery-item video,
.gallery-item:hover video { transform: none; }
/* expand affordance, signals the tile is clickable */
.gallery-item::after {
  content: '↗';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--fg);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.gallery-item:hover::after { opacity: 1; transform: translateY(0); }

/* caption pill naming the aspect each tile documents */
.tile-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  padding: 6px 11px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* ─── Reel carousel (videography page) ──────────────────── */
/* Horizontal strip of 9:16 clip cards — drag/auto-drift comes from
   main.js via id="filmstrip"; cards stay .gallery-item so the
   in-view reveal and lightbox keep working. Videos need pointer
   events off (like the homepage strip's imgs) so drags land on
   the card, and the card's absolute media fills the fixed frame. */
.reel-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}
.reel-carousel::-webkit-scrollbar { display: none; }
.reel-carousel:active { cursor: grabbing; }
.reel-card {
  flex-shrink: 0;
  width: clamp(220px, 24vw, 320px);
  aspect-ratio: 9 / 16;
}
.reel-card video { pointer-events: none; }

.bento-lg   { grid-column: span 2; grid-row: span 2; }
.bento-tall { grid-column: span 1; grid-row: span 2; }
.bento-wide { grid-column: span 2; grid-row: span 1; }
.bento-sm   { grid-column: span 1; grid-row: span 1; }
.bento-full { grid-column: 1 / -1; grid-row: span 1; }

/* ─── Lightbox ───────────────────────────────────────────── */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
#lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-frame {
  position: relative;
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
#lightbox.open .lightbox-frame { transform: scale(1); }
.lightbox-frame img,
.lightbox-frame video {
  display: block;
  max-width: 88vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: fixed;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--fg);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 0.2s, transform 0.2s;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255, 255, 255, 0.16); }
.lightbox-close { top: 24px; right: 24px; width: 44px; height: 44px; font-size: 16px; }
.lightbox-prev  { left: 24px;  top: 50%; width: 52px; height: 52px; font-size: 20px; transform: translateY(-50%); }
.lightbox-next  { right: 24px; top: 50%; width: 52px; height: 52px; font-size: 20px; transform: translateY(-50%); }
.lightbox-prev:hover  { transform: translateY(-50%) scale(1.08); }
.lightbox-next:hover  { transform: translateY(-50%) scale(1.08); }
.lightbox-counter {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* ─── Bottom nav ─────────────────────────────────────────── */
.project-bottom-nav {
  padding: 60px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.project-bottom-nav .project-name-muted {
  font-size: clamp(13px, 1.5vw, 16px);
  color: var(--muted);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .project-title { font-size: clamp(56px, 15vw, 120px); }
  .project-ghost-num { display: none; }
  .deco-orb { display: none; }
  .project-hero-img-inner { aspect-ratio: 16 / 9; }
  .project-details { grid-template-columns: 1fr; }
  .project-details-meta { border-right: none; border-bottom: 1px solid var(--line); }
  .project-details-desc { padding: 32px 24px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(120px, 26vw, 200px); gap: 8px; }
  .bento-lg, .bento-wide, .bento-full { grid-column: span 2; }
  .gallery-item::after { width: 28px; height: 28px; font-size: 13px; top: 10px; right: 10px; }
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 16px; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { top: 14px; right: 14px; width: 38px; height: 38px; }
  .project-eyebrow { flex-wrap: wrap; gap: 12px; }
  .showcase-band img,
  .showcase-band video { aspect-ratio: 4 / 3; }
  .band-caption { left: 12px; right: 12px; bottom: 12px; flex-wrap: wrap; }
  .compare-section { padding: 40px 16px 60px; }
  .compare { aspect-ratio: 4 / 3; }
  .compare-handle::after { width: 36px; height: 36px; font-size: 14px; }
  .tile-tag { font-size: 9px; padding: 5px 9px; left: 8px; bottom: 8px; }
  .gallery-label { flex-wrap: wrap; }
}