/* render.css - the counter's on-stream look (render.js sets the --cr-* variables). */
.cr-root {
  font-family: var(--cr-font); font-size: var(--cr-size); font-weight: var(--cr-weight);
  line-height: 1.1; color: var(--cr-label);
  display: flex;
}
.cr-root[data-align="left"]   { justify-content: flex-start; text-align: left; }
.cr-root[data-align="center"] { justify-content: center; text-align: center; }
.cr-root[data-align="right"]  { justify-content: flex-end; text-align: right; }
.cr-box {
  display: flex; flex-direction: column; gap: var(--cr-gap);
  padding: var(--cr-pad); border-radius: var(--cr-radius); background: var(--cr-bg);
}
.cr-box[hidden] { display: none; }
.cr-root[data-direction="row"] .cr-box { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.cr-root[data-align="center"] .cr-box { align-items: center; }
.cr-root[data-align="right"] .cr-box { align-items: flex-end; }
.cr-root[data-direction="row"][data-align="center"] .cr-box { justify-content: center; }

.cr-item { display: flex; flex-direction: column; gap: calc(var(--cr-size) * .08); }
.cr-line { white-space: nowrap; }
.cr-num { color: var(--cr-value); display: inline-block; }
.cr-value { display: inline-block; }
.cr-goal { opacity: .75; }
/* stacked: the label sits small above the number */
.cr-root[data-layout="stacked"] .cr-line { display: flex; flex-direction: column; }
.cr-root[data-layout="stacked"][data-align="center"] .cr-line { align-items: center; }
.cr-root[data-layout="stacked"][data-align="right"] .cr-line { align-items: flex-end; }
.cr-root[data-layout="stacked"] .cr-label { font-size: .42em; letter-spacing: .04em; text-transform: uppercase; }

/* text effects */
.cr-root[data-effect="outline"] .cr-line { -webkit-text-stroke: calc(var(--cr-fx-size) * 2) var(--cr-fx); paint-order: stroke fill; }
.cr-root[data-effect="shadow"] .cr-line { text-shadow: 0 calc(var(--cr-fx-size) * .6) calc(var(--cr-fx-size) * 1.5) var(--cr-fx); }

/* goal progress bar */
.cr-bar {
  height: max(4px, calc(var(--cr-size) * .14)); min-width: calc(var(--cr-size) * 3);
  border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .2);
}
.cr-root[data-effect="outline"] .cr-bar { box-shadow: 0 0 0 max(1px, calc(var(--cr-fx-size) * .6)) var(--cr-fx); }
.cr-bar i { display: block; height: 100%; background: var(--cr-bar); border-radius: inherit; transition: width .4s ease; }

/* change animations. !important: the site turns animations off for "reduce motion", but these
   are part of the stream's look (and the preview on /counter has to show them) */
.cr-root .cr-anim-pop { animation: cr-pop .35s ease-out !important; }
.cr-root .cr-anim-bump.cr-up { animation: cr-bump-up .35s ease-out !important; }
.cr-root .cr-anim-bump.cr-down { animation: cr-bump-down .35s ease-out !important; }
.cr-root .cr-anim-roll.cr-up { animation: cr-roll-up .3s ease-out !important; }
.cr-root .cr-anim-roll.cr-down { animation: cr-roll-down .3s ease-out !important; }
.cr-root .cr-anim-flash { animation: cr-flash .6s ease-out !important; }
.cr-root .cr-bar i { transition: width .4s ease !important; }
@keyframes cr-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes cr-bump-up { 0% { transform: translateY(0); } 40% { transform: translateY(-.18em); } 100% { transform: translateY(0); } }
@keyframes cr-bump-down { 0% { transform: translateY(0); } 40% { transform: translateY(.18em); } 100% { transform: translateY(0); } }
@keyframes cr-roll-up { 0% { transform: translateY(.6em); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes cr-roll-down { 0% { transform: translateY(-.6em); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes cr-flash { 0% { filter: brightness(2.2); } 100% { filter: brightness(1); } }