/* ============================================================
   SPINNER — partial ring rotates, snaps to check, pops with
   white confetti dots. One-shot 2.1s animation. Restarts every
   time `.contact-form` enters .is-success state.
   ============================================================ */

.spinner {
  display: block;
  width: 100%;
  height: 100%;
  color: #ffffff;
  overflow: visible;
}

.spinner__check,
.spinner__pop-start,
.spinner__worm {
  transform-origin: 24px 24px;
}

/* Animations only run while the parent form is in success state. Removing
   .is-success rewinds them; adding it again restarts every time. */
.contact-form.is-success .spinner__check      { animation: spinner-check         2.1s linear 1 forwards; }
.contact-form.is-success .spinner__pop-dot    { animation: spinner-pop-dot       2.1s linear 1 forwards; }
.contact-form.is-success .spinner__pop-dot-group {
  animation: spinner-pop-dot-group1 2.1s linear 1 forwards;
}
.contact-form.is-success .spinner__pop-dot-group + .spinner__pop-dot-group {
  animation: spinner-pop-dot-group2 2.1s linear 1 forwards;
}
.contact-form.is-success .spinner__pop-end    { animation: spinner-pop-end       2.1s linear 1 forwards; }
.contact-form.is-success .spinner__pop-start  { animation: spinner-pop-start     2.1s linear 1 forwards; }
.contact-form.is-success .spinner__worm       { animation: spinner-worm          2.1s linear 1 forwards; }

@keyframes spinner-check {
  from, 42.5% { stroke-dashoffset: -36.7; transform: scale(1); }
  60%, 62%    { animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); stroke-dashoffset: 13.7; transform: scale(1); }
  72%         { animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); stroke-dashoffset: 13.7; transform: scale(0.4); }
  82%         { animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); stroke-dashoffset: 13.7; transform: scale(1.4); }
  90%, to     { stroke-dashoffset: 13.7; transform: scale(1); }
}

@keyframes spinner-pop-dot {
  from, 80% { animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); transform: translate(0, 6px); }
  90%, to   { transform: translate(0, 0); }
}

@keyframes spinner-pop-dot-group1 {
  from, 82.5%, 90%, to { opacity: 0; }
  85%, 87.5%           { opacity: 1; }
}

@keyframes spinner-pop-dot-group2 {
  from, 82.5%, to { opacity: 0; }
  85%, 90%        { opacity: 1; }
}

@keyframes spinner-pop-end {
  from    { animation-timing-function: steps(1, end); opacity: 0; r: 18px; stroke-width: 4px; }
  82.5%   { animation-timing-function: linear;        opacity: 1; r: 18px; stroke-width: 4px; }
  84%, to { opacity: 0; r: 19px; stroke-width: 3px; }
}

@keyframes spinner-pop-start {
  from   { animation-timing-function: steps(1, end);              opacity: 0; transform: scale(0.35); }
  71%    { animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); opacity: 1; transform: scale(0.35); }
  77.5%  { animation-timing-function: steps(1, start);            opacity: 1; transform: scale(1); }
  to     { opacity: 0; transform: scale(1); }
}

@keyframes spinner-worm {
  from   { animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); stroke-dashoffset: -51.84;  transform: rotate(-119deg); opacity: 1; }
  30%    { stroke-dashoffset: -51.84;  transform: rotate(241deg); opacity: 1; }
  34%    { animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); stroke-dashoffset: -51.84;  transform: rotate(313deg); opacity: 1; }
  42.5%  { stroke-dashoffset: -138.23; transform: rotate(313deg); opacity: 1; }
  60%    { animation-timing-function: steps(1, end);                stroke-dashoffset: -138.23; transform: rotate(313deg); opacity: 1; }
  62%, to { stroke-dashoffset: -138.23; transform: rotate(313deg); opacity: 0; }
}