/* Reusable instant print: 54 x 86 paper with a clean, extended photo opening. */
.instax-photo {
  --instax-width: 320px;
  --instax-rotation: -3deg;
  --instax-position: 50% 50%;
  aspect-ratio: 54 / 86;
  background: #faf9f5;
  border-radius: 1px;
  isolation: isolate;
  margin: 0;
  max-width: 100%;
  position: relative;
  transform: rotate(var(--instax-rotation));
  width: var(--instax-width);
}

/* Separate contact and ambient shadows; neither is baked into the artwork. */
.instax-photo::before {
  border-radius: inherit;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 28%),
    1px 4px 5px rgb(0 0 0 / 15%),
    3px 12px 18px -7px rgb(0 0 0 / 24%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.instax-photo__window {
  /* Bleed beneath the mask so scaled prints cannot expose the backing paper. */
  height: calc(71.860465% + 2px);
  left: calc(7.407407% - 1px);
  overflow: hidden;
  position: absolute;
  top: calc(6.976744% - 1px);
  width: calc(85.185185% + 2px);
}

.instax-photo__image {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: var(--instax-position);
  width: 100%;
}

.instax-photo__window::after {
  background: linear-gradient(135deg, rgb(255 255 255 / 5%), transparent 45%, rgb(0 0 0 / 2%));
  box-shadow: inset 0 0 1px 1px rgb(0 0 0 / 12%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.instax-photo__frame {
  /* Trim generated padding; the mask gives every photo a precise, clean opening. */
  background: url("assets/frame-paper.png") center / 106.42% 105.46% no-repeat;
  background-color: #faf9f5;
  inset: 0;
  /* Inline the aperture so Safari file previews do not need an external mask fetch. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 86'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 0H54V86H0Z M4 6H50V67.8H4Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 86'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 0H54V86H0Z M4 6H50V67.8H4Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
  position: absolute;
}