/* One physical object: stationary body, independent lid, prize behind the rim. */
.mystery-object {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  isolation: isolate;
  perspective: 900px;
  container-type: inline-size;
  pointer-events: none;
}
.mystery-object > img,
.mystery-object-lid,
.mystery-object-lid > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: contain;
}
.mystery-object-body { z-index: 1; }
.mystery-object-front {
  z-index: 4;
  /* Select the photograph's near walls, retaining its original alpha edge. */
  clip-path: polygon(0 46%, 9% 51%, 48% 72.5%, 52% 72.5%, 91% 54%, 100% 50%, 100% 100%, 0 100%);
}
.mystery-object-lid {
  z-index: 2;
  transform-origin: 50% 48%;
  transform: translate3d(0, 20.4%, 0);
}
.mystery-object-lid > img {
  /* Registration correction for the extracted photograph, before motion. */
  transform-origin: 0 0;
  transform: translate(-.54%, -1.82%) scale(1.006, .9154);
}
.mystery-object-prize {
  position: absolute;
  z-index: 3;
  left: 54%;
  top: 54%;
  width: 47%;
  --prize-rest-y: -70%;
  --prize-peak-y: -72%;
  --prize-rest-angle: 0deg;
  --prize-peak-angle: .5deg;
  opacity: 0;
  transform-origin: 50% 85%;
  transform: translate3d(-50%, 30%, 0) rotateX(54deg) rotateZ(-7deg) scale(.6);
}
.mystery-object-prize:has(.mystery-stock-prize) {
  width: 64%;
  --prize-rest-y: -82%;
  --prize-peak-y: -84%;
  --prize-rest-angle: -4deg;
  --prize-peak-angle: -3.5deg;
}
.mystery-object .mystery-stock-prize {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 286 / 180;
  min-height: 98px;
  padding: clamp(10px, 4.2cqi, 15px);
  border: 1px solid #dee1e7;
  border-radius: clamp(11px, 4.5cqi, 16px);
  background: #fff;
  color: #0a0b0d;
  box-shadow: 0 18px 26px -14px #10215040, 0 3px 8px #15244012, inset 0 1px 0 #fff;
}
.mystery-object .mystery-stock-prize::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid #e9ebef;
  border-radius: clamp(7px, 3.3cqi, 12px);
  pointer-events: none;
}
.mystery-object .mystery-stock-top { display: flex; align-items: center; justify-content: space-between; }
.mystery-object .mystery-stock-logo {
  display: block;
  width: clamp(16px, 7cqi, 24px);
  height: clamp(16px, 7cqi, 24px);
  border-radius: 50%;
  object-fit: contain;
}
.mystery-object .mystery-stock-monogram {
  display: grid;
  place-items: center;
  background: #0a0b0d;
  color: #fff;
  font: 500 clamp(7px, 2.8cqi, 10px)/1 'Base Sans', sans-serif;
  letter-spacing: -.04em;
}
.mystery-object .mystery-stock-network {
  color: #5b616e;
  font: 400 clamp(6px, 2.35cqi, 8px)/1 'Base Mono', monospace;
  letter-spacing: .035em;
}
.mystery-object .mystery-stock-ticker {
  display: block;
  margin: clamp(3px, 1.4cqi, 5px) 0 0;
  font-size: clamp(23px, 10cqi, 35px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 500;
  color: #0a0b0d;
}
.mystery-object .mystery-stock-company {
  margin-top: 2px;
  font-size: clamp(9px, 3.5cqi, 12px);
  line-height: 1.1;
  font-weight: 400;
  color: #5b616e;
  white-space: nowrap;
}
.mystery-object .mystery-stock-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 5px;
  margin-top: auto;
  padding-top: 5px;
}
.mystery-object .mystery-stock-value {
  font-size: clamp(12px, 4.7cqi, 16px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mystery-object .mystery-stock-value > span {
  display: block;
  margin-top: 3px;
  font-size: clamp(6px, 2.3cqi, 8px);
  line-height: 1;
  font-weight: 400;
  color: #5b616e;
  letter-spacing: 0;
}
.mystery-object .mystery-stock-seal { display: block; width: clamp(9px, 3.5cqi, 12px); height: clamp(9px, 3.5cqi, 12px); }
.mystery-object[data-motion='open'] > .mystery-object-body,
.mystery-object[data-motion='open'] > .mystery-object-front,
.mystery-object[data-motion='open'] > .mystery-object-lid { opacity: 1; }
.mystery-object[data-motion='open'] > .mystery-object-lid { transform: translate3d(-7%, -9%, 0) rotate(-7deg); }
.mystery-object[data-motion='open'] > .mystery-object-prize {
  opacity: 1;
  transform: translate3d(-50%, var(--prize-rest-y), 0) rotateX(0) rotateZ(var(--prize-rest-angle)) scale(1);
}
.mystery-object[data-motion='opening'] > .mystery-object-body { animation: box-cavity-light 1200ms 100ms cubic-bezier(.22, .75, .23, 1) both; }
.mystery-object[data-motion='opening'] > .mystery-object-lid { animation: box-lid-release 1450ms cubic-bezier(.22, .75, .23, 1) both; }
.mystery-object[data-motion='opening'] > .mystery-object-prize { animation: box-stock-emerge 900ms 620ms cubic-bezier(.16, 1, .3, 1) both; }
.mystery-object[data-motion='opening'] > .mystery-object-lid,
.mystery-object[data-motion='opening'] > .mystery-object-prize { will-change: transform, opacity; }
.mystery-object.is-paused *,
.mystery-object.is-paused > * { animation-play-state: paused !important; }
@keyframes box-cavity-light {
  0% { filter: brightness(.56); }
  12% { filter: brightness(.56); }
  100% { filter: brightness(1); }
}
@keyframes box-lid-release {
  0% { transform: translate3d(0, 20.4%, 0) rotate(0); }
  8% { opacity: 1; transform: translate3d(0, 20.4%, 0) rotate(0); }
  17% { opacity: 1; transform: translate3d(0, 19.7%, 0) rotate(-.35deg); }
  58% { opacity: 1; transform: translate3d(-6.2%, -7.8%, 0) rotate(-6.5deg); }
  100% { opacity: 1; transform: translate3d(-7%, -9%, 0) rotate(-7deg); }
}
@keyframes box-stock-emerge {
  0% { opacity: 0; transform: translate3d(-50%, 30%, 0) rotateX(54deg) rotateZ(-7deg) scale(.6); }
  15% { opacity: 1; }
  74% { opacity: 1; transform: translate3d(-50%, var(--prize-peak-y), 0) rotateX(-1deg) rotateZ(var(--prize-peak-angle)) scale(1); }
  100% { opacity: 1; transform: translate3d(-50%, var(--prize-rest-y), 0) rotateX(0) rotateZ(var(--prize-rest-angle)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mystery-object[data-motion='opening'] *,
  .mystery-object[data-motion='opening'] > * { animation: none !important; will-change: auto; }
  .mystery-object[data-motion='opening'] > .mystery-object-body,
  .mystery-object[data-motion='opening'] > .mystery-object-front,
  .mystery-object[data-motion='opening'] > .mystery-object-lid { opacity: 1; }
  .mystery-object[data-motion='opening'] > .mystery-object-lid { transform: translate3d(-7%, -9%, 0) rotate(-7deg); }
  .mystery-object[data-motion='opening'] > .mystery-object-prize { opacity: 1; transform: translate3d(-50%, var(--prize-rest-y), 0) rotateZ(var(--prize-rest-angle)); }
}