/*
 * Animated login background (pure CSS, no image)
 * Author: RaKiBuL HaSaN - CEO & Founder, The One Stop BD (theonestopbd.com)
 * Developer Phone: +8801752986368
 * Developer Email: rhs.rakibul@gmail.com
 */

body {
  min-height: 100vh;
  background: linear-gradient(120deg, #0f2a5c, #1f4e9c, #2f6fc4, #153a7a);
  background-size: 300% 300%;
  animation: abBgShift 18s ease infinite;
  overflow-x: hidden;
}

/* Soft floating light blobs */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  pointer-events: none;
}

body::before {
  width: 420px;
  height: 420px;
  background: #5ea0ff;
  top: -120px;
  left: -100px;
  animation: abFloatA 20s ease-in-out infinite;
}

body::after {
  width: 480px;
  height: 480px;
  background: #1b6fd1;
  bottom: -160px;
  right: -120px;
  animation: abFloatB 24s ease-in-out infinite;
}

/* Rising translucent dots layer */
.ab-bg-dots {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ab-bg-dots span {
  position: absolute;
  bottom: -40px;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  animation: abRise linear infinite;
}

.ab-bg-dots span:nth-child(1)  { left: 6%;  width: 10px; height: 10px; animation-duration: 16s; animation-delay: 0s; }
.ab-bg-dots span:nth-child(2)  { left: 14%; width: 22px; height: 22px; animation-duration: 22s; animation-delay: 3s; }
.ab-bg-dots span:nth-child(3)  { left: 23%; width: 12px; height: 12px; animation-duration: 18s; animation-delay: 6s; }
.ab-bg-dots span:nth-child(4)  { left: 34%; width: 28px; height: 28px; animation-duration: 26s; animation-delay: 1s; }
.ab-bg-dots span:nth-child(5)  { left: 45%; width: 9px;  height: 9px;  animation-duration: 15s; animation-delay: 8s; }
.ab-bg-dots span:nth-child(6)  { left: 55%; width: 20px; height: 20px; animation-duration: 21s; animation-delay: 4s; }
.ab-bg-dots span:nth-child(7)  { left: 66%; width: 13px; height: 13px; animation-duration: 19s; animation-delay: 9s; }
.ab-bg-dots span:nth-child(8)  { left: 75%; width: 26px; height: 26px; animation-duration: 25s; animation-delay: 2s; }
.ab-bg-dots span:nth-child(9)  { left: 85%; width: 11px; height: 11px; animation-duration: 17s; animation-delay: 5s; }
.ab-bg-dots span:nth-child(10) { left: 93%; width: 18px; height: 18px; animation-duration: 23s; animation-delay: 7s; }

@keyframes abBgShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes abFloatA {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(120px, 90px); }
}

@keyframes abFloatB {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-130px, -80px); }
}

@keyframes abRise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(-110vh) scale(1.4); opacity: 0; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  body, body::before, body::after, .ab-bg-dots span {
    animation: none;
  }
}