/* Favorites: a heart that fills, a few marks around it, and a flight to the nav */
.card .cover::after{content:"";position:absolute;inset:0;z-index:3;border-radius:var(--radius)}
.card .badge{z-index:4}

.fav{position:absolute;top:10px;right:10px;z-index:5;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;
  background:var(--bg);cursor:pointer;color:var(--ink);
  transition:transform .16s var(--ease-out)}
.fav:active{transform:scale(.92)}
.fav svg{width:20px;height:20px;overflow:visible}
.fav svg path{fill:transparent;stroke:currentColor;stroke-width:2;transition:fill .16s var(--ease-soft)}
.fav[aria-pressed="true"] svg path{fill:var(--heart);stroke:var(--heart)}
.fav::before{content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;border:1.5px solid var(--ink);opacity:0}
.fav.pop svg{animation:fav-pop .5s var(--ease-out)}
.fav.pop::before{animation:fav-halo .6s var(--ease-soft)}
@keyframes fav-pop{0%{transform:scale(1)}25%{transform:scale(.78)}55%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes fav-halo{0%{opacity:0;transform:scale(.5)}35%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(1)}}
.fav .spark{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--ink);pointer-events:none;
  animation:spark .6s var(--ease-out) forwards}
@keyframes spark{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.fav-inline{position:relative;top:auto;right:auto;width:54px;height:54px;background:var(--bg)}

/* the flight to the nav: the photo as a small heart with a white edge, and a trail in the photo's own color */
.flyer{position:fixed;left:0;top:0;z-index:95;width:72px;height:72px;margin:-36px 0 0 -36px;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 10px 16px rgba(6,12,24,.32))}
.flyer i,.flyer b{position:absolute;-webkit-mask:var(--heart-shape) center/contain no-repeat;mask:var(--heart-shape) center/contain no-repeat}
.flyer i{inset:0;background:#fff}
.flyer b{inset:9%;background:var(--bg-2) center/cover no-repeat}
:root{--heart-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.4s-8.3-5-10.1-10.2C.6 7.3 3 3.6 6.8 3.6c2.2 0 4 1.3 5.2 3.2 1.2-1.9 3-3.2 5.2-3.2 3.8 0 6.2 3.7 4.9 7.6-1.8 5.2-10.1 10.2-10.1 10.2z'/%3E%3C/svg%3E")}
.trail{position:fixed;left:0;top:0;z-index:94;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;pointer-events:none;background:var(--tc,var(--ink-3));transform:var(--t);
  animation:trail .6s var(--ease-soft) forwards}
@keyframes trail{to{opacity:0;transform:var(--t) scale(.2)}}

/* nav heart */
.fav-nav{position:relative}
.fav-nav .fav-count{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--action);color:#fff;
  font:600 11px/18px var(--f-body);text-align:center;font-variant-numeric:tabular-nums;opacity:0;transform:scale(.5);transition:opacity .2s var(--ease-soft),transform .25s var(--ease-out)}
.fav-nav.has .fav-count{opacity:1;transform:none}
.fav-nav.has svg path{fill:var(--heart)}
.fav-nav::after{content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none;border:1.5px solid var(--heart);opacity:0}
.fav-nav.catch::after{animation:catch .6s var(--ease-out)}
.fav-nav.catch svg{animation:fav-pop .5s var(--ease-out)}
@keyframes catch{0%{opacity:1;transform:scale(.7)}100%{opacity:0;transform:scale(1.6)}}

/* side panels: favorites and the cart share one shell, a card that floats in from the edge like the nav */
.favs{position:fixed;inset:0;z-index:90;visibility:hidden;transition:visibility 0s linear .3s}
.favs::before{content:"";position:absolute;inset:0;background:rgba(8,14,26,.5);opacity:0;transition:opacity .25s var(--ease-soft)}
.favs.open{visibility:visible;transition:none}
.favs.open::before{opacity:1}
.favs-panel{position:absolute;top:var(--gap);right:var(--gap);bottom:var(--gap);width:min(440px,calc(100% - 2 * var(--gap)));display:flex;flex-direction:column;gap:18px;padding:18px clamp(16px,2.4vw,24px) 24px;border-radius:var(--r-panel);
  background:var(--bg);color:var(--ink);box-shadow:var(--shadow-float);transform:translateX(calc(100% + 2 * var(--gap)));transition:transform .28s var(--ease-drawer);overflow-y:auto;overscroll-behavior:contain}
.favs.open .favs-panel{transform:none;transition:transform .36s var(--ease-drawer)}
.favs-head{display:flex;justify-content:space-between;align-items:center;margin-right:-6px}
.favs-head .icon-btn{color:var(--ink)}
.favs-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.favs-list li{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:10px;border-radius:var(--r-pop);background:var(--bg-2);
  animation:fav-in .3s var(--ease-out) both}
@keyframes fav-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.favs-list img{width:72px;height:72px;border-radius:12px;object-fit:cover;background:var(--bg-3)}
.favs-list b{display:block;font:600 15px/1.3 var(--f-body)}
.favs-list span{display:block;margin-top:4px;color:var(--ink-2);font:var(--t-small);font-variant-numeric:tabular-nums}
.favs-list .rm{width:40px;height:40px;border-radius:50%;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:var(--ink-3);transition:background-color .16s var(--ease-soft),color .16s var(--ease-soft)}
.favs-list .rm:hover{color:var(--ink);background:var(--bg)}
.favs-empty{margin:0;color:var(--ink-2)}
.favs.has-items .favs-empty{display:none}
.favs-cta{margin-top:auto;align-self:stretch}

@media (prefers-reduced-motion:reduce){
  .flyer,.trail,.fav .spark{display:none}
  .favs-panel{transition:none}
}