/* A reusable square studio stage, independent of the transparent can bitmap. */
:root {
  --beer-stage-image: url('./assets/beers/studio/light.webp');
  --beer-stage-color: light-dark(#fdfcf9, #171616);
}

@media (prefers-color-scheme: dark) {
  :root { --beer-stage-image: url('./assets/beers/studio/dark-warm.webp'); }
}

/* Explicit overrides for theme fixtures and the artwork proof gallery. */
:root[data-theme="dark"], [data-beer-theme="dark"] {
  --beer-stage-image: url('./assets/beers/studio/dark-warm.webp');
  --beer-stage-color: #171616;
}
:root[data-theme="light"], [data-beer-theme="light"], [data-beer-theme="transparent"] {
  --beer-stage-image: url('./assets/beers/studio/light.webp');
  --beer-stage-color: #fdfcf9;
}

.beer-scene {
  position: relative;
  container-type: size;
  overflow: hidden;
  background-image: none;
  background-color: var(--beer-stage-color);
}

.beer-scene > .beer-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  transform: translate(-50%, -50%);
  background: var(--beer-stage-image) center / 100% 100% no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 12% 88%, transparent);
  pointer-events: none;
  z-index: 0;
}

.beer-canvas > .beer-product {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 0 0;
  transform: translate(var(--can-x, 0%), var(--can-y, 0%)) scale(var(--can-scale, 1));
}

.tasting-photo.beer-scene { height: 200px; aspect-ratio: auto; }

/* Proofing only: reveals actual alpha without modifying any source image. */
[data-beer-theme="transparent"] .beer-scene {
  background-color: #fff;
  background-image: conic-gradient(#e2e5e5 25%, #fff 0 50%, #e2e5e5 0 75%, #fff 0);
  background-size: 20px 20px;
}
[data-beer-theme="transparent"] .beer-canvas { background-image: none; }