/* Small, purposeful motion for the public food and community pages. */
:root { --motion-ease: cubic-bezier(.2,.8,.2,1); }
.food-live-hero, .live-hero { position: relative; isolation: isolate; }
.food-live-hero::after, .live-hero::after {
  content: ""; position: absolute; z-index: -1; width: 290px; height: 290px;
  right: -95px; top: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 75%), transparent 67%);
  pointer-events: none;
}
.food-live-hero > div:first-child, .live-hero > * { animation: motion-rise .55s var(--motion-ease) both; }
.food-live-hero h1, .live-hero h1 { animation-delay: .07s; }
.food-live-hero p, .live-hero p { animation-delay: .13s; }
.food-live-hero .primary { animation: motion-rise .55s .19s var(--motion-ease) both; }
@keyframes motion-rise { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }

.header nav a::before { content: ""; position: absolute; inset: auto 24% 15px; height: 2px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transition: transform .22s var(--motion-ease); }
.header nav a:hover::before { transform: scaleX(1); }
.header nav .active::before { display: none; }
.primary, .secondary, .food-card-detail-link, .rating-pill, .post-actions button, .save, .checkin-filters button { transition: transform .18s var(--motion-ease), color .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease; }
.primary:active:not(:disabled), .secondary:active:not(:disabled), .post-actions button:active:not(:disabled), .rating-pill:active:not(:disabled), .food-card-detail-link:active { transform: scale(.97); }
.primary:disabled, .secondary:disabled { cursor: wait; }
.live-food-grid .food-card, .live-post, .ai-recommend-row a, .public-checkin, .food-discussion { transition: box-shadow .25s ease, border-color .25s ease, transform .25s var(--motion-ease); }
@media (hover: hover) and (pointer: fine) {
  .live-food-grid .food-card:hover, .live-post:hover, .ai-recommend-row a:hover, .food-discussion:hover { transform: translateY(-3px); }
  .food-card-detail-link:hover { transform: translateX(2px); }
}
.save.saved { animation: motion-heart .4s var(--motion-ease); }
.post-actions button.liked .like-icon { animation: motion-heart .4s var(--motion-ease); transform-origin: center; }
@keyframes motion-heart { 0% { transform: scale(.7); } 50% { transform: scale(1.27) rotate(-9deg); } 100% { transform: scale(1); } }
.live-message { animation: motion-notice .35s var(--motion-ease) both; }
@keyframes motion-notice { from { opacity: 0; transform: translateY(-6px); } }
.comment-list { animation: motion-expand .22s var(--motion-ease) both; transform-origin: top; }
@keyframes motion-expand { from { opacity: 0; transform: scaleY(.97) translateY(-5px); } }
.moment-reply-form, .moment-compose, .delete-confirm { animation: motion-rise .2s var(--motion-ease) both; }
.app-modal-backdrop { animation: motion-backdrop .22s ease-out both; }
.app-modal { animation: motion-modal .3s var(--motion-ease) both; }
@keyframes motion-backdrop { from { opacity: 0; } }
@keyframes motion-modal { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.food-live-filters select, .filter-row select, .search, .ai-food-search input { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.food-live-filters select:hover, .filter-row select:hover { border-color: #9eb49e; }
.ai-recommend-row { scrollbar-width: none; }
.ai-recommend-row::-webkit-scrollbar { display: none; }
.dish-rating-section, .dish-checkins-section, .dish-discussions-section { animation: motion-rise .4s var(--motion-ease) both; }
.dish-checkins-section { animation-delay: .07s; }
.dish-discussions-section { animation-delay: .12s; }

.motion-top {
  position: fixed; z-index: 30; right: max(18px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #d9dfd2;
  border-radius: 15px; background: #fffefa; color: var(--leaf); box-shadow: 0 10px 30px rgb(25 42 28 / 14%);
  font-size: 21px; opacity: 0; transform: translateY(12px) scale(.92); pointer-events: none;
  transition: opacity .2s ease, transform .25s var(--motion-ease), background .2s ease;
}
.motion-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.motion-top:hover { background: #edf4e9; }
.motion-top:active { transform: scale(.94); }
@media (max-width: 720px) {
  .header nav a::before { bottom: 0; }
  .motion-top { right: 14px; bottom: max(15px, env(safe-area-inset-bottom)); width: 42px; height: 42px; border-radius: 13px; }
  body:has(.food-detail-page) .motion-top { bottom: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .food-live-hero > div:first-child, .live-hero > *, .food-live-hero .primary, .food-hero-art, .food-hero-art span, .food-hero-art i,
  .save.saved, .post-actions button.liked .like-icon, .live-message, .comment-list, .moment-reply-form, .moment-compose,
  .delete-confirm, .app-modal-backdrop, .app-modal, .dish-rating-section, .dish-checkins-section, .dish-discussions-section { animation: none !important; }
  .motion-top, .primary, .secondary, .live-food-grid .food-card, .live-post, .header nav a::before { transition: none !important; }
}