/* Global motion tokens. Preview/tune in tools/motion.html, then update here. */
:root {
  --motion-duration: 550ms;
  --motion-distance: 18px;
  --motion-stagger: 65ms;
  --motion-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-hover: 180ms;
}
[data-reveal].reveal-pending {
  opacity: 0;
  transform: translateY(var(--motion-distance));
}
[data-reveal] {
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
.button,
.text-link,
.category-links a,
.gallery-item > span {
  transition:
    color var(--motion-hover) ease,
    background var(--motion-hover) ease,
    transform var(--motion-hover) var(--motion-ease);
}
.button span,
.text-link span {
  display: inline-block;
  transition: transform var(--motion-hover) var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .button:hover {
    transform: translateY(-2px);
  }
  .button:hover span,
  .text-link:hover span {
    transform: translate(2px, -2px);
  }
  .category-links a:hover {
    color: var(--copper);
    transform: translateY(-3px);
  }
  .gallery-item:hover > span {
    transform: translateY(-2px);
  }
  .cuisine-card h3 a:hover {
    color: var(--copper);
  }
}
#lightbox {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition:
    opacity 180ms var(--motion-ease),
    transform 180ms var(--motion-ease);
}
#lightbox.is-open {
  opacity: 1;
  transform: none;
}
#lightbox::backdrop {
  background: #0c201b00;
  transition: background 180ms ease;
}
#lightbox.is-open::backdrop {
  background: #0c201bea;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal].reveal-pending {
    opacity: 1;
    transform: none;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}
.keyboard-input *,
.keyboard-input *::before,
.keyboard-input *::after {
  transition-duration: 0ms !important;
  transition-delay: 0ms !important;
}
