:root{
  --bg: #f4f2ec;
  --ink: #0f1110;
  --dot-color: #e2231a;
}

html, body{
  margin: 0;
  height: 100%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.scene{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(70vw, 520px);
  height: max(calc(min(70vw, 520px) * 17.01 / 62.36), 64px);
  cursor: pointer;
}

.stage{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg{
  width: 100%;
  height: auto;
  overflow: visible;
}

svg path{
  fill: var(--ink);
  opacity: 0;
  transform: translateX(-14px);
  transform-box: fill-box;
  transform-origin: center;
  animation-play-state: paused;
}

.run path{
  animation-name: appear;
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
  animation-play-state: running;
}

.run path:nth-child(1){ animation-delay: 2.6s; }
.run path:nth-child(2){ animation-delay: 2.69s; }
.run path:nth-child(3){ animation-delay: 2.78s; }
.run path:nth-child(4){ animation-delay: 2.87s; }
.run path:nth-child(5){ animation-delay: 2.96s; }
.run path:nth-child(6){ animation-delay: 3.05s; }
.run path:nth-child(7){ animation-delay: 3.14s; }
.run path:nth-child(8){ animation-delay: 3.23s; }
.run path:nth-child(9){ animation-delay: 3.32s; }

@keyframes appear{
  from{
    opacity: 0;
    transform: translateX(-14px);
  }
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

svg path:nth-of-type(7){
  fill: var(--dot-color);
}

.tagline{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 200;
  font-size: clamp(11px, 2.3vw, 15px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  text-align: center;
  white-space: normal;
  line-height: 1.5;
  padding: 0 4px;
}

.run .tagline{
  animation-name: fadeIn, fadeOut;
  animation-duration: 0.9s, 0.7s;
  animation-timing-function: ease-out, ease-in;
  animation-fill-mode: forwards, forwards;
  animation-delay: 0s, 1.9s;
}

@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@keyframes fadeOut{
  from{ opacity: 1; }
  to{ opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  svg path{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .tagline{
    animation: none !important;
    opacity: 0 !important;
  }
}