
/* Modern, premium, dark-themed animated background for Award Page */
body {
  background: linear-gradient(120deg, #181818 0%, #232323 100%) !important;
  background-attachment: fixed !important;
  position: relative;
  overflow-x: hidden;
}

/* --- Floating Blurred Particles --- */
.award-bg-particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -2;
  filter: blur(16px);
  opacity: 0.18;
  background: radial-gradient(circle, #80725E 0%, #80725E44 60%, transparent 100%);
  animation: particleFloat 18s linear infinite;
}
.award-bg-particle.p1 { width: 90px; height: 90px; top: 12%; left: 8%; animation-delay: 0s; }
.award-bg-particle.p2 { width: 60px; height: 60px; top: 30%; right: 10%; animation-delay: -4s; }
.award-bg-particle.p3 { width: 120px; height: 120px; bottom: 18%; left: 18%; animation-delay: -8s; }
.award-bg-particle.p4 { width: 70px; height: 70px; top: 60%; right: 22%; animation-delay: -12s; }
.award-bg-particle.p5 { width: 40px; height: 40px; bottom: 10%; right: 8%; animation-delay: -6s; }

@keyframes particleFloat {
  0%   { transform: translateY(0) scale(1); opacity: 0.18; }
  20%  { transform: translateY(-18px) scale(1.08); opacity: 0.22; }
  50%  { transform: translateY(-8px) scale(0.97); opacity: 0.15; }
  80%  { transform: translateY(-22px) scale(1.04); opacity: 0.20; }
  100% { transform: translateY(0) scale(1); opacity: 0.18; }
}

/* --- Soft Gradient Waves --- */
.award-bg-wave {
  position: fixed;
  left: 0; right: 0;
  height: 220px;
  z-index: -3;
  pointer-events: none;
  opacity: 0.13;
  background: linear-gradient(90deg, transparent 0%, #80725E 40%, #80725E 60%, transparent 100%);
  filter: blur(32px);
  animation: waveMove 22s ease-in-out infinite;
}
.award-bg-wave.w1 { top: 10%; animation-delay: 0s; }
.award-bg-wave.w2 { top: 40%; animation-delay: -8s; opacity: 0.09; }
.award-bg-wave.w3 { bottom: 8%; animation-delay: -16s; opacity: 0.07; }

@keyframes waveMove {
  0%   { background-position-x: 0; }
  100% { background-position-x: 100vw; }
}

/* --- Moving Abstract Lines --- */
.award-bg-line {
  position: fixed;
  height: 2px;
  width: 100vw;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, #80725E 40%, #80725E 60%, transparent 100%);
  opacity: 0.18;
  filter: blur(1.5px);
  animation: lineMove 14s linear infinite;
}
.award-bg-line.l1 { top: 22%; animation-delay: 0s; }
.award-bg-line.l2 { top: 55%; animation-delay: -7s; opacity: 0.11; }
.award-bg-line.l3 { bottom: 18%; animation-delay: -3.5s; opacity: 0.09; }

@keyframes lineMove {
  0%   { transform: translateX(-10vw) scaleX(0.95); }
  50%  { transform: translateX(10vw) scaleX(1.05); }
  100% { transform: translateX(-10vw) scaleX(0.95); }
}

/* --- Subtle Glow Overlay --- */
.award-bg-glow {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 80%, rgba(128, 114, 94, 0.09) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(128, 114, 94, 0.07) 0%, transparent 60%),
    radial-gradient(circle at 40% 40%, rgba(128, 114, 94, 0.05) 0%, transparent 60%);
  animation: awardGlowShift 22s ease-in-out infinite alternate;
}

@keyframes awardGlowShift {
  0% { transform: scale(1) translateX(0) translateY(0); }
  50% { transform: scale(1.03) translateX(12px) translateY(-8px); }
  100% { transform: scale(0.98) translateX(-8px) translateY(12px); }
}

@media (max-width: 900px) {
  .award-bg-particle { filter: blur(10px); opacity: 0.13; }
  .award-bg-wave { height: 120px; filter: blur(18px); }
  .award-bg-line { opacity: 0.08; }
}
@media (max-width: 600px) {
  .award-bg-particle { filter: blur(6px); opacity: 0.09; }
  .award-bg-wave { height: 60px; filter: blur(10px); }
  .award-bg-line { opacity: 0.05; }
}
