/* Official Hot Mess logo layout and visual polish */
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 3px solid black;
  border-radius: 16px;
  padding: 4px 9px;
  box-shadow: 5px 5px 0 var(--pink), 9px 9px 0 var(--blue);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.brand:hover {
  transform: rotate(-2deg) scale(1.03);
  box-shadow: 7px 7px 0 var(--lime), 12px 12px 0 var(--pink);
}

.brand img {
  display: block;
  width: auto;
  height: 58px;
  max-width: 148px;
  object-fit: contain;
  filter: none;
}

.hero-logo-card {
  width: min(340px, 80vw);
  background: white;
  border: 5px solid black;
  border-radius: 24px;
  padding: 18px;
  margin: 20px 0 28px;
  box-shadow: 10px 10px 0 var(--pink), 18px 18px 0 var(--blue);
  transform: rotate(-1deg);
  animation: logoPop 680ms ease both, logoFloat 4.8s ease-in-out 900ms infinite;
}

.hero-logo-card img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-copy {
  animation: slideInLeft 720ms ease both;
}

.hero-card {
  animation: slideInRight 760ms ease 120ms both, cardFloat 5.2s ease-in-out 950ms infinite;
}

.truck-illustration {
  animation: truckBounce 2.8s ease-in-out infinite;
}

.menu-alert {
  animation: signDrop 620ms ease 260ms both;
}

.menu-board-section {
  position: relative;
}

.menu-board-frame {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: clamp(10px, 2vw, 18px);
  border: 5px solid var(--lime);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 21, 147, 0.22), rgba(0, 167, 255, 0.18)), #070707;
  box-shadow: 12px 12px 0 var(--pink), 22px 22px 0 var(--blue), 0 30px 90px rgba(0, 0, 0, 0.65);
  transform: rotate(-0.4deg);
  animation: boardReveal 760ms ease both;
}

.menu-board-frame picture,
.menu-board-frame img {
  display: block;
  width: 100%;
}

.menu-board-frame img {
  height: auto;
  border-radius: 18px;
  border: 3px solid white;
  background: #111;
  filter: contrast(1.04) saturate(1.05);
}

.menu-board-frame figcaption {
  margin-top: 0.85rem;
  color: var(--chalk);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.menu-board-fallback {
  display: none;
  padding: 2rem;
  border: 3px dashed var(--pink);
  border-radius: 18px;
  background: white;
  color: black;
  text-align: center;
}

.menu-board-fallback strong,
.menu-board-fallback span {
  display: block;
}

.menu-board-fallback strong {
  font-size: 1.4rem;
  text-transform: uppercase;
}

.menu-board-frame.image-missing .menu-board-fallback {
  display: block;
}

.menu-category,
.combo-card,
.hours-row,
.info-panel,
.contact-card {
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.menu-category:hover,
.combo-card:hover,
.hours-row:hover,
.info-panel:hover,
.contact-card:hover {
  transform: translateY(-6px) rotate(-0.35deg);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
}

.menu-category:nth-child(1) { animation: riseIn 560ms ease 150ms both; }
.menu-category:nth-child(2) { animation: riseIn 560ms ease 260ms both; }
.menu-category:nth-child(3) { animation: riseIn 560ms ease 370ms both; }
.menu-category:nth-child(4) { animation: riseIn 560ms ease 480ms both; }
.combo-card:nth-child(1) { animation: riseIn 560ms ease 150ms both; }
.combo-card:nth-child(2) { animation: riseIn 560ms ease 260ms both; }
.combo-card:nth-child(3) { animation: riseIn 560ms ease 370ms both; }

.button {
  transition: transform 170ms ease, box-shadow 170ms ease, filter 170ms ease;
}

.button:hover {
  transform: translateY(-3px) rotate(-1deg);
  filter: saturate(1.2);
}

.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

@keyframes logoPop {
  from { opacity: 0; transform: translateY(18px) scale(0.92) rotate(-4deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(-1deg); }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes cardFloat {
  0%, 100% { transform: translateY(0) rotate(1deg); }
  50% { transform: translateY(-7px) rotate(0deg); }
}

@keyframes truckBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px) rotate(2deg); }
  to { opacity: 1; transform: translateX(0) rotate(1deg); }
}

@keyframes signDrop {
  from { opacity: 0; transform: translateY(-18px) rotate(-2deg); }
  to { opacity: 1; transform: translateY(0) rotate(-0.5deg); }
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes boardReveal {
  from { opacity: 0; transform: translateY(26px) scale(0.97) rotate(-1.2deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(-0.4deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 760px) {
  .brand img {
    height: 44px;
    max-width: 116px;
  }

  .hero-logo-card {
    width: min(280px, 86vw);
  }

  .menu-board-frame {
    border-width: 3px;
    border-radius: 20px;
    box-shadow: 7px 7px 0 var(--pink), 13px 13px 0 var(--blue);
  }

  .menu-board-frame img {
    border-radius: 14px;
  }
}