/* ==================== Shared animation layer ====================
   Keyframes + utility classes used across all pages. Respects
   prefers-reduced-motion by disabling non-essential motion globally. */

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

/* ---------- Page-load entrances ---------- */

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

.anim-fade-down {
  animation: fadeDown 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.anim-fade-up {
  animation: fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.anim-delay-1 { animation-delay: 0.12s; }
.anim-delay-2 { animation-delay: 0.24s; }
.anim-delay-3 { animation-delay: 0.36s; }

/* ---------- Scroll reveal (About page sections) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal.reveal-stagger.in-view > * {
  animation: fadeUp 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.reveal.reveal-stagger.in-view > *:nth-child(1) { animation-delay: 0.05s; }
.reveal.reveal-stagger.in-view > *:nth-child(2) { animation-delay: 0.13s; }
.reveal.reveal-stagger.in-view > *:nth-child(3) { animation-delay: 0.21s; }
.reveal.reveal-stagger.in-view > *:nth-child(4) { animation-delay: 0.29s; }
.reveal.reveal-stagger.in-view > *:nth-child(5) { animation-delay: 0.37s; }
.reveal.reveal-stagger.in-view > *:nth-child(6) { animation-delay: 0.45s; }
.reveal.reveal-stagger.in-view > *:nth-child(7) { animation-delay: 0.53s; }
.reveal.reveal-stagger.in-view > *:nth-child(8) { animation-delay: 0.61s; }
.reveal.reveal-stagger.in-view > *:nth-child(n+9) { animation-delay: 0.68s; }

/* ---------- Pop-in (badges, small accents) ---------- */

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.5) rotate(-8deg); }
  70%  { opacity: 1; transform: scale(1.08) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}

.anim-pop {
  animation: popIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ---------- Menu card stagger-in (order page) ---------- */

@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.order-page .menu-card {
  animation: cardIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--card-i, 0) * 50ms);
}

/* ---------- Hero steam wisps (order page) ---------- */

.hero-steam {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  display: flex;
  gap: 1.4rem;
  pointer-events: none;
  z-index: 1;
}

.hero-steam span {
  display: block;
  width: 3px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(245, 239, 230, 0), rgba(245, 239, 230, 0.55));
  animation: steamRise 3.4s ease-in-out infinite;
  opacity: 0;
}

.hero-steam span:nth-child(2) { animation-delay: 0.7s; }
.hero-steam span:nth-child(3) { animation-delay: 1.4s; }

@keyframes steamRise {
  0%   { opacity: 0; transform: translateY(0) scaleY(0.7); }
  15%  { opacity: 0.8; }
  80%  { opacity: 0; }
  100% { opacity: 0; transform: translateY(-34px) scaleY(1.3); }
}

/* ---------- Live pulsing status dot (dashboard) ---------- */

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5f8a52;
  margin-right: 0.45em;
  box-shadow: 0 0 0 0 rgba(95, 138, 82, 0.6);
  animation: liveDotPulse 1.8s ease-out infinite;
}

.live-dot.offline {
  background: #d9a441;
  animation: none;
}

@keyframes liveDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(95, 138, 82, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(95, 138, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 138, 82, 0); }
}

/* ---------- Order card entrance (dashboard) ---------- */

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

.order-card {
  animation: orderCardIn 0.35s ease both;
}

/* ---------- Admin ledger rows (fade in on list render) ---------- */

.admin-item {
  animation: orderCardIn 0.3s ease both;
}

/* ---------- Misc micro-interactions ---------- */

.btn-primary, .btn-menu, .customize-add-btn, .cart-checkout-form button[type="submit"],
.ledger-form button[type="submit"] {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary:active, .btn-menu:active, .customize-add-btn:active,
.cart-checkout-form button[type="submit"]:active, .ledger-form button[type="submit"]:active {
  transform: scale(0.97);
}

.photo-tile, .dish-card {
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;
}

.dish-card-img img,
.photo-tile-img img {
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.dish-card:hover .dish-card-img img,
.photo-tile:hover .photo-tile-img img {
  transform: scale(1.07);
}

/* ---------- Keyboard-key press feedback on clickable pictures ----------
   Every clickable photo (menu card thumbnails, customize photo, gallery
   photos, signature-dish cards) snaps down on press and springs back on
   release, like a physical key, instead of just sitting there inert. */

.card-img,
.customize-photo,
.photo-tile-img img,
.dish-card {
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.15s ease;
}

.menu-card .card-img:active,
.customize-photo:active,
.photo-tile .photo-tile-img img:active {
  transition: transform 0.08s cubic-bezier(0.3, 0, 0.5, 1);
  transform: scale(0.9);
}

.dish-card:active {
  transition: transform 0.08s cubic-bezier(0.3, 0, 0.5, 1);
  transform: scale(0.95);
}

/* ---------- Animated nav link underline ---------- */

.nav-links a:not(.btn-menu, .social-link),
.footer-links a {
  position: relative;
}

.nav-links a:not(.btn-menu, .social-link)::after,
.footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 2px;
  background: currentColor;
  transition: right 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.nav-links a:not(.btn-menu, .social-link):hover::after,
.footer-links a:hover::after {
  right: 0;
}