/* Choose Your ABG — motion.css
   The motion tokens from SPEC "Motion and sound" and every class-driven transition
   js/motion.js and js/swipe.js toggle. Loaded after styles.css, so the tokens here win.
   Only transform, opacity and filter ever animate. Nothing transitions "all". */

/* ───────────────────────── tokens ───────────────────────── */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 320ms;
}

/* ───────────────────────── arena ───────────────────────── */
/* Horizontal swipes are ours; vertical pans stay with the browser. */
[data-arena] {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
[data-arena] img { -webkit-user-drag: none; }

/* ───────────────────────── class-driven transitions ───────────────────────── */
/* Press: the class form of motion.press(), for callers that toggle rather than animate. */
.is-pressed {
  transform: scale(0.97);
  transition: transform 100ms var(--ease-out);
}

/* Winner lift. [data-contender] added for weight so it beats the hover rule in styles.css. */
[data-contender].is-lifted,
.is-lifted {
  transform: translateY(-4px) scale(1.01);
  transition: transform var(--dur-2) var(--ease-out);
}

/* Loser: quieter, a touch less saturated. Never a red overlay. */
[data-contender].is-dimmed,
.is-dimmed {
  opacity: 0.7;
  filter: saturate(0.85);
  transition: opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
}

/* The card the finger is heading toward during a swipe. */
[data-contender].swipe-target,
.swipe-target {
  transform: scale(1.03);
  transition: transform var(--dur-1) var(--ease-out);
}

/* Cards transition transform/opacity/filter both ways so removing a class eases out too. */
[data-contender] {
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
}

/* ───────────────────────── stamp ───────────────────────── */
@keyframes stamp-pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes stamp-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.stamp-pop { animation: stamp-pop var(--dur-2) var(--ease-out) both; }

/* ───────────────────────── taste delta chip ───────────────────────── */
[data-taste-delta] { will-change: transform, opacity; }

/* The travelling copy motion.flyTo() makes. Position is set inline from the source rect. */
.fly-clone {
  position: fixed;
  z-index: 90;
  margin: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ───────────────────────── confetti ───────────────────────── */
.confetti {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  pointer-events: none;
}
.confetti__bit {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  color: var(--c, var(--cherry));
  opacity: 0;
  will-change: transform, opacity;
}
.confetti__bit svg { width: 100%; height: 100%; display: block; }
/* the three colours js/motion.js deals out: the brand's Cherry, Petal and Matcha */
.confetti__bit--cherry { --c: var(--cherry); }
.confetti__bit--petal { --c: var(--petal-strong); }
.confetti__bit--matcha { --c: var(--matcha); }

/* ───────────────────────── hover (fine pointers only) ───────────────────────── */
@media (hover: hover) and (pointer: fine) {
  [data-contender]:not(.is-lifted):not(.is-dimmed):not(.swipe-target):hover {
    transform: translateY(-2px);
  }
  [data-choose]:hover { transform: translateY(-1px); }
}

/* ───────────────────────── reduced motion ───────────────────────── */
/* Opacity stays, travel goes. The JS side mirrors this through motion.reduced(). */
@media (prefers-reduced-motion: reduce) {
  .is-pressed { transform: none; }
  [data-contender].is-lifted,
  .is-lifted { transform: none; }
  [data-contender].swipe-target,
  .swipe-target { transform: none; }
  [data-contender] { transition: opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out); }
  .stamp-pop { animation: stamp-fade var(--dur-2) var(--ease-out) both; }
  .confetti__bit { transform: none !important; }
  [data-contender]:hover, [data-choose]:hover { transform: none; }
}

/* the taste delta is centred with the translate property; a clone is positioned from its measured rect */
.fly-clone { translate: none; }