/* styles/page-index.css */

/* Coming Soon */

.coming-soon {
  text-align: center;
  width: 100%;
  margin: var(--space-xl) 0;
}

.cs-title {
  animation: cs-item-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0;
  opacity: 0;
  transform: translateY(24px);
}

.cs-line {
  animation: grow 0.6s 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  background: var(--main-text);
  height: 1px;
  margin: 1.5rem auto;
  width: 0;
}

.cs-sub {
  animation: cs-item-in 0.6s 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  color: var(--main-text-light);
  opacity: 0;
  padding-bottom: var(--space-sm);
  padding-top: 0.25rem;
  transform: translateY(24px);
}

@keyframes cs-item-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes grow {
  to {
    width: 80px;
  }
}