/* Reusable landing interaction primitives — push, hold-to-confirm, sentence underline */

.push-btn {
  border-radius: 12px;
  background: #ff8a00;
  color: #0e0e10;
  box-shadow: 0 6px 0 #b36200;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}

.push-btn:hover:not(:disabled):not([aria-disabled='true']) {
  filter: brightness(1.03);
}

.push-btn:active:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(5px);
  box-shadow: 0 1px 0 #b36200;
}

.push-btn:disabled,
.push-btn[aria-disabled='true'] {
  opacity: 0.55;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.hold-btn {
  position: relative;
  display: block;
  width: 100%;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.hold-btn__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.hold-btn__track,
.hold-btn__prog {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.hold-btn__track {
  stroke: color-mix(in srgb, #9b6bff 22%, var(--line));
}

.hold-btn__prog {
  stroke: #9b6bff;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.2s ease-out;
}

.hold-btn.holding .hold-btn__prog {
  transition: stroke-dashoffset var(--hold-duration, 800ms) linear;
}

.hold-btn.holding-done .hold-btn__prog {
  stroke-dashoffset: 0 !important;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

.underline-link {
  position: relative;
  text-decoration: none;
  cursor: default;
}

.underline-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.underline-link:hover::after {
  transform: scaleX(1);
}

/* Presale price badges — purple base; Founder Presale adds shimmer sparkles */
.pricing-period-badge--presale,
.pricing-period-badge--founder-presale,
.pricing-card__price-line--presale .pricing-period-badge--presale,
.pricing-card__price-line--presale .pricing-period-badge--founder-presale {
  position: relative;
  border-color: color-mix(in srgb, #9b6bff 48%, var(--line));
  background: color-mix(in srgb, #9b6bff 20%, var(--surface));
  color: color-mix(in srgb, #ddd0ff 94%, white);
}

.pricing-period-badge--founder-presale {
  overflow: hidden;
  isolation: isolate;
}

.pricing-period-badge--founder-presale::before {
  content: '';
  position: absolute;
  inset: -120% -80%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.08) 44%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.08) 56%,
    transparent 60%
  );
  animation: founder-presale-shimmer 2.6s ease-in-out infinite;
  pointer-events: none;
}

.pricing-period-badge--founder-presale::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  top: 18%;
  left: 22%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    18px 6px 0 rgba(255, 255, 255, 0.55),
    36px -2px 0 rgba(255, 255, 255, 0.35),
    52px 8px 0 rgba(255, 255, 255, 0.7);
  animation: founder-presale-sparkle 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes founder-presale-shimmer {
  0% { transform: translateX(-35%) rotate(8deg); opacity: 0; }
  12% { opacity: 1; }
  48% { transform: translateX(35%) rotate(8deg); opacity: 1; }
  88% { opacity: 0; }
  100% { transform: translateX(55%) rotate(8deg); opacity: 0; }
}

@keyframes founder-presale-sparkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  20%, 70% { opacity: 1; transform: scale(1); }
}

#pricing-root .hold-btn {
  margin-top: auto;
  flex-shrink: 0;
}

#pricing-root .pricing-card__seats-toggle + .hold-btn,
#pricing-root .pricing-card__team-extras + .pricing-card__seats-toggle + .hold-btn,
#pricing-root .pricing-card__team-extras + .hold-btn {
  margin-top: 8px;
}

#pricing-root .pricing-card__cta.push-btn:not(:disabled):not([aria-disabled='true']) {
  background: var(--tier-push-bg, #ff8a00);
  color: var(--tier-push-ink, #0e0e10);
  border-color: transparent;
  box-shadow: 0 6px 0 var(--tier-push-shadow, #b36200);
}

#pricing-root .pricing-card__cta.push-btn:active:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(5px);
  box-shadow: 0 1px 0 var(--tier-push-shadow, #b36200);
}

#pricing-root .pricing-card__cta .plan-tier-badge {
  font-size: 10px;
  padding: 2px 7px;
  margin: 0 2px;
  vertical-align: middle;
}

#pricing-root .pricing-card__cta {
  -webkit-user-drag: none;
  user-select: none;
}