/* ============================================================
   Tabehut — website motion layer (src/web.css)

   Adds quiet movement to the website without changing its design: hover
   lifts, photos that fade in as they load, and a few micro-interactions.
   Nothing pops in piecewise — pages arrive whole. Loaded only
   on the website; scripts/build-native.mjs drops it (and src/web.js) from
   the iOS bundle, so the app is untouched. Every effect switches off under
   the system's reduce-motion setting.
   ============================================================ */

html { scroll-behavior: smooth; }


@keyframes pop       { 0% { transform: scale(.6); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes shimmer   { from { background-position: -200% 0; } to { background-position: 200% 0; } }

/* ---- Top bar: a shadow appears once the page scrolls (html.scrolled from web.js) */
.topbar { transition: box-shadow .25s ease; }
html.scrolled .topbar { box-shadow: 0 1px 0 var(--line), 0 8px 24px #2b25210f; }

/* ---- Pages fade up a touch more deliberately than in the app */
main.enter { animation: page-in .32s cubic-bezier(.2, .8, .2, 1) both; }

/* ---- Cards: a gentle lift and zoom on hover */
.card { transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.card:not(.skel):hover { transform: translateY(-4px); }
.card:hover .photo { box-shadow: 0 16px 34px #2b252126; }
.photo img { transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.card:hover .photo img { transform: scale(1.05); }
/* Photos fade in as they finish loading; until then a soft shimmer sits behind them */
.photo { background: linear-gradient(100deg, #ece7df 30%, #f4f0e9 50%, #ece7df 70%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
.photo:has(img.is-loaded), .photo:has(.photo-ph) { animation: none; background: #ece7df; }
.photo img:not(.is-loaded), .heroimg img:not(.is-loaded) { opacity: 0; }
.heroimg img { transition: opacity .5s ease; }

/* ---- Buttons and chips */
.btn { transition: transform .15s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .2s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 #ffffff2e, 0 8px 18px #7c2f1533; }
.btn-primary:active { transform: translateY(0) scale(.98); }
.chip, .side-cat, .menu-row, .tab { transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease; }
.save-btn { transition: transform .18s cubic-bezier(.2, .8, .2, 1), color .15s ease; }
.save-btn:hover { transform: scale(1.12); }
.save-btn.on .ic { animation: pop .35s cubic-bezier(.2, .8, .2, 1) both; }

/* ---- Ratings: flames light up one after another on the cook's card and reviews */
.seller .fires i.lit, .profile-info .fires i.lit, .review-head .fires i.lit { display: inline-block; animation: pop .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k, 0) * 70ms); }
.fires i:nth-child(2) { --k: 1; } .fires i:nth-child(3) { --k: 2; } .fires i:nth-child(4) { --k: 3; } .fires i:nth-child(5) { --k: 4; }
.fire-pick button { transition: transform .15s cubic-bezier(.2, .8, .2, 1), opacity .15s ease, filter .15s ease; }
.fire-pick button:hover { transform: scale(1.15); }

/* ---- Inbox threads and menu rows slide a little on hover */
.thread:hover { transform: translateX(2px); }
.menu-row:hover { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .save-btn.on .ic, .fires i.lit, .photo, main.enter { animation: none !important; }
  .card, .card:hover, .btn-primary:hover, .save-btn:hover, .thread:hover, .menu-row:hover, .fire-pick button:hover { transform: none; }
  .photo img:not(.is-loaded), .heroimg img:not(.is-loaded) { opacity: 1; }
}