/* ============================================================
   Yatoon Motion Polish — added in 4.3.8
   Purely additive micro-interactions: does not set color,
   background, border-radius, or any property already fought
   over across frontend.css / apple-polish.css / yatoon-ui-polish.css.
   Only animation/transform/opacity, so it can't reopen any of the
   specificity conflicts found and fixed in 4.3.8 elsewhere.
   ============================================================ */

/* Service/option cards fade + rise in whenever they're rendered -
   fires automatically on first paint and again every time the
   category tabs re-render the list, no JS changes needed since
   CSS keyframe animations restart on element (re)insertion. */
@keyframes yatoonCardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sbs-service-item {
  animation: yatoonCardIn .28s ease both;
}
.sbs-service-item:nth-child(1) { animation-delay: 0ms; }
.sbs-service-item:nth-child(2) { animation-delay: 30ms; }
.sbs-service-item:nth-child(3) { animation-delay: 60ms; }
.sbs-service-item:nth-child(4) { animation-delay: 90ms; }
.sbs-service-item:nth-child(5) { animation-delay: 120ms; }
.sbs-service-item:nth-child(n+6) { animation-delay: 150ms; }

/* Selection feedback - a gentle pop when an option/day/time/staff
   card becomes selected. Fires automatically whenever the existing
   JS adds the .selected class (already does this everywhere), so
   this needed no JS changes either. */
@keyframes yatoonSelectPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}
.sbs-option-item.selected,
.sbs-day-button.selected,
.sbs-time-slot.selected,
.sbs-staff-card.selected {
  animation: yatoonSelectPop .22s ease-out;
}

/* Respect reduced-motion preferences for everything added above. */
@media (prefers-reduced-motion: reduce) {
  .sbs-service-item,
  .sbs-option-item.selected,
  .sbs-day-button.selected,
  .sbs-time-slot.selected,
  .sbs-staff-card.selected {
    animation: none !important;
  }
}