/* ============================================================
   Premium motion layer — homepage-only experiment.
   Removal: delete this file, js/premium-motion.js, and the
   pm-js <script> snippet + two tags referencing them in index.html.
   ============================================================ */

/* Hero entrance arming: hidden ONLY when JS is confirmed running
   and the motion script hasn't taken over yet (.pm-ready). */
html.pm-js:not(.pm-ready) .p-hero .p-eyebrow,
html.pm-js:not(.pm-ready) .p-hero h1,
html.pm-js:not(.pm-ready) .p-hero .p-hero-base > * {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html.pm-js:not(.pm-ready) .p-hero .p-eyebrow,
  html.pm-js:not(.pm-ready) .p-hero h1,
  html.pm-js:not(.pm-ready) .p-hero .p-hero-base > * {
    visibility: visible;
  }
}

/* Hero line masks (exist only while the entrance timeline runs) */
.pm-line {
  display: block;
  overflow: hidden;
}
.pm-line-in {
  display: block;
  will-change: transform;
}

/* Rolling dual-label CTAs. The duplicate label sits absolutely below the
   first so the track keeps single-line height (button geometry unchanged). */
.pm-roll {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.pm-roll-track {
  display: block;
  position: relative;
  will-change: transform;
}
.pm-roll-item {
  display: block;
}
.pm-roll-item + .pm-roll-item {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

/* Pricing card cursor spotlight (desktop, fine pointer, motion-ok only) */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .plans_containerv2 .pricing-card-2 {
    position: relative;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
  }
  .plans_containerv2:hover .pricing-card-2 { opacity: 0.88; }
  .plans_containerv2:hover .pricing-card-2:hover {
    opacity: 1;
    transform: translateY(-2px);
  }

  .pm-spot {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .pricing-card-2:hover .pm-spot { opacity: 1; }

  /* border ring that tracks the cursor */
  .pm-spot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
      180px circle at var(--pm-x, 50%) var(--pm-y, 50%),
      rgba(75, 93, 245, 0.85),
      rgba(75, 93, 245, 0.12) 45%,
      transparent 70%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }

  /* faint interior wash near the cursor */
  .pm-spot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      320px circle at var(--pm-x, 50%) var(--pm-y, 50%),
      rgba(75, 93, 245, 0.06),
      transparent 65%
    );
  }
}

/* Marquee logo ink-up (stays grayscale per the ink discipline) */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
  .logos-marquee .marquee-logo {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .logos-marquee .w-dyn-item:hover .marquee-logo {
    opacity: 1;
    transform: scale(1.05);
  }
}