/* Smocza Matematyka — the black dragon (App.dragon, js/core/dragon.js).
 * Idle motion is CSS: breathing (composited transform on the <svg> box), wing / tail sway, head bob, giggle,
 * thumb wiggle, mood extras (Zzz, thought dots, twinkles), egg rocking and glow. They run on the inner .d-i
 * groups, so the JS play() animations (transform attributes on the outer groups) simply add on top.
 * JS (one shared ticker) only does blinks, waves, the mood head tilt, play() and particles.
 * Also here: the talking mouth, the roar face swap and plume, the eat / yawn faces, the eggshell cap and the digit
 * circlet under hats, the curled sleeping pose, body glow / aura / lantern pulses, item and treat pictures, reduced motion.
 * --d-ph (random negative delay per dragon) desynchronises several dragons; .calm uses the *-calm keyframes.
 */

.dragon {
  position: relative;
  display: inline-block;
  flex: none;
  line-height: 0;
  vertical-align: bottom;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.dragon > .d-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* gentle breathing of the whole dragon: a composited transform on the <svg> box (no SVG repaints);
     origin = the ground line (y 230 of the viewBox -24..246) */
  transform-origin: 50% 94.07%;
  animation: dragon-breathe 3.2s ease-in-out var(--d-ph, 0s) infinite;
}

.dragon.mood-sleepy > .d-svg {
  animation-duration: 4.6s;
}

.dragon.calm > .d-svg {
  animation-name: dragon-breathe-calm;
}

.dragon.dragon-egg > .d-svg {
  animation: none;
}

/* calm mode (module guide): the same idle motions with about half the amplitude */
.dragon.calm .d-i-wing-l {
  animation-name: dragon-wing-l-calm;
}

.dragon.calm .d-i-wing-r {
  animation-name: dragon-wing-r-calm;
}

.dragon.calm .d-i-tail {
  animation-name: dragon-tail-calm;
}

.dragon.calm .d-i-head {
  animation-name: dragon-head-calm;
}

.dragon.calm.mood-laughing .d-i-head {
  animation-name: dragon-giggle-head-calm;
}

.dragon.calm.mood-laughing:not(.dragon-egg) .d-pose,
.dragon.calm.mood-laughing:not(.dragon-egg) .d-sil {
  animation-name: dragon-giggle-body-calm;
}

.dragon.calm.mood-encouraging .d-i-arm-r {
  animation-name: dragon-thumb-calm;
}

.dragon.calm .d-i-egg {
  animation-name: dragon-egg-rock-calm;
}

/* ---------- idle sway of the parts (inner .d-i groups, main art and white silhouette alike) ---------- */

.dragon .d-i-wing-l {
  animation: dragon-wing-l 3.2s ease-in-out var(--d-ph, 0s) infinite;
}

.dragon .d-i-wing-r {
  animation: dragon-wing-r 3.2s ease-in-out var(--d-ph, 0s) infinite;
}

.dragon .d-i-tail {
  animation: dragon-tail 2.7s ease-in-out var(--d-ph, 0s) infinite;
}

.dragon .d-i-head {
  animation: dragon-head 3.2s ease-in-out var(--d-ph, 0s) infinite;
}

.dragon.mood-laughing .d-i-head {
  animation: dragon-giggle-head 0.46s ease-in-out infinite alternate;
}

.dragon.mood-laughing:not(.dragon-egg) .d-pose,
.dragon.mood-laughing:not(.dragon-egg) .d-sil {
  animation: dragon-giggle-body 0.23s ease-in-out infinite alternate;
}

.dragon.mood-encouraging .d-i-arm-r {
  animation: dragon-thumb 1.6s ease-in-out infinite;
}

