/* 4Design Motion — instrument badges */
.fdt{width:100%;height:100%;display:grid;place-items:center}
.fdt svg{width:100%;height:100%;overflow:visible}
.fdt .t-bg{fill:#0f2f35;stroke:rgba(143,201,196,.35);stroke-width:1}
.fdt-business .t-bg{fill:url(#fdtbg-business)}.fdt-design .t-bg{fill:url(#fdtbg-design)}.fdt-marketing .t-bg{fill:url(#fdtbg-marketing)}
.fdt-art .t-bg{fill:url(#fdtbg-art)}.fdt-photography .t-bg{fill:url(#fdtbg-photography)}.fdt-printing .t-bg{fill:url(#fdtbg-printing)}.fdt-cta .t-bg{fill:url(#fdtbg-cta)}.fdt-tech .t-bg{fill:url(#fdtbg-tech)}
.fdt .t-ticks line{stroke:rgba(143,201,196,.45);stroke-width:1}
.fdt .t-orbit{fill:none;stroke:rgba(143,201,196,.16);stroke-width:1}
.fdt .t-arc{fill:none;stroke:#9d84d0;stroke-width:2;stroke-linecap:round}
.fdt .t-icon *{vector-effect:non-scaling-stroke}
.fdt .t-grid line,.fdt .t-thin,.fdt .t-handle{stroke:rgba(143,201,196,.32);stroke-width:1;fill:none}
.fdt .t-draw{fill:none;stroke:#8fc9c4;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.fdt .t-thick{stroke-width:4;stroke:#62d9d6}
.fdt .t-bar{fill:rgba(143,201,196,.22);stroke:#8fc9c4;stroke-width:1.2;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.fdt .t-hot{fill:rgba(157,132,208,.45);stroke:#9d84d0}
.fdt .t-ping,.fdt .t-blip,.fdt .t-swatch{fill:#62d9d6;opacity:0}
.fdt .t-acc{fill:#9d84d0;stroke:#9d84d0}
.fdt .t-marquee{fill:none;stroke:rgba(143,201,196,.45);stroke-width:1;stroke-dasharray:4 4}
.fdt .t-node{fill:#0f2f35;stroke:#8fc9c4;stroke-width:1.4}
.fdt .t-wedge{fill:rgba(98,217,214,.16)}.fdt .t-beam{stroke:#62d9d6;stroke-width:1.6}
.fdt .t-sweep,.fdt .t-iris,.fdt .t-ticks,.fdt .t-arc,.fdt .t-sat{transform-box:view-box;transform-origin:100px 100px}
.fdt .t-iris line{stroke:#8fc9c4;stroke-width:1.6}
.fdt .t-bracket{fill:none;stroke:#62d9d6;stroke-width:2;stroke-linecap:round}
.fdt .t-rec{fill:#ff5d6c;opacity:0}
.fdt .t-body{fill:rgba(143,201,196,.10);stroke:#8fc9c4;stroke-width:1.6}
.fdt .t-head{stroke:#62d9d6;stroke-width:3;stroke-linecap:round}
.fdt .t-sheet rect{fill:rgba(230,243,241,.10);stroke:rgba(143,201,196,.6);stroke-width:1}
.fdt .t-ln{stroke:#8fc9c4;stroke-width:1.6;stroke-dasharray:50;stroke-dashoffset:50}
.fdt .t-cmyk{opacity:.25}
.fdt .t-lon{fill:none;stroke:rgba(143,201,196,.4);stroke-width:1;transform-box:view-box;transform-origin:100px 100px}
.fdt .t-sat circle{fill:#9d84d0}
.fdt .t-cursor{fill:#62d9d6;opacity:0}

/* boot-up: runs once when the badge enters the screen */
.fdt.is-on .t-draw{animation:fdt-draw 1.4s cubic-bezier(.6,0,.2,1) var(--d,0s) forwards}
.fdt.is-on .t-bar{animation:fdt-grow .7s cubic-bezier(.2,.8,.2,1) var(--d,0s) forwards}
.fdt.is-on .t-ping{animation:fdt-in .3s 1.2s forwards,fdt-pulse 2.4s 1.5s ease-in-out infinite}
.fdt.is-on .t-swatch{animation:fdt-in .4s var(--d,0s) forwards}
.fdt.is-on .t-ln{animation:fdt-draw .6s ease var(--d,0s) forwards}
.fdt.is-on .t-head{animation:fdt-scan 1.6s ease-in-out infinite alternate}
.fdt.is-on .t-cmyk{animation:fdt-blink 1.6s var(--d,0s) infinite}
.fdt.is-on .t-sweep{animation:fdt-spin 3.2s linear infinite}
.fdt.is-on .t-blip{animation:fdt-blip 3.2s var(--d,0s) infinite}
.fdt.is-on .t-iris{animation:fdt-iris 1.2s cubic-bezier(.6,0,.2,1) forwards}
.fdt.is-on .t-bracket{animation:fdt-focus 2.8s ease-in-out infinite;transform-box:view-box;transform-origin:100px 100px}
.fdt.is-on .t-rec{animation:fdt-blink 1.2s infinite}
.fdt.is-on .t-cursor{animation:fdt-in .1s 1.2s forwards,fdt-caret 1s 1.3s steps(1) infinite}
.fdt.is-on .t-ticks{animation:fdt-spin 40s linear infinite}
.fdt.is-on .t-arc{animation:fdt-spin 6s linear infinite reverse}
.fdt.is-on .t-lon{animation:fdt-globe 6s linear var(--d) infinite}
.fdt.is-on .t-sat{animation:fdt-spin 7s linear infinite}
.fdt.is-on .t-marquee{animation:fdt-ants 1s linear infinite}
@keyframes fdt-draw{to{stroke-dashoffset:0}}
@keyframes fdt-grow{to{transform:scaleY(1)}}
@keyframes fdt-in{to{opacity:1}}
@keyframes fdt-pulse{50%{opacity:.35}}
@keyframes fdt-spin{to{transform:rotate(360deg)}}
@keyframes fdt-blip{0%,8%{opacity:0}12%{opacity:1}45%{opacity:0}100%{opacity:0}}
@keyframes fdt-blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes fdt-scan{from{transform:translateX(0)}to{transform:translateX(54px)}}
@keyframes fdt-iris{from{transform:rotate(-90deg);opacity:0}to{transform:rotate(0);opacity:1}}
@keyframes fdt-focus{0%,100%{transform:scale(1)}50%{transform:scale(.92)}}
@keyframes fdt-globe{0%{transform:scaleX(1)}50%{transform:scaleX(.05)}100%{transform:scaleX(1)}}
@keyframes fdt-caret{50%{opacity:0}}
@keyframes fdt-ants{to{stroke-dashoffset:-16}}
@media (prefers-reduced-motion:reduce){
  .fdt *{animation:none!important}
  .fdt .t-draw,.fdt .t-ln{stroke-dashoffset:0}.fdt .t-bar{transform:none}.fdt .t-ping,.fdt .t-swatch,.fdt .t-blip,.fdt .t-rec,.fdt .t-cursor{opacity:1}
}