/*
 * Pricing Table - Motion
 *
 * Note: Selectors support both `.pt-*` and legacy `.bf-*` classnames so existing
 * `/black-friday` pages keep working while new pages migrate to the neutral `pt-*` naming.
 */

/* Longhand properties are a Webflow compatibility mandate (the design-system hook
   blocks shorthand in Webflow files), which conflicts with stylelint-config-standard's
   redundant-longhand rule; the mandate wins for this file. */
/* stylelint-disable declaration-block-no-redundant-longhand-properties --
   Webflow only accepts longhand properties. */

/* Legacy `.ss_bf_*` / `.ss_pt_*` classes are Webflow-markup names that this stylesheet
   must keep matching, so the kebab-case class pattern does not apply here. */
/* stylelint-disable selector-class-pattern --
   Webflow-markup class names. */

/* Motion keyframes and reduced-motion policies */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pt-tab-content-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pt-seconds-pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.92;
  }

  100% {
    opacity: 1;
  }
}

@keyframes pt-cta-ping {
  0% {
    opacity: 0.12;
    transform: scale(0.98);
  }

  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

@keyframes pt-settle {
  0% {
    transform: scale(0.995);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes pt-border-wipe {
  0% {
    opacity: 0.35;
    transform: scaleX(0);
  }

  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes pt-pulse {
  0% {
    transform: scale(0.96);
    opacity: 0.7;
  }

  70% {
    transform: scale(1.12);
    opacity: 0;
  }

  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}

@keyframes pt-countdown-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgb(92 129 255 / 0%);
  }

  50% {
    box-shadow: 0 0 12px 2px rgb(92 129 255 / 15%);
  }
}

/* Apply glow animation to countdown */
:is(.pt-countdown, .bf-countdown) {
  animation: pt-countdown-glow 15s ease-in-out infinite;
}

/* stylelint-disable-next-line keyframes-name-pattern --
   `slideDown` is referenced by name from ss-pricing-table.js. */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* stylelint-disable-next-line keyframes-name-pattern --
   `slideUp` is referenced by name from ss-pricing-table.js. */
@keyframes slideUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ti {
    transition: none !important;
  }

  :is(.pt-plan-card, .bf-plan-card):is(:hover, :focus-within) .ti,
  :is(.pt-product-card, .bf-product-card):is(:hover, :focus-within) .ti {
    transform: none !important;
  }

  :is(.pt-product-card, .bf-product-card) {
    transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  :is(.pt-product-card, .bf-product-card):hover {
    transform: none;
  }

  :is(.pt-cta-button, .bf-cta-button),
  :is(.ss_pt_cta_button, .ss_bf_cta_button),
  .w-button[href*="checkout.php"] {
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  :is(.pt-cta-button, .bf-cta-button):hover,
  :is(.ss_pt_cta_button, .ss_bf_cta_button):hover,
  .w-button[href*="checkout.php"]:hover {
    transform: none !important;
  }
}