/* blink and wave: one-shot animations, JS alternates the -a / -b classes to restart them */
.dragon .d-eye {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.dragon.blink-a .d-eye {
  animation: dragon-blink-a 0.17s ease-in-out;
}

.dragon.blink-b .d-eye {
  animation: dragon-blink-b 0.17s ease-in-out;
}

.dragon.wave-a .d-i-arm-r {
  animation: dragon-wave-a 1.8s linear;
}

.dragon.wave-b .d-i-arm-r {
  animation: dragon-wave-b 1.8s linear;
}

.dragon.calm.wave-a .d-i-arm-r {
  animation-name: dragon-wave-a-calm;
}

.dragon.calm.wave-b .d-i-arm-r {
  animation-name: dragon-wave-b-calm;
}

/* mood extras: sleepy Zzz + snot bubble, thinking dots, proud / wink / magic twinkles */
.dragon .d-xa {
  transform-box: fill-box;
  transform-origin: center;
}

.dragon .d-xa-z {
  opacity: 0;
  animation: dragon-z 2.7s ease-out infinite;
}

.dragon .d-xa-bub {
  animation: dragon-bubble 3.2s ease-in-out infinite;
}

.dragon .d-xa-dot {
  opacity: 0;
  animation: dragon-dot 2.6s ease-in-out infinite;
}

.dragon .d-xa-tw {
  animation: dragon-twinkle 1.7s ease-in-out infinite;
}

/* egg: rocking now and then, pulsing halo and crack glow (the hatch drives them itself) */
.dragon .d-i-egg {
  animation: dragon-egg-rock 4.4s ease-in-out var(--d-ph, 0s) infinite;
}

.dragon.calm .d-i-egg {
  animation-duration: 7s;
}

.dragon .d-halo {
  animation: dragon-halo 2.8s ease-in-out infinite alternate;
}

.dragon .d-crack-halo {
  animation: dragon-crack-glow 2s ease-in-out infinite alternate;
}

.dragon.playing .d-i-egg,
.dragon.hatching .d-halo,
.dragon.hatching .d-crack-halo {
  animation: none;
}

.dragon .d-shadow {
  fill: rgba(20, 12, 40, 0.16);
}

.dragon .d-fx,
.dragon .d-fx-back {
  pointer-events: none;
}

/* the hatchling's eggshell cap hides while a hat (or other head accessory) is worn */
.dragon.has-head-acc .d-cap {
  display: none;
}

/* faces: roar eyes, the talk / roar mouths and the eat / yawn faces are hidden by default (also in the icon) */
.dragon .d-eyes-roar,
.dragon .d-mouth-talk,
.dragon .d-mouth-roar,
.dragon .d-eyes-yum,
.dragon .d-eyes-shut,
.dragon .d-mouth-chew,
.dragon .d-mouth-yum,
.dragon .d-mouth-yawn,
.dragon-icon .d-eyes-roar,
.dragon-icon .d-mouth-talk,
.dragon-icon .d-mouth-roar,
.dragon-icon .d-eyes-yum,
.dragon-icon .d-eyes-shut,
.dragon-icon .d-mouth-chew,
.dragon-icon .d-mouth-yum,
.dragon-icon .d-mouth-yawn {
  display: none;
}

/* glowing eyes show their light only while the eyes are open */
.dragon.mood-proud .d-glow-eyes,
.dragon.mood-laughing .d-glow-eyes,
.dragon.mood-sleepy .d-glow-eyes,
.dragon.yum .d-glow-eyes,
.dragon.yawning .d-glow-eyes,
.dragon.dozing .d-glow-eyes,
.dragon.roaring .d-glow-eyes {
  display: none;
}

/* the great stage's digit circlet hides under a hat (like the eggshell cap) */
.dragon.has-head-acc .d-great-crown {
  display: none;
}

/* talking: class 'talking' on the wrapper, on its svg or on any ancestor (the guide box) */
.dragon.talking .d-mouth,
.dragon > svg.talking .d-mouth,
.talking .dragon .d-mouth {
  display: none;
}

.dragon.talking .d-mouth-talk,
.dragon > svg.talking .d-mouth-talk,
.talking .dragon .d-mouth-talk {
  display: inline;
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: dragon-talk 0.22s ease-in-out infinite alternate;
}

/* roaring: eyes squeezed shut (> <), big open mouth, no mood extras */
.dragon.roaring .d-mouth,
.dragon.roaring .d-mouth-talk,
.dragon.roaring .d-eyes-mood,
.dragon.roaring .d-extras {
  display: none !important;
}

.dragon.roaring .d-mouth-roar,
.dragon.roaring .d-eyes-roar {
  display: inline;
}

/* eat (play('eat')): a wide open mouth before each chomp, chewing with puffed cheeks, then a happy lick */
.dragon.biting .d-mouth,
.dragon.biting .d-mouth-talk,
.dragon.chewing .d-mouth,
.dragon.chewing .d-mouth-talk,
.dragon.chewing .d-mouth-roar,
.dragon.yum .d-eyes-mood,
.dragon.yum .d-mouth,
.dragon.yum .d-mouth-talk,
.dragon.yum .d-extras,
.dragon.yawning .d-eyes-mood,
.dragon.yawning .d-mouth,
.dragon.yawning .d-mouth-talk,
.dragon.yawning .d-extras,
.dragon.dozing .d-eyes-mood,
.dragon.dozing .d-extras {
  display: none !important;
}

.dragon.biting .d-mouth-roar,
.dragon.yum .d-eyes-yum,
.dragon.yum .d-mouth-yum,
.dragon.yawning .d-eyes-shut,
.dragon.dozing .d-eyes-shut {
  display: inline;
}

.dragon.chewing .d-mouth-chew {
  display: inline;
  transform-box: fill-box;
  transform-origin: 50% 40%;
  animation: dragon-chew 0.19s ease-in-out infinite alternate;
}

/* sleep / wake: a slow big yawn */
.dragon.yawning .d-mouth-yawn {
  display: inline;
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: dragon-yawn 0.9s ease-in-out both;
}

.dragon .d-treat {
  pointer-events: none;
}

/* curled up asleep (mood 'sleepy'): slower breathing, the folded wing rises and falls */
.dragon.curled .d-i-head {
  animation-duration: 4.6s;
}

.dragon .d-i-fold {
  transform-box: view-box;
  animation: dragon-fold 4.6s ease-in-out var(--d-ph, 0s) infinite;
}

/* curious: the little question mark bobs */
.dragon .d-xa-q {
  animation: dragon-q 2.4s ease-in-out infinite;
}

/* body glow (setGlow) and the great stage's golden aura pulse softly; the lantern flickers a little */
.dragon .d-glow {
  animation: dragon-glow 3s ease-in-out var(--d-ph, 0s) infinite alternate;
}

.dragon .d-aura {
  transform-box: fill-box;
  transform-origin: center;
  animation: dragon-aura 3.6s ease-in-out infinite alternate;
}

.dragon .d-lamp-glow,
.dragon-item .d-lamp-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: dragon-lamp 1.7s ease-in-out infinite alternate;
}

