/* ============================================================
   Motion. Short and soft, like the reference app: screens slide the
   way you are going, content settles in, taps answer with a slight
   press. src/motion.js adds the reveal, count-up and photo fade.
   Reduced motion turns all of it off (end of app.css).
   ============================================================ */

:root {
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* ---------- Screen changes ---------- */
.page.enter { animation: page-in .34s var(--ease-out) backwards; }
.page.enter.back { animation-name: page-back; }
.page.enter.tab { animation: page-fade .26s ease-out backwards; }
@keyframes page-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes page-back { from { opacity: 0; transform: translateX(-28px); } }
@keyframes page-fade { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Content settling in ---------- */
.pending { opacity: 0; }
.reveal { animation: settle .46s var(--ease-out) backwards; animation-delay: calc(60ms + var(--i, 0) * 45ms); }
@keyframes settle { from { opacity: 0; transform: translateY(14px); } }

.page.enter .hero-copy > * { animation: settle .6s var(--ease-out) backwards; }
.page.enter .hero-copy > :nth-child(2) { animation-delay: .1s; }
.page.enter .hero-copy > :nth-child(3) { animation-delay: .18s; }
.page.enter .cta-bar { animation: rise .4s .12s var(--ease-out) backwards; }

/* Progress bars fill up to their value. */
.page.enter .bar span { animation: fill .9s .25s var(--ease-out) backwards; }
@keyframes fill { from { width: 0; } }

img.fade { opacity: 0; transition: opacity .35s ease; }
img.fade.loaded { opacity: 1; }

/* ---------- Taps ---------- */
.promo, .tile, .tile-card, .cert, .item-row, .loc-item, .wallet-row, .points-card, .bagbar {
  transition: transform .18s var(--ease-out);
}
:is(.promo, .tile, .tile-card, .cert, .wallet-row, .points-card, .bagbar):active { transform: scale(.975); }
:is(.item-row, .loc-item):active { transform: scale(.985); }
.list-row { transition: background .15s; }
.list-row:active { background: rgba(242, 111, 103, .08); }
.icon-btn { transition: transform .15s var(--ease-out); }
.icon-btn:active { transform: scale(.88); }
.chip { transition: background .15s, color .15s, box-shadow .15s, transform .15s var(--ease-out); }
.chip:active { transform: scale(.95); }
.icon-btn.on svg { animation: heart .4s var(--ease-spring); }
@keyframes heart { 40% { transform: scale(1.3); } }

/* ---------- Tab bar ---------- */
.tabbar a .tab-ic { transition: transform .15s var(--ease-out); }
.tabbar a:active .tab-ic { transform: scale(.88); }
.tabbar a.bump .tab-ic { animation: tab-bump .42s var(--ease-spring); }
@keyframes tab-bump { 0% { transform: scale(.82); } 55% { transform: scale(1.12); } }
.badge.pop { animation: pop .38s var(--ease-spring); }

/* ---------- Top bar lifts once content scrolls under it ---------- */
.topbar { transition: box-shadow .2s; }
.page.scrolled .topbar { box-shadow: 0 6px 16px -10px rgba(10, 26, 58, .45); }

/* ---------- Pull to refresh (src/refresh.js) ---------- */
.ptr {
  position: absolute; left: 50%;
  width: 38px; height: 38px; margin-left: -19px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 3px 12px rgba(10, 26, 58, .2);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.ptr img { width: 24px; height: 24px; }
.ptr.ready { box-shadow: 0 3px 12px rgba(10, 26, 58, .2), 0 0 0 3px var(--lime); }
.ptr.spin img { animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
.page.refreshed .scroll { animation: page-fade .3s ease-out backwards; }