/* ============================================================
   Home photo sheet — 3-column contact-sheet gallery
   • photo grid (PG) is 25% narrower, with 2× padding on its right
   • V1 (toggle): the narrowed grid
   • V2 (toggle): V1 + a "pyramid" — top edge 15% narrower than the
     bottom; tiles conform to the trapezoid and reshape as they scroll
   • hover: focus one tile (scale 1.25), dim + blur the rest
   • load: tiles settle into place like a puzzle
   ============================================================ */

/* home becomes a single-screen app: the sheet scrolls internally */
.body--home { overflow: hidden; }

/* let the stage hold a full-height, edge-to-edge sheet.
   The top/bottom fade lives HERE (not on .sheet) so it doesn't flatten
   the V2 3D perspective scene that .sheet establishes. */
.body--home .stage.stage--sheet {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  height: 100vh;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}

.sheet {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
}
.sheet.is-dragging { cursor: grabbing; }

/* photo grid: the positioning context for the tiles. 75% width (25%
   narrower) and offset so the right gutter is double the left
   (8.33% left + 16.67% right = the reclaimed 25%). Tiles inside are
   absolutely positioned per frame by the engine. */
.photo-grid {
  box-sizing: border-box;
  position: relative;
  width: 91.667%;                 /* runs to the right edge — no right-hand gutter */
  height: 100%;
  margin-left: 8.333%;
}

/* a tile is positioned + sized per frame (translate + width/height in JS) */
.tile {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  overflow: visible;              /* let the hovered image grow past its slot */
  will-change: transform, width, height;
}

/* settle layer: carries the load-in puzzle animation (separate from the
   tile's positioning transform so the two never collide) */
.tile__settle {
  display: block;
  width: 100%;
  height: 100%;
  animation: tileSettle 1.05s cubic-bezier(.16, .84, .44, 1) both;
  animation-delay: var(--delay, 0s);
}

.tile__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f2f1ed;            /* uniform tile colour, a hair darker than the white page */
  transform-origin: center center;
  transition: transform .55s cubic-bezier(.16, .84, .44, 1),
              filter    .45s ease,
              opacity   .45s ease;
  will-change: transform;
}

