/* Product personalities and pointer-driven depth, adapted from the supplied TiltCard. */
@font-face {
  font-family: "Notorious Condensed";
  src: url("../assets/fonts/barlow-condensed-800.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Notorious Sweet";
  src: url("../assets/fonts/dm-serif-display-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

.menu-board [data-menu-theme] { --menu-accent: #ffd400; }
.menu-board [data-menu-theme="cheese"] { --menu-accent: #ffc557; }
.menu-board [data-menu-theme="spicy"] { --menu-accent: #ff9479; }
.menu-board [data-menu-theme="milkshake"] { --menu-accent: #ffc7df; }
.menu-board [data-menu-theme="sundae"] { --menu-accent: #ffe0b5; }
.menu-board [data-menu-theme="chocolate"] { --menu-accent: #e9ba92; }
.menu-board [data-menu-theme="blue"] { --menu-accent: #7ce5f3; }
.menu-board [data-menu-theme="candy"] { --menu-accent: #ffa3cf; }
.menu-board [data-menu-theme="tropical"] { --menu-accent: #ffbd69; }
.menu-board [data-menu-theme="energy"] { --menu-accent: #b7f332; }
.menu-board [data-menu-theme] h4 { color: var(--menu-accent); }
.menu-board :is([data-menu-theme="cheese"], [data-menu-theme="spicy"], [data-menu-theme="energy"], [data-menu-theme="tropical"]) h4 {
  font-family: "Notorious Condensed", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.menu-board :is([data-menu-theme="milkshake"], [data-menu-theme="sundae"], [data-menu-theme="chocolate"], [data-menu-theme="candy"]) h4 {
  font-family: "Notorious Sweet", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.1;
}
.menu-board [data-menu-theme="blue"] h4 {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -.025em;
  font-size: 1.14rem;
  line-height: 1.15;
}
.menu-board .menu-card__top h4 { min-width: 0; overflow-wrap: break-word; }

/* The same 3.5% photo zoom as the signature cards, including nested image wrappers. */
.menu-board :is(.menu-card__media, .signature-card__media, .menu-photo) > img {
  transform: scale(1);
  transform-origin: center;
  transition: transform 320ms ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .menu-board .menu-card:hover .menu-card__media > img,
  .menu-board .signature-card:hover .signature-card__media > img,
  .menu-board .compact-card:hover .menu-photo > img,
  .menu-board .rail-card:hover .menu-photo > img,
  .menu-board .menu-card:focus-within .menu-card__media > img,
  .menu-board .signature-card:focus-within .signature-card__media > img {
    transform: scale(1.035);
  }
}

/* The frame stays still; the inner card and its layers move in perspective. */
.menu-board .menu-side-rail { overflow: visible; }
.tilt-frame { position: relative; min-width: 0; perspective: 1100px; }
.menu-board .rail-card[data-tilt-card] {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --spot-x: 50%;
  --spot-y: 50%;
  position: relative;
  height: 100%;
  min-width: 0;
  overflow: visible;
  backdrop-filter: none;
  animation: none;
  opacity: 1;
  transform: perspective(1100px) rotateX(0deg) rotateY(0deg) scale(1);
  transform-style: preserve-3d;
  transition: transform 220ms ease-out, border-color 220ms ease, box-shadow 220ms ease;
  background: #191919;
  border-color: rgba(255,243,214,.18);
  box-shadow: 0 8px 16px -10px rgba(0,0,0,.7);
}
.menu-board .rail-card[data-tilt-card] > .menu-photo {
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid var(--menu-accent);
  transform: translateZ(0);
  transition: transform 260ms ease;
}
.menu-board .rail-card[data-tilt-card] > :is(div:not(.menu-photo), strong) {
  position: relative;
  transform: translateZ(0);
  transition: transform 260ms ease;
}
.menu-board .rail-card[data-tilt-card] > strong { color: var(--menu-accent); }
.menu-board .rail-card[data-tilt-card]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.16), transparent 64%);
  opacity: 0;
  transform: translateZ(40px);
  transition: opacity 250ms ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tilt-frame:has(.is-tilting) { z-index: 3; }
  .menu-board .rail-card[data-tilt-card].is-tilting {
    transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.025);
    border-color: var(--menu-accent);
    box-shadow: 0 22px 32px -15px rgba(0,0,0,.8), 0 0 0 1px var(--menu-accent);
    will-change: transform;
  }
  .menu-board .rail-card[data-tilt-card].is-tilting > .menu-photo { transform: translateZ(18px); }
  .menu-board .rail-card[data-tilt-card].is-tilting > :is(div:not(.menu-photo), strong) { transform: translateZ(28px); }
  .menu-board .rail-card[data-tilt-card].is-tilting::after { opacity: 1; }
}
/* Cancel legacy hover rules on touch devices and when reduced motion is requested. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .menu-board :is(.menu-card, .signature-card, .compact-card, .rail-card):hover,
  .menu-board .rail-card[data-tilt-card],
  .menu-board :is(.menu-card, .signature-card, .compact-card, .rail-card):hover :is(.menu-photo, .menu-card__media, .signature-card__media) > img {
    transform: none;
  }
}