/* Full screen */
body, html {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

/* Scene container */
.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* Background image (club) */
.background {
  position: absolute;
  inset: 0;
  background: url('img/434155698_122162774066020675_3871903639246019067_n.jpeg') center/cover no-repeat;
  z-index: 0;
}

/* Vending machine container */

.display {
  position: absolute;
  right: 8%;
  top: 35%;
  width: 80px;
  height: 30px;
  background: black;
  color: lime;
  font-family: monospace;
  font-size: 18px;
  text-align: center;
  line-height: 30px;
  border: 2px solid #222;
}

@keyframes flash {
  0% { filter: brightness(1); }
  50% { filter: brightness(2) drop-shadow(0 0 15px hotpink); }
  100% { filter: brightness(1); }
}

.product.active {
  animation: flash 0.3s ease-in-out 3;
}


.machine {
  position: absolute;
  top: 50%;
  left: 50%;

  /* KEY: responsive 16:9 scaling */
  width: min(90vw, 160vh); 
  aspect-ratio: 16 / 9;

  transform: translate(-50%, -50%);

  background: url('img/VENDING MACHINE GHOST MART BLANK.jpg') center/contain no-repeat;

  z-index: 2;
}

/* Product buttons */
.product {
  position: absolute;
  width: 7%; /* tweak depending on item size */
  transform: translate(-50%, -50%);
}



/* Product images */
.product img {
  width: 100%;
  display: block;
   filter: brightness(0.9) contrast(1.1);
}

.small { width: 5%; }
.tall { width: 8%; }
.wide { width: 10%; }




/* spots in vending machine */
.p1 { left: 300px; top: 200px;}
.p2 { left: 260px; top: 200px;}
.p3 { left: 220px; top: 200px;}
.p4 { left: 380px; top: 200px;}
.p5 { left: 400px; top: 200px;}
.p6 { left: 220px; top: 200px;}

/* Hover glow */
.product:hover {
  filter: brightness(1.3);
  transform: scale(1.05);
}


@keyframes pulse {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

.product:hover {
  animation: pulse 0.6s infinite;
   filter: brightness(1.4);
}

.product:hover img {
  filter: brightness(1.4) drop-shadow(0 0 10px red);
}


.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.2) 2px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
}

.code {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #aaa;
  background: rgba(0,0,0,0.7);
  padding: 2px 4px;
  border-radius: 3px;
}


.product:hover .code {
  color: hotpink;
}

.A1 { top: 18%; left: 10%; }
.A2 { top: 18%; left: 18%; }
.A3 { top: 18%; left: 26%; }
.A4 { top: 18%; left: 34%; }
.A5 { top: 18%; left: 42%; }
.A6 { top: 18%; left: 50%; }
.A7 { top: 18%; left: 58%; }
.A8 { top: 18%; left: 66%; }
.A9 { top: 18%; left: 74%; }
.A10 { top: 18%; left: 82%; }


.B1 { top: 32%; left: 10%; }
.B2 { top: 32%; left: 18%; }
.B3 { top: 32%; left: 26%; }
.B4 { top: 32%; left: 34%; }
.B5 { top: 32%; left: 42%; }
.B6 { top: 32%; left: 50%; }
.B7 { top: 32%; left: 58%; }
.B8 { top: 32%; left: 66%; }
.B9 { top: 32%; left: 74%; }
.B10 { top: 32%; left: 82%; }


.C1 { top: 46%; left: 10%; }
.C2 { top: 46%; left: 18%; }
.C3 { top: 46%; left: 26%; }
.C4 { top: 46%; left: 34%; }
.C5 { top: 46%; left: 42%; }
.C6 { top: 46%; left: 50%; }
.C7 { top: 46%; left: 58%; }
.C8 { top: 46%; left: 66%; }
.C9 { top: 46%; left: 74%; }
.C10 { top: 46%; left: 82%; }


.D1 { top: 60%; left: 10%; }
.D2 { top: 60%; left: 18%; }
.D3 { top: 60%; left: 26%; }
.D4 { top: 60%; left: 34%; }
.D5 { top: 60%; left: 42%; }
.D6 { top: 60%; left: 50%; }
.D7 { top: 60%; left: 58%; }
.D8 { top: 60%; left: 66%; }
.D9 { top: 60%; left: 74%; }
.D10 { top: 60%; left: 82%; }


.E1 { top: 74%; left: 10%; }
.E2 { top: 74%; left: 18%; }
.E3 { top: 74%; left: 26%; }
.E4 { top: 74%; left: 34%; }
.E5 { top: 74%; left: 42%; }
.E6 { top: 74%; left: 50%; }
.E7 { top: 74%; left: 58%; }
.E8 { top: 74%; left: 66%; }
.E9 { top: 74%; left: 74%; }
.E10 { top: 74%; left: 82%; }