/* Pricing / shared page motion.
   Hero entrance: body.fgs-pricing-motion OR body.fgs-hero-motion.
   Easing: cubic-bezier(0.23, 1, 0.32, 1). Bounce: (0.34, 1.4, 0.64, 1). */

body.fgs-pricing-motion,
body.fgs-hero-motion {
  --fgpm-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --fgpm-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ---------- 1. Hero entrance (title + lead + optional CTA) ---------- */
/* One sentence — no forced line stack. Ease-out — no bounce. */
html.js body.fgs-pricing-motion .fgpm-hero-title,
html.js body.fgs-hero-motion .fgpm-hero-title {
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform, filter;
}
html.js body.fgs-pricing-motion [data-fgpm-hero].is-hero-in .fgpm-hero-title,
html.js body.fgs-hero-motion [data-fgpm-hero].is-hero-in .fgpm-hero-title {
  animation: fgpm-line-in 0.5s var(--fgpm-ease) forwards;
}
@keyframes fgpm-line-in {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

/* Lead starts ~150ms after title */
html.js body.fgs-pricing-motion .fgpm-hero-lead,
html.js body.fgs-hero-motion .fgpm-hero-lead {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  will-change: opacity, transform;
}
html.js body.fgs-pricing-motion [data-fgpm-hero].is-hero-in .fgpm-hero-lead,
html.js body.fgs-hero-motion [data-fgpm-hero].is-hero-in .fgpm-hero-lead {
  animation: fgpm-lead-in 0.5s var(--fgpm-ease) 0.65s forwards;
}
@keyframes fgpm-lead-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Optional hero CTAs (product page) — soft follow after lead */
html.js body.fgs-hero-motion .fgpm-hero-cta {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  will-change: opacity, transform;
}
html.js body.fgs-hero-motion [data-fgpm-hero].is-hero-in .fgpm-hero-cta {
  animation: fgpm-lead-in 0.45s var(--fgpm-ease) 0.95s forwards;
}

/* Soft radial glow — disabled for clean white site */
body.fgs-pricing-motion .fgs-hero--page .fgs-hero__glow,
body.fgs-hero-motion .fgs-hero--page .fgs-hero__glow {
  display: none;
}

body.fgs-pricing-motion .fgc__title.is-shimmer {
  background-image: linear-gradient(
    105deg,
    #f7f9fc 0%,
    #f7f9fc 38%,
    #9ec9ff 48%,
    #f7f9fc 58%,
    #f7f9fc 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fgpm-headline-shimmer 1.1s var(--fgpm-ease) 1 both;
}

@keyframes fgpm-headline-shimmer {
  0% { background-position: 100% 50%; filter: brightness(1); }
  45% { background-position: 0% 50%; filter: brightness(1.15); }
  100% { background-position: 0% 50%; filter: brightness(1); }
}

/* ---------- 2. Billing toggle thumb + save badge ---------- */
body.fgs-pricing-motion .fgs-billing {
  position: relative;
  display: inline-flex;
  gap: 0;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2, #f2f5f9) 88%, #fff);
  border: 1px solid rgba(13, 12, 10, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
body.fgs-pricing-motion .fgs-billing__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: var(--fgpm-thumb-w, 50%);
  border-radius: 999px;
  background: #0d0c0a;
  box-shadow: 0 8px 20px rgba(13, 12, 10, 0.18);
  transform: translateX(var(--fgpm-thumb-x, 0px));
  transition: transform 0.42s var(--fgpm-bounce), width 0.32s var(--fgpm-ease);
  pointer-events: none;
  z-index: 0;
}
body.fgs-pricing-motion .fgs-billing button {
  position: relative;
  z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-muted, #5c5952);
  border: 0;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 650;
  transition: color 0.2s var(--fgpm-ease);
}
body.fgs-pricing-motion .fgs-billing button.is-active {
  color: #fff !important;
}
body.fgs-pricing-motion .fgs-billing__save {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #067647;
  font-size: 12px;
  font-weight: 700;
  transform: scale(0.9);
  opacity: 0;
  pointer-events: none;
}
body.fgs-pricing-motion .fgs-billing__save.is-in {
  opacity: 1;
  transform: scale(1);
  animation: fgpm-pop 0.45s var(--fgpm-bounce) both;
}
body.fgs-pricing-motion .fgs-billing__confetti {
  position: absolute;
  left: 50%;
  top: 0;
  width: 120px;
  height: 48px;
  margin-left: -60px;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
body.fgs-pricing-motion .fgs-billing__confetti span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  opacity: 0;
  animation: fgpm-confetti 0.7s var(--fgpm-ease) forwards;
}

@keyframes fgpm-pop {
  0% { transform: scale(0.86); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes fgpm-confetti {
  0% { transform: translate(0, 8px) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* Digit roll */
body.fgs-pricing-motion .fgpm-digits {
  display: inline-flex;
  align-items: baseline;
  height: 1.05em;
  overflow: hidden;
  vertical-align: baseline;
}
body.fgs-pricing-motion .fgpm-digit {
  display: inline-block;
  height: 1.05em;
  overflow: hidden;
  line-height: 1.05;
}
body.fgs-pricing-motion .fgpm-digit__col {
  display: flex;
  flex-direction: column;
  transition: transform 0.48s var(--fgpm-bounce);
}
body.fgs-pricing-motion .fgpm-digit__col span {
  display: block;
  height: 1.05em;
  line-height: 1.05;
}

/* ---------- 3–5. Plan cards wave + hover dim + featured halo ---------- */
html.js body.fgs-pricing-motion .fgs-plans .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(28px);
}
html.js body.fgs-pricing-motion .fgs-plans .reveal {
  transition:
    opacity 0.5s var(--fgpm-ease),
    transform 0.5s var(--fgpm-ease),
    filter 0.35s var(--fgpm-ease);
}
html.js body.fgs-pricing-motion .fgs-plans .reveal[data-delay="1"] { transition-delay: 0.1s; }
html.js body.fgs-pricing-motion .fgs-plans .reveal[data-delay="2"] { transition-delay: 0.2s; }
html.js body.fgs-pricing-motion .fgs-plans .reveal[data-delay="3"] { transition-delay: 0.3s; }
html.js body.fgs-pricing-motion .fgs-plans .reveal[data-delay="4"] { transition-delay: 0.4s; }

body.fgs-pricing-motion .fgs-plans.is-hovering .fgs-plan:not(:hover) {
  opacity: 0.62;
  filter: saturate(0.85);
  transform: scale(0.985);
}
body.fgs-pricing-motion .fgs-plans.is-hovering .fgs-plan--featured:not(:hover) {
  transform: scale(1.01);
}
body.fgs-pricing-motion .fgs-plans .fgs-plan {
  transition:
    transform 0.35s var(--fgpm-ease),
    box-shadow 0.35s var(--fgpm-ease),
    border-color 0.35s ease,
    opacity 0.3s var(--fgpm-ease),
    filter 0.3s var(--fgpm-ease);
}
body.fgs-pricing-motion .fgs-plans .fgs-plan:hover {
  transform: translateY(-8px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 22px 48px -20px rgba(13, 12, 10, 0.22),
    0 16px 40px -18px rgba(10, 108, 255, 0.28);
}
html.js body.fgs-pricing-motion .fgs-plans--five .fgs-plan--featured.reveal.is-in {
  transform: scale(1.035);
}
body.fgs-pricing-motion .fgs-plans--five .fgs-plan--featured:hover {
  transform: scale(1.035) translateY(-8px);
}

body.fgs-pricing-motion .fgs-plan--featured {
  isolation: isolate;
  overflow: visible;
}
/* No spinning conic border — featured plan stays still like the others. */

body.fgs-pricing-motion .fgs-plan--featured .fgs-plan__badge {
  transform-origin: top center;
  opacity: 0;
}
body.fgs-pricing-motion .fgs-plan--featured.reveal.is-in .fgs-plan__badge {
  animation: fgpm-ribbon 0.7s var(--fgpm-bounce) 0.55s both;
}
@keyframes fgpm-ribbon {
  0% { transform: translateX(-50%) rotate(-18deg) translateY(-10px); opacity: 0; }
  100% { transform: translateX(-50%) rotate(0deg) translateY(0); opacity: 1; }
}

/* ---------- 6. Feature icons / legacy check draw ---------- */
body.fgs-pricing-motion .fgs-plan li:has(.fgs-fi) {
  padding-left: 0;
}
body.fgs-pricing-motion .fgs-plan li:not(:has(.fgs-fi)) {
  padding-left: 30px;
}
body.fgs-pricing-motion .fgs-plan li::before {
  display: none;
}
body.fgs-pricing-motion .fgpm-check {
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
}
body.fgs-pricing-motion .fgpm-check circle {
  fill: #f0efe9;
}
body.fgs-pricing-motion .fgpm-check path {
  fill: none;
  stroke: #0d0c0a;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
body.fgs-pricing-motion .fgs-plan.is-in .fgpm-check path,
body.fgs-pricing-motion .fgs-plan.reveal.is-in .fgpm-check path {
  animation: fgpm-draw 0.45s var(--fgpm-ease) forwards;
}
body.fgs-pricing-motion .fgs-plan.is-in li:nth-child(1) .fgpm-check path,
body.fgs-pricing-motion .fgs-plan.reveal.is-in li:nth-child(1) .fgpm-check path { animation-delay: 0.15s; }
body.fgs-pricing-motion .fgs-plan.is-in li:nth-child(2) .fgpm-check path,
body.fgs-pricing-motion .fgs-plan.reveal.is-in li:nth-child(2) .fgpm-check path { animation-delay: 0.25s; }
body.fgs-pricing-motion .fgs-plan.is-in li:nth-child(3) .fgpm-check path,
body.fgs-pricing-motion .fgs-plan.reveal.is-in li:nth-child(3) .fgpm-check path { animation-delay: 0.35s; }
body.fgs-pricing-motion .fgs-plan.is-in li:nth-child(4) .fgpm-check path,
body.fgs-pricing-motion .fgs-plan.reveal.is-in li:nth-child(4) .fgpm-check path { animation-delay: 0.45s; }
body.fgs-pricing-motion .fgs-plan.is-in li:nth-child(5) .fgpm-check path,
body.fgs-pricing-motion .fgs-plan.reveal.is-in li:nth-child(5) .fgpm-check path { animation-delay: 0.55s; }
body.fgs-pricing-motion .fgs-plan.is-in li:nth-child(6) .fgpm-check path,
body.fgs-pricing-motion .fgs-plan.reveal.is-in li:nth-child(6) .fgpm-check path { animation-delay: 0.65s; }
@keyframes fgpm-draw {
  to { stroke-dashoffset: 0; }
}

/* 3D feature icon tiles — pop in after plan enters */
body.fgs-pricing-motion .fgs-plan.is-in .fgs-fi,
body.fgs-pricing-motion .fgs-plan.reveal.is-in .fgs-fi {
  animation: fgpm-fi-in 0.45s var(--fgpm-ease) both;
}
body.fgs-pricing-motion .fgs-plan.is-in li:nth-child(1) .fgs-fi,
body.fgs-pricing-motion .fgs-plan.reveal.is-in li:nth-child(1) .fgs-fi { animation-delay: 0.12s; }
body.fgs-pricing-motion .fgs-plan.is-in li:nth-child(2) .fgs-fi,
body.fgs-pricing-motion .fgs-plan.reveal.is-in li:nth-child(2) .fgs-fi { animation-delay: 0.2s; }
body.fgs-pricing-motion .fgs-plan.is-in li:nth-child(3) .fgs-fi,
body.fgs-pricing-motion .fgs-plan.reveal.is-in li:nth-child(3) .fgs-fi { animation-delay: 0.28s; }
body.fgs-pricing-motion .fgs-plan.is-in li:nth-child(4) .fgs-fi,
body.fgs-pricing-motion .fgs-plan.reveal.is-in li:nth-child(4) .fgs-fi { animation-delay: 0.36s; }
body.fgs-pricing-motion .fgs-plan.is-in li:nth-child(5) .fgs-fi,
body.fgs-pricing-motion .fgs-plan.reveal.is-in li:nth-child(5) .fgs-fi { animation-delay: 0.44s; }
body.fgs-pricing-motion .fgs-plan.is-in li:nth-child(6) .fgs-fi,
body.fgs-pricing-motion .fgs-plan.reveal.is-in li:nth-child(6) .fgs-fi { animation-delay: 0.52s; }
@keyframes fgpm-fi-in {
  0% { opacity: 0; transform: rotateX(18deg) rotateY(-16deg) translateY(6px) scale(0.9); }
  100% { opacity: 1; transform: rotateX(12deg) rotateY(-10deg) translateY(0) scale(1); }
}

/* ---------- 7–8. CTA shimmer / hover / click morph ---------- */
body.fgs-pricing-motion .fgs-plan .fgs-btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: transform 0.22s var(--fgpm-ease), box-shadow 0.22s var(--fgpm-ease),
    background 0.22s var(--fgpm-ease), color 0.22s var(--fgpm-ease);
}
body.fgs-pricing-motion .fgs-plan .fgs-btn .fgpm-label,
body.fgs-pricing-motion .fgs-plan .fgs-btn .fgpm-arrow {
  position: relative;
  z-index: 1;
}
body.fgs-pricing-motion .fgs-plan .fgs-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  animation: fgpm-btn-sheen 4.8s var(--fgpm-ease) infinite;
  pointer-events: none;
}
body.fgs-pricing-motion .fgs-plan .fgs-btn--ghost::after {
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(13, 12, 10, 0.08) 50%,
    transparent 65%
  );
}
@keyframes fgpm-btn-sheen {
  0%, 70% { transform: translateX(-120%); }
  85% { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
body.fgs-pricing-motion .fgs-plan .fgs-btn:hover {
  transform: scale(1.03);
}
body.fgs-pricing-motion .fgs-plan .fgs-btn .fgpm-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.22s var(--fgpm-ease);
}
body.fgs-pricing-motion .fgs-plan .fgs-btn:hover .fgpm-arrow {
  transform: translateX(4px);
}
body.fgs-pricing-motion .fgs-plan .fgs-btn.is-loading,
body.fgs-pricing-motion .fgs-plan .fgs-btn.is-done {
  pointer-events: none;
}
body.fgs-pricing-motion .fgpm-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: fgpm-spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes fgpm-spin { to { transform: rotate(360deg); } }
body.fgs-pricing-motion .fgpm-ok {
  display: inline-block;
  font-weight: 700;
}

/* ---------- 9. Pack cards cascade + badge pop ---------- */
html.js body.fgs-pricing-motion .fgp .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(22px);
}
html.js body.fgs-pricing-motion .fgp .reveal {
  transition: opacity 0.48s var(--fgpm-ease), transform 0.48s var(--fgpm-ease);
}
html.js body.fgs-pricing-motion .fgp-card.reveal[data-delay="1"] { transition-delay: 0.1s; }
html.js body.fgs-pricing-motion .fgp-card.reveal[data-delay="2"] { transition-delay: 0.2s; }
html.js body.fgs-pricing-motion .fgp-card.reveal[data-delay="3"] { transition-delay: 0.3s; }
html.js body.fgs-pricing-motion .fgp-card.reveal[data-delay="4"] { transition-delay: 0.4s; }

body.fgs-pricing-motion .fgp-card.reveal.is-in .fgp-badge {
  animation: fgpm-pop 0.5s var(--fgpm-bounce) 0.2s both;
}

/* ---------- 10. FAQ accordion ---------- */
body.fgs-pricing-motion .fgs-faq__item {
  transition: border-color 0.2s var(--fgpm-ease), box-shadow 0.2s var(--fgpm-ease);
}
body.fgs-pricing-motion .fgs-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--fgpm-ease);
}
body.fgs-pricing-motion .fgs-faq__item.is-open .fgs-faq__panel {
  grid-template-rows: 1fr;
}
body.fgs-pricing-motion .fgs-faq__panel-inner {
  overflow: hidden;
}
body.fgs-pricing-motion .fgs-faq__a {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.28s var(--fgpm-ease) 0.1s, transform 0.28s var(--fgpm-ease) 0.1s;
}
body.fgs-pricing-motion .fgs-faq__item.is-open .fgs-faq__a {
  opacity: 1;
  transform: none;
}
body.fgs-pricing-motion .fgs-faq__q .pm {
  transition: transform 0.28s var(--fgpm-ease);
}
body.fgs-pricing-motion .fgs-faq__item.is-open .fgs-faq__q .pm {
  transform: rotate(180deg);
}

/* ---------- 11. Final CTA floating icons + shimmer ---------- */
body.fgs-pricing-motion .fgc__floaters {
  position: absolute;
  inset: 8% 6%;
  pointer-events: none;
  z-index: 0;
}
body.fgs-pricing-motion .fgc__floater {
  position: absolute;
  opacity: 0.18;
  color: #0a6cff;
  animation: fgpm-drift 12s ease-in-out infinite alternate;
}
body.fgs-pricing-motion .fgc__floater:nth-child(1) { left: 8%; top: 18%; animation-duration: 11s; }
body.fgs-pricing-motion .fgc__floater:nth-child(2) { right: 12%; top: 24%; animation-duration: 14s; animation-delay: -2s; }
body.fgs-pricing-motion .fgc__floater:nth-child(3) { left: 18%; bottom: 20%; animation-duration: 13s; animation-delay: -4s; }
body.fgs-pricing-motion .fgc__floater:nth-child(4) { right: 20%; bottom: 16%; animation-duration: 15s; animation-delay: -1s; }
body.fgs-pricing-motion .fgc__floater:nth-child(5) { left: 46%; top: 10%; animation-duration: 10s; animation-delay: -3s; }
@keyframes fgpm-drift {
  from { transform: translate3d(0, 0, 0) rotate(-6deg); }
  to { transform: translate3d(12px, -16px, 0) rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
  html.js body.fgs-pricing-motion .reveal:not(.is-in),
  html.js body.fgs-pricing-motion .fgs-plans .reveal:not(.is-in),
  html.js body.fgs-pricing-motion .fgp .reveal:not(.is-in),
  html.js body.fgs-pricing-motion .fgpm-line,
  html.js body.fgs-pricing-motion .fgpm-hero-lead,
  html.js body.fgs-hero-motion .fgpm-line,
  html.js body.fgs-hero-motion .fgpm-hero-lead,
  html.js body.fgs-hero-motion .fgpm-hero-cta {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  body.fgs-pricing-motion .fgs-hero--page .fgs-hero__glow,
  body.fgs-hero-motion .fgs-hero--page .fgs-hero__glow,
  body.fgs-pricing-motion .fgs-billing__thumb,
  body.fgs-pricing-motion .fgs-plan .fgs-btn::after,
  body.fgs-pricing-motion .fgc__floater,
  body.fgs-pricing-motion .fgpm-digit__col,
  body.fgs-pricing-motion .fgc__title.is-shimmer {
    animation: none !important;
    transition: none !important;
  }
  body.fgs-pricing-motion .fgs-plan--featured .fgs-plan__badge {
    opacity: 1 !important;
    animation: none !important;
  }
  body.fgs-pricing-motion .fgpm-check path {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
}