/* Motion has a small role: establish the scene, then follow the reader. */
.hero-art{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.hero-art>img{width:100%;height:auto}
.hero-copy>.eyebrow{animation:arrive .7s both}
.hero-copy>h1{animation:arrive .9s .1s both}
.hero-copy>.lede{animation:arrive .9s .22s both}
.hero-actions{animation:arrive .9s .34s both}
.hero-copy>.fine{animation:arrive .9s .42s both}
.hero-art{animation:arrive-art 1.3s .12s both}
.agents,.phone-scene,.story-copy,.section-heading,.feature-list article,.connection-inner,.faq,.closing{transition:opacity .8s ease,translate .9s cubic-bezier(.2,.7,.2,1)}
.reveal-pending{opacity:0;translate:0 25px}
.story-copy.revealed .bubble{animation:bubble-in .7s cubic-bezier(.2,.7,.2,1) both}
.story-copy.revealed .bubble:nth-child(1){animation-delay:.25s}
.story-copy.revealed .bubble:nth-child(2){animation-delay:.8s}
.story-copy.revealed .bubble:nth-child(3){animation-delay:1.35s}
.phone{transition:transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .8s}
@media(hover:hover){.phone:hover{transform:rotate(-1deg) translateY(-5px);box-shadow:0 26px 55px #27372814}.feature-list article:hover .feature-number{color:var(--green);transform:translateX(3px)}.brand:hover img{transform:rotate(-12deg) translateY(-2px)}}
.feature-number,.brand img{transition:transform .35s,color .35s}
.button>span:last-child{transition:transform .3s}.button:hover>span:last-child{transform:translate(3px,-3px)}
.text-link{position:relative}.text-link:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .35s}.text-link:hover:after{transform:scaleX(1)}
.faq summary:after{transition:transform .3s}.faq details[open] summary:after{content:'+';transform:rotate(45deg)}
.faq details[open]>p{animation:answer-in .3s ease-out}
.connection-inner.revealed .wire{transform-origin:left;animation:thread-in 1.1s .2s both}
.connection-inner.revealed .wire:nth-of-type(2){animation-delay:.6s}
.closing.revealed>img{animation:goodbye-kite 4s ease-in-out 2}
.page-hidden *{animation-play-state:paused!important}
@keyframes arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes arrive-art{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}
@keyframes bubble-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes answer-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@keyframes thread-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes goodbye-kite{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(5deg) translateY(-7px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-pending{opacity:1;translate:none}.hero-art{transform:none}}