/* The reference's moving gradient and its halo share the same fine contour. */
@property --copper-progress { syntax:'<number>'; initial-value:0; inherits:true; }
@property --copper-loop { syntax:'<number>'; initial-value:0; inherits:true; }
#ipit-motion { --copper-light:#cf8650; --copper-glow:#d98955; --copper-line-glow:drop-shadow(0 0 3px #e6a06acc) drop-shadow(0 0 7px #d9895577); }
html[data-theme=dark] #ipit-motion { --copper-light:#ffd5ac; }
#ipit-motion .copper-host { position:relative; }
#ipit-motion .copper-sweep { position:absolute; top:-1px; left:0; right:0; height:1px; pointer-events:none; z-index:2; }
#ipit-motion .copper-sweep.copper-bottom { top:auto; bottom:-1px; }
#ipit-motion .copper-sweep::before { content:''; display:block; height:1px; margin:0; background:var(--copper-line-paint); background-size:300% 100%; background-repeat:no-repeat; filter:var(--copper-line-glow); animation:copper-travel var(--copper-duration,1s) linear infinite paused; }
#ipit-motion .copper-sweep.copper-running::before { animation-play-state:running; }
@keyframes copper-travel { from { background-position:75% 0; } to { background-position:7.75% 0; } }
#ipit-motion .gateway-it.copper-frame { position:relative;overflow:visible;border:1px solid #94502d55;background:#053d3a;--copper-light:#ffe0bd; }
#ipit-motion .copper-button { position:relative; }
#ipit-motion .copper-button > svg.copper-perimeter { filter:var(--copper-line-glow); }
#ipit-motion svg.copper-perimeter { position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); max-width:none; overflow:visible; pointer-events:none; filter:drop-shadow(0 0 1px #ffd5accc) drop-shadow(0 0 4px #d9895599); animation:copper-perimeter var(--copper-duration,1s) linear infinite paused; }
#ipit-motion .copper-button:disabled > svg.copper-perimeter { display:none; }
#ipit-motion .copper-running > svg.copper-perimeter { animation-play-state:running; }
#ipit-motion .copper-perimeter path { stroke-width:1; stroke-linecap:butt; stroke-dashoffset:calc(var(--copper-loop) + var(--comet-lag)); }
@keyframes copper-perimeter { to { --copper-loop:-1; } }
#ipit-motion .copper-action .im-link-arrow { transition:transform .45s ease; }
#ipit-motion .copper-action:is(:hover,:focus-visible) .im-link-arrow { transform:translate(2px,-2px); }
#ipit-motion .partner-link.copper-connection { position:relative; }
#ipit-motion .partner-link.copper-connection > svg:not(.copper-flow) { transform:none; transition:none; }
#ipit-motion .partner-link.copper-connection span::before { display:none; }
#ipit-motion .partner-link.copper-connection > svg.copper-flow { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; transform:none; }
#ipit-motion .copper-flow-band { transform-box:view-box; animation:copper-flow var(--copper-duration,1s) linear infinite paused; }
#ipit-motion .copper-connection.copper-running .copper-flow-band { animation-play-state:running; }
@keyframes copper-flow { from { transform:translateX(-60%); } to { transform:translateX(100%); } }
@container(max-width:600px) { #ipit-motion .partner-link.copper-connection > svg:not(.copper-flow) { transform:rotate(-90deg); } #ipit-motion .copper-flow-symbol { transform:rotate(-90deg); transform-origin:16px 16px; } }
#ipit-motion .build-wire-comet { filter:drop-shadow(0 0 1px #e8a46d88); animation:copper-wire var(--copper-duration,1s) linear infinite paused; }
#ipit-motion .build-wire-comet.copper-running { animation-play-state:running; }
#ipit-motion .build-comet-segment { fill:none; stroke-width:.9; stroke-linecap:butt; stroke-dashoffset:calc(var(--copper-progress) + var(--comet-lag)); }
@keyframes copper-wire { from { --copper-progress:0; } to { --copper-progress:var(--copper-wire-end,-1.32); } }
#ipit-motion .device-screen .build-wire-comet,#ipit-motion .device-screen .copper-sweep,#ipit-motion .device-screen .copper-perimeter,#ipit-motion .device-screen .copper-flow { display:none; }

@media(max-width:760px) {
 #ipit-motion svg.copper-perimeter { filter:drop-shadow(0 0 1px #ffd5acbb) drop-shadow(0 0 3px #d9895588); }
 #ipit-motion { --copper-line-glow:drop-shadow(0 0 2px #dc965fbb) drop-shadow(0 0 5px #d9874e66); }
 #ipit-motion .build-wire-comet { filter:drop-shadow(0 0 1px #e8a46d77); }
}
@media(prefers-reduced-motion:reduce) {
 #ipit-motion .copper-sweep,#ipit-motion .copper-perimeter,#ipit-motion .copper-flow,#ipit-motion .build-wire-comet { display:none; }
 #ipit-motion .copper-action:is(:hover,:focus-visible) .im-link-arrow { transform:none; }
}
