/* Ornaments sit over the known ClickShop icon; the original logo owns its size. */
.cshn-brand-lockup {
  display: inline-block;
  position: relative;
  width: max-content;
  max-width: 100%;
  line-height: 0;
  vertical-align: middle;
}

.cshn-brand-lockup > .cshn-ss-logo {
  position: absolute;
  inset: 0 auto auto 0;
  width: 18.5%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* The newsletter uses a padded, rotated logo card rather than the brand lockup. */
.cshn-promo-brand .cshn-ss-logo { display: none; }

.cshn-ss-logo-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cshn-ss-logo-motion {
  transform-box: view-box;
  transform-origin: 42% 10%;
}

.cshn-ss-logo:is([data-motion="running"], [data-motion="paused"])[data-effects="true"][data-effects-hidden="false"][data-reduced="false"] .cshn-ss-logo-motion {
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3;
}

.cshn-ss-logo:is([data-motion="running"], [data-motion="paused"])[data-effects="true"][data-effects-hidden="false"][data-reduced="false"] .cshn-ss-logo-hat { animation-name: cshn-ss-logo-tip; }
.cshn-ss-logo:is([data-motion="running"], [data-motion="paused"])[data-effects="true"][data-effects-hidden="false"][data-reduced="false"] .cshn-ss-logo-spider { animation-name: cshn-ss-logo-spider; }
.cshn-ss-logo:is([data-motion="running"], [data-motion="paused"])[data-effects="true"][data-effects-hidden="false"][data-reduced="false"] .cshn-ss-logo-gold { animation-name: cshn-ss-logo-gold; }
.cshn-ss-logo:is([data-motion="running"], [data-motion="paused"])[data-effects="true"][data-effects-hidden="false"][data-reduced="false"] .cshn-ss-logo-spark { animation-name: cshn-ss-logo-spark; }
.cshn-ss-logo:is([data-motion="running"], [data-motion="paused"])[data-effects="true"][data-effects-hidden="false"][data-reduced="false"] .cshn-ss-logo-circuit { animation-name: cshn-ss-logo-circuit; }
.cshn-ss-logo:is([data-motion="running"], [data-motion="paused"])[data-effects="true"][data-effects-hidden="false"][data-reduced="false"] .cshn-ss-logo-ribbon { animation-name: cshn-ss-logo-ribbon; }

.cshn-ss-logo[data-motion="paused"] .cshn-ss-logo-motion {
  animation-play-state: paused !important;
}

@keyframes cshn-ss-logo-tip {
  0%, 28%, 70%, 100% { transform: rotate(0deg); }
  42% { transform: rotate(-6deg); }
  56% { transform: rotate(4deg); }
}

@keyframes cshn-ss-logo-spider {
  0%, 20%, 85%, 100% { transform: translateY(0); }
  48%, 60% { transform: translateY(6px); }
}

@keyframes cshn-ss-logo-gold {
  0%, 20%, 75%, 100% { opacity: 1; }
  48% { opacity: .72; }
}

@keyframes cshn-ss-logo-spark {
  0%, 25%, 75%, 100% { opacity: .75; }
  50% { opacity: 1; }
}

@keyframes cshn-ss-logo-circuit {
  0%, 20%, 80%, 100% { opacity: .65; }
  48%, 55% { opacity: 1; }
}

@keyframes cshn-ss-logo-ribbon {
  0%, 30%, 80%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-4deg); }
  65% { transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cshn-ss-logo .cshn-ss-logo-motion { animation: none !important; }
}