/* Measure from the whole set: the photographed openings differ slightly in width. */
.sr-world {
  container-type: size;
  --carton-width: min(8.55cqw, 18.6cqh);
  --size: calc(var(--carton-width) * 1.565);
}

@media (max-width:760px), (max-aspect-ratio:1/1) and (max-width:1050px) {
  .sr-world { --carton-width: min(15.7cqw, 8.85cqh); }
}

.sr-carton {
  --carton-depth: calc(var(--carton-width) * .39);
  --feather: clamp(1px, calc(var(--carton-width) * .011), 2px);
  --paper-veil: clamp(.095, calc(.94 - .80 * var(--bottle-exposure)), .65);
}

.sr-carton .carton-mount {
  position: absolute;
  display: block;
  bottom: calc(var(--carton-width) * .051);
  left: 50%;
  width: var(--carton-width);
  aspect-ratio: 544 / 784;
  transform: translateX(-61.2%);
}

.sr-carton .carton-model {
  display: block;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: perspective(calc(var(--carton-width) * 15)) rotateX(-12deg)
             rotateY(calc(-34deg + var(--pack-turn, 0deg)));
  transition: transform .34s ease-out;
}

.sr-clone .carton-model {
  /* The camera animates the whole scene. Only the live shelf eases pointer tilt. */
  transition: none;
}

.sr-carton :is(.carton-face, .carton-side, .carton-lid) {
  display: block;
  position: absolute;
  backface-visibility: hidden;
}

.sr-carton :is(.carton-face, .carton-side, .carton-lid)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #110e0c;
  opacity: var(--paper-veil);
  transition: opacity .31s ease;
  pointer-events: none;
}

.sr-carton .carton-face {
  inset: 0;
  background: var(--paper);
  transform: translateZ(.04px);
  border-radius: 1px 0 0 1.6px;
  mask-image: linear-gradient(to right, transparent, black var(--feather)),
              linear-gradient(to top, transparent, black var(--feather));
  mask-composite: intersect;
}

/* The photograph supplies the ink and paper grain. Each case supplies its own lamp color. */
.sr-carton .carton-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at var(--spec-x) -8%,
      color-mix(in srgb, var(--accent) 30%, transparent), transparent 87%),
    linear-gradient(100deg, #2b1c182b, transparent 11% 57%, #21191232),
    linear-gradient(177deg, transparent 12%, #241c161c 62%, #19131152);
  box-shadow: inset 0 1px 2px #fff1ca2e;
}

.sr-carton .carton-side {
  top: 0;
  left: 100%;
  width: var(--carton-depth);
  height: 100%;
  transform-origin: left;
  transform: rotateY(90deg);
  background:
    linear-gradient(90deg, #fff2cb1f, transparent 6%, #32241d32 65%, #201a186e),
    linear-gradient(171deg, #3c302747, #241e1c7d 58%, #1e181596),
    var(--paper);
  mask-image: linear-gradient(to left, transparent, black calc(var(--feather) * 2.4)),
              linear-gradient(to top, transparent, black var(--feather));
  mask-composite: intersect;
}

/* Carry a little of the photographed stock around the fold. */
.sr-carton .carton-side::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--print) 98.5% center / 2400% 100% no-repeat;
  mix-blend-mode: var(--side-blend, soft-light);
  opacity: var(--side-ink, .32);
}

.sr-carton .carton-lid {
  bottom: 100%;
  left: 0;
  width: 100%;
  height: var(--carton-depth);
  transform-origin: bottom;
  transform: rotateX(90deg);
  background:
    linear-gradient(180deg, #37302726, transparent 15% 84%, #6c5c4140 89%, #fff3d04f 92%, transparent),
    radial-gradient(ellipse at var(--spec-x) 78%, #fff2d138, transparent 72%),
    linear-gradient(115deg, var(--lid-paper), color-mix(in srgb, var(--lid-paper) 83%, #6f604f));
  mask-image: linear-gradient(to bottom, transparent, black calc(var(--feather) * 4)),
              linear-gradient(to right, transparent, black var(--feather));
  mask-composite: intersect;
}

:is(#collection, .sr-dialog) .sr-carton .carton-face img.sr-bottle {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  filter: none;
}

/* Project the contact shadow from the bottom panel so all four corners sit on the shelf. */
.sr-carton .sr-vessel .carton-model::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: var(--carton-depth);
  transform-origin: center top;
  transform: rotateX(-90deg);
  background: #110c09bd;
  box-shadow: 0 0 3px 3px #170f0aab, 2px 4px 11px 5px #20181059;
}

.sr-carton .carton-mirror {
  display: block;
  position: absolute;
  inset: 0;
  transform: scaleY(-1);
  filter: blur(1.3px) brightness(.61) saturate(.78);
}

.sr-dialog.sr-detail-visible .sr-clone:has(.sr-carton.is-selected) {
  will-change: auto;
}