/**
 * CCM brand spinner - VENDORED from ClickClickMedia/ccm-spinner.
 *
 * Do not edit here. Fix it in that repo and copy the file across, or the two
 * drift and every other CCM app inherits the bug. Class names are `ccm-`, not
 * `app-`, deliberately: this file is a copy of an external component, not part
 * of the app layer.
 */

/* CCM Spinner — brand loading indicator built from the Click Click Media mark.
   Pair with the markup in ccm-spinner.html.

   Knobs (set on .ccm-spinner or ANY ancestor — they inherit):
     --ccm-size    rendered box            48px
     --ccm-lap     one full rotation       2.6s    (1.4s snappy · 4s breathing)
     --ccm-pace    pulse speed multiplier  1       (0.55 faster · 1.6 lazier)
     --ccm-green   primary spoke colour    #94C83E
     --ccm-alt     secondary spoke colour  #FFFFFF on the tile, #1F1F1F when bare
     --ccm-tile    tile background         #1F1F1F

   Modifier: .ccm-spinner--bare drops the tile for transparent backgrounds. */

.ccm-spinner{
  display:inline-block;
  width:var(--ccm-size,48px);
  height:var(--ccm-size,48px);
  vertical-align:middle;
}
.ccm-spinner--bare .ccm-tile{display:none}

.ccm-spinner .ccm-tile{fill:var(--ccm-tile,#1F1F1F)}
.ccm-spinner .ccm-g{fill:var(--ccm-green,#94C83E)}
.ccm-spinner .ccm-w{fill:var(--ccm-alt,#FFFFFF)}
/* Bare sits on the page, not the tile, so its second colour defaults dark. */
.ccm-spinner--bare .ccm-w{fill:var(--ccm-alt,#1F1F1F)}

.ccm-spinner .ccm-rotor{
  transform-origin:48px 48px;
  animation:ccm-spin var(--ccm-lap,2.6s) linear infinite;
}
.ccm-spinner .ccm-sp{
  transform-box:fill-box;
  transform-origin:0% 50%;
  animation-name:ccm-pulse;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
/* Six unrelated durations, so the spokes never resync. This is the "random". */
.ccm-spinner .ccm-s1{animation-duration:calc(1.90s * var(--ccm-pace,1));animation-delay:calc(-0.30s * var(--ccm-pace,1))}
.ccm-spinner .ccm-s2{animation-duration:calc(2.65s * var(--ccm-pace,1));animation-delay:calc(-1.45s * var(--ccm-pace,1))}
.ccm-spinner .ccm-s3{animation-duration:calc(2.40s * var(--ccm-pace,1));animation-delay:calc(-0.85s * var(--ccm-pace,1))}
.ccm-spinner .ccm-s4{animation-duration:calc(1.60s * var(--ccm-pace,1));animation-delay:calc(-1.10s * var(--ccm-pace,1))}
.ccm-spinner .ccm-s5{animation-duration:calc(2.90s * var(--ccm-pace,1));animation-delay:calc(-2.05s * var(--ccm-pace,1))}
.ccm-spinner .ccm-s6{animation-duration:calc(2.10s * var(--ccm-pace,1));animation-delay:calc(-0.55s * var(--ccm-pace,1))}

/* ---------------------------------------------------------------------------
 * Optical size
 *
 * The spokes are 6.1% of the box, so below ~24px they fall under 1.5px and the
 * mark turns to mush - it shimmers rather than spins. --sm redraws it for small
 * use: thicker spokes, pushed further off the hub so they do not collide at the
 * centre. Same six spokes, same colours, same motion; drawn for the size.
 *   --ccm-weight  spoke thickness multiplier
 *   --ccm-inset   extra user units between the hub and each spoke's inner tip
 * Use --sm below 32px - that is where the regular spokes drop under 2px. The
 * tile is a poor fit that small too, so stay bare.
 * ------------------------------------------------------------------------ */
.ccm-spinner--sm{--ccm-weight:1.85;--ccm-inset:4px}

@keyframes ccm-spin{to{transform:rotate(360deg)}}
@keyframes ccm-pulse{
  0%{transform:translateX(var(--ccm-inset,0px)) scaleX(.58) scaleY(var(--ccm-weight,1));opacity:.62}
  17%{transform:translateX(var(--ccm-inset,0px)) scaleX(1.12) scaleY(var(--ccm-weight,1));opacity:1}
  31%{transform:translateX(var(--ccm-inset,0px)) scaleX(.72) scaleY(var(--ccm-weight,1));opacity:.76}
  48%{transform:translateX(var(--ccm-inset,0px)) scaleX(1.15) scaleY(var(--ccm-weight,1));opacity:1}
  63%{transform:translateX(var(--ccm-inset,0px)) scaleX(.55) scaleY(var(--ccm-weight,1));opacity:.60}
  81%{transform:translateX(var(--ccm-inset,0px)) scaleX(.98) scaleY(var(--ccm-weight,1));opacity:.94}
  100%{transform:translateX(var(--ccm-inset,0px)) scaleX(.58) scaleY(var(--ccm-weight,1));opacity:.62}
}
@media (prefers-reduced-motion:reduce){
  .ccm-spinner .ccm-sp{animation:none;opacity:.9}
  .ccm-spinner .ccm-rotor{animation-duration:6s}
}