/* ==========================================================================
   MUHCINE / index
   Two views of the same set: Grid (GSAP Flip) and Carousel (drag and snap).
   ========================================================================== */

.work-main {
  min-height: 100vh;
}

.view[hidden] {
  display: none;
}

/* --- shared caption --------------------------------------------------------
   Out of the flow and hidden until wanted, so the pages read as images only.
   ---------------------------------------------------------------------------- */

.g-item__meta,
.c-item__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0;
}

.g-item__meta {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  padding-top: 9px;
  background: var(--bg);
  pointer-events: none;
  z-index: 3;
  transform: translateY(-5px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.g-item:hover .g-item__meta {
  opacity: 1;
  transform: none;
}



.g-item__meta b,
.c-item__meta b {
  font-weight: 600;
}

.g-item__meta span,
.c-item__meta span {
  color: var(--muted);
}

/* --- GRID ----------------------------------------------------------------- */

/* No padding of its own. What is left is only the room the fixed header and
   the fixed bar take, so the pictures run to the edges of the window. */
.view--grid {
  padding: calc(var(--chrome-h) + var(--index-top)) 0 var(--bar-h);
}

.grid-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(20px, 4vh, 48px);
}

/* Every row stands on its own baseline, with room under it for the caption
   that appears on hover. */
.grid-gallery {
  position: relative;
  display: grid;
  align-items: end;
  column-gap: clamp(10px, 1.4vw, 24px);
  row-gap: calc(clamp(10px, 1.4vw, 24px) + 46px);
  width: 100%;
  margin: 0 auto;
  transform-origin: center 40%;
}

.grid-gallery[data-size-grid="50%"]  { grid-template-columns: repeat(12, 1fr); }
.grid-gallery[data-size-grid="75%"]  { grid-template-columns: repeat(8, 1fr); }
.grid-gallery[data-size-grid="100%"] { grid-template-columns: repeat(6, 1fr); }
.grid-gallery[data-size-grid="125%"] { grid-template-columns: repeat(4, 1fr); }
.grid-gallery[data-size-grid="150%"] { grid-template-columns: repeat(3, 1fr); }

.g-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  will-change: transform;
  cursor: pointer;
}

.g-item.is-off {
  display: none;
}

/* Only a tile itself sets this off, never the gaps between them. Raise or
   lower the 0.5 to taste. */
.grid-gallery .g-item {
  transition: opacity 0.4s var(--ease);
}

/* Only where there is a pointer to hover with. On a phone a tap counts as a
   hover, so the whole grid would dim under a thumb and stay dimmed. */
@media (hover: hover) and (pointer: fine) {
  .grid-gallery:has(.g-item:hover) .g-item {
    opacity: 0.5;
  }

  .grid-gallery:has(.g-item:hover) .g-item:hover {
    opacity: 1;
  }
}

/* No fixed box and no cropping: the tile takes the shape of the picture. */
.g-item__shot {
  position: relative;
  width: 100%;
  line-height: 0;
}

.g-item__image {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(0.15) brightness(0.94);
  /* Each picture arrives on its own as it finishes decoding, rather than the
     whole grid waiting and then appearing at once. */
  opacity: 0;
  transition: filter 0.5s var(--ease), opacity 0.55s var(--ease);
}

.g-item__image.is-ready {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .g-item:hover .g-item__image {
    filter: none;
  }
}

/* Without a pointer nothing is ever hovered, so the pictures show as they
   are rather than sitting permanently dulled. */
@media (hover: none), (pointer: coarse) {
  .g-item__image {
    filter: none;
  }

  .g-item__meta {
    opacity: 1;
    transform: none;
  }
}

/* --- density, numbers only ------------------------------------------------- */

.density {
  display: flex;
  align-items: center;
  gap: 2px;
}

.density button {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 9px;
  border-radius: 999px;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}

.density button:hover {
  color: var(--fg);
}

.density button.active {
  background: var(--fg);
  color: var(--bg);
}

/* On a phone the numbers go. Two thumbs of screen is not the place to be
   picking a grid density, and the bar needs the room. */
@media (max-width: 720px) {
  .density {
    display: none;
  }
}

@media (max-width: 640px) {
  .density button {
    padding: 6px 5px;
    font-size: 10px;
  }

  .grid-gallery[data-size-grid] {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- CAROUSEL -------------------------------------------------------------- */

.view--carousel {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

body.carousel-active {
  overflow: hidden;
}

.carousel {
  position: absolute;
  bottom: calc(var(--bar-h) + clamp(52px, 8vh, 96px));
  left: 0;
  width: 100vw;
}

/* Items are placed by script, so the track is only a baseline to stand on. */
.carousel__track {
  position: relative;
  width: 100%;
  cursor: grab;
  direction: ltr;
  touch-action: pan-y;
}

.carousel__track:active {
  cursor: grabbing;
}

.c-item {
  position: absolute;
  bottom: 0;
  left: 0;
  will-change: transform;
}

.c-item__frame {
  position: relative;
  overflow: hidden;
  transform-origin: bottom left;
  will-change: transform, opacity;
}

.c-item.is-off {
  display: none;
}

.c-item__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
  -webkit-user-drag: none;
  user-select: none;
}

.c-item__frame img.is-ready {
  opacity: 1;
}

.c-item__meta {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  padding-top: 14px;
  text-align: start;
  pointer-events: none;
  white-space: nowrap;
}

/* --- covers that hold a film ----------------------------------------------- */

.has-film {
  position: absolute;
  inset-inline-end: 8px;
  bottom: 8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent #ffffff;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  z-index: 2;
}