/* ------------------------------------------------------------
   Project pop-up (popup.js), on the selected projects page.
   Same place as the project grid; sizes in grid units (--u) of
   the 2000 × 1130 design, text with readable minimum sizes (--tu).
   ------------------------------------------------------------ */

.popup {
  /* Exactly where the project grid sits (see .projects-page .content
     in projects.css); above the grid, below the frame lines */
  position: fixed;
  z-index: 2;
  inset: calc(var(--margin) + var(--bar-height) + 46 * var(--u)) calc(var(--margin) + 43 * var(--u)) calc(var(--margin) + 41 * var(--u));
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  box-shadow: inset 0 0 0 var(--stroke) var(--ink); /* not border: browsers round thin borders down */
  background: var(--bg);
  color: var(--ink);
}

.popup[open] {
  animation: show 0.01s steps(1);
}

.popup::backdrop {
  background: transparent;
}

/* The pop-up takes the place of the grid and the filters */
.popup-open .content,
.popup-open .filters,
.legal-open .popup {
  visibility: hidden;
}

/* ---------- Media frame with slideshow ---------- */

.popup__media {
  /* Takes the room the text column leaves */
  position: absolute;
  left: calc(42 * var(--u));
  top: calc(41 * var(--u));
  bottom: calc(41 * var(--u));
  right: calc((41 + 625 + 41) * var(--u));
  box-shadow: inset 0 0 0 var(--stroke) var(--ink);
}

/* Each image or video is shown whole, in its own proportions:
   it fills the stage and is fitted inside it (portrait by height,
   landscape by width) */
.popup__stage {
  position: absolute;
  left: calc(53 * var(--u));
  right: calc(124 * var(--u));
  top: calc(42 * var(--u));
  bottom: calc(43 * var(--u));
  /* The hover zoom stays inside the image area */
  overflow: hidden;
}

.popup__stage > * {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* The zoom heads for the pointer (--zoom-x/-y, set in popup.js) */
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
  transition:
    transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform-origin 0.15s ease-out;
}

/* Hover: images and videos zoom in by 40 %, like a loupe following
   the pointer (.is-zoomed and the zoom point are set in popup.js) */
.popup__stage.is-zoomed > * {
  transform: scale(1.4);
}

/* Slideshow controls: next, pause / play, back */
.popup__controls {
  position: absolute;
  right: 0;
  top: calc(84 * var(--u));
  bottom: calc(84 * var(--u));
  display: flex;
  flex-direction: column;
  width: calc(84 * var(--u));
  box-shadow: inset 0 0 0 var(--stroke) var(--ink);
  background: var(--bg);
}