.dragon .d-lamp-core {
  animation: dragon-flicker 0.9s ease-in-out infinite alternate;
}

/* roar plume particles (spawned by JS, removed after ~2 s) */
.dragon .d-puff,
.dragon .d-smoke,
.dragon .d-spark {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.dragon .d-puff {
  animation: dragon-puff 0.95s ease-out var(--delay, 0s) forwards;
}

.dragon .d-smoke {
  animation: dragon-smoke 1s ease-out var(--delay, 0s) forwards;
}

.dragon .d-spark {
  animation: dragon-spark 1.1s ease-out var(--delay, 0s) forwards;
}

@keyframes dragon-breathe {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.995, 1.016);
  }
}

@keyframes dragon-breathe-calm {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.997, 1.01);
  }
}

@keyframes dragon-wing-l {
  0%,
  100% {
    transform: rotate(-2.5deg);
  }
  50% {
    transform: rotate(2.5deg);
  }
}

@keyframes dragon-wing-l-calm {
  0%,
  100% {
    transform: rotate(-1.375deg);
  }
  50% {
    transform: rotate(1.375deg);
  }
}

@keyframes dragon-wing-r {
  0%,
  100% {
    transform: rotate(2.5deg);
  }
  50% {
    transform: rotate(-2.5deg);
  }
}

