/* The rising stack of real scenes (stack.js): each card, its product points and its product card,
   as they look in the app. The landing page sizes its own .stage; the shop's /home uses only
   the points and the product card, on a still picture. */
.stage { position: relative; min-height: 0; overflow: hidden; isolation: isolate; }
.stack { position: absolute; inset: 0; pointer-events: none; }
.scene-card {
  position: absolute; left: 50%; top: 50%; height: 86%; aspect-ratio: 2 / 3; border-radius: 10px;
  transition: transform .7s cubic-bezier(.7,0,.2,1), opacity .6s ease; will-change: transform;
}
.scene-card img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; border-radius: inherit; }
/* Product points and the product card, as they look in the app */
.scene-dot {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  background: rgba(58,58,56,.72); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .25s;
}
.scene-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.scene-card.front .scene-dot { opacity: 1; transform: scale(1); transition-delay: calc(var(--dots-at) + var(--d)); }
.scene-pick {
  position: absolute; left: clamp(25%, var(--x), 75%); width: max-content; max-width: min(60%, 200px); translate: -50% 0; z-index: 2;
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 5px 14px 5px 5px; border-radius: 13px; color: #111; background: rgba(248,248,246,.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .25s, transform .25s;
}
.scene-pick.below { top: calc(var(--y) + 16px); }
.scene-pick.above { bottom: calc(100% - var(--y) + 16px); }
.scene-card.front .scene-pick.show { opacity: 1; transform: none; }
.scene-pick .thumb { width: 54px; height: 54px; border-radius: 9px; object-fit: cover; background: #fff; max-width: none; }
.scene-pick div { min-width: 0; line-height: 1.15; }
.scene-pick b { display: block; font-weight: 400; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-pick .price { display: block; font-weight: 700; font-size: 17px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .scene-card, .scene-dot, .scene-pick { transition: none; animation: none !important; } }