/* Juice Wine Bar - menu page only.
   Loaded after main.css. Everything here is about the floating hover card that
   follows the cursor across the list: main.css draws the striped placeholder
   with its disco ball, and this sheet takes over once a real photo is in.
   Coarse pointers never see the card at all, main.css already hides it. */

/* The photo fills the card. It stays transparent until the file has decoded,
   so a slow load shows the striped placeholder rather than the picture that
   belonged to the item the cursor just left. */
.hover-card .hover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .18s var(--ease, ease);
  background: var(--sand, #f2e7d8);
}

.hover-card.has-photo .hover-photo { opacity: 1; }

/* With a photo in, the stripes and the disco ball would only muddy it. */
.hover-card.has-photo {
  background: var(--plum, #2B1230);
}

.hover-card.has-photo::before { display: none; }

/* The caption stays a cream chip, now sitting on top of the photo with a soft
   shadow so it reads against a bright plate as well as a dark pour. */
.hover-card .slot-note {
  z-index: 2;
  max-width: 100%;
}

.hover-card.has-photo .slot-note {
  box-shadow: 0 6px 18px rgba(43, 18, 48, .38);
}

/* A hairline keeps the photo from bleeding into a pale page background. */
.hover-card.has-photo {
  box-shadow: 0 30px 60px rgba(43, 18, 48, .34), inset 0 0 0 1px rgba(255, 246, 234, .18);
}

@media (prefers-reduced-motion: reduce) {
  .hover-card .hover-photo { transition: none; }
}