/* ==========================================================================
   PORTFOLIO (curved canvas, Mike 28-sep-2026; model: cmscurvegallery.framer.website)
   One full-screen section on black:
   - With JavaScript (main.js › 12, adds .is-live): a masonry field of photos
     on a curved surface that you drag in any direction and never ends.
     Clicking a photo opens the lightbox (client + type of work show there).
   - Without JavaScript or with "reduce motion": title on top and a plain
     masonry grid that scrolls normally.
   Very tall photos (website screenshots, [data-tall]) are cropped to 3:4
   from the top; the lightbox shows them whole.

   Tweak the plain grid here:
   --pf-columns  number of columns on desktop
   --pf-gap      space between images
   The canvas (tile size, curve, inertia) is tuned at the top of main.js › 12.
   ========================================================================== */

.portfolio {
  --pf-columns: 4;
  --pf-gap: 10px;
  background: var(--black);
}

/* --------------------------------------------------------------------------
   1. PLAIN VERSION (no JavaScript / reduce motion)
   -------------------------------------------------------------------------- */
.pf-canvas {
  position: relative;
  padding: 0 var(--pf-gap) var(--space-2xl);
  background: var(--black);
  color: var(--white);
}

.pf-canvas__intro {
  padding: calc(var(--header-offset) + 40px) 0 var(--space-xl);
  text-align: center;
}

.pf-canvas__eyebrow {
  margin-bottom: var(--space-xs);
}

.pf-canvas__title {
  font-size: clamp(3.5rem, 10vw, 9rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
}

.pf-canvas__hint,
.pf-canvas__jump {
  display: none;   /* only useful on the canvas */
}

/* Category links under the title: All Work + one pill per category
   (Mike, 6-oct-2026). The current page is filled white. */
.pf-cats {
  margin-top: var(--space-s);
}

.pf-cats__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-cats__link {
  display: inline-block;
  padding: 7px 16px;
  border: 1.5px solid var(--on-dark-line-strong);
  border-radius: var(--radius-pill);
  color: var(--white);
  font-size: var(--text-14);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  text-decoration: none;
  text-transform: uppercase;
}

.pf-cats__link:hover {
  border-color: var(--gold-500);
  color: var(--gold-500);
}

.pf-cats__link[aria-current="page"] {
  border-color: var(--white);
  background: var(--white);
  color: var(--black);
}

.pf-cats__link:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
}

/* Full page width: no max-width on purpose */
.masonry {
  column-count: var(--pf-columns);
  column-gap: var(--pf-gap);
}

.masonry__item {
  margin-bottom: var(--pf-gap);
  overflow: hidden;
  background: var(--ink);
  break-inside: avoid;
}

.masonry__item[data-tall] {
  aspect-ratio: 3 / 4;
}

/* The whole photo is a link to its large version (opens in the lightbox) */
.work__link {
  display: block;
  height: 100%;
  cursor: zoom-in;
}

.work__link:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: -3px;
}

.work__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

@media (max-width: 1199px) {
  .portfolio { --pf-columns: 3; }
}

@media (max-width: 991px) {
  .portfolio { --pf-columns: 2; }
}

@media (max-width: 560px) {
  .portfolio { --pf-columns: 1; }
}

/* --------------------------------------------------------------------------
   2. CANVAS VERSION (.is-live, set by main.js › 12)
   -------------------------------------------------------------------------- */
.pf-canvas.is-live {
  height: 100svh;
  padding: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;   /* every drag moves the canvas; the page scrolls with the button */
  user-select: none;
  -webkit-user-select: none;
}

.pf-canvas.is-dragging {
  cursor: grabbing;
}

.pf-canvas.is-live .masonry {
  position: absolute;
  inset: 0;
  column-count: auto;
  perspective: var(--pf-perspective, 1000px);
}

.pf-canvas.is-live .masonry__item {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  border-radius: var(--radius-media);
  will-change: transform;
}

