:root{--anim-time:.8s;--anim-ease:cubic-bezier(.22, 1, .36, 1)}.hero-network{width:100%;max-width:520px;height:74vh;min-height:360px;max-height:600px;margin-inline:auto;position:relative}@media (max-width:1024px){.hero-network{max-width:420px;min-height:320px;max-height:520px}}@media (max-width:640px){.hero-network{max-width:350px;min-height:260px;max-height:400px}}.hero-center-card{width:260px;max-width:100%;animation:centerIn var(--anim-time) var(--anim-ease) forwards;z-index:2;backface-visibility:hidden;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.8)}@media (max-width:1024px){.hero-center-card{width:260px}}@media (max-width:640px){.hero-center-card{width:220px}}.hero-node{opacity:0;z-index:3;width:100px;max-width:100%;animation:nodeOut var(--anim-time) var(--anim-ease) forwards, nodeFloat 6s ease-in-out infinite;animation-delay:0s, var(--anim-time);will-change:transform, opacity;backface-visibility:hidden;transform-style:preserve-3d;background:#fff;border-radius:16px;place-items:center;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.3);box-shadow:0 10px 24px #00000014}@media (max-width:1024px){.hero-node{width:90px}}@media (max-width:640px){.hero-node{width:80px}}.hero-node:hover{transform:translate3d(calc(-50% + var(--tx)), calc(-50% + var(--ty)), 0) scale(1.05);z-index:4;box-shadow:0 12px 28px #0000001f,0 0 0 2px #6245e826}.n1{--tx:0px;--ty:-170px}.n2{--tx:190px;--ty:-110px}.n3{--tx:190px;--ty:110px}.n4{--tx:0px;--ty:170px}.n5{--tx:-190px;--ty:110px}.n6{--tx:-190px;--ty:-110px}@media (max-width:1024px){.n1{--tx:0px;--ty:-175px}.n2{--tx:175px;--ty:-125px}.n3{--tx:175px;--ty:125px}.n4{--tx:0px;--ty:175px}.n5{--tx:-175px;--ty:125px}.n6{--tx:-175px;--ty:-125px}}@media (max-width:767px){.n1{--tx:0px;--ty:-140px}.n2{--tx:150px;--ty:-100px}.n3{--tx:150px;--ty:100px}.n4{--tx:0px;--ty:140px}.n5{--tx:-150px;--ty:100px}.n6{--tx:-150px;--ty:-100px}}.hero-line{transform-origin:0;width:190px;height:1px;transform:rotate(var(--rot)) scaleX(0);animation:lineGrow var(--anim-time) var(--anim-ease) forwards;z-index:1;backface-visibility:hidden;background:repeating-linear-gradient(90deg,#000 0 4px,#0000 4px 8px);position:absolute;top:50%;left:50%}@media (max-width:1024px){.hero-line{width:150px}}@media (max-width:640px){.hero-line{width:150px}}.l1{--rot:-90deg}.l2{--rot:-30deg}.l3{--rot:30deg}.l4{--rot:90deg}.l5{--rot:150deg}.l6{--rot:-150deg}@keyframes centerIn{to{transform:translate(-50%,-50%)scale(1)}}@keyframes nodeOut{0%{opacity:0;transform:translate(-50%,-50%)scale(.3)}to{opacity:1;transform:translate3d(calc(-50% + var(--tx)), calc(-50% + var(--ty)), 0) scale(1)}}@keyframes lineGrow{0%{transform:rotate(var(--rot)) scaleX(0)}to{transform:rotate(var(--rot)) scaleX(1)}}@keyframes nodeFloat{0%,to{transform:translate3d(calc(-50% + var(--tx)), calc(-50% + var(--ty)), 0) scale(1)}50%{transform:translate3d(calc(-50% + var(--tx)), calc(-50% + var(--ty) - 6px), 0) scale(1)}}@media (prefers-reduced-motion:reduce){.hero-node,.hero-line,.hero-center-card{opacity:1;transform:none;animation:none!important}}.hero-center-card{animation:centerIn var(--anim-time) var(--anim-ease) forwards;animation-delay:.1s, calc(.1s + var(--anim-time))}.hero-node{animation:nodeOut var(--anim-time) var(--anim-ease) forwards, nodeFloat 6s ease-in-out infinite;animation-delay:.1s, calc(.1s + var(--anim-time))}.hero-line{animation:lineGrow var(--anim-time) var(--anim-ease) forwards;animation-delay:.1s}.n1{animation-delay:.1s, calc(.1s + var(--anim-time))}.n2{animation-delay:.18s, calc(.18s + var(--anim-time))}.n3{animation-delay:.26s, calc(.26s + var(--anim-time))}.n4{animation-delay:.34s, calc(.34s + var(--anim-time))}.n5{animation-delay:.42s, calc(.42s + var(--anim-time))}.n6{animation-delay:.5s, calc(.5s + var(--anim-time))}
