/* Cheering characters belong to the vending machine, not the page edges. */
html .shell.shell--vending .pv-vending-cheer-scene {
  --machine-cast-width: clamp(100px, 33%, 282px);
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 1;
  transition: opacity 240ms ease;
}

html .shell.shell--vending .pv-vending-cheer-wing {
  position: absolute;
  bottom: 0;
  width: var(--machine-cast-width);
  aspect-ratio: .525;
  display: block;
  overflow: hidden;
  opacity: .9;
  mask-image: linear-gradient(180deg, transparent, #000 9%, #000 88%, transparent);
}

html .shell.shell--vending .pv-vending-cheer-wing--left { left: 0; }
html .shell.shell--vending .pv-vending-cheer-wing--right { right: 0; }

html .shell.shell--vending .pv-vending-cheer-wing img {
  position: absolute;
  top: 0;
  display: block;
  width: 285.7143%;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

html .shell.shell--vending .pv-vending-cheer-wing--left img {
  left: 0;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 25%, transparent 35%);
}

html .shell.shell--vending .pv-vending-cheer-wing--right img {
  right: 0;
  mask-image: linear-gradient(270deg, transparent, #000 4%, #000 25%, transparent 35%);
}

html .shell.shell--vending .pvh-vending-hero .machine-wrap:not(.is-machine-revealing) .machine-visual {
  --machine-browse-height: 92%;
  background: radial-gradient(ellipse at 50% 82%, #bf782918, transparent 58%);
}

html .shell.shell--vending .pv-page-background {
  --pv-scene-rgb: 214, 156, 65;
  background: radial-gradient(ellipse at 32% 38%, #c2863019, transparent 65%),
    radial-gradient(ellipse at 90% 58%, #5c3c6919, transparent 50%), #080908;
}

html .shell.shell--vending .pv-backdrop-plane { visibility: hidden; }

html .shell.shell--vending .machine-wrap:is(.is-machine-revealing, .has-machine-result) .pv-vending-cheer-scene,
body.machine-reveal-active .pv-vending-cheer-scene { opacity: 0; }

@media (min-width: 1200px) {
  html .shell.shell--vending .machine-wrap:not(.is-machine-revealing):not(.has-machine-result) {
    max-width: 1320px;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 36px;
    margin-inline: auto;
  }
}

@media (min-width: 1200px) and (min-height: 800px) {
  html .shell.shell--vending .pv-vending-cheer-scene { --machine-cast-width: clamp(220px, 40%, 300px); }
}

@media (max-width: 1199px) and (min-width: 761px) {
  html .shell.shell--vending .pv-vending-cheer-scene { --machine-cast-width: clamp(150px, 31%, 250px); }
}

@media (max-width: 1199px) and (min-width: 761px) and (min-height: 501px) {
  html .shell.shell--vending .pvh-vending-hero .machine-wrap:not(.is-machine-revealing):not(.has-machine-result) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 12px;
    width: min(100%, 760px);
    max-width: 760px;
    height: auto;
    margin-inline: auto;
    overflow: visible;
  }

  html .shell.shell--vending .pvh-vending-hero .machine-wrap:not(.is-machine-revealing):not(.has-machine-result) .machine-visual,
  html .shell.shell--vending .pvh-vending-hero .machine-wrap:not(.is-machine-revealing):not(.has-machine-result) .machine-stage {
    width: 100%;
    height: clamp(420px, 64vw, 560px);
  }

  html .shell.shell--vending .pvh-vending-hero .machine-wrap:not(.is-machine-revealing):not(.has-machine-result) .machine-control-deck {
    justify-self: center;
    width: min(620px, 100%);
    height: auto;
    min-height: 0;
    margin: 0;
    border-radius: 16px;
  }
}

@media (max-width: 760px) {
  html .shell.shell--vending .pv-vending-cheer-scene { --machine-cast-width: clamp(96px, 30%, 145px); }
  html .shell.shell--vending .pvh-vending-hero .machine-wrap:not(.is-machine-revealing) .machine-visual { --machine-browse-height: 90%; }
}

@media (prefers-reduced-motion: reduce) {
  html .shell.shell--vending .pv-vending-cheer-scene { transition: none; }
}

@media (forced-colors: active), print {
  .pv-vending-cheer-scene { display: none !important; }
}