/* An idea becomes a digital product. All tracks share one twelve-second cycle. */
.dp-digital-art { display:block; width:100%; height:auto; overflow:visible; }
.dp-digital-core { transform-origin:250px 218px; opacity:0; }
.dp-digital-core-float { transform-origin:250px 210px; }
.dp-digital-browser { transform-origin:245px 258px; }
.dp-digital-phone { transform-origin:341px 330px; }
.dp-digital-complete { transform-origin:379px 157px; }
.dp-digital-wireframe { opacity:0; }
.dp-digital-wireframe path { stroke-dasharray:100; stroke-dashoffset:100; }
.dp-digital-network { transform-origin:246px 254px; opacity:0; }
.dp-digital-signal { stroke-dasharray:5 95; stroke-dashoffset:0; opacity:.8; }
.dp-digital-stages { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:-14px; padding-inline:3px; }
.dp-digital-stage { display:flex; align-items:center; gap:5px; color:#677f70; white-space:nowrap; font-size:11px; line-height:1.8; }
.dp-digital-stage+.dp-digital-stage::before { content:''; width:12px; height:1px; background:#cfdfd4; margin-inline-end:3px; }
.dp-digital-stage i { display:grid; place-items:center; flex-shrink:0; width:20px; height:20px; border-radius:50%; border:1px solid #dce8df; color:#72937f; background:#fff; font-size:8px; font-weight:600; font-style:normal; }
.dp-digital-stage--3 { color:#087e65; }
.dp-digital-stage--3 i { color:#087e65; background:#e8f4ed; border-color:#c8e5d4; }

@media(prefers-reduced-motion:no-preference) {
    .dp-digital-core { animation:dp-digital-transform 12s cubic-bezier(.45,0,.2,1) infinite; }
    .dp-digital-core-float { animation:dp-digital-breathe 4s ease-in-out infinite; }
    .dp-digital-browser { animation:dp-digital-build 12s cubic-bezier(.2,.8,.2,1) infinite; }
    .dp-digital-content { animation:dp-digital-content-in 12s ease infinite; }
    .dp-digital-tiles { animation:dp-digital-tiles-in 12s ease infinite; }
    .dp-digital-phone { animation:dp-digital-mobile 12s cubic-bezier(.2,.8,.2,1) infinite; }
    .dp-digital-complete { animation:dp-digital-launch 12s cubic-bezier(.2,.8,.2,1) infinite; }
    .dp-digital-wireframe { animation:dp-digital-blueprint 12s ease infinite; }
    .dp-digital-wireframe path { animation:dp-digital-draw 12s ease infinite; }
    .dp-digital-network { animation:dp-digital-network 12s ease infinite; }
    .dp-digital-floor { animation:dp-digital-ground 12s ease infinite; }
    .dp-digital-signal { animation:dp-digital-flow 3s linear infinite; }
    .dp-digital-signal--b { animation-delay:-.75s; }
    .dp-digital-signal--c { animation-delay:-1.5s; }
    .dp-digital-signal--d { animation-delay:-2.25s; }
    .dp-digital-tool { animation:dp-digital-float 6s ease-in-out infinite; }
    .dp-digital-tool--code { animation-delay:-1.5s; }
    .dp-digital-tool--layers { animation-delay:-3s; }
    .dp-digital-tool--launch { animation-delay:-4.5s; }
    .dp-digital-satellites { animation:dp-digital-glint 6s ease-in-out infinite; }
    .dp-digital-stage { animation:dp-digital-label 12s linear infinite; }
    .dp-digital-stage i { animation:dp-digital-step 12s linear infinite; }
    .dp-digital-stage--1,.dp-digital-stage--1 i { animation-delay:0s; }
    .dp-digital-stage--2,.dp-digital-stage--2 i { animation-delay:-8s; }
    .dp-digital-stage--3,.dp-digital-stage--3 i { animation-delay:-4s; }
}
@keyframes dp-digital-transform {
    0%,18%,100% { opacity:1; transform:scale(1); }
    22% { opacity:1; transform:scale(1.045); }
    29%,93% { opacity:0; transform:scale(.72); }
}
@keyframes dp-digital-breathe {
    0%,100% { transform:translateY(0); }
    50% { transform:translateY(-7px); }
}
@keyframes dp-digital-blueprint {
    0%,39%,64%,100% { opacity:0; }
    43%,54% { opacity:.85; }
}
@keyframes dp-digital-draw {
    0%,40%,100% { stroke-dashoffset:100; }
    54%,94% { stroke-dashoffset:0; }
}
@keyframes dp-digital-network {
    0%,25%,100% { opacity:1; transform:rotate(0); }
    44%,49% { opacity:1; transform:rotate(-5deg); }
    61%,92% { opacity:0; transform:rotate(-5deg); }
    94% { opacity:0; transform:rotate(0); }
}
@keyframes dp-digital-build {
    0%,49%,100% { opacity:0; transform:translateY(0) scale(1); }
    61%,85% { opacity:1; transform:translateY(0) scale(1); }
    93% { opacity:0; transform:translateY(-10px) scale(.97); }
}
@keyframes dp-digital-content-in {
    0%,54%,100% { opacity:0; transform:translateY(9px); }
    67%,91% { opacity:1; transform:translateY(0); }
}
@keyframes dp-digital-tiles-in {
    0%,59%,100% { opacity:0; transform:translateY(10px); }
    71%,91% { opacity:1; transform:translateY(0); }
}
@keyframes dp-digital-mobile {
    0%,62%,100% { opacity:0; transform:translate(16px,30px) rotate(5deg) scale(.9); }
    74%,85% { opacity:1; transform:translate(0,0) rotate(0) scale(1); }
    92% { opacity:0; transform:translate(5px,-12px) rotate(0) scale(.98); }
}
@keyframes dp-digital-launch {
    0%,72%,100% { opacity:0; transform:translateY(8px) scale(.65); }
    79% { opacity:1; transform:translateY(0) scale(1.08); }
    82%,86% { opacity:1; transform:translateY(0) scale(1); }
    91% { opacity:0; transform:translateY(-6px) scale(.9); }
}
@keyframes dp-digital-ground { 0%,29%,100% { opacity:.02; } 49%,88% { opacity:.06; } }
@keyframes dp-digital-flow { from { stroke-dashoffset:100; } to { stroke-dashoffset:0; } }
@keyframes dp-digital-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes dp-digital-glint { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@keyframes dp-digital-label { 0%,29% { color:#087e65; } 34%,100% { color:#677f70; } }
@keyframes dp-digital-step {
    0%,29% { color:#087e65; background:#e8f4ed; border-color:#a8d7be; }
    34%,100% { color:#72937f; background:#fff; border-color:#dce8df; }
}
@media(min-width:768px) and (max-width:1023px) {
    .dp-digital-stages { flex-wrap:wrap; gap:5px; }
    .dp-digital-stage { font-size:9px; gap:3px; }
    .dp-digital-stage+.dp-digital-stage::before { display:none; }
    .dp-digital-stage i { width:16px; height:16px; font-size:7px; }
}
@media(max-width:767px) {
    .dp-digital-stage { font-size:10px; }
    .dp-digital-stages { gap:5px; }
    .dp-digital-stage+.dp-digital-stage::before { width:8px; margin-inline-end:1px; }
}