/* fly-to-cart (from apps/emiomer/public/assets/site.css .toast/.flyer/.bump and cart.js added(), 25.10.2026): the
   product photo flies in an arc into the cart icon, the icon bumps when it lands, and a toast says what was added.
   Tune a site by overriding these tokens in its own CSS. */
:root {
  --fly-spring: cubic-bezier(.34, 1.56, .64, 1); /* the bump */
  --fly-ease: cubic-bezier(.16, 1, .3, 1);       /* the toast's entrance */
  --fly-toast-bg: #1c1a17;
  --fly-toast-fg: #fff;
  --fly-toast-bottom: 20px;                      /* raise it over a phone's bottom bar (e.g. 76px) */
}

/* The flying copy of the photo (fly-to-cart.js places it and moves it with transform only). */
.fly-flyer {
  position: fixed; z-index: 70; margin: 0; border-radius: 50%; object-fit: cover; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2); overflow: hidden; will-change: transform, opacity;
}
/* The cart icon when the photo lands. */
.fly-bump { animation: fly-bump .5s var(--fly-spring); }
@keyframes fly-bump { 40% { transform: scale(1.25); } }

/* The toast: one vertical anchor only (bottom). A toast with both top and bottom set stretches over the screen (the
   owner hit that in Emio Mer's drafts, 24.10.2026). */
[data-fly-toast] {
  position: fixed; top: auto; bottom: calc(var(--fly-toast-bottom) + env(safe-area-inset-bottom)); left: 16px; right: 16px;
  z-index: 60; margin: 0 auto; max-width: 380px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px;
  background: var(--fly-toast-bg); color: var(--fly-toast-fg); font-size: 15px; line-height: 1.4;
  opacity: 0; transform: translate3d(0, 12px, 0); pointer-events: none;
  transition: opacity .35s var(--fly-ease), transform .5s var(--fly-ease);
}
[data-fly-toast].is-on { opacity: 1; transform: none; pointer-events: auto; }
[data-fly-toast] button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; white-space: nowrap; min-height: 32px; }