/* ==========================================================================
   Sysverge · Pricing page motion layer
   Progressive enhancement: nothing is hidden unless /js/pricing-motion.js
   runs and the visitor has not asked for reduced motion.
   Brand: bg #04050d · text #e9ebf3 · accent #1d3bff · accent-soft #6d7fff
   ========================================================================== */

@property --pm-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.pm-js {
  --pm-ease: cubic-bezier(.16, 1, .3, 1);
  --pm-ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- 1. Hidden (pre-reveal) states --------------------------------- */

/* The hero wrapper and headline remain visible from the first paint. */
.pm-js [data-pm]:not(.pm-in) { opacity: 0; }

.pm-js [data-pm] {
  transition:
    opacity .8s var(--pm-ease) var(--pm-d, 0ms),
    transform 1s var(--pm-ease) var(--pm-d, 0ms),
    filter .8s var(--pm-ease) var(--pm-d, 0ms);
}

.pm-js [data-pm="up"]:not(.pm-in)    { transform: translate3d(0, 28px, 0); }
.pm-js [data-pm="left"]:not(.pm-in)  { transform: translate3d(-18px, 0, 0); }
.pm-js [data-pm="right"]:not(.pm-in) { transform: translate3d(36px, 0, 0); }
.pm-js [data-pm="pop"]:not(.pm-in)   { transform: scale(.9) translate3d(0, 10px, 0); }
.pm-js [data-pm="fade"]:not(.pm-in)  { filter: blur(6px); }

/* ---------- 2. Cards fall into place --------------------------------------- */

.pm-js .plan-grid,
.pm-js .ai-plans,
.pm-js .wrap-narrow { perspective: 1400px; }

.pm-js [data-pm="fall"] {
  transition: none;
  transform-origin: 50% 0;
}
.pm-js [data-pm="fall"]:not(.pm-in) {
  transform: translate3d(0, -64px, 0) rotateX(9deg) scale(.97);
}
.pm-js [data-pm="fall"].pm-in {
  animation: pm-fall 1.05s var(--pm-ease) var(--pm-d, 0ms) both;
}
@keyframes pm-fall {
  0%   { opacity: 0; transform: translate3d(0, -64px, 0) rotateX(9deg) scale(.97); }
  45%  { opacity: 1; }
  62%  { transform: translate3d(0, 9px, 0) rotateX(-2deg) scale(1); }
  80%  { transform: translate3d(0, -3px, 0) rotateX(.5deg); }
  100% { opacity: 1; transform: none; }
}

/* Landing flash on featured cards */
.pm-js .card.featured.pm-land {
  animation: pm-land 1.2s ease-out both;
}
@keyframes pm-land {
  0%   { box-shadow: 0 0 0 0 rgba(29, 59, 255, .55), 0 0 60px -10px rgba(29, 59, 255, .7); }
  100% { box-shadow: 0 0 0 22px rgba(29, 59, 255, 0), 0 0 60px -10px rgba(29, 59, 255, 0); }
}

/* Count-up prices keep their width */
.pm-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

/* ---------- 3. Ambient loops ------------------------------------------------ */

/* Light traveling around the featured card border */
.pm-js .card.featured { position: relative; }
.pm-js .card.featured::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--pm-angle),
    rgba(109, 127, 255, 0) 0deg,
    rgba(109, 127, 255, 0) 250deg,
    rgba(109, 127, 255, .9) 300deg,
    #ffffff 318deg,
    rgba(29, 59, 255, .9) 335deg,
    rgba(109, 127, 255, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
  animation: pm-spin 7s linear infinite;
}
.pm-js .card.featured.pm-live::after { opacity: 1; }
@keyframes pm-spin { to { --pm-angle: 360deg; } }

/* Cursor spotlight on cards (mouse / trackpad only) */
@media (hover: hover) and (pointer: fine) {
  .pm-js .pm-spot { position: relative; }
  .pm-js .pm-spot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(320px circle at var(--pm-x, 50%) var(--pm-y, 0%),
      rgba(109, 127, 255, .13), rgba(109, 127, 255, 0) 65%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
  }
  .pm-js .pm-spot:hover::before { opacity: 1; }
}

/* Hero aurora: slow drifting glow + faint grid behind the headline */
.pm-js .page-hero { position: relative; isolation: isolate; }
.pm-aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease .2s;
  -webkit-mask-image: linear-gradient(#000 55%, transparent 100%);
          mask-image: linear-gradient(#000 55%, transparent 100%);
}
.pm-ready .pm-aurora { opacity: 1; }
.pm-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 30% 40%, #000 20%, transparent 75%);
  animation: pm-grid 30s linear infinite;
}
.pm-aurora > span {
  position: absolute;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 59, 255, .30) 0%, rgba(29, 59, 255, .10) 40%, rgba(29, 59, 255, 0) 70%);
  left: -180px;
  top: -320px;
  animation: pm-drift 22s var(--pm-ease-in-out) infinite alternate;
}
.pm-aurora > span + span {
  width: 520px;
  height: 520px;
  left: auto;
  right: -140px;
  top: 40px;
  background: radial-gradient(circle, rgba(109, 127, 255, .16) 0%, rgba(109, 127, 255, 0) 70%);
  animation-duration: 17s;
  animation-direction: alternate-reverse;
}
@keyframes pm-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(38vw, 90px, 0) scale(1.12); }
  100% { transform: translate3d(12vw, 160px, 0) scale(.95); }
}
@keyframes pm-grid { to { background-position: 72px 72px, 72px 72px; } }

/* Underline sweep under “found, called, and chosen” */
.pm-js .page-hero .page-lede strong {
  background-image: linear-gradient(90deg, #1d3bff, #6d7fff);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 1s var(--pm-ease) 1.1s;
  padding-bottom: 2px;
}
.pm-js .page-hero .page-lede.pm-in strong,
.pm-js .page-hero .page-lede.pm-done strong { background-size: 100% 2px; }

/* Closing CTA: gentle breathing ring */
.pm-js .closing .btn-primary.pm-live {
  animation: pm-breathe 2.8s ease-in-out infinite;
}
@keyframes pm-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 59, 255, .5); }
  50%      { box-shadow: 0 0 0 14px rgba(29, 59, 255, 0); }
}

/* ---------- 4. Accessibility ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pm-js [data-pm],
  .pm-js [data-pm]:not(.pm-in) { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
  .pm-aurora > span, .pm-aurora::before,
  .pm-js .card.featured::after,
  .pm-js .closing .btn-primary.pm-live { animation: none !important; }
}