/* fx.css · tools/gallery-morph, a photo grows out of its thumbnail · owner: Lizzy East · all rights reserved */

/* Without JavaScript each thumbnail is a plain link to the full photograph. With it,
   the photo opens in a real modal <dialog> (Escape closes it, focus comes back to
   the thumbnail) and, where View Transitions exist and motion is allowed, grows out
   of the thumbnail on the way. */
[data-fx~="tools/gallery-morph"] dialog[data-fx-dialog] {
  width: min(92vw, 1100px);
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--fx-radius, 16px);
  background: var(--fx-dialog-bg, #17160f);
  color: var(--fx-dialog-ink, #ffffff);
}
[data-fx~="tools/gallery-morph"] a[data-fx-full] img { display: block; width: 100%; height: auto; }
[data-fx~="tools/gallery-morph"] dialog[data-fx-dialog]::backdrop { background: rgb(0 0 0 / 0.78); }
[data-fx~="tools/gallery-morph"] dialog[data-fx-dialog] img { display: block; width: 100%; height: auto; }
[data-fx~="tools/gallery-morph"] [data-fx-close] {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  min-width: 44px;
  min-height: 44px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.72);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
[data-fx~="tools/gallery-morph"] dialog :focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(fx-photo) { animation-duration: var(--fx-morph-dur, 380ms); }
}