@keyframes dragon-wing-r-calm {
  0%,
  100% {
    transform: rotate(1.375deg);
  }
  50% {
    transform: rotate(-1.375deg);
  }
}

@keyframes dragon-tail {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

@keyframes dragon-tail-calm {
  0%,
  100% {
    transform: rotate(-2.75deg);
  }
  50% {
    transform: rotate(2.75deg);
  }
}

@keyframes dragon-head {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.4px);
  }
}

@keyframes dragon-head-calm {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.77px);
  }
}

@keyframes dragon-giggle-head {
  from {
    transform: rotate(-2.5deg);
  }
  to {
    transform: rotate(2.5deg);
  }
}

@keyframes dragon-giggle-head-calm {
  from {
    transform: rotate(-1.375deg);
  }
  to {
    transform: rotate(1.375deg);
  }
}

@keyframes dragon-giggle-body {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-1.8px);
  }
}

@keyframes dragon-giggle-body-calm {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-0.99px);
  }
}

@keyframes dragon-thumb {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

@keyframes dragon-thumb-calm {
  0%,
  100% {
    transform: rotate(-1.65deg);
  }
  50% {
    transform: rotate(1.65deg);
  }
}

@keyframes dragon-z {
  0% {
    transform: translate(0, 0) scale(0.55);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  62% {
    opacity: 1;
  }
  100% {
    transform: translate(8px, -14px) scale(1.15);
    opacity: 0;
  }
}

@keyframes dragon-bubble {
  0%,
  100% {
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.15);
  }
}

@keyframes dragon-dot {
  0%,
  8% {
    opacity: 0;
    transform: translateY(2px);
  }
  20%,
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  92%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes dragon-twinkle {
  0%,
  100% {
    transform: rotate(-18deg) scale(0.62);
  }
  50% {
    transform: rotate(18deg) scale(1.08);
  }
}

@keyframes dragon-egg-rock {
  0%,
  26%,
  100% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(3.5deg);
  }
  10% {
    transform: rotate(-3deg);
  }
  15% {
    transform: rotate(2deg);
  }
  20% {
    transform: rotate(-1deg);
  }
}

@keyframes dragon-egg-rock-calm {
  0%,
  26%,
  100% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(1.925deg);
  }
  10% {
    transform: rotate(-1.65deg);
  }
  15% {
    transform: rotate(1.1deg);
  }
  20% {
    transform: rotate(-0.55deg);
  }
}

@keyframes dragon-halo {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 0.9;
  }
}

@keyframes dragon-crack-glow {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}

@keyframes dragon-blink-a {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.1);
  }
}

@keyframes dragon-blink-b {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.1);
  }
}

