/* CPC Point — motion vocabulary for the public marketing pages.
 *
 * Hidden states are applied by cpc-motion.js at runtime, never here, so
 * crawlers and no-JS visitors always see fully rendered content. The classes
 * below only describe *how* something moves once JS has opted it in.
 *
 * Six entrances, not one. A pill and a headline carry different implied
 * weight and should not decelerate on the same curve — moving everything
 * identically is what makes a page feel machine-made.
 */

.cpc-a {
  transition-property: opacity, transform, filter, clip-path;
  will-change: opacity, transform;
}

/* headings — editorial clip sweep, no vertical travel at all */
.cpc-a-wipe    { opacity: 0; clip-path: inset(0 100% 0 0); }
/* body copy — barely moves */
.cpc-a-rise    { opacity: 0; transform: translate3d(0, 12px, 0); }
/* cards — direction follows column position */
.cpc-a-slide-l { opacity: 0; transform: translate3d(-26px, 6px, 0); }
.cpc-a-slide-r { opacity: 0; transform: translate3d(26px, 6px, 0); }
/* badges — small mass, slight overshoot comes from the easing */
.cpc-a-pop     { opacity: 0; transform: scale(.86); }
/* imagery — resolves into focus */
.cpc-a-blur    { opacity: 0; filter: blur(14px); transform: scale(1.03); }
/* svg — the stroke draws itself; the container stays put */
.cpc-a-draw    { opacity: 1; }

.cpc-a-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* headline word split — each unit rises out of its own clipping box */
.cpc-w   { display: inline-block; overflow: hidden; vertical-align: top; }
.cpc-w-i { display: inline-block; transform: translate3d(0, 105%, 0);
           transition: transform .82s cubic-bezier(.16, 1, .3, 1); }
.cpc-split-in .cpc-w-i { transform: none; }

/* scroll-scrubbed helpers */
[data-scrub] { will-change: transform; }
.rule-grow {
  height: 1px; width: 0;
  background: linear-gradient(90deg, transparent, rgba(26,86,255,.7), rgba(34,211,238,.5), transparent);
}

/* depth */
.depth-card       { transform-style: preserve-3d; will-change: transform; }
.depth-card > *   { transform: translateZ(0); }
.depth-lift       { transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease; }
.depth-lift:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -18px rgba(26,86,255,.45); }

/* legacy hooks from the first motion pass */
.cpc-reveal-init { opacity: 0; transform: translate3d(0, 14px, 0); }
.cpc-reveal-in   { opacity: 1; transform: none;
                   transition: opacity .55s cubic-bezier(.22,1,.36,1),
                               transform .55s cubic-bezier(.22,1,.36,1); }

@media (prefers-reduced-motion: reduce) {
  .cpc-a, .cpc-a-wipe, .cpc-a-rise, .cpc-a-slide-l, .cpc-a-slide-r,
  .cpc-a-pop, .cpc-a-blur, .cpc-reveal-init {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .cpc-w-i          { transform: none !important; }
  .depth-lift:hover { transform: none; }
  [data-scrub]      { transform: none !important; }
  * { scroll-behavior: auto !important; }
}