/* Rolling character labels with a gently contracting button surface. */
.cta-stagger{--cta-duration:.6s;--cta-ease:cubic-bezier(.625,.05,0,1)}
.cta-stagger .cta-label{display:inline-flex;position:relative;align-items:center;vertical-align:middle;line-height:1.3;max-width:100%}
.cta-stagger .cta-readable{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.cta-stagger .cta-letters{display:inline-flex;overflow:hidden;white-space:pre;line-height:1.3;isolation:isolate}
.cta-stagger .cta-letter{position:relative;display:inline-block;flex:none;white-space:pre;line-height:1.3;transform:translateY(0);transition:transform var(--cta-duration) var(--cta-ease);transition-delay:calc(var(--char-index,0) * .01s)}
.cta-stagger .cta-letter::after{content:attr(data-char);position:absolute;top:100%;left:0;white-space:pre;color:inherit}
.cta-stagger.cta-filled{--cta-fill:#fff;position:relative;isolation:isolate;background:transparent;border-color:transparent;box-shadow:none;transform:none;transition:none}
.red-pill.cta-filled,.product-compare-cta.cta-filled{--cta-fill:#e60012}
.cta-stagger.cta-filled::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--cta-fill);pointer-events:none;transition:inset var(--cta-duration) var(--cta-ease)}
.cta-stagger.cta-filled:is(:hover,:focus-visible){background:transparent;box-shadow:none;transform:none}
:is(a,button).cta-stagger:is(:hover,:focus-visible) svg{transform:none}
.cta-stagger svg{transition:none}
.cta-stagger:focus-visible .cta-letter{transform:translateY(-100%)}
.cta-stagger.cta-filled:focus-visible::before{inset:.125em}
@media(hover:hover) and (pointer:fine){
  .cta-stagger:hover .cta-letter{transform:translateY(-100%)}
  .cta-stagger.cta-filled:hover::before{inset:.125em}
}
/* Actual CTA controls on dark surfaces invert without changing their resting style. */
:is(.cinematic-hero,.figma-product,.figma-upcoming,.creator-banner,.product-detail-page .product-main-hero,.product-dark-stage,.product-tone-graphite .product-main-hero,.graphite,.campaign-copy:not(.dark-copy),.global-footer,.home-footer)
  :is(a[href],button):is(.cta-stagger,.cinematic-cta,.figma-outline-cta,.creator-primary,.creator-secondary,.red-pill,.blue-link,.product-compare-cta,.technical-download,.related-product-link,.compare-link):is(:hover,:focus-visible){background:#fff;color:#000;border-color:#fff;box-shadow:none}
/* Keep filled buttons' shrinking pseudo-element as their only background. */
:is(.cinematic-hero,.figma-product,.figma-upcoming,.creator-banner,.product-detail-page .product-main-hero,.product-dark-stage,.product-tone-graphite .product-main-hero,.graphite,.campaign-copy:not(.dark-copy),.global-footer,.home-footer)
  :is(a[href],button).cta-filled:is(:hover,:focus-visible){--cta-fill:#fff;background:transparent;border-color:transparent;color:#000;box-shadow:none}
/* Compact download cards need a naturally wrapping label on narrow screens. */
@media(max-width:480px){
  .resource.cta-stagger .cta-label{display:block}
  .resource.cta-stagger .cta-readable{position:static;display:block;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal}
  .resource.cta-stagger .cta-letters{display:none}
}
@media(prefers-reduced-motion:reduce){
  .cta-stagger .cta-letter,.cta-stagger:is(:hover,:focus-visible) .cta-letter{transform:none;transition:none;transition-delay:0s}
  .cta-stagger.cta-filled::before,.cta-stagger.cta-filled:is(:hover,:focus-visible)::before{inset:0;transition:none}
  .cta-stagger .cta-letter::after{content:none}
}
@media(forced-colors:active){.cta-stagger.cta-filled{border:1px solid ButtonText}.cta-stagger.cta-filled::before{background:ButtonFace}}