/* ==========================================================================
   MUHCINE / project viewer
   The overlay is transparent, so the faded page stays visible behind it.
   ========================================================================== */

body.viewer-open {
  overflow: hidden;
}

.viewer {
  position: fixed;
  inset: 0;
  z-index: 150;
  overflow: hidden;
}

.viewer[hidden] {
  display: none;
}

/* The track sits above the click layer so a playing film can take its own
   clicks, but it lets everything else fall through to the zones below. */
.viewer__track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  will-change: transform;
  direction: ltr;
  z-index: 4;
  pointer-events: none;
}

.viewer__slide {
  flex: 0 0 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: calc(var(--chrome-h) + 24px) var(--pad) calc(var(--bar-h) + 24px);
}

.viewer__frame {
  aspect-ratio: 4 / 3;   /* until the picture reports its own shape */
  max-height: 60vh;      /* every visual sits at 60 per cent of the window */
  max-width: 60vw;
  overflow: hidden;
}

/* Only the film that is running answers the pointer. Play, pause and sound
   belong to the player, the rest of the screen still closes and steps. */
.viewer__frame--film.is-playing {
  pointer-events: auto;
}

/* --- films ----------------------------------------------------------------- */

.viewer__frame--film {
  position: relative;
}

.viewer__frame--film iframe,
.viewer__frame--film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
  background: #000;
}

/* The copy that travels between a tile and the open project. */
.viewer__flyer {
  overflow: hidden;
  z-index: 400;
  pointer-events: none;
}

.viewer__flyer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contain, never cover. The frame already carries the picture's own shape,
   and on the rare frame that has not measured itself yet a letterbox is far
   better than a crop. */
.viewer__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
  -webkit-user-drag: none;
}

/* The title and the kind used to sit under the picture. The picture speaks
   for itself and the same words are one press away under Project Info, so
   the line is gone. */
.viewer__caption {
  display: none;
}

@media (max-width: 700px) {
  .viewer__frame {
    max-height: 60vh;
    max-width: 86vw;
  }
}

/* --- click halves ---------------------------------------------------------- */

.viewer__nav {
  position: absolute;
  inset: var(--chrome-h) 0 var(--bar-h);
  z-index: 3;
}

/* --- project info ---------------------------------------------------------- */

.viewer__info {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 6;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: clamp(24px, 4vh, 44px) var(--pad) calc(var(--bar-h) + 24px);
}

.viewer__info[hidden] {
  display: none;
}

.viewer__info-inner {
  max-width: 620px;
  display: grid;
  gap: 10px;
}

.viewer__info h2 {
  font-size: clamp(22px, 3vw, 42px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
}

.viewer__kind {
  color: var(--muted);
  font-size: 13px;
}

.viewer__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.viewer__facts dt {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

html[dir="rtl"] .viewer__facts dt {
  letter-spacing: 0;
}

.viewer__facts dd {
  margin: 0;
  font-size: 13px;
}

.viewer__about {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 6px;
}

.bar-link.is-on {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  border-radius: 999px;
  padding: 5px 12px;
  border-bottom-color: var(--fg);
}