/* Original motion and editing treatment for the portfolio introduction. */
@keyframes intro-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes intro-letterspace {
  from { opacity: 0; letter-spacing: .12em; transform: translateY(16px); }
  to { opacity: 1; letter-spacing: .02em; transform: translateY(0); }
}

.hero-copy > * {
  animation: intro-rise .58s cubic-bezier(.2,.72,.25,1) both;
}
.hero-copy .eyebrow { animation-delay: .04s; }
.hero-copy .field-label:nth-of-type(1) { animation-delay: .12s; }
.hero-copy .field-label:nth-of-type(2) { animation: intro-letterspace .64s cubic-bezier(.2,.72,.25,1) .2s both; }
.hero-copy .field-label:nth-of-type(3) { animation-delay: .3s; }
.hero-copy .field-label:nth-of-type(4) { animation-delay: .38s; }
.hero-copy .hero-actions { animation-delay: .46s; }
.hero-copy .tag-editor { animation-delay: .54s; }
.hero-copy > .add-text-button { animation-delay: .62s; }

.hero-copy .inline-input {
  border-radius: 5px;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.hero-copy .inline-input:focus {
  background: rgba(255,255,255,.045);
  box-shadow: 0 2px 0 var(--accent);
  outline: 0;
}
.hero-copy .title-input:focus,
.hero-copy .role-input:focus { color: var(--accent); }
.hero-copy .english-input:focus { color: var(--ink); }

.hero-copy .intro-input { padding: 0; }
.hero-copy .intro-input:focus { padding: 4px 8px; margin-left: -8px; }
.hero-copy .primary-action { box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 20%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .hero-copy > * { animation: none !important; }
}