/* DID VOIP motion system: network pulses, orbital motion, and progressive reveals. */
:root { --pointer-x: 0px; --pointer-y: 0px; }
.aurora { position:absolute; width:220px; height:220px; border-radius:50%; filter:blur(26px); pointer-events:none; z-index:0; opacity:.42; mix-blend-mode:multiply; }
.aurora-one { top:8%; left:8%; background:#93b9ff; animation:auroraDrift 11s ease-in-out infinite alternate; }
.aurora-two { right:4%; bottom:8%; width:180px; height:180px; background:#c9f68a; opacity:.3; animation:auroraDrift 14s ease-in-out -5s infinite alternate-reverse; }
.network-grid { position:absolute; inset:9% 4%; z-index:0; opacity:.28; background-image:linear-gradient(#8eb4fa 1px,transparent 1px),linear-gradient(90deg,#8eb4fa 1px,transparent 1px); background-size:38px 38px; mask-image:radial-gradient(circle at 50% 50%,#000 10%,transparent 68%); animation:gridDrift 18s linear infinite; }
.hero-visual::before,.hero-visual::after { content:""; position:absolute; pointer-events:none; border-radius:50%; z-index:0; }
.hero-visual::before { width:9px; height:9px; background:var(--lime); top:24%; left:20%; box-shadow:145px 44px 0 -2px #7aa9ff, 280px 132px 0 -2px #c7ff6d, 80px 300px 0 -2px #78a6f8; animation:nodePulse 3.6s ease-in-out infinite; }
.hero-visual::after { inset:12% 4%; border:1px solid #d9e7ff; transform:rotate(-11deg); animation:contourShift 10s ease-in-out infinite alternate; }
.globe { z-index:1; transform:translate(-50%,-50%) translate3d(var(--pointer-x),var(--pointer-y),0); animation:worldFloat 7s ease-in-out infinite; will-change:transform; }
.orbit { z-index:0; will-change:transform; }.orbit-one { animation:orbitOne 18s linear infinite; }.orbit-two { animation:orbitTwo 24s linear infinite; }.orbit-three { animation:orbitThree 32s linear infinite reverse; }
.signal,.floating-card { z-index:2; }.signal-one { animation:signalBob 4s ease-in-out infinite; }.signal-two { animation:signalBob 4.8s ease-in-out -1.5s infinite; }.card-uptime { animation:cardFloat 5.4s ease-in-out infinite; }.card-nodes { animation:cardFloat 6.1s ease-in-out -2.2s infinite; }
.data-stream { position:absolute; z-index:2; display:flex; gap:7px; align-items:center; pointer-events:none; }
.data-stream i { display:block; width:6px; height:6px; border-radius:50%; background:#d5e6ff; box-shadow:0 0 11px #4785ff; animation:packetMove 2.8s ease-in-out infinite; }
.data-stream i:nth-child(2) { animation-delay:.25s; }.data-stream i:nth-child(3) { animation-delay:.5s; }
.stream-one { top:24%; right:19%; transform:rotate(-33deg); }.stream-two { bottom:23%; left:19%; transform:rotate(145deg); }
.hero-copy > * { animation:riseIn .8s both; }.hero-copy > .eyebrow { animation-delay:.06s; }.hero-copy > h1 { animation-delay:.14s; }.hero-copy > .hero-text { animation-delay:.23s; }.hero-copy > .hero-actions { animation-delay:.33s; }.hero-copy > .hero-proof { animation-delay:.43s; }
.service-card,.scenario-list article,.button,.nav-cta { transition:transform .28s cubic-bezier(.2,.75,.25,1),box-shadow .28s ease,background-color .28s ease; }.service-card:hover { transform:translateY(-8px); box-shadow:0 19px 35px #1f4a8520; }.scenario-list article:hover { box-shadow:0 9px 23px #1f4a8512; }.button:hover,.nav-cta:hover { box-shadow:0 10px 20px #2768f438; }
.motion-ready .reveal { opacity:0; transform:translateY(24px); }.motion-ready .reveal.is-visible { opacity:1; transform:translateY(0); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.25,1); }.motion-ready .reveal.is-visible:nth-child(2) { transition-delay:.1s; }.motion-ready .reveal.is-visible:nth-child(3) { transition-delay:.2s; }
.contact { position:relative; overflow:hidden; }.contact::after { content:""; position:absolute; width:530px; height:530px; border:1px solid #ffffff2e; border-radius:50%; right:-170px; top:-220px; animation:slowOrbit 16s linear infinite; }.contact > * { position:relative; z-index:1; }
@keyframes worldFloat { 0%,100% { transform:translate(-50%,-50%) translate3d(var(--pointer-x),var(--pointer-y),0) scale(1); } 50% { transform:translate(-50%,-50%) translate3d(var(--pointer-x),calc(var(--pointer-y) - 10px),0) scale(1.025); } }
@keyframes auroraDrift { from { transform:translate3d(-16px,10px,0) scale(.86); } to { transform:translate3d(44px,-28px,0) scale(1.16); } }
@keyframes gridDrift { from { background-position:0 0,0 0; } to { background-position:38px 38px,38px 38px; } }
@keyframes packetMove { 0%,100% { opacity:.18; transform:translateX(-7px) scale(.72); } 48% { opacity:1; transform:translateX(8px) scale(1.18); } }
@keyframes orbitOne { from { transform:translate(-50%,-50%) rotate(-28deg); } to { transform:translate(-50%,-50%) rotate(332deg); } } @keyframes orbitTwo { from { transform:translate(-50%,-50%) rotate(34deg); } to { transform:translate(-50%,-50%) rotate(394deg); } } @keyframes orbitThree { from { transform:translate(-50%,-50%) rotate(75deg); } to { transform:translate(-50%,-50%) rotate(435deg); } }
@keyframes cardFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-11px); } } @keyframes signalBob { 0%,100% { opacity:.8; } 50% { opacity:1; filter:drop-shadow(0 0 7px #a0c6ff); } } @keyframes nodePulse { 0%,100% { opacity:.6; box-shadow:145px 44px 0 -2px #7aa9ff,280px 132px 0 -2px #c7ff6d,80px 300px 0 -2px #78a6f8; } 50% { opacity:1; box-shadow:145px 44px 0 2px #7aa9ff,280px 132px 0 2px #c7ff6d,80px 300px 0 2px #78a6f8; } } @keyframes contourShift { from { transform:rotate(-11deg) scale(.96); opacity:.45; } to { transform:rotate(8deg) scale(1.05); opacity:.9; } } @keyframes riseIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } } @keyframes slowOrbit { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } .motion-ready .reveal { opacity:1; transform:none; } }