/* 22 -> heart. Two identical "2" glyphs. Mirroring the FIRST one points its sweep
   down-right, so both sweeps meet at one bottom point and both top arcs become the
   lobes. Geometry (glyph units, box 120x160): the 2's sweep ends at x=26; mirrored
   about x=60 that is x=94. Second glyph at offset 68 puts its sweep end at 68+26=94
   too, and its arc start (68+22=90) meets the mirrored arc start (98) at the dip.
   Heart is then symmetric about x=94. */
.mark{--u:1px;--ink:currentColor;position:relative;display:inline-block;
  width:calc(var(--u)*252);height:calc(var(--u)*160);perspective:calc(var(--u)*900)}
.mark .g{position:absolute;top:0;width:calc(var(--u)*120);height:calc(var(--u)*160);
  transition:transform 1s cubic-bezier(.7,0,.2,1);transform-style:preserve-3d;will-change:transform}
.mark .g1{left:0}
.mark .g2{left:calc(var(--u)*128)}
.mark svg{display:block;width:100%;height:100%;overflow:visible}
.mark path{fill:none;stroke:var(--ink);stroke-width:17;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .6s ease .35s,stroke-dashoffset .55s ease}
.mark .base{stroke-dasharray:80;stroke-dashoffset:0}
/* Each 2's opening tail hangs below the point where the two lobes cross in the
   heart. By symmetry they cross where the tail reaches x=26 (t=0.139 on the first
   cubic), which is 13.9 units along the path — so trim exactly that much. */
.mark .curve{stroke-dasharray:222 222;stroke-dashoffset:0}
/* love state: flip the first 2, pull the second in, retract both bases, turn red */
.mark.love .g1{transform:translateX(calc(var(--u)*32)) rotateY(180deg)}
.mark.love .g2{transform:translateX(calc(var(--u)*-28))}
.mark.love .base{stroke-dashoffset:80}
.mark.love .curve{stroke-dashoffset:-13.9}
.mark.love path{stroke:var(--heart,#FF2D55)}
.mark.love.beat .g1 svg,.mark.love.beat .g2 svg{animation:beat .9s ease-in-out 1}
@keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.07)}55%{transform:scale(.98)}}
@media (prefers-reduced-motion:reduce){.mark .g,.mark path{transition:none!important}
  .mark.love.beat svg{animation:none!important}}