/* interactions.css — tactile feel for taps. Isolated from styles.css.
   Adds a quick press-scale + smooth transitions to clearly-interactive controls
   and removes iOS's grey tap-flash. Respects prefers-reduced-motion.
   Only leaf controls (buttons, chips, selection cards, nav, fab) are scaled —
   container cards with nested buttons are left out so presses never compound. */

.btn,
.iconbtn,
.seg button,
.avatar,
.space-switch,
.account-button,
.fab,
.nav button,
.manage-home-button,
.shared-home-status,
.template-library-callout,
.presence-strip button,
.pet-strip button,
.vehicle-strip button,
.household-switch-list button,
.choice,
.pack,
.setup-option,
.starter-pack,
.select-card,
.clarify-card,
.task-check {
  transition: transform 0.12s ease, opacity 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Standard press for buttons and selection cards. */
.btn:active,
.seg button:active,
.space-switch:active,
.account-button:active,
.manage-home-button:active,
.shared-home-status:active,
.template-library-callout:active,
.presence-strip button:active,
.pet-strip button:active,
.vehicle-strip button:active,
.household-switch-list button:active,
.choice:active,
.pack:active,
.setup-option:active,
.starter-pack:active,
.select-card:active,
.clarify-card:active {
  transform: scale(0.975);
}

/* Small round controls get a bit more travel so the tap is unmistakable. */
.iconbtn:active,
.avatar:active,
.nav button:active,
.task-check:active {
  transform: scale(0.88);
}
.fab:active {
  transform: scale(0.92);
}

/* Links / anything else: still kill the grey iOS flash. */
a,
button,
[data-action],
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* Task completion — the satisfying moment: the check pops green with a spring,
   then the card collapses out of the list. Driven by app.js (which only adds
   these classes when motion is allowed and it is the list circle). */
.task-check.is-completing {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  animation: taskCheckPop 0.42s cubic-bezier(0.2, 1.5, 0.35, 1) both;
}
.task-check.is-completing::after {
  content: "✓";
  font-weight: 900;
  animation: taskCheckMark 0.3s 0.06s cubic-bezier(0.2, 1.5, 0.35, 1) both;
}
@keyframes taskCheckPop {
  0% { transform: scale(0.9); }
  45% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
@keyframes taskCheckMark {
  from { transform: scale(0) rotate(-18deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
.card.is-completing {
  overflow: hidden;
  max-height: 0 !important;
  opacity: 0;
  transform: translateX(44px) scale(0.98);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: max-height 0.34s ease, opacity 0.28s ease, transform 0.3s ease,
    margin 0.34s ease, padding 0.34s ease;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .iconbtn,
  .seg button,
  .avatar,
  .space-switch,
  .account-button,
  .fab,
  .nav button,
  .manage-home-button,
  .shared-home-status,
  .template-library-callout,
  .presence-strip button,
  .pet-strip button,
  .vehicle-strip button,
  .household-switch-list button,
  .choice,
  .pack,
  .setup-option,
  .starter-pack,
  .select-card,
  .task-check {
    transition: none;
  }
  .btn:active,
  .iconbtn:active,
  .seg button:active,
  .avatar:active,
  .space-switch:active,
  .account-button:active,
  .fab:active,
  .nav button:active,
  .manage-home-button:active,
  .shared-home-status:active,
  .template-library-callout:active,
  .presence-strip button:active,
  .pet-strip button:active,
  .vehicle-strip button:active,
  .household-switch-list button:active,
  .choice:active,
  .pack:active,
  .setup-option:active,
  .starter-pack:active,
  .select-card:active,
  .task-check:active {
    transform: none;
  }
}