.pf-canvas.is-live .work__link {
  cursor: pointer;
}

.pf-canvas.is-dragging .work__link {
  cursor: grabbing;
}

/* Hover: the photo zooms in slightly inside its frame */
.pf-canvas.is-live .work__link img {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pf-canvas.is-live .work__link:hover img {
  transform: scale(1.08);
}

/* Dark fades: top (logo and menu) and bottom (title and button) */
.pf-canvas.is-live::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 160px;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.7), transparent);
  pointer-events: none;
}

.pf-canvas.is-live::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 220px;
  background: linear-gradient(to top, rgb(0 0 0 / 0.75), transparent);
  pointer-events: none;
}

.pf-canvas.is-live .pf-canvas__intro {
  position: absolute;
  left: var(--grid-margin);
  bottom: 28px;
  z-index: 2;
  padding: 0;
  text-align: left;
  pointer-events: none;
}

.pf-canvas.is-live .pf-canvas__title {
  font-size: var(--text-5xl);
}

.pf-canvas.is-live .pf-cats {
  margin-top: 14px;
  pointer-events: auto;   /* the intro lets drags pass through; the links still work */
}

.pf-canvas.is-live .pf-cats__list {
  justify-content: flex-start;
}

.pf-canvas.is-live .pf-canvas__hint {
  display: block;
  margin-top: 12px;
  color: var(--on-dark-text);
  font-size: var(--text-14);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.pf-canvas.is-live .pf-canvas__jump {
  position: absolute;
  right: var(--grid-margin);
  bottom: 32px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid var(--on-dark-line-strong);
  border-radius: var(--radius-pill);
  color: var(--white);
  font-size: var(--text-14);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  text-transform: uppercase;
}

.pf-canvas__jump .icon {
  width: 16px;
  height: 16px;
}

.pf-canvas.is-live .pf-canvas__jump:hover {
  border-color: var(--gold-500);
  color: var(--gold-500);
}

/* "Click" with a mouse, "Tap" on touch screens */
.pf-canvas__hint-tap {
  display: none;
}

@media (hover: none) {
  .pf-canvas__hint-click { display: none; }
  .pf-canvas__hint-tap { display: inline; }
}

@media (max-width: 767px) {
  .pf-canvas.is-live .pf-canvas__intro {
    right: var(--grid-margin);
    bottom: 76px;   /* full width (the category pills need it); the "Get in touch" button sits below */
  }

  .pf-canvas.is-live .pf-canvas__hint {
    font-size: var(--text-12);
  }

  .pf-canvas.is-live::after {
    height: 360px;   /* taller intro block (title + pills) needs a taller dark fade */
    background: linear-gradient(to top, rgb(0 0 0 / 0.88), rgb(0 0 0 / 0.6) 55%, transparent);
  }

  .pf-cats__link {
    padding: 6px 12px;
    font-size: var(--text-12);
  }

  .pf-canvas.is-live .pf-canvas__jump {
    bottom: 26px;
    padding: 8px 14px;
    font-size: var(--text-12);
  }
}

/* --------------------------------------------------------------------------
   3. LIGHTBOX ON THIS PAGE
   The canvas stays visible (darkened) behind the open photo, which grows in
   from the middle, like the reference. Not with "reduce motion".
   -------------------------------------------------------------------------- */
.portfolio .lightbox,
.portfolio .lightbox::backdrop {
  background: rgb(0 0 0 / 0.8);
}

@media (prefers-reduced-motion: no-preference) {
  .portfolio .lightbox[open] {
    animation: pf-lightbox-fade 0.3s ease-out;
  }

  .portfolio .lightbox[open] .lightbox__image {
    animation: pf-lightbox-grow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

@keyframes pf-lightbox-fade {
  from { opacity: 0; }
}

@keyframes pf-lightbox-grow {
  from { opacity: 0; transform: scale(0.82); }
}