/* ===================== Mode-switch transitions =====================
   Switching modes swaps both the content and the palette at once, so the two
   swap regions fade out, change underneath, then ease back to their new
   height. Gradients can't be transitioned, so the fade covers the snap. */
.catalog-swap, .pricing-swap {
  transition: opacity .24s ease, transform .24s ease;
}
.catalog-swap.is-swapping, .pricing-swap.is-swapping {
  opacity: 0;
  transform: translateY(10px);
}
.catalog-swap.is-resizing, .pricing-swap.is-resizing {
  overflow: hidden;
  transition: opacity .24s ease, transform .24s ease, height .42s cubic-bezier(.4, 0, .2, 1);
}
.section-head p { transition: opacity .24s ease; }
.section-head p.is-swapping { opacity: 0; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* `backwards` (not `both`) so the finished card drops back to its own styles
   and the :hover lift keeps working. */
.tpl-card {
  animation: card-in .42s cubic-bezier(.2, .7, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.eyebrow, .wedding-note, .duration-note, .tpl-card__duration, .addon-icon,
.pricing-showcase__addons li, .tpl-card__price-tag, .tpl-card__cat-tag {
  transition: background-color .45s ease, border-color .45s ease, color .45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .catalog-swap, .pricing-swap, .section-head p,
  .templates-section, .pricing-section,
  .type-switch__btn, .type-switch__btn::before { transition: none; }
  .tpl-card { animation: none; }
}