html.js-anim .motion-reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(16px);
}

.motion-reveal {
  transition:
    opacity .6s cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms),
    transform .6s cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms);
}

html.js-anim .motion-photo:not(.is-in) {
  transform: scale(1.04);
}

.motion-photo {
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

html.js-anim .motion-market:not(.is-in) {
  opacity: 0;
  transform: scale(.72);
}

.motion-market {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity .4s cubic-bezier(.22, 1, .36, 1) var(--market-delay, 0ms),
    transform .4s cubic-bezier(.22, 1, .36, 1) var(--market-delay, 0ms);
}

.motion-rule {
  position: relative;
  border-top-color: transparent !important;
}

.motion-rule::before {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  content: "";
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

html.js-anim .motion-rule:not(.is-in)::before {
  transform: scaleX(0);
}

.site-header {
  position: sticky;
  top: 0;
}

.site-header .wrap {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  transform-origin: center top;
}

.site-header.is-compact {
  background-color: rgba(12, 12, 13, .84);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header.is-compact .wrap {
  transform: scaleY(.92);
}

.stat-num[data-studio-count] {
  min-width: 3.2ch;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal,
  .motion-photo,
  .motion-market,
  .motion-rule::before,
  .site-header,
  .site-header .wrap {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}