/* ==========================================================================
   SCRUBBED BENTO GALLERY — Uniform Grid + Subtle Perspective Tilt
   All tiles same size. Perspective on parent. GSAP Flip owns expand.
   ========================================================================== */

.bento-gallery-section {
  position: relative;
  width: 100%;
  background: #000000;
  overflow: visible;
  z-index: 20;
}

.bento-gallery-intro-bar {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(24px, 4vw, 48px);
  z-index: 30;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.bento-gallery-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(18, 18, 18, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
}

.bento-gallery-badge .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: bentoPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes bentoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.bento-gallery-hint {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
}

/* ===========================
   STAGE
   perspective set on the PARENT so rotateX on child creates proper vanishing point
   =========================== */
.bento-gallery-wrapper,
.gallery-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000000;
  contain: paint layout;
}

/* Hardware-accelerated edge vignettes layer (compositor opacity driven) */
.bento-vignettes-layer {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  will-change: opacity;
  background:
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.7) 18%, transparent 35%),
    linear-gradient(to top, #000 0%, rgba(0,0,0,0.75) 20%, transparent 40%),
    linear-gradient(to right, #000 0%, rgba(0,0,0,0.6) 12%, transparent 26%),
    linear-gradient(to left, #000 0%, rgba(0,0,0,0.6) 12%, transparent 26%);
}

/* ===========================
   PERSPECTIVE TILT WRAPPER
   GSAP animates rotateX here (separate from Flip which targets the grid)
   No CSS transform — GSAP fromTo owns it entirely
   Removed preserve-3d to eliminate heavy 3D layer polygon intersection sorting
   =========================== */
.bento-perspective-tilt {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===========================
   GRID — GSAP Flip owns column/row morph
   =========================== */
.bento-gallery-grid,
.gallery {
  position: relative;
  width: 100%;
  height: 100%;
  flex: none;
  display: grid;
  padding: 0;
  box-sizing: border-box;
  /* The zoom scales this container; its centre is the centre of tile --3. */
  transform-origin: 50% 50%;
}

/* ===========================
   INITIAL BENTO — 5 cols × 5 rows (25 uniform tiles)
   =========================== */
.gallery--bento {
  grid-template-columns: repeat(5, 20vw);
  grid-template-rows: repeat(5, 22vh);
  gap: 32px;
  justify-content: center;
  align-content: center;
}

/* ===========================
   GRID AREAS — 5 columns × 5 rows (25 tiles)
   Row 1: top row (items 1, 2, 4, 16, 17)
   Row 2: second row (items 8, 9, 10, 18, 19)
   Row 3: center row — item 3 is dead center (expands to fullscreen)
   Row 4: fourth row (items 11, 6, 12, 22, 23)
   Row 5: bottom row (items 13, 14, 15, 24, 25)
   =========================== */
/* Row 1 */
.bento-gallery__item--1  { grid-area: 1 / 1 / 2 / 2; }
.bento-gallery__item--2  { grid-area: 1 / 2 / 2 / 3; }
.bento-gallery__item--4  { grid-area: 1 / 3 / 2 / 4; }
.bento-gallery__item--16 { grid-area: 1 / 4 / 2 / 5; }
.bento-gallery__item--17 { grid-area: 1 / 5 / 2 / 6; }

/* Row 2 */
.bento-gallery__item--8  { grid-area: 2 / 1 / 3 / 2; }
.bento-gallery__item--9  { grid-area: 2 / 2 / 3 / 3; }
.bento-gallery__item--10 { grid-area: 2 / 3 / 3 / 4; }
.bento-gallery__item--18 { grid-area: 2 / 4 / 3 / 5; }
.bento-gallery__item--19 { grid-area: 2 / 5 / 3 / 6; }

/* Row 3 (CENTER FLAGSHIP ROW) */
.bento-gallery__item--5  { grid-area: 3 / 1 / 4 / 2; }
.bento-gallery__item--20 { grid-area: 3 / 2 / 4 / 3; }
.bento-gallery__item--3  { grid-area: 3 / 3 / 4 / 4; } /* DEAD CENTER — expands on scroll */
.bento-gallery__item--7  { grid-area: 3 / 4 / 4 / 5; }
.bento-gallery__item--21 { grid-area: 3 / 5 / 4 / 6; }

/* Row 4 */
.bento-gallery__item--11 { grid-area: 4 / 1 / 5 / 2; }
.bento-gallery__item--6  { grid-area: 4 / 2 / 5 / 3; }
.bento-gallery__item--12 { grid-area: 4 / 3 / 5 / 4; }
.bento-gallery__item--22 { grid-area: 4 / 4 / 5 / 5; }
.bento-gallery__item--23 { grid-area: 4 / 5 / 5 / 6; }

/* Row 5 */
.bento-gallery__item--13 { grid-area: 5 / 1 / 6 / 2; }
.bento-gallery__item--14 { grid-area: 5 / 2 / 6 / 3; }
.bento-gallery__item--15 { grid-area: 5 / 3 / 6 / 4; }
.bento-gallery__item--24 { grid-area: 5 / 4 / 6 / 5; }
.bento-gallery__item--25 { grid-area: 5 / 5 / 6 / 6; }

/* ===========================
   TILE STYLES — 60fps Compositor-Optimized
   =========================== */
.bento-gallery__item,
.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #0d0d0d;
  cursor: default;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  flex: none;
  background-size: cover;
  background-position: 50% 50%;
  /* Each tile owns a compositor layer so its rounded clip and 1px inset
     hairline are rasterized ONCE, instead of being recomputed at every scale
     step of the zoom (which shimmers). The centre tile has neither a radius
     nor a hairline, which is why it alone looked clean without this.
     Cheap now that the grid stays at bento size: 25 x 20vw/22vh is ~26MB.
     It was NOT cheap under the old final-state grid, where every tile was
     laid out at a full viewport — that is what made this a problem before. */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.bento-gallery__media-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bento-gallery__media-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.bento-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Center tile — hero clarity & top layering */
.bento-gallery__item--3 {
  border-radius: 0;
  box-shadow: none;
  z-index: 10;
}

.bento-gallery__item--3 .bento-gallery__media-wrapper::after {
  display: none;
}


/* Mobile */
@media (max-width: 768px) {
  .gallery--bento {
    grid-template-columns: repeat(5, 26vw);
    grid-template-rows: repeat(5, 18vh);
    gap: 10px;
  }
  .bento-gallery-hint { display: none; }
}