/* One entrance on the existing layout, independent of JS and image loading. */
.reveal-up.is-reveal-pending { opacity: 0; }

#top { --hero-entrance-ease: cubic-bezier(.2, .8, .2, 1); }

#top .hero-kicker {
    animation: hero-enter-down .6s var(--hero-entrance-ease) .05s backwards;
}

#top .hero-name > span { white-space: nowrap; }

#top .hero-name > span:first-child {
    animation: hero-enter-wipe .7s var(--hero-entrance-ease) .12s backwards;
}

#top .hero-letter {
    display: inline-block;
    animation: hero-enter-letter .75s cubic-bezier(.25, 1.5, .45, 1) calc(.18s + var(--i) * .045s) backwards;
}

#top .hero-founder { animation: hero-enter-up .6s var(--hero-entrance-ease) .7s backwards; }
#top .hero-role { animation: hero-enter-up .6s var(--hero-entrance-ease) .76s backwards; }
#top .hero-summary { animation: hero-enter-up .6s var(--hero-entrance-ease) .82s backwards; }
#top .hero-actions { animation: hero-enter-up .6s var(--hero-entrance-ease) .94s backwards; }
#about > p { animation: hero-enter-up .6s var(--hero-entrance-ease) 1.04s backwards; }

#top .frame-svg > g {
    stroke-dasharray: 300;
    animation: hero-enter-draw 1.9s cubic-bezier(.45, 0, .2, 1) .35s backwards;
}

#top .frame-svg circle { animation: hero-enter-fade .4s ease 1.7s backwards; }
#top .avatar-opening { animation: hero-enter-open .8s var(--hero-entrance-ease) 1.15s backwards; }

@keyframes hero-enter-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes hero-enter-down { from { opacity: 0; transform: translateY(-10px); } }
@keyframes hero-enter-letter { from { opacity: 0; transform: translateY(.45em) rotate(6deg); } }
@keyframes hero-enter-wipe { from { clip-path: inset(-12px 100% -12px -12px); } to { clip-path: inset(-12px); } }
@keyframes hero-enter-draw { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
@keyframes hero-enter-fade { from { opacity: 0; } }
@keyframes hero-enter-open { from { clip-path: inset(50%); } to { clip-path: inset(0); } }

@media (prefers-reduced-motion: reduce) {
    #top *, #top *::before, #top *::after { animation: none !important; }
    #top .frame-svg > g { stroke-dasharray: none; }
}