.cube-loader {
  width: 50px;
  height: 50px;
  position: relative;
  transform-style: preserve-3d;
  animation: spinCubes 2s linear infinite;
}
@keyframes spinCubes {
  to {
    transform: rotateY(360deg) rotateX(360deg);
  }
}
.cube {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid #2e8eff;
  transform-style: preserve-3d;
}
.cube:nth-child(2) {
  transform: rotateY(45deg) rotateX(45deg) scale(0.7);
}
.cube:nth-child(3) {
  transform: rotateY(90deg) rotateX(90deg) scale(0.4);
  border-color: rgba(46, 142, 255, 0.5);
}

.glass-input {
  position: relative;
  width: 100%;
  max-width: 320px;
}
.glass-input input {
  width: 100%;
  padding: 12px 15px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
  border: 2px solid rgba(46, 142, 255, 0.3);
  border-radius: 8px;
  color: #fff;
  outline: none;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.glass-input input:focus {
  border-color: #2e8eff;
  box-shadow: 0 0 8px rgba(46, 142, 255, 0.7);
}
.glass-input::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  background: conic-gradient(
    from 0deg,
    transparent,
    #2e8eff,
    #2e8eff,
    transparent
  );
  transform: translate(-50%, -50%) rotate(0deg) scale(0);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: 0.5s;
}
.glass-input input:focus ~ *::before {
  transform: translate(-50%, -50%) rotate(720deg) scale(1);
  opacity: 0.1;
}