.popup__control {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

/* Contour hover: the outline thickens, the icon gets bolder */
.popup__control svg,
.popup__close svg {
  overflow: visible;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
  stroke-linejoin: miter;
  transition: stroke-width 0.35s ease;
}

.popup__control:hover svg,
.popup__control:focus-visible svg,
.popup__close:hover svg,
.popup__close:focus-visible svg {
  stroke-width: 7px;
}

.popup__control--next svg,
.popup__control--back svg {
  width: calc(31 * var(--u));
}

.popup__control--toggle .icon-pause {
  width: calc(18 * var(--u));
}

.popup__control--toggle .icon-play {
  width: calc(31 * var(--u));
}

/* Pause while playing, play while paused */
.popup__control--toggle .icon-play,
.popup.is-paused .popup__control--toggle .icon-pause {
  display: none;
}

.popup.is-paused .popup__control--toggle .icon-play {
  display: block;
}

/* Sound: only for videos with sound; off / on, hover shows the
   plain speaker */
.popup__sound {
  --icon-h: calc(35 * var(--u));
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  /* One cell as wide as the widest icon; all icons sit at its left
     edge, so the speaker stays exactly in place when they swap */
  grid-template-columns: calc(var(--icon-h) * 127.792 / 99.144);
  justify-content: center;
  align-items: center;
  width: calc(84 * var(--u));
  height: calc(83 * var(--u));
  padding: 0;
  border: 0;
  box-shadow: inset 0 0 0 var(--stroke) var(--ink);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}

.popup__sound[hidden] {
  display: none;
}

.popup__sound svg {
  grid-area: 1 / 1;
  justify-self: start;
  height: var(--icon-h);
  width: auto;
  fill: currentColor;
}

/* Off by default, on when switched on; on hover only the plain
   speaker shows (doubled class: wins over the on/off rules) */
.popup__sound .icon-sound-on,
.popup__sound .icon-sound-hover,
.popup__sound.is-on .icon-sound-off {
  display: none;
}

.popup__sound.is-on .icon-sound-on {
  display: block;
}

.popup__sound.popup__sound:hover svg,
.popup__sound.popup__sound:focus-visible svg {
  display: none;
}

.popup__sound.popup__sound:hover .icon-sound-hover,
.popup__sound.popup__sound:focus-visible .icon-sound-hover {
  display: block;
}

/* ---------- Title ---------- */

.popup__head {
  position: absolute;
  left: calc(100% - (41 + 625 - 3) * var(--u));
  top: calc(45 * var(--u));
  right: calc(100 * var(--u));
  margin: 0;
}

.popup__title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* Same letter size for every lettering (--scale, see popup.js) */
.popup__lettering {
  display: block;
  height: calc(22.4 * var(--u) * var(--scale, 1));
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.popup__name {
  font-size: calc(28 * var(--tu));
  line-height: 1;
}

.popup__subtitle {
  margin: calc(8 * var(--u)) 0 0;
  font-size: max(14px, calc(21 * var(--u)));
  font-weight: 300;
  line-height: 1.15;
}

/* ---------- Text box ----------
   Scrolls; the arrow shows while more text follows (like the
   filters) */

.popup__text {
  position: absolute;
  right: calc(41 * var(--u));
  top: calc(208 * var(--u));
  width: calc(625 * var(--u));
  /* As tall as its text, at most down to the bottom edge; longer
     texts scroll inside */
  max-height: calc(100% - (208 + 41) * var(--u));
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 0 var(--stroke) var(--ink);
  background: var(--bg);
}

.popup__scroll {
  flex: 0 1 auto;
  min-height: 0;
  margin: var(--stroke);
  padding: calc(42 * var(--tu)) calc(38 * var(--tu)) calc(10 * var(--tu)) calc(42 * var(--tu));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  outline: none;
  font-size: var(--small-text);
  line-height: 1.22;
  /* Ragged right: even word spaces. The browser's standard
     hyphenation (words of 5+ letters) and balanced line breaks keep
     the right edge as even as possible (measured across all project
     texts; for fewer breaks use hyphenate-limit-chars: 7 3 3) */
  text-align: left;
  text-wrap: pretty;
  hyphens: auto;
  text-transform: lowercase;
}

.popup__scroll {
  transition: opacity 0.25s ease;
}

/* Text change with the photo (odds & ends): short crossfade */
.popup__scroll.is-fading {
  opacity: 0;
}

.popup__scroll::-webkit-scrollbar {
  display: none;
}

.popup__scroll p {
  margin: 0 0 1.22em;
}

.popup__scroll p:last-child {
  margin-bottom: 0;
}

/* Award: bold box over the top edge of the text box; the text then
   starts further down */
.popup__award {
  position: absolute;
  z-index: 1;
  left: calc(41 * var(--u));
  top: calc(-42 * var(--u));
  width: calc(375 * var(--tu));
  min-height: calc(123 * var(--tu));
  display: flex;
  align-items: center;
  padding: calc(20 * var(--tu)) calc(40 * var(--tu));
  box-shadow: inset 0 0 0 var(--stroke) var(--ink); /* not border: browsers round thin borders down */
  background: var(--bg);
  font-size: var(--small-text);
  font-weight: 700;
  line-height: 1.22;
  text-transform: lowercase;
}

.popup__award[hidden] {
  display: none;
}

.popup__award p {
  margin: 0;
}

/* A link in the award makes the whole box clickable: its click area
   is stretched over the box (hovering anywhere draws the underline) */
.popup__award a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.popup__text.has-award .popup__scroll {
  padding-top: calc(136 * var(--tu));
}

/* Links: bold; on hover an underline draws in from left to right
   (a background line, so it also works across line breaks) */
.popup__award a,
.popup__scroll a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--stroke);
  transition: background-size 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.popup__award a:hover,
.popup__award a:focus-visible,
.popup__scroll a:hover,
.popup__scroll a:focus-visible {
  background-size: 100% var(--stroke);
}

.popup__award a:focus-visible,
.popup__scroll a:focus-visible {
  outline: none;
}

.popup__more {
  flex-shrink: 0;
  align-self: flex-end;
  width: calc(26 * var(--tu));
  height: calc(26 * var(--tu));
  margin: calc(8 * var(--tu)) calc(20 * var(--tu)) calc(16 * var(--tu));
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.popup__more[hidden] {
  display: block;
  visibility: hidden;
}

/* Short text: the box ends below it, without the arrow */
.popup__text.fits .popup__more {
  display: none;
}

.popup__text.fits .popup__scroll {
  padding-bottom: calc(42 * var(--tu));
}

.popup__more svg {
  display: block;
  width: 100%;
  fill: currentColor;
  transform: rotate(90deg);
}

/* ---------- Close ---------- */

.popup__close {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: calc(83 * var(--tu));
  height: calc(83 * var(--tu));
  padding: 0;
  border: 0;
  box-shadow: inset 0 0 0 var(--stroke) var(--ink);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}

.popup__close svg {
  width: calc(35 * var(--tu));
}

.popup button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -5px;
}

@media (prefers-reduced-motion: reduce) {
  .popup svg,
  .popup__stage > * {
    transition: none;
  }
}