@import url('base.css');
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.motion-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.motion-line>span{display:block}
.hero-utility{display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap;margin-top:23px}
.hero-utility .hero-note{margin:0}
#motion-toggle{border:0;border-bottom:1px solid #91b6bb;background:none;color:#d6e7e7;padding:3px 0;font-size:10px;line-height:1.5;white-space:nowrap}
#motion-toggle:disabled{cursor:default;border-bottom:0;color:#b9d4d7}
[data-motion="on"].intro-play .motion-line>span{animation:line-enter 850ms var(--motion-ease) var(--line-delay) both}
[data-motion="on"].intro-play .hero .eyebrow{animation:soft-enter 650ms var(--motion-ease) both}
[data-motion="on"] .photo{translate:var(--depth-x,0px) var(--depth-y,0px)}
[data-motion="on"] .photo-network{animation:float-network 9s ease-in-out 1s infinite}
[data-motion="on"] .photo-software{animation:float-software 10s ease-in-out 1s infinite}
[data-motion="on"].intro-play .photo-network{animation:photo-enter 1000ms var(--motion-ease) 100ms both,float-network 9s ease-in-out 1s infinite}
[data-motion="on"].intro-play .photo-software{animation:photo-enter 1000ms var(--motion-ease) 260ms both,float-software 10s ease-in-out 1.2s infinite}
[data-motion="on"].intro-play .connection-art path:first-of-type{stroke-dasharray:1000;animation:connection-draw 1700ms var(--motion-ease) 200ms both}
[data-motion="on"] .connection-tag{translate:var(--tag-x,0px) var(--tag-y,0px)}
[data-motion="on"][data-hero-visible="false"] .hero .photo{animation-play-state:paused}
[data-motion="on"] [data-reveal]{transition:opacity 650ms var(--motion-ease) var(--reveal-delay,0ms),transform 750ms var(--motion-ease) var(--reveal-delay,0ms)}
[data-motion="on"] [data-reveal]:not(.is-revealed){opacity:0;transform:translateY(25px)}
[data-motion="on"] .button span,[data-motion="on"] .arrow-link span,[data-motion="on"] .header-cta span{transition:transform 240ms var(--motion-ease)}
[data-motion="on"] .button:hover span,[data-motion="on"] .arrow-link:hover span,[data-motion="on"] .header-cta:hover span{transform:translate(3px,-3px)}
@keyframes line-enter{from{opacity:0;transform:translateY(108%)}to{opacity:1;transform:translateY(0)}}
@keyframes soft-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes photo-enter{from{opacity:0;clip-path:inset(16% 0 0 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes float-network{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-.35deg)}}
@keyframes float-software{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(8px) rotate(.35deg)}}
@keyframes connection-draw{from{stroke-dashoffset:1000;opacity:.15}to{stroke-dashoffset:0;opacity:1}}
@media(max-width:860px){
  .hero-utility{gap:8px 15px}
  [data-motion="on"] .photo{translate:none}
  [data-motion="on"] .connection-tag{translate:none}
  @keyframes float-network{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  @keyframes float-software{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .motion-line>span,[data-reveal]{opacity:1!important;transform:none!important}
  .photo,.connection-tag{translate:none!important}
  .photo{clip-path:none!important}
}
@media print{.motion-line>span,[data-reveal],.photo{opacity:1!important;transform:none!important;translate:none!important;clip-path:none!important;animation:none!important}#motion-toggle{display:none}}