/*
 * choice-cards.css — Step 1 "Who's travelling?" card interactions
 * (design/SPEC.md Sec 2 Step 1). Pairs with dog-choice-*.webp/.jpg and
 * cat-choice-*.webp/.jpg. Requires loaders/motion-tokens.css to be loaded
 * first (for --ease-pop / --ease-bounce / --dur-* custom properties; falls
 * back to sane inline defaults if it isn't).
 *
 * Expected markup:
 *   <button type="button" role="radio" aria-checked="false"
 *           class="choice-card" aria-label="Dog">
 *     <picture>
 *       <source srcset="dog-choice-desktop.webp" media="(min-width:640px)">
 *       <source srcset="dog-choice-mobile.webp">
 *       <img src="dog-choice-mobile.jpg" alt="" loading="eager">
 *     </picture>
 *   </button>
 * (img alt="" because the card's own aria-label already names the choice;
 * the illustration is decorative, not informational.)
 *
 * NOTE on the "tail wag / tail flick" micro-animation: these are baked,
 * full-scene GPT Image 2.5 illustrations (one flat raster per crop), not a
 * layered vector with an isolated tail part. Rather than fake an isolated
 * limb animation on a raster image, the whole illustration gets a small
 * (<=1.6deg), two-cycle rotational "wag" on hover/select -- it reads as
 * the same "something playful just moved" cue the spec asks for, at a
 * fraction of the engineering cost and with zero extra asset weight. If a
 * true isolated tail/ear layer is wanted later, re-cut the tail region as
 * its own transparent-background sprite and swap `.choice-card__wag`'s
 * target from the whole <img> to that sprite -- no other markup changes.
 */

.choice-card {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-lg, 28px);
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(29, 58, 95, 0.1));
  transition:
    transform var(--dur-standard, 280ms) var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)),
    box-shadow var(--dur-standard, 280ms) var(--ease-standard, ease),
    opacity var(--dur-standard, 280ms) var(--ease-standard, ease);
  min-height: 48px; /* WCAG hit-area floor even where the art is smaller */
}

.choice-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.choice-card:focus-visible {
  outline: 3px solid var(--color-coral, #FF7B54);
  outline-offset: 2px;
}

/* Desktop hover + keyboard focus: lift 6px, illustration does a slow 2-cycle wag */
@media (hover: hover) {
  .choice-card:hover,
  .choice-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(29, 58, 95, 0.1));
  }
  .choice-card:hover img,
  .choice-card:focus-visible img {
    animation: choiceWag 780ms var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) 2;
  }
}

/* Mobile tap: scale down then spring past 1 then settle; wag plays once */
@media (hover: none) {
  .choice-card:active {
    transform: scale(0.97);
    transition-duration: 80ms;
  }
  .choice-card.is-selected {
    animation: choiceSpring 260ms var(--ease-bounce, cubic-bezier(0.68, -0.25, 0.32, 1.25)) 1;
  }
  .choice-card.is-selected img {
    animation: choiceWag 780ms var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) 1;
  }
}

/* The unselected card fades + shrinks into a reselectable trail chip */
.choice-card.is-unselected {
  opacity: 0.4;
  transform: scale(0.94);
}

.choice-card[aria-checked="true"] {
  box-shadow: 0 0 0 3px var(--color-coral, #FF7B54), var(--shadow-md, 0 8px 24px rgba(29, 58, 95, 0.1));
}

@keyframes choiceWag {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-1.6deg) scale(1.01); }
  50% { transform: rotate(0deg) scale(1); }
  75% { transform: rotate(1.6deg) scale(1.01); }
}

@keyframes choiceSpring {
  0% { transform: scale(0.97); }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .choice-card:hover,
  .choice-card:focus-visible,
  .choice-card:active,
  .choice-card.is-selected {
    transform: none;
    animation: none;
  }
  .choice-card:hover img,
  .choice-card:focus-visible img,
  .choice-card.is-selected img {
    animation: none;
  }
}