/* hover focus: lift the hovered image; veil the rest with a background-coloured
   layer (the image's own opacity is untouched, so overlapping frames don't
   show through). The veil is the page colour at 90%. */
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.pg-v5 .tile::after, .pg-v6 .tile::after { background: #f1f1f1; border-radius: 4px; }
.sheet:has(.tile:hover) .tile:not(:hover)::after { opacity: .9; }
.tile:hover { z-index: 5; }
.tile:hover .tile__img { transform: scale(2); }   /* scale 100% on hover */

/* lift layer: V3 hover — only the hovered tile turns to face the viewer
   (inverse of the grid's angles) and lifts off the plane. The rest of the
   grid stays put. Slow + smooth into the steady state. */
.tile__lift {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 1.1s cubic-bezier(.16, .84, .44, 1);
  will-change: transform;
}
.pg-v3 .tile:hover .tile__lift {
  transform: translateZ(60px)
             rotateY(calc(-1 * (var(--yaw) + var(--yaw-scroll))))
             rotateX(calc(-1 * var(--pitch)))
             rotateZ(calc(-1 * var(--rot)));
}

/* no blur in the keyframes — a non-none filter would flatten the V2 3D plane */
@keyframes tileSettle {
  0%   { opacity: 0; transform: translateY(28px) scale(.92); }
  100% { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ---------- V2: the photo grid IS a 3D plane, pitched back ----------
   .sheet is the camera; .photo-grid is one rigid surface tilted away at
   the top, so every tile + column is warped by the same perspective. */
/* shared camera + plane setup for the pitched versions */
.pg-v2 .sheet,
.pg-v3 .sheet {
  perspective: 1600px;
  perspective-origin: 50% 50%;
}
.pg-v2 .photo-grid,
.pg-v3 .photo-grid {
  --yaw-scroll: 0deg;             /* nudged while scrolling, reverts when stopped */
  transform-origin: 50% 100%;     /* bottom edge stays put; the top rolls back */
  transform-style: preserve-3d;
  transform: rotateZ(var(--rot)) rotateX(var(--pitch)) rotateY(calc(var(--yaw) + var(--yaw-scroll)));
  transition: transform .85s cubic-bezier(.37, 0, .63, 1);   /* graceful, eased yaw shift both ways */
}

/* V2 — the locked-in look */
.pg-v2 .photo-grid {
  --rot: 9deg; --pitch: 40deg; --yaw: -10deg;    /* 9° rotation · 40° pitch · -10° yaw */
  left: 100px;                    /* shifted 100px right */
}

/* V3 — steeper + more spin; pushed right, full-bleed to the viewport edge */
.body--home.pg-v3 .page { padding-right: 0; }   /* drop the 64px right gutter -> full bleed */
.pg-v3 .photo-grid {
  --rot: 16deg;                   /* rotation */
  --pitch: 28deg;                 /* pitch */
  --yaw: -20deg;                  /* yaw */
  left: 174px;                    /* shifted 100px further right */
  width: 62.333%;                 /* shrunk another 15% */
}
/* V4 — flat, single centered column: one photo after another */
.pg-v4 .photo-grid {
  width: 42%;
  margin: 0 auto;
  left: 0;
}
.pg-v4 .tile__img { object-fit: contain; }   /* never crop — show the full frame */

/* V5 (horizontal) + V6 (vertical) — flat full-bleed Figma carousels */
.pg-v5, .pg-v6 { background: #f1f1f1; }   /* page background */
.pg-v5 .photo-grid, .pg-v6 .photo-grid { width: 100%; left: 0; margin: 0; }
/* drop the menu rail + all page padding so the carousel is full bleed */
.body--home.pg-v5 .page, .body--home.pg-v6 .page { grid-template-columns: 1fr; padding: 0; gap: 0; }
.pg-v5 .rail, .pg-v6 .rail { display: none; }
.pg-v5 .tile__img, .pg-v6 .tile__img { border-radius: 4px; object-position: center; }   /* rounded, centred crop */

/* V5: gracefully shrink 17% while scrolling, ease back to full size when idle */
.pg-v5 .photo-grid {
  transform-origin: center center;
  transition: transform 1.2s cubic-bezier(.4, 0, .2, 1);
}
.pg-v5.is-scrolling .photo-grid { transform: scale(0.83); }

/* V7 / V8 / V9 / V10 — full-bleed face-pile concept */
.pg-v7, .pg-v8, .pg-v9, .pg-v10 { background: #f1f1f1; }
.pg-v7 .photo-grid, .pg-v8 .photo-grid, .pg-v9 .photo-grid, .pg-v10 .photo-grid { width: 100%; height: 100%; left: 0; margin: 0; isolation: isolate; }  /* contain z-indexes below the toggle */
.body--home.pg-v7 .page, .body--home.pg-v8 .page, .body--home.pg-v9 .page, .body--home.pg-v10 .page { grid-template-columns: 1fr; padding: 0; gap: 0; }   /* all full-bleed, no padding */
.pg-v8 .rail, .pg-v9 .rail, .pg-v10 .rail { display: none; }   /* V7 keeps the menu rail */
/* V7: the fixed rail floats over the full-bleed carousel without blocking it.
   position:absolute pulls the rail out of the grid so the stage keeps the full screen */
.pg-v7 .rail { position: absolute; pointer-events: none; }
.pg-v7 .rail-inner { z-index: 45; pointer-events: auto; }
/* logo + menu are hidden from the first paint (no flash on reload); they slide + fade in
   once the pile is nearly settled (see .rail-in, added in JS) */
.body--home .rail-inner { opacity: 0; transform: translateX(-16px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.body--home.rail-in .rail-inner { opacity: 1; transform: none; }
.pg-v7 .tile__img, .pg-v8 .tile__img, .pg-v9 .tile__img, .pg-v10 .tile__img { border-radius: 0; object-position: center; }   /* sharp corners, no rounding */
/* V7–V10 have no hover behaviour at all */
.pg-v7 .tile::after, .pg-v8 .tile::after, .pg-v9 .tile::after, .pg-v10 .tile::after { content: none; }                  /* no hover veil */
.pg-v7 .tile:hover .tile__img, .pg-v8 .tile:hover .tile__img, .pg-v9 .tile:hover .tile__img, .pg-v10 .tile:hover .tile__img { transform: none; }      /* no hover zoom */
/* social-proof quote tiles: super-faint hairline outline + slightly rounded corners */
.tile--quote .tile__img { box-shadow: 0 0 0 0.25px rgba(0, 0, 0, 0.02); border-radius: 12px; }
/* custom shaped quotes: show exactly as supplied — no outline, no placeholder fill, no imposed rounding */
.tile--bare .tile__img { box-shadow: none; background: transparent; border-radius: 0; }

/* while scrolling, the yaw eases 2° further; reverts when motion stops */
.pg-v2.is-scrolling .photo-grid { --yaw-scroll: 2deg; }   /* -10 -> -8 */
.pg-v3.is-scrolling .photo-grid { --yaw-scroll: 8deg; }   /* -20 -> -12, back to -20 when stopped */
/* keep tiles in 3D so a hovered one can turn to face the viewer */
.pg-v3 .tile,
.pg-v3 .tile__lift { transform-style: preserve-3d; }

/* ---------- V1 / V2 version toggle ---------- */
.version-toggle button {
  border: 0;
  background: transparent;
  padding: 8px 14px;
  border-radius: 999px;
  color: #0a0a0a;
  letter-spacing: .02em;
  opacity: .6;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.version-toggle button:hover { opacity: 1; }
.version-toggle button.is-active {
  opacity: 1;
  background: #0a0a0a;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .tile { animation: none; }
  .tile__img { transition: none; }
}

/* ---------- lightbox: tap a pile image to view it full ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; box-sizing: border-box;
  background: rgba(12, 12, 12, 0.9);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: 100%; }
.lightbox__img {
  display: block; max-width: min(92vw, 900px); max-height: 80vh;
  object-fit: contain; border-radius: 4px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
/* clear 16px X, sitting 24px below the image (12px gap + 12px button padding) */
.lightbox__close {
  padding: 12px; background: none; border: 0; line-height: 0;
  color: #fff; opacity: .85; cursor: pointer;
  transition: opacity .15s ease;
}
.lightbox__close:hover { opacity: 1; }
.lightbox__close svg { display: block; width: 16px; height: 16px; }
body.lb-open { overflow: hidden; }