/* Shared motion language: short interactions, quiet entrances, no layout shifts. */
.studio-site{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-quick:220ms;--motion-enter:560ms}
html{scroll-behavior:smooth;scroll-padding-top:96px}
.studio-site :is(.s-button,.filter-tab,.account-trigger,.cart-button,.s-bank-row button,.admin-action,.admin-back,.account-submit){transition:transform var(--motion-quick) var(--motion-ease),background-color var(--motion-quick),border-color var(--motion-quick),box-shadow var(--motion-quick),color var(--motion-quick)}
.studio-site :is(.s-button,.admin-action,.account-submit):active{transform:translateY(1px) scale(.98)}
.studio-site .s-button>svg{transition:transform 280ms var(--motion-ease)}
.studio-site :is(.s-plan,.s-tool,.s-quick-links>a,.s-benefits a,.s-promo-grid>a,.s-home-connected,.s-bank,.s-legal a){transition:transform 320ms var(--motion-ease),box-shadow 320ms var(--motion-ease),border-color 240ms,background-color 240ms}
.studio-site :is(input,textarea,select){transition:border-color 200ms,box-shadow 200ms,background-color 200ms}
.studio-site :is(.modal-wrap,.s-search-dialog)::backdrop{animation:znet-backdrop 240ms ease both}
.studio-site .modal-wrap.open>.modal-card,.studio-site .s-search-dialog[open]{animation:znet-dialog 360ms var(--motion-ease) both}
.studio-site .modal-wrap{display:grid;visibility:hidden;pointer-events:none;transition:opacity 220ms ease,visibility 0s linear 220ms}
.studio-site .modal-wrap.open{visibility:visible;pointer-events:auto;transition-delay:0s}
.studio-site .main-nav.open{animation:znet-menu 280ms var(--motion-ease) both}
.studio-site .support-chat-panel{animation:znet-dialog 340ms var(--motion-ease) both}
.studio-site .cart-drawer{transition:transform 420ms var(--motion-ease),visibility 420ms}
.studio-site .cart-drawer.open{transition:transform 420ms var(--motion-ease),visibility 0s}
.studio-site :is(.s-footer summary,.s-footer a,.s-footer button){transition:color 180ms,background-color 180ms}
.studio-site .s-footer details[open]>div{animation:znet-menu 240ms var(--motion-ease) both}
@media(hover:hover) and (pointer:fine){
 .studio-site :is(.s-button,.account-trigger,.cart-button,.admin-action):hover{transform:translateY(-2px);box-shadow:0 7px 18px #007cc01c}
 .studio-site .s-button:hover>svg{transform:translateX(3px)}
 .studio-site :is(.s-plan,.s-tool,.s-quick-links>a,.s-benefits a,.s-promo-grid>a,.s-home-connected):hover{transform:translateY(-4px);box-shadow:0 12px 26px #11457612}
 .studio-site .s-legal a:hover{transform:translateX(3px);border-color:#007cc055}
 .studio-site .main-nav>a{background-image:linear-gradient(#007cc0,#007cc0);background-size:0 2px;background-position:50% 100%;background-repeat:no-repeat;transition:color 180ms,background-size 260ms var(--motion-ease)}
 .studio-site .main-nav>a:hover,.studio-site .main-nav>a[aria-current=page]{background-size:100% 2px}
}
/* Only visible artwork moves; JS pauses the loops outside the viewport. */
.studio-site .motion-art-active>.s-art-vector{animation:znet-float 6.5s ease-in-out infinite}
.studio-site .motion-art-active.s-link-antenna>.s-art-vector{animation-delay:-2s}
.studio-site.motion-paused .motion-art-active>.s-art-vector{animation-play-state:paused}
@keyframes znet-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes znet-dialog{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes znet-menu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes znet-backdrop{from{opacity:0}to{opacity:1}}
/* Coverage signals travel between the existing locations without moving labels. */
.studio-site .s-region-map .s-region-routes{animation:znet-route-flow 5.4s linear infinite;animation-play-state:paused}
.studio-site .s-region-map .s-region-halo{fill:#007cc012;stroke:#007cc045;stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:znet-map-signal 3.6s ease-out infinite;animation-play-state:paused}
.studio-site .s-region-map .s-region-halo:nth-of-type(3n+1){animation-delay:-1.2s}
.studio-site .s-region-map .s-region-halo:nth-of-type(3n+2){animation-delay:-2.4s}
.studio-site .s-region-map.motion-art-active :is(.s-region-routes,.s-region-halo){animation-play-state:running}
.studio-site .s-phone-front.motion-art-active{animation:znet-device-drift 7s ease-in-out infinite}
.studio-site.motion-paused :is(.s-region-routes,.s-region-halo,.s-phone-front.motion-art-active){animation-play-state:paused!important}
.studio-site :is(.s-tool>span,.s-quick-links>a>span,.s-benefits a>span){transition:translate 300ms var(--motion-ease),color 240ms}
@media(hover:hover) and (pointer:fine){
 .studio-site :is(.s-tool,.s-quick-links>a,.s-benefits a):hover>span{translate:0 -3px}
 .studio-site .s-coverage:hover .s-coverage-tag>svg{translate:0 -3px}
}
.studio-site .s-coverage-tag>svg{transition:translate 320ms var(--motion-ease)}
@keyframes znet-route-flow{to{stroke-dashoffset:-90}}
@keyframes znet-map-signal{0%{transform:scale(.85);opacity:.85}65%,100%{transform:scale(1.65);opacity:0}}
@keyframes znet-device-drift{0%,100%{translate:0 0}50%{translate:0 -4px}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .studio-site *,.studio-site *::before,.studio-site *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}