@layer components {
  @keyframes ark-rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes ark-symbol {
    from {
      opacity: 0;
      transform: translate(56px, -50%) scale(1.06);
    }
    to {
      opacity: 0.08;
      transform: translate(0, -50%) scale(1);
    }
  }

  [data-anim^="step-"] {
    animation: ark-rise 0.8s var(--ease) both;
  }

  [data-anim="step-1"] {
    animation-delay: 0.12s;
  }

  [data-anim="step-2"] {
    animation-delay: 0.24s;
  }

  [data-anim="step-3"] {
    animation-delay: 0.36s;
  }

  [data-anim="step-4"] {
    animation-delay: 0.48s;
  }

  [data-anim="symbol"] {
    animation: ark-symbol 1.6s 0.1s var(--ease) both;
  }

  [data-reveal] {
    transition:
      opacity var(--dur-slow) var(--ease),
      transform var(--dur-slow) var(--ease);
  }

  [data-reveal][data-pending] {
    opacity: 0;
    transform: translateY(22px);

    transition: none;
  }
}