.ds-title{
  margin: 0;
  position: relative;
  z-index: 2;

  font-family: var(--ds-font-display);
  font-size:   var(--ds-title-size, var(--ds-fs-display));
  font-weight: var(--ds-title-weight, var(--ds-fw-xbold));
  line-height: var(--ds-title-leading, var(--ds-lh-tight));
  letter-spacing: var(--ds-title-tracking, var(--ds-tracking-tight));
  text-transform: uppercase;
  text-align: var(--ds-title-align, center);
  text-wrap: balance;

  color: var(--ds-title-color);
}

.ds-title--display{ --ds-title-size: var(--ds-fs-display); }
.ds-title--xl     { --ds-title-size: var(--ds-fs-xl); }
.ds-title--lg     { --ds-title-size: var(--ds-fs-lg); }
.ds-title--md     { --ds-title-size: var(--ds-fs-md);  --ds-title-tracking: -0.01em; --ds-title-leading: 1.08; }
.ds-title--sm     { --ds-title-size: var(--ds-fs-sm);  --ds-title-tracking: 0;       --ds-title-leading: var(--ds-lh-snug); }
.ds-title--xs     { --ds-title-size: var(--ds-fs-xs);  --ds-title-tracking: 0.01em;  --ds-title-leading: var(--ds-lh-snug); }
.ds-title--2xs    { --ds-title-size: var(--ds-fs-2xs); --ds-title-tracking: 0.02em;  --ds-title-leading: var(--ds-lh-snug); }

.ds-title--left  { --ds-title-align: left; }
.ds-title--right { --ds-title-align: right; }

.ds-title .ds-line{ display: block; }

.ds-char{
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--ds-char-rise, .32em));
  will-change: transform, opacity;
}
.ds-space{ display: inline-block; width: .28em; }

.ds-title .ds-w{ white-space: nowrap; }
.ds-title .ds-space.ds-gap{
  display: inline;
  width: auto;
  letter-spacing: 0;
  word-spacing: .04em;
}

.ds-title--play .ds-char{
  animation: ds-char-up var(--ds-dur-slow, .9s) var(--ds-ease-out)
             var(--ds-char-delay, 0s) forwards;
}
@keyframes ds-char-up{
  to{ opacity: 1; transform: translateY(0); }
}

.ds-mark{
  position: relative;
  display: inline-block;
  z-index: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ds-mark::after{
  content: "";
  position: absolute;
  left:   calc(var(--ds-mark-bleed, .06em) * -1);
  right:  calc(var(--ds-mark-bleed, .06em) * -1);
  bottom: var(--ds-mark-offset, .08em);
  height: var(--ds-mark-height, .30em);
  border-radius: var(--ds-mark-radius, 0);

  background: var(--ds-mark-color);
  opacity: 1;
  z-index: -1;

  transform: rotate(var(--ds-rot, 0deg));
  transform-origin: 50% 50%;
  transition: transform var(--ds-dur-fast, .18s) ease;
  will-change: transform;
}

.ds-title[data-ds-ready] .ds-mark::after{ opacity: 0; }

.ds-title--play .ds-mark--in::after{
  animation: ds-bar-in var(--ds-dur-base, .4s) ease var(--ds-bar-delay, 0s) forwards;
}
@keyframes ds-bar-in{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

.ds-title--play .ds-mark--in.ds-fall::after{
  transition: none;
  animation: ds-bar-fall var(--ds-dur-fall, .8s) var(--ds-ease-in) forwards;
}
@keyframes ds-bar-fall{
  0%  { transform: translateY(0) rotate(var(--ds-rot, 0deg)); opacity: 1; }
  100%{ transform: translateY(90vh) rotate(220deg); opacity: 0; }
}
.ds-mark.ds-spent{ cursor: default; }

.ds-mark[data-ds-mark].ds-fall::after{
  transition: none;
  animation: ds-bar-fall var(--ds-dur-fall, .8s) var(--ds-ease-in) forwards;
}

@media (prefers-reduced-motion: reduce){
  .ds-char{ opacity: 1; transform: none; }
  .ds-title--play .ds-char{ animation: none; }

  .ds-title[data-ds-ready] .ds-mark::after{ opacity: 1; transition: none; }
  .ds-title--play .ds-mark--in::after{ animation: none; opacity: 1; }
  .ds-title--play .ds-mark--in.ds-fall::after,
  .ds-mark[data-ds-mark].ds-fall::after{ animation: none; opacity: 0; }
  .ds-mark{ cursor: default; }
}