/* ═══ Cupid's arrow -- phones 2026-10-05, desktop added (v2) same day, Ivy ═══
   The back-to-top arrow goes DOWN past GRZYBOWSKI as a plain arrow. On the
   way back UP (tap it, or scroll up yourself) it rises through the I, knocks
   the heart off, the heart kisses the screen edge and drops point-up onto the
   tip as the tail clears the letter: a Cupid's arrow carries you home.
   Driven by cupid.js. Prototypes: _proto/cupid-arrow/ (phones, U2 Ricochet)
   and _proto/cupid-arrow-desktop/ (desktop, B Heart shrinks).
   The arrow layer now runs at every width; only the phone re-centring
   (.cupid-aligned) stays phone-only -- on desktop theme.js already centres
   the button under the I. */

.cupid { display: none; }

/* once the heart has landed, cupid.js owns it: the fall animation is done,
   so it's switched off and the heart's look comes from two variables
   (unchanged at rest: fully on, upright, centred like the original) */
.fname .fname__slot--i .fname__heart.cupid-heart {
  animation: none;
  opacity: var(--cupid-o, 1);
  transform: translateX(-50%) rotate(var(--cupid-r, 0deg));
}

/* the heart while it ricochets (fixed, above the button) */
.cupid-fly {
  position: fixed; left: 0; top: 0; z-index: 10002;
  pointer-events: none; line-height: 1; color: #FF5A4E;
  opacity: 0; will-change: transform;
}

/* the page's own arrow svg hides; cupid.js draws the same arrow (same path,
   same stroke, same spot) in a layer it can grow feathers and a head on */
.to-top.cupid-ready > svg { visibility: hidden; }
.to-top.cupid-ready .cupid { display: block; position: absolute; inset: 0; pointer-events: none; }
.cupid__arrow { position: absolute; left: 0; top: 0; width: 46px; height: 46px; }   /* no will-change: a composited layer antialiases the redraw differently from the original */
.cupid__arrow svg { position: absolute; left: 15px; top: 9px; overflow: visible; }
.cupid__head {
  position: absolute; left: 23px; top: 15.5px; line-height: 1; color: #FF5A4E;
  transform: translate(-50%, -50%) rotate(180deg); opacity: 0;
}
/* desktop hover: the site lifts the arrow svg 2px; lift the whole layer
   instead so the heart head goes with it */
@media (min-width: 761px) {
  .to-top.cupid-ready:hover .cupid svg { transform: none; }
  .to-top.cupid-ready .cupid { transition: transform 0.4s var(--ease); }
  .to-top.cupid-ready:hover .cupid { transform: translateY(-2px); }
}

@media (max-width: 760px) {

  /* while the footer name is on screen the arrow centres on the I's ink
     (+1.5px optical), glides there with the same ease as its lift. Off the
     footer it's exactly where theme.css puts it today. */
  :root body .to-top.cupid-aligned { right: var(--cupid-right); }
  .to-top { transition: color .45s ease, opacity 0.4s var(--ease), transform 0.5s var(--ease), bottom 0.6s var(--ease), right 0.6s var(--ease); }
}