/* Geometry is animated with transforms, never layout dimensions per frame. */
.media-morphing { transform-origin:0 0 !important; will-change:transform,clip-path; }
.project-modal { opacity:1; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; transition:none; will-change:auto; }
.project-modal::before { content:""; position:fixed; inset:0; pointer-events:none; background:color-mix(in srgb,var(--paper) 18%,transparent); backdrop-filter:blur(22px) saturate(.72); -webkit-backdrop-filter:blur(22px) saturate(.72); opacity:0; transition:opacity 200ms cubic-bezier(.2,0,0,1); }
.project-modal.is-open::before { opacity:1; }
.project-modal .modal-panel { opacity:1; transform:none; transition:none; }
.animated-media-dialog[open],.animated-media-dialog.is-closing { animation:none; }
.animated-media-dialog[open]::backdrop { animation:media-backdrop-in 200ms cubic-bezier(.2,0,0,1) both; }
.animated-media-dialog.is-closing::backdrop { animation:media-backdrop-out 200ms cubic-bezier(.2,0,0,1) both; }
.lightbox { background:transparent; }
@media(prefers-reduced-motion:reduce) { .project-modal::before,.animated-media-dialog[open]::backdrop { transition:none; animation:none; } }

/* Keep the dismiss control on the image without adding a caption bar. */
.project-modal .modal-panel, #media-viewer { width: fit-content; overflow: hidden; }
#media-viewer { max-width: none; }
#media-viewer .viewer-stage { width: min(86vw, 1440px, calc((100svh - 32px) * var(--viewer-ratio, 1.3333))); }
.project-modal .modal-close, #media-viewer .modal-close {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #fff6;
  border-radius: 50%;
  background: #17171799;
  color: #fff;
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.project-modal .modal-close svg, #media-viewer .modal-close svg { width: 18px; height: 18px; }

.dismiss-key { display: none; }
@media (min-width: 701px) and (pointer: fine) {
  .project-modal .modal-close, #media-viewer .modal-close { width: auto; padding-inline: 12px; border-radius: 10px; }
  .dismiss-key { display: inline; font-size: 13px; }
  .project-modal .modal-close svg, #media-viewer .modal-close svg { display: none; }
}