/* Finite entrances and deliberate interaction feedback. */
@keyframes underline-draw{from{scale:0 1}to{scale:1 1}}
.motion-ready .hero h1:after{transform-origin:left;animation:underline-draw .7s cubic-bezier(.22,1,.36,1) .35s backwards}
.cta,.hero-idea{transition:transform .25s cubic-bezier(.22,1,.36,1),background-color .2s,box-shadow .25s}
.cta span{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.cta:active{transform:translateY(1px) scale(.98)}
.hero-idea:active{transform:rotate(0) scale(.98)}
.faq-list summary span{transition:rotate .25s cubic-bezier(.22,1,.36,1)}
.faq-list details[open] summary span{rotate:180deg}
.desktop-nav a{position:relative}
.desktop-nav a:after{content:"";position:absolute;bottom:-5px;left:0;width:100%;height:2px;background:var(--blue);scale:0 1;transform-origin:left;transition:scale .25s}
@media(hover:hover) and (pointer:fine){.cta:hover{box-shadow:0 8px 20px color-mix(in srgb,var(--coral) 20%,transparent)}.cta:hover span{transform:translateX(5px)}.desktop-nav a:hover:after{scale:1 1}.photo-frame img,.possibility-list img{transition:transform .5s cubic-bezier(.22,1,.36,1)}.photo-frame:hover img,.possibility-list article:hover img{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-ready .hero h1:after{animation:none}*,*:before,*:after{transition:none!important}.cta:hover,.cta:active,.cta:hover span,.photo-frame:hover img,.possibility-list article:hover img{transform:none}.hero-idea:hover,.hero-idea:active{transform:rotate(-3deg)}}

@keyframes brand-route{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes brand-start{from{opacity:0;scale:.5}to{opacity:1;scale:1}}
@keyframes caption-appear{from{opacity:0}to{opacity:1}}
.motion-ready .header .brand-mark path{stroke-dasharray:100;animation:brand-route 1s cubic-bezier(.22,1,.36,1) .1s backwards}
.motion-ready .header .brand-mark circle{transform-box:fill-box;transform-origin:center;animation:brand-start .45s ease-out backwards}
.motion-ready .header .brand-mark circle:last-child{animation-delay:.15s}
.motion-ready .hero-caption{animation:caption-appear .8s ease-out .65s backwards}
@media(hover:hover) and (pointer:fine){.scene img{transition:transform .5s cubic-bezier(.22,1,.36,1)}.scene:hover img{transform:scale(1.015)}}
@media(prefers-reduced-motion:reduce){.motion-ready .header .brand-mark path,.motion-ready .header .brand-mark circle,.motion-ready .hero-caption,.motion-ready .hero h1:after{animation:none}.scene:hover img{transform:none}}