/* Closing call to action: a deep night sky, the mascot resting, the store button.
   API: <section class="db-cta db-night"> <img class="db-cta__mascot"> <div class="db-cta__horizon"> */
.db-cta{text-align:center;position:relative;overflow:hidden}
.db-cta__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:var(--db-s5)}
.db-cta__mascot{width:min(46vw,180px);animation:db-cta-float 4.5s ease-in-out infinite}
.db-cta__title{font-size:var(--db-fs-h2);font-weight:800}
.db-cta__text{color:var(--fg-muted);max-width:38ch}

.db-cta__horizon{position:absolute;left:0;right:0;bottom:0;height:clamp(90px,14vw,170px);
  background-image:var(--db-cta-horizon-img);background-size:cover;background-position:center bottom;
  opacity:.9;pointer-events:none}

@keyframes db-cta-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.db-cta__mascot{animation:none}}