/* Decorative 3D coin images occupy the same slots as the original SVG art. */
.salary-coin-art,
.income-coin-rain {
  pointer-events: none;
  user-select: none;
}

/* The art occupies a normal-flow row above the amount, never its text area. */
.income-start .salary-option .salary-coin-art {
  display: block;
  width: 142px;
  max-width: 100%;
  height: 72px;
  margin: 0 0 12px;
  line-height: 0;
}

.salary-coin-art > svg,
.salary-coin-art > img {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.salary-coin-art > img {
  object-fit: contain;
  object-position: center bottom;
}

.income-intro .income-coin-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.income-heading-lead {
  white-space: nowrap;
}

.income-heading-goal {
  position: relative;
  display: inline-flex;
  min-height: 1.20em;
  align-items: center;
  white-space: nowrap;
}

.income-coin-rain {
  /* Decoration stays outside the text's centering calculation. Scaling its
     font size enlarges the fall area, every coin and the landing pile together. */
  position: absolute;
  bottom: 0;
  left: calc(100% - .35em);
  display: inline-block;
  font-size: 1.30em;
  width: 1.36em;
  height: 1.20em;
  /* Every visible frame stays inside this reserved space. The animation does
     not enter through a clipped edge, so there is no apparent falling window. */
  overflow: visible;
  isolation: isolate;
  vertical-align: middle;
  line-height: 0;
}

.income-coin-rain .income-falling-coin {
  position: absolute;
  z-index: 2;
  top: max(5px, .11em);
  display: block;
  width: .35em;
  height: .35em;
  opacity: 0;
  transform-origin: center;
  animation: income-coin-fall 3.9s ease-out infinite;
}

.income-falling-coin > img,
.income-coin-landing > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.income-coin-landing > img {
  object-position: center bottom;
}

.income-coin-rain .income-falling-coin--1 {
  left: 16%;
  --coin-turn: -28deg;
  animation-delay: -.3s;
}

.income-coin-rain .income-falling-coin--2 {
  left: 55%;
  --coin-turn: 38deg;
  animation-delay: -1.6s;
}

.income-coin-rain .income-falling-coin--3 {
  left: 35%;
  --coin-turn: -18deg;
  animation-delay: -2.9s;
}

.income-coin-landing {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: .40em;
}

@keyframes income-coin-fall {
  0%, 8% {
    opacity: 0;
    transform: translateY(0) rotate(-12deg) scale(.55);
  }
  17% {
    opacity: 1;
    transform: translateY(4%) rotate(-6deg) scale(1);
    animation-timing-function: cubic-bezier(.35,.03,.75,.6);
  }
  46% {
    opacity: 1;
    transform: translateY(173%) rotate(var(--coin-turn)) scale(1);
  }
  53%, 100% {
    opacity: 0;
    transform: translateY(184%) rotate(var(--coin-turn)) scale(.92);
  }
}

@media (min-width: 621px) and (max-width: 900px) {
  .income-coin-rain { font-size: 1.20em; }
}

@media (max-width: 620px) {
  .income-start .salary-option .salary-coin-art {
    width: 116px;
    height: 58px;
    margin-bottom: 9px;
  }

  .income-intro .income-coin-title {
    flex-direction: column;
    row-gap: .02em;
  }

  .income-heading-goal {
    min-height: 1.50em;
  }

  .income-coin-rain {
    font-size: 1.25em;
    width: 1.22em;
    left: calc(100% - .35em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .income-coin-rain .income-falling-coin {
    animation: none;
    opacity: 0;
  }

  .income-coin-rain .income-falling-coin--2 {
    opacity: 1;
    transform: translateY(53%) rotate(12deg);
  }
}