/* Particles */

.particle-col {
  height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.particle-holder {
  width: 50%;
  aspect-ratio: 1/1;
  position: absolute;
  z-index: 0;
}

.particle {
  width: 1px;
  height: 1px;
  border-radius: 50%;
  position: absolute;
  animation: movement 5s linear infinite;
  -moz-animation: movement 5s linear infinite;
  -webkit-animation: movement 5s linear infinite;
  box-shadow: 0 0 2px white;
}

.particle {
  background: rgb(255,255,255,.75);
}

/* Masks */

.mask-front .particle {
  width: 2px;
  height: 2px;
}

.mask-middle .particle {
  width: 1.5px;
  height: 1.5px;
}

.mask {
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center center;
}

.mask-front {
  background: linear-gradient(rgb(0,0,0) 15%,rgb(255,255,255,0.2));
  background: linear-gradient(rgb(0,0,0) 15%,rgb(255,255,255,0.2));
  background-size: 450% 450%;
  animation: backgroundAppear 5s ease infinite;
  -moz-animation: backgroundAppear 5s ease infinite;
  -webkit-animation: backgroundAppear 5s ease infinite;
}

.bg-darkblue .mask-front, .bg-gradient-blue .mask-front {
  background: linear-gradient(rgb(255,255,255,0), #0f1824);
  background-size: 450% 450%;
  animation: backgroundAppear 5s ease infinite;
  -moz-animation: backgroundAppear 5s ease infinite;
  -webkit-animation: backgroundAppear 5s ease infinite;
}

.mask-globe-terrain {
  mask-image: url('../../assets/img/masks/globe-terrain.png');
  -webkit-mask-image: url('../../assets/img/masks/globe-terrain.png');
  z-index: 3;
}

.mask-globe-ocean {
  mask-image: url('../../assets/img/masks/globe-ocean.png');
  -webkit-mask-image: url('../../assets/img/masks/globe-ocean.png');
  opacity: 0.6;
  z-index: 2;
}

.mask-circuit-board {
  mask-image: url('../../assets/img/masks/circuit-board.png');
  -webkit-mask-image: url('../../assets/img/masks/circuit-board.png');
  z-index: 3;
}

.mask-circuit-circle {
  mask-image: url('../../assets/img/masks/circuit-circle.png');
  -webkit-mask-image: url('../../assets/img/masks/circuit-circle.png');
  opacity: 0.6;
  z-index: 2;
}

.mask-lightbulb-bulb {
  mask-image: url('../../assets/img/masks/lightbulb-bulb.png');
  -webkit-mask-image: url('../../assets/img/masks/lightbulb-bulb.png');
  z-index: 3;
}

.mask-lightbulb-star {
  mask-image: url('../../assets/img/masks/lightbulb-star.png');
  -webkit-mask-image: url('../../assets/img/masks/lightbulb-star.png');
  opacity: 0.6;
  z-index: 2;
}

.mask-tree-data {
  mask-image: url('../../assets/img/masks/tree-data.png');
  -webkit-mask-image: url('../../assets/img/masks/tree-data.png');
  z-index: 3;
}

.mask-tree-branches {
  mask-image: url('../../assets/img/masks/tree-branches.png');
  -webkit-mask-image: url('../../assets/img/masks/tree-branches.png');
  opacity: 0.6;
  z-index: 2;
}

.mask-profile-gears {
  mask-image: url('../../assets/img/masks/profile-gears.png');
  -webkit-mask-image: url('../../assets/img/masks/profile-gears.png');
  z-index: 3;
}

.mask-profile-head {
  mask-image: url('../../assets/img/masks/profile-head.png');
  -webkit-mask-image: url('../../assets/img/masks/profile-head.png');
  opacity: 0.6;
  z-index: 2;
}

.mask-background {
  opacity: 0.4;
  z-index: 1;
}

.appear {
  animation: appear .25s ease;
  -moz-animation: appear .25s ease;
  -webkit-animation: appear .25s ease;
}

/* Animations */

@keyframes movement {
  0%, 5% {
    transform: translate(0, 0) scale(0);
  }
  10% {
    transform: translate(var(--moveX2), var(--moveY2)) scale(1);
  }
  90% {
    transform: translate(var(--moveX), var(--moveY)) scale(1.1);
  }
  95%, 100% {
    transform: translate(0, 0) scale(0);
  }
}

@keyframes rotate {
  0%, 100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg);
  }
}

@keyframes backgroundAppear {
  0%, 5%, 85%, 100% {
    background-position: 0% 0%;
    background-size: 600% 600%;
  }
  10%, 60%, 80% {
    background-position: 25% 50%;
    background-size: 600% 600%;
  }
  30% {
    background-position: 25% 75%;
    background-size: 600% 600%;
  }
}