.cover-artwork.motion-cover {
  display: block;
  height: auto;
}

.motion-stage {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.motion-background,
.motion-type,
.motion-stage .motion-fallback {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.motion-type {
  fill: #fff;
  pointer-events: none;
}

.motion-type text {
  font-weight: 400;
  letter-spacing: 0;
}

.venue-label {
  transform-box: view-box;
}

.venue-dot {
  transform-origin: 0 0;
}

.motion-japanese {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif;
}

.motion-english {
  font-family: "Baskerville", "Times New Roman", serif;
}

.motion-stage .motion-fallback {
  display: none;
  object-fit: contain;
}

.motion-stage.is-fallback .motion-background,
.motion-stage.is-fallback .motion-type {
  display: none;
}

.motion-stage.is-fallback .motion-fallback {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .motion-stage.is-pending :is(.motion-line, .venue-dot, .venue-label) {
    opacity: 0;
  }

  .festival-cover.is-pending .motion-facts {
    opacity: 0;
  }

  .motion-stage.is-ready .motion-line {
    animation: title-arrive 1500ms cubic-bezier(.2, .75, .2, 1) var(--delay, 0ms) both;
  }

  .motion-stage.is-ready .motion-copy {
    animation-name: copy-arrive;
  }

  .festival-cover.is-ready .motion-facts {
    animation: facts-arrive 1500ms cubic-bezier(.2, .75, .2, 1) 1670ms both;
  }

  .motion-stage.is-ready .venue-dot {
    animation: venue-light 360ms cubic-bezier(.2, .75, .2, 1) var(--delay) both;
  }

  .motion-stage.is-ready .venue-label {
    animation: venue-name 560ms cubic-bezier(.2, .75, .2, 1) var(--delay) both;
  }

}

@keyframes title-arrive {
  from { opacity: 0; transform: translate(-44px, 48px); }
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes copy-arrive {
  from { opacity: 0; transform: translate(0, 60px); }
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes facts-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes venue-light {
  0% { opacity: 0; transform: scale(.2); }
  75% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes venue-name {
  0% { opacity: 0; transform: scaleX(.04); }
  75% { opacity: 1; transform: scaleX(1.035); }
  100% { opacity: 1; transform: scaleX(1); }
}