/* Content remains visible when JavaScript or motion support is unavailable. */
.hero-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero-line>span{display:block}
.motion-ready .reveal{opacity:0;transform:translateY(25px);transition:opacity .8s ease var(--delay,0ms),transform .8s cubic-bezier(.22,1,.36,1) var(--delay,0ms)}
.motion-ready .reveal.is-visible{opacity:1;transform:none}
.motion-ready .hero-line>span{animation:title-enter 1s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--delay,0ms)}
.motion-ready .orbit{animation:orbit-turn 35s linear infinite}
.motion-ready .art.is-visible .phone{animation:phone-float 7s ease-in-out infinite}
.motion-ready .art.is-visible .dashboard{animation:dashboard-float 8s ease-in-out infinite}
.motion-ready .art:not(.is-visible) .phone,.motion-ready .art:not(.is-visible) .dashboard{animation-play-state:paused}
.cta,.pill,.contact button{transition:background .25s,color .25s,transform .25s}
.cta span,.caption>span{display:inline-block;transition:transform .3s}
@media(hover:hover){.cta:hover,.contact button:hover{transform:translateY(-3px)}.cta:hover span{transform:translate(3px,3px)}.project:hover .caption>span{transform:translate(3px,-3px)}}
@keyframes title-enter{from{opacity:0;transform:translateY(110%)}to{opacity:1;transform:translateY(0)}}
@keyframes orbit-turn{to{transform:rotate(360deg)}}
@keyframes phone-float{0%,100%{transform:translateY(0) rotate(-9deg)}50%{transform:translateY(-9px) rotate(-7deg)}}
@keyframes dashboard-float{0%,100%{transform:translateY(0) rotate(6deg)}50%{transform:translateY(-8px) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.motion-ready .reveal{opacity:1;transform:none;transition:none}.motion-ready .hero-line>span,.motion-ready .orbit,.motion-ready .art .phone,.motion-ready .art .dashboard{animation:none}.cta,.pill,.contact button,.cta span,.caption>span{transition:none}}