@keyframes dragon-wave-a {
  0% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  8.33% {
    transform: rotate(4.1deg);
    animation-timing-function: ease-in-out;
  }
  16.67% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  25% {
    transform: rotate(-11.3deg);
    animation-timing-function: ease-in-out;
  }
  33.33% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  41.67% {
    transform: rotate(15.5deg);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  58.33% {
    transform: rotate(-15.5deg);
    animation-timing-function: ease-in-out;
  }
  66.67% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  75% {
    transform: rotate(11.3deg);
    animation-timing-function: ease-in-out;
  }
  83.33% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  91.67% {
    transform: rotate(-4.1deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
}

@keyframes dragon-wave-a-calm {
  0% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  8.33% {
    transform: rotate(2.8deg);
    animation-timing-function: ease-in-out;
  }
  16.67% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  25% {
    transform: rotate(-7.8deg);
    animation-timing-function: ease-in-out;
  }
  33.33% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  41.67% {
    transform: rotate(10.7deg);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  58.33% {
    transform: rotate(-10.7deg);
    animation-timing-function: ease-in-out;
  }
  66.67% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  75% {
    transform: rotate(7.8deg);
    animation-timing-function: ease-in-out;
  }
  83.33% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  91.67% {
    transform: rotate(-2.8deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
}

@keyframes dragon-wave-b {
  0% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  8.33% {
    transform: rotate(4.1deg);
    animation-timing-function: ease-in-out;
  }
  16.67% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  25% {
    transform: rotate(-11.3deg);
    animation-timing-function: ease-in-out;
  }
  33.33% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  41.67% {
    transform: rotate(15.5deg);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  58.33% {
    transform: rotate(-15.5deg);
    animation-timing-function: ease-in-out;
  }
  66.67% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  75% {
    transform: rotate(11.3deg);
    animation-timing-function: ease-in-out;
  }
  83.33% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  91.67% {
    transform: rotate(-4.1deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
}

@keyframes dragon-wave-b-calm {
  0% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  8.33% {
    transform: rotate(2.8deg);
    animation-timing-function: ease-in-out;
  }
  16.67% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  25% {
    transform: rotate(-7.8deg);
    animation-timing-function: ease-in-out;
  }
  33.33% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  41.67% {
    transform: rotate(10.7deg);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  58.33% {
    transform: rotate(-10.7deg);
    animation-timing-function: ease-in-out;
  }
  66.67% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  75% {
    transform: rotate(7.8deg);
    animation-timing-function: ease-in-out;
  }
  83.33% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  91.67% {
    transform: rotate(-2.8deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
}

@keyframes dragon-talk {
  from {
    transform: scaleY(0.28);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes dragon-puff {
  0% {
    transform: translate(0, 0) scale(0.3);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  70% {
    opacity: 0.95;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(var(--s, 1.6));
    opacity: 0;
  }
}

@keyframes dragon-smoke {
  0% {
    transform: translate(0, 0) scale(0.4);
    opacity: 0;
  }
  30% {
    opacity: 0.7;
  }
  100% {
    transform: translate(6px, -26px) scale(1.6);
    opacity: 0;
  }
}

@keyframes dragon-spark {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: 1;
  }
  35% {
    transform: translate(calc(var(--dx) * 0.55), calc(var(--dy) * 0.55)) scale(1.15) rotate(50deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(140deg);
    opacity: 0;
  }
}

@keyframes dragon-chew {
  from {
    transform: scale(1, 0.86);
  }
  to {
    transform: scale(1.04, 1.08);
  }
}

@keyframes dragon-yawn {
  0% {
    transform: scaleY(0.2);
  }
  35%,
  75% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.5);
  }
}

@keyframes dragon-fold {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.3px);
  }
}

@keyframes dragon-q {
  0%,
  100% {
    transform: translateY(0) rotate(-8deg);
  }
  50% {
    transform: translateY(-3px) rotate(8deg);
  }
}

@keyframes dragon-glow {
  from {
    opacity: 0.62;
  }
  to {
    opacity: 1;
  }
}

@keyframes dragon-aura {
  from {
    opacity: 0.6;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1.03);
  }
}

@keyframes dragon-lamp {
  from {
    opacity: 0.7;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes dragon-flicker {
  from {
    opacity: 0.65;
  }
  to {
    opacity: 0.9;
  }
}

/* small round head icon (App.dragon.icon) */
.dragon-icon {
  display: inline-block;
  flex: none;
  line-height: 0;
  vertical-align: middle;
}

.dragon-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* standalone item and treat pictures (App.dragon.itemIcon / treatIcon) */
.dragon-item,
.dragon-treat {
  display: inline-block;
  flex: none;
  line-height: 0;
  vertical-align: middle;
}

.dragon-item > svg,
.dragon-treat > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dragon-item .d-xa,
.dragon-icon .d-xa {
  transform-box: fill-box;
  transform-origin: center;
}

.dragon-item .d-xa-tw {
  animation: dragon-twinkle 1.7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dragon *,
  .dragon *::before,
  .dragon *::after,
  .dragon-item *,
  .dragon-treat *,
  .dragon-icon * {
    animation: none !important;
    transition: none !important;
  }

  /* these extras are hidden between animation cycles: show them still */
  .dragon .d-xa-z,
  .dragon .d-xa-dot {
    opacity: 1;
  }
}