/* Official source: https://transitions.dev/detail.html?t=success-check
   Preview P10 CSS verbatim; dependency tokens resolved locally to official values. */
.p10-check {
      --p10-opacity-dur: 500ms;
      --p10-rotate-dur: 500ms;
      --p10-rotate-from: 80deg;
      --p10-bob-dur:     500ms;
      --p10-y-amount:    40px;
      --p10-blur-dur:    500ms;
      --p10-blur-from:   10px;
      /* Exit uses its own (softer) blur amount so the disappearance
         reads as a gentle fade rather than a full reverse of entry. */
      --p10-blur-out-from: 4px;
      --p10-path-dur:    500ms;
      --p10-path-delay:  80ms;
      --p10-out-dur:     500ms;
      --p10-ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
      --p10-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
      --p10-ease-rotate:  cubic-bezier(0.22, 1, 0.36, 1);
      --p10-ease-bob:     cubic-bezier(0.34, 1.35, 0.64, 1);
      --p10-ease-path:    cubic-bezier(0.22, 1, 0.36, 1);

}
    .p10-check {
      width: 48px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /* Disc surface — Figma effect stack from node 358:786:
           1. solid #35BA00 fill
           2. inset hairline (5% black, 0-spread) — same visual as a
              1px border but as a shadow layer, so it stays inside
              the 48×48 box without box-sizing math
           3. outer box-shadow: soft drop + softer halo
           4. inset bottom highlight: subtle 1px line giving the disc
              a baked-in 3D feel
         All shadows are on the wrapper (not the SVG) so the wrapper's
         filter:blur(...) keyframes also blur them during the
         appear/exit transitions. */
      border-radius: 48px;
      background: #35BA00;
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.05) inset,
        0 1px 1px 0 rgba(0, 0, 0, 0.10),
        0 1px 4px 0 rgba(0, 0, 0, 0.08),
        0 -1px 1px 0 rgba(0, 0, 0, 0.09) inset;
      transform-origin: center;
      opacity: 0;
      will-change: transform, opacity, filter;
    }
    .p10-check svg {
      width: 48px;
      height: 48px;
      display: block;
      overflow: visible;
    }
    .p10-check svg path {
      stroke-dasharray: 20;
      stroke-dashoffset: 20;
    }
    .p10-check[data-state="in"] {
      animation:
        p10-fade   var(--p10-opacity-dur) var(--p10-ease-opacity) forwards,
        p10-rotate var(--p10-rotate-dur)  var(--p10-ease-rotate)  forwards,
        p10-blur   var(--p10-blur-dur)    var(--p10-ease-out)     forwards,
        p10-bob    var(--p10-bob-dur)     var(--p10-ease-bob)     forwards;
    }
    .p10-check[data-state="in"] svg path {
      animation: p10-draw var(--p10-path-dur) var(--p10-ease-path) var(--p10-path-delay, 0ms) forwards;
    }
    /* Exit runs only fade + blur on the wrapper — rotate / Y / path
       are intentionally omitted so the icon dissolves in place
       rather than flicking back on a short out-duration. The path
       (check stroke) doesn't get its own exit animation; it just
       fades out together with the wrapper. */
    .p10-check.is-exiting {
      animation:
        p10-fade-out var(--p10-out-dur) var(--p10-ease-out) forwards,
        p10-blur-out var(--p10-out-dur) var(--p10-ease-out) forwards;
    }
    @keyframes p10-fade     { from { opacity: 0; } to { opacity: 1; } }
    @keyframes p10-fade-out { from { opacity: 1; } to { opacity: 0; } }
    @keyframes p10-rotate {
      from { transform: rotate(var(--p10-rotate-from)); }
      to   { transform: rotate(0deg); }
    }
    @keyframes p10-blur {
      from { filter: blur(var(--p10-blur-from)); }
      to   { filter: blur(0); }
    }
    @keyframes p10-blur-out {
      from { filter: blur(0); }
      to   { filter: blur(var(--p10-blur-out-from)); }
    }
    @keyframes p10-bob {
      from { translate: 0 var(--p10-y-amount); }
      to   { translate: 0 0; }
    }
    @keyframes p10-draw     { to { stroke-dashoffset: 0; } }


/* Official exported reduced-motion rules, mechanically scoped to preview class. */
@media (prefers-reduced-motion: reduce) {
  .p10-check { animation: none !important; opacity: 1; }
  .p10-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}
/* Integration hosts only: artwork stays in normal flow and owns all motion. */
[data-customer-success] { animation:none!important; transform:none!important; translate:none!important; filter:none!important; opacity:1!important; }
.customer-success-art { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; flex:none; }
.acc-app .acc-cart-success-icon[data-customer-success],
.acc-app .acc-ticket-success-icon[data-customer-success],
.payment-result-icon[data-customer-success] { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:0; background:transparent; box-shadow:none; border-radius:0; margin:0 auto 18px; }
.acc-app .acc-toast-icon[data-customer-success] { background:transparent; border:0; }
.acc-toast-icon .customer-success-art { zoom:0.6666666667; }
.ap-check .customer-success-art,.ap-save-check .customer-success-art,.acc-save-icon .customer-success-art,.cs-chat-success .customer-success-art { zoom:0.4166666667; }