/* The characters are SVG geometry. Only their joints, eyes and expressions move. */
.animated-mascots {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 680px;
  aspect-ratio: 640 / 310;
  margin: 12px auto 4px;
  pointer-events: none;
  user-select: none;
}

.animated-mascots .cda-mascot-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 10px 10px rgb(0 20 43 / 16%));
}

.animated-mascots .cda-arm-shadow,
.animated-mascots .cda-arm-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.animated-mascots .cda-arm-shadow {
  stroke: #a6c6da;
  stroke-width: 15;
}

.animated-mascots .cda-arm-line {
  stroke-width: 12;
}

.animated-mascots .cda-brow {
  fill: none;
  stroke: #234c66;
  stroke-width: 4.2;
  stroke-linecap: round;
}

.animated-mascots .cda-spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: cda-sparkle 5s ease-in-out infinite;
}

.animated-mascots .cda-spark-2 {
  animation-delay: -2.6s;
}

@keyframes cda-sparkle {
  0%, 100% { opacity: .45; transform: scale(.82) rotate(0); }
  50% { opacity: 1; transform: scale(1) rotate(18deg); }
}

@media (max-width: 760px) {
  .animated-mascots {
    max-width: 510px;
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animated-mascots .cda-spark {
    animation: none;
  }
}