/* ─── PORTFOLIO PAGE ─────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #212121;
  font-family: 'Inter', sans-serif;
}

.portfolio {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #212121;
  overflow: hidden;
}

/* ─── LEFT PANEL ─────────────────────────────────── */

.portfolio-left-clip {
  position: absolute;
  top: 10px;
  left: 10px;
  width: clamp(280px, 32vw, 460px);
  bottom: 10px;
  overflow: hidden;
  pointer-events: none;
}

.portfolio-left {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  will-change: transform;
  pointer-events: auto;
}

.portfolio-left-img {
  width: 100%;
  flex-shrink: 0;
  display: block;
  cursor: pointer;
  transition: opacity 0.3s ease;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Disable hover transition while scrolling to prevent flicker */
.portfolio-left.is-scrolling .portfolio-left-img {
  transition: none;
  pointer-events: none;
}

/* <img> items — natural proportions, no crop */
img.portfolio-left-img {
  height: auto;
}

/* Color placeholder — fixed ratio */
.portfolio-left-img.is-color {
  aspect-ratio: 2880 / 1800;
}

.portfolio-left-img:hover { opacity: 0.85; }

/* Zoom-in cursor on clickable left panel items */
img.portfolio-left-img,
.portfolio-left-img.is-video {
  cursor: zoom-in;
}

.portfolio-left-img.is-video {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* ─── DESCRIPTION BUTTON (top center) ────────────── */

.portfolio-desc-wrap {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
}

.portfolio-desc-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Expanding background — starts as button pill, grows to full panel */
.portfolio-desc-nav__bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 27px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  will-change: width, height, border-radius;
}

/* Button above the bg */
.portfolio-desc-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 8px 7px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #000;
  white-space: nowrap;
  line-height: 1;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.portfolio-desc-btn svg { width: 8px; height: 8px; flex-shrink: 0; }

.desc-icon {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-desc-status="active"] .desc-icon {
  transform: rotate(45deg);
}

/* Content group — GSAP handles show/hide animation */
.portfolio-desc-nav__group {
  width: 260px;
  padding: 4px 16px 16px;
  position: relative;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.15) rotate(0.001deg);
  transform-origin: 50% 0;
  will-change: transform, opacity;
  box-sizing: border-box;
}

.portfolio-desc-project {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #aaa;
  margin-bottom: 7px;
}

.portfolio-desc-text {
  font-size: 12px;
  line-height: 1.65;
  color: #212121;
}

.portfolio-desc-text p { margin: 0; }
.portfolio-desc-text p + p { margin-top: 0.85em; }

/* ─── 3D SCENE WRAPPER ───────────────────────────── */

#col-3d-scene {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  perspective: 1450px;
  perspective-origin: 85% 92%;
  pointer-events: none;
  overflow: visible;
}

/* ─── THUMBNAIL COLUMNS (right side) ─────────────── */

.portfolio-thumbs {
  position: absolute;
  width: 140px;
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  padding: 0;
  transform-style: preserve-3d;
  pointer-events: auto;
}

/* Anchored from right — fixed gutter, no overlap at any VW */
.portfolio-thumbs.col-1 { right: 330px; top: -27px; }
.portfolio-thumbs.col-2 { right: 170px; top: -9px;  }
.portfolio-thumbs.col-3 { right:  10px; top:  10px; }

.portfolio-thumb {
  width: 100%;
  aspect-ratio: 808 / 632;
  flex-shrink: 0;
  cursor: pointer;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
  scale: 1;
  border-radius: 0px;
  will-change: transform;
  transition: scale 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-radius 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.3s ease;
}

.portfolio-thumbs.is-scrolling .portfolio-thumb {
  scale: 0.714;
  border-radius: 10px;
}

.portfolio-thumb:hover { opacity: 0.75; }

/* ─── CROSSHAIR (center) ──────────────────────────── */

.portfolio-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  pointer-events: none;
  color: #888;
}

.portfolio-crosshair svg {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  will-change: transform;
}

/* ─── BOTTOM NAVIGATION ───────────────────────────── */

.portfolio-nav {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  width: 270px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  z-index: 10;
}

/* OD logo toggle — 24×24px pill, SVG 15.867×14px */
.portfolio-nav-toggle {
  width: 24px;
  height: 24px;
  background: #fff;
  border: none;
  border-radius: 5px;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #212121;
}

.portfolio-nav-toggle svg {
  width: 15.867px;
  height: 14px;
  display: block;
  fill: #212121;
}

.portfolio-nav-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: none;
  border-radius: 5px;
  padding: 5.5px 7px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #212121;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── CLICK TO ZOOM LIGHTBOX ──────────────────────── */
.click-zoom__lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  justify-content: center;
  align-items: center;
  padding: 5vmin;
  background-color: rgba(0, 0, 0, 0.88);
}

.click-zoom__lightbox > * {
  /* clicks fall through to the lightbox (which closes it) */
  pointer-events: none;
  flex-shrink: 0;
}

/* ─── MOBILE CASE BAR (hidden on desktop) ────────── */
.mobile-case-bar { display: none; }
.mobile-case-name { display: none; }

/* Mobile close button — hidden until case opens */
.mobile-close-btn {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 16px;
  z-index: 200;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.mobile-close-btn svg { width: 18px; height: 18px; }
.mobile-close-btn:active { background: rgba(255, 255, 255, 0.22); }

/* ─── MOBILE (≤ 599px) ───────────────────────────── */
@media (max-width: 599px) {

  /* Custom scroll — tell browser not to handle touches here so passive listeners work */
  .portfolio {
    touch-action: none;
    overscroll-behavior: none;
  }

  /* Left clip keeps native pan-y scroll (case detail) */
  .portfolio-left-clip {
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  /* Nav moves to top */
  .portfolio-nav {
    position: fixed;
    bottom: auto;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform: none;
    justify-content: flex-start;
    padding: 7px 8px;
    gap: 3px;
    z-index: 150;
  }

  /* Make nav buttons slightly smaller on mobile */
  .portfolio-nav-btn {
    font-size: 10px;
    padding: 5px 6px;
    border-radius: 4px;
  }

  .portfolio-nav-toggle {
    width: 22px;
    height: 22px;
    border-radius: 4px;
  }

  /* Thumbnail columns — 2 columns, spread across full viewport width */
  /* col-1 (leftmost desktop column) is hidden on mobile */
  .portfolio-thumbs.col-1 { display: none; }

  /* 4px outer margins, 12px gutter (same as vertical gap): width = (100vw - 20px) / 2 */
  .portfolio-thumbs {
    width: calc((100vw - 20px) / 2);
    gap: 12px;
  }
  .portfolio-thumbs.col-2 { left: 4px;                                 right: auto; top: calc(38px - 9px);  }
  .portfolio-thumbs.col-3 { left: calc((100vw - 20px) / 2 + 16px);    right: auto; top: calc(38px + 10px); }

  /* iOS Safari fix: overflow:hidden on .portfolio flattens preserve-3d ancestors.
     Move perspective to direct parent of transformed elements so the 3D context
     is contained between .portfolio-thumbs and .portfolio-thumb — no intermediate
     overflow:hidden can interfere. */
  #col-3d-scene {
    perspective: none !important;
    perspective-origin: unset !important;
  }

  .portfolio-thumbs {
    perspective: 900px;
    perspective-origin: 50% 50%;
    transform-style: flat; /* preserve-3d not needed — perspective is on direct parent */
  }

  .portfolio-thumb {
    border-radius: 0;
  }

  /* Shrink effect on mobile — same feel as desktop */
  .portfolio-thumbs.is-scrolling .portfolio-thumb {
    scale: 0.714;
    border-radius: 10px;
  }

  /* Crosshair visible on mobile, behind the columns */
  .portfolio-crosshair { z-index: 1; }
  #col-3d-scene { z-index: 2; }

  /* Description — hidden until a case is open, then fixed at bottom */
  .portfolio-desc-wrap {
    display: none;
    position: fixed;
    top: auto;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    pointer-events: none;
  }
  .portfolio-desc-wrap.mobile-desc-on {
    display: block;
    pointer-events: auto;
  }
  /* Flip order: button at bottom, content panel above */
  .portfolio-desc-nav {
    flex-direction: column-reverse;
    align-items: center;
  }
  /* Bg anchors to button (bottom of the reversed container) and grows upward */
  .portfolio-desc-nav__bg {
    top: auto;
    bottom: 0;
  }
  /* Content panel expands from its bottom edge (toward the top of the screen) */
  .portfolio-desc-nav__group {
    transform-origin: 50% 100%;
    width: min(280px, 90vw);
  }

  /* Safety guard: if mobile-open is absent (e.g. DevTools resize without reload),
     keep the panel invisible regardless of GSAP transform state */
  .portfolio-left-clip:not(.mobile-open) {
    visibility: hidden !important;
  }
  .portfolio-left-clip.mobile-open {
    visibility: visible;
  }

  /* Left panel — off-screen by default, slides in full-screen (nav sits above via z-index) */
  .portfolio-left-clip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 100;
    background: #212121;
    /* GSAP controls transform — initial state set by JS */
    pointer-events: none;
  }

  .portfolio-left-clip.mobile-open {
    pointer-events: auto;
  }

  .portfolio-left {
    transform: none !important;
    width: 100%;
    padding-top: 38px;
    padding-bottom: 40px;
    overflow: visible;
  }

  .portfolio-left-img {
    width: 100%;
    border-radius: 0;
    cursor: default;
  }

  img.portfolio-left-img,
  .portfolio-left-img.is-video {
    width: 100%;
    height: auto;
    cursor: default;
  }

  /* Mobile case bar — hidden, existing nav stays as header */
  .mobile-case-bar {
    display: none;
  }

  .mobile-close-btn.visible {
    display: flex;
  }

  .mobile-case-name {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}