/* CODEFIX: four composited details; only two on mobile. No animation JS or WebGL. */
:root {
  --ambient-orbit-duration: 84s;
  --ambient-float-duration: 22s;
  --ambient-signal-duration: 11s;
  --ambient-scene-duration: 1100ms;
  --ambient-scene-ease: cubic-bezier(.22,.61,.36,1);
}
.tech-background {
  --ambient-orbit-x: 0px;
  --ambient-orbit-y: 0px;
  --ambient-orbit-turn: -12deg;
  --ambient-prism-y: 0px;
}
.tech-background::before, .tech-background::after, body::before, body::after {
  content: "";
  display: block;
  position: fixed;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  transform-origin: center;
}
.tech-background::before {
  position: absolute;
  width: clamp(280px,35vw,480px);
  aspect-ratio: 1;
  top: 9vh;
  right: -7vw;
  background-image: url("./orbit.svg");
  opacity: .78;
  translate: var(--ambient-orbit-x) var(--ambient-orbit-y);
  rotate: var(--ambient-orbit-turn);
  animation: codefix-orbit var(--ambient-orbit-duration) linear infinite;
  transition: translate var(--ambient-scene-duration) var(--ambient-scene-ease), rotate var(--ambient-scene-duration) var(--ambient-scene-ease);
}
.tech-background::after {
  position: absolute;
  width: 126px;
  height: 152px;
  left: -38px;
  top: 48vh;
  background-image: url("./prism.svg");
  opacity: .65;
  translate: 0 var(--ambient-prism-y);
  animation: codefix-float var(--ambient-float-duration) ease-in-out infinite alternate;
  transition: translate var(--ambient-scene-duration) var(--ambient-scene-ease);
}
body::before {
  z-index: 1;
  width: 70px;
  height: 84px;
  left: 13vw;
  top: 17vh;
  background-image: url("./pixels.svg");
  opacity: .6;
  animation: codefix-float 28s ease-in-out -9s infinite alternate-reverse;
}
body::after {
  z-index: 1;
  width: 270px;
  height: 93px;
  right: 3vw;
  bottom: 15vh;
  background-image: url("./signal.svg");
  animation: codefix-signal var(--ambient-signal-duration) ease-in-out -4s infinite alternate;
}
.tech-background[data-scene="integrations"] { --ambient-orbit-x: -34px; --ambient-orbit-y: 32px; --ambient-orbit-turn: 20deg; --ambient-prism-y: -24px; }
.tech-background[data-scene="commerce"] { --ambient-orbit-x: 18px; --ambient-orbit-y: 70px; --ambient-orbit-turn: 46deg; --ambient-prism-y: 25px; }
.tech-background[data-scene="clients"] { --ambient-orbit-x: -20px; --ambient-orbit-y: -24px; --ambient-orbit-turn: -30deg; --ambient-prism-y: 36px; }
.tech-background[data-scene="technologies"] { --ambient-orbit-x: -44px; --ambient-orbit-y: 20px; --ambient-orbit-turn: 34deg; --ambient-prism-y: -32px; }
.tech-background[data-scene="contact"] { --ambient-orbit-x: 24px; --ambient-orbit-y: 50px; --ambient-orbit-turn: 60deg; --ambient-prism-y: 12px; }
@keyframes codefix-orbit { to { transform: rotate(360deg); } }
@keyframes codefix-float { from { transform: translate3d(0,0,0) rotate(-6deg); } to { transform: translate3d(12px,-24px,0) rotate(8deg); } }
@keyframes codefix-signal { from { transform: translate3d(-14px,4px,0); opacity: .32; } to { transform: translate3d(12px,-4px,0); opacity: .72; } }
html[data-menu-open] .tech-background::before, html[data-menu-open] .tech-background::after,
html[data-menu-open] body::before, html[data-menu-open] body::after,
html[data-audit-open] .tech-background::before, html[data-audit-open] .tech-background::after,
html[data-audit-open] body::before, html[data-audit-open] body::after { animation-play-state: paused; }
@media (max-width: 767px), (pointer: coarse) {
  .tech-background::before { width: 230px; right: -118px; top: 90px; opacity: .65; }
  .tech-background::after, body::before { content: none; display: none; animation: none; }
  body::after { width: 175px; height: 61px; right: 0; bottom: 22vh; background-position: 60px 0; }
  .tech-background[data-scene] { --ambient-orbit-x: 0px; --ambient-orbit-y: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-background::before, .tech-background::after, body::before, body::after { animation: none; transition: none; opacity: